/* Reset & base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base body (DO NOT force centering globally; dashboards need normal flow) */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #000, #000);
}

/* Only login pages should be flex-centered */
body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Centered login card (scoped so it doesn't fight dashboard containers) */
body.login-page .container {
    background: rgb(131, 99, 219);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

/* Headings */
h1, h2 {
    margin-bottom: 1rem;
    color: #df0d95;
}

/* Forms */
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

label {
    text-align: left;
    font-weight: 500;
    color: #555;
}

input[type="text"],
input[type="password"],
input[type="email"] {
    padding: 0.7rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
    transition: border 0.2s ease;
}

input:focus {
    border-color: #4a90e2;
}

/* Buttons (general) */
button {
    padding: 0.7rem;
    border: none;
    background: #055bba;
    color: white;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

button:hover {
    background: #64a1de;
    color: rgb(11, 11, 11);
}

/* Links */
a {
    color: #4a90e2;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Error messages */
.error {
    background: #ffe6e6;
    color: #cc0000;
    padding: 0.6rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Success messages */
.success {
    background: #e6ffed;
    color: #008000;
    padding: 0.6rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* ===== CLEAN TOAST SYSTEM ===== */

#toast-container{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
}

#toast-container .toast{
  min-width:220px;
  padding:14px 16px;
  border-radius:8px;
  color:#fff;
  font-size:14px;
  background:#333;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  opacity:0;
  transform:translateX(140%);
  transition:transform .35s ease, opacity .35s ease;
}

#toast-container .toast.show{
  opacity:1;
  transform:translateX(0);
}

#toast-container .toast.success{background:#0a8f3c;}
#toast-container .toast.error{background:#c0392b;}
#toast-container .toast.info{background:#1976d2;}
/* Notification container */
#notify{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
 /*top:20px;
  right:20px;*/
  align-items:center;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:9999;
}

/* Notification box.
   Shared by the floating toasts notify() builds AND the inline messages on
   login.php, profile.php and manage_members.php — five call sites, so this
   block is the product's whole vocabulary for "something just happened".

   Matched to the card system (#161b22 on #30363d, 12px) rather than the flat
   colour blocks it used to be. Each state tints the same card instead of
   replacing it: the pattern profile.php already uses for its amber
   reminders-off card, so a message reads as part of the page rather than as
   something pasted on top of it.

   The error state was `background:#dc05f0d2; color:rgb(73,209,187)` — magenta
   with teal text. Nothing else in the product is either colour, and it was
   hard to read besides. */
.notice{
  position:relative;
  min-width:260px;
  max-width:380px;
  padding:14px 18px 18px 18px; /* extra bottom space for bar */
  border-radius:12px;
  background:#161b22;
  border:1px solid #30363d;
  color:#c9d1d9;
  font-family:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.2px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  margin-bottom:0;   /* .error/.success still contribute 1rem; #notify spaces
                        its stack with gap, so the extra was uneven padding
                        under error and success toasts but not info ones. */
}

/* Colours. The tint is layered OVER the card colour rather than replacing it,
   so the box stays solid against whatever it floats above. */
.notice.success{
  background:linear-gradient(rgba(63,185,80,.12), rgba(63,185,80,.12)), #161b22;
  border-color:rgba(63,185,80,.45);
  color:#7ee787;
}
.notice.error{
  background:linear-gradient(rgba(248,81,73,.12), rgba(248,81,73,.12)), #161b22;
  border-color:rgba(248,81,73,.45);
  color:#ffa198;
}
.notice.info{
  background:linear-gradient(rgba(56,139,253,.12), rgba(56,139,253,.12)), #161b22;
  border-color:rgba(56,139,253,.45);
  color:#79c0ff;
}

/* Countdown bar under the text. currentColor means it inherits whichever
   state colour is set above — one rule, three bars, and a fourth for free if
   a state is ever added. */
.notice-bar{
  position:absolute;
  left:0;
  bottom:0;
  height:4px;
  width:100%;
  background:currentColor;
  opacity:.5;
  border-radius:0 0 12px 12px;

  transform-origin:right;     /* anchor on the RIGHT */
  animation:noticeTimer 4s linear forwards;
}

@keyframes noticeTimer{
  from{transform:scaleX(1);}
  to{transform:scaleX(0);}
}/* ======================================================================
   Global Styles — Gallery Viewer + Login
   ====================================================================== */

:root {
  --gap: 12px;
  --thumb-ratio: 4/3;
  --xDur: .22s;
  --bg: #000;             /* background color */
  --txt: #fff;            /* text on black */

  /* extra tokens used by login */
  --muted: #aaa;
  --panel: #111;
  --panelBorder: #222;
  --accent: #6aa9ff;
  --radius: 14px;
  --shadow: 0 12px 32px rgba(0,0,0,.45);
}

/* Page defaults (black app-wide) */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  min-height: 100vh;
}

/* Utility */
.muted { color: #bbb; }

/* ===========================
   Header / Title Bar
   =========================== */
header {
  background: #111;
  color: #fff;
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid #222;
}
header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
header p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #aaa;
}

/* ===========================
   Grid layout — 3 per row
   =========================== */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  padding: 16px;
}

.thumb {
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.thumb-img-wrap {
  width: 100%;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
  aspect-ratio: var(--thumb-ratio);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Button row below each image.
   ⚑ EDGE TO EDGE, AND EVERY BUTTON CARRIES A WORD — 2026-09-11, David's call.
   It used to be four centred glyphs explained only by a `title` tooltip, and a
   phone has no hover: on the device most members use, one of four unexplained
   symbols deleted a photograph.

   Each button takes an equal share of the tile so the strip fills the width,
   with the icon above its word. */
.thumb-btns {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  width: 100%;
  align-items: stretch;
}
.thumb-btns > button {
  flex: 1 1 0;
  min-width: 0;                 /* equal columns even when a word is longer */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px;
  line-height: 1.1;
  cursor: pointer;
}
.thumb-btns .ti { font-size: 15px; line-height: 1; }
.thumb-btns .tl {
  font-size: 10.5px; letter-spacing: .02em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* ⚑ Measured, not chosen, and pinned to the GRID's breakpoints rather than to
   a guess about screens. Four labelled buttons across a tile: every word fits
   at 10.5px down to a 320px tile and at 9.5px down to 290px. Below that no
   size saves "Caption", so it ellipses — the graceful end, not a broken row.

     3 columns, above 767px   → tiles are roomy         → 10.5px (the default)
     2 columns, 480 to 767px  → the tight band          → 9.5px
     1 column, below 480px    → the tile is the screen  → 11px

   The narrowest case is a small tablet at two columns, not a phone: a phone
   drops to one column and has the most room of all. */
@media (min-width: 480px) and (max-width: 767px) {
  .thumb-btns .tl { font-size: 9.5px; }
}
@media (max-width: 479px) {
  .thumb-btns .tl { font-size: 11px; }
}

/* ⚑ THE ONE THAT TAKES SOMETHING AWAY STANDS APART. It sat against "Cover" at
   identical weight, so the difference between making a photograph the cover
   and deleting it was one thumb-width. The gap is the guard rail. */
.thumb-btns .img-delete { margin-left: auto; }
@supports (gap: 1px) {
  .thumb-btns .img-delete { margin-left: 10px; }
}

/* Already the cover: still readable, plainly not pressable. */
.thumb-btns .set-cover-btn[disabled] { opacity: .45; cursor: default; }
.thumb-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: transform .25s ease;
}

/* Hover effect on thumbnails */
.thumb-img-wrap:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(255,255,255,0.15);
}
.thumb-img-wrap:hover img {
  transform: scale(1.05);
}

/* ===========================
   Overlay caption:
   always visible (dim), brighten on hover/edit
   =========================== */
figcaption {
  position: absolute;
  bottom: 0; left: 0; width: 100%;
  padding: 8px 12px;
  font-size: 14px; line-height: 1.35;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
  opacity: .75; /* always visible, slightly dim */
  transition: opacity .25s ease, background .25s ease;
  box-sizing: border-box;
  user-select: text;
}
.thumb:hover figcaption,
.thumb[data-editing="1"] figcaption {
  opacity: 1; /* brighten on hover or while editing */
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.15));
}

/* When figcaption is contenteditable, give it a subtle focus ring */
figcaption[contenteditable="true"] {
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 2px;
}

/* ===========================
   Lightbox
   =========================== */
#xLb {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2147483647;
  /* visibility/opacity/pointer-events managed by viewer-effects.css —
     display:none breaks iOS Safari transitions on child elements */
}

#xLb .backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92); /* fixed alpha */
  transition: opacity var(--xDur) ease;
}
#xLb.is-closing .backdrop { opacity: 0; }

#xLb img {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--xDur) ease;
}
#xLb img.is-active { opacity: 1; }

/* Controls */
#xLb .close,
#xLb .nav {
  position: absolute;
  background: rgba(0,0,0,0.4); /* fixed alpha */
  color: #fff;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  font-size: 26px;
  padding: 10px 14px;
}
#xLb .close { top: 10px; right: 14px; }
#xLb .prev { left: 10px; top: 50%; transform: translateY(-50%); }
#xLb .next { right: 10px; top: 50%; transform: translateY(-50%); }

/* Caption inside lightbox */
#xLb .caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 92vw;
  background: rgba(0,0,0,0.6); /* fixed alpha */
  padding: 8px 12px;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  text-align: center;
}

/* ===========================
   Back Button
   =========================== */
.nav-back { margin: 12px 16px; }
.btn-back {
  background: #222;
  color: #fff;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.btn-back:hover {
  background: #333;
  transform: translateY(-2px);
}

/* ===========================
   Toast / Notice
   =========================== */
#toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: rgba(0,0,0,.8); color: #fff; padding: 8px 12px; border-radius: 8px;
  font-size: 13px; z-index: 2147483647; display: none;
}
#toast.show { display: block; animation: fadeToast 2.2s ease both; }
@keyframes fadeToast {
  0%{opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{opacity:0}
}

/* ===========================
   Caption Edit Button
   =========================== */
/* ⚑ THE THREE HARMLESS ONES ARE PEACH — David's call, 2026-09-11. It is the
   product's own colour, off the public site's palette, and on a dark tile it
   reads warm rather than like three more system controls. It also does the
   sorting for free: everything peach edits the photograph, and the one thing
   that is not peach takes it away.

   ⚑ `.det-edit` is in this list for the first time. It had NO styling outside
   the phone media block, so on a desktop "Story" was rendering as a plain
   browser button next to three styled ones. It had simply never been written. */
.cap-edit,
.det-edit,
.set-cover-btn {
  padding: 4px 12px;
  background: #FBD4C2;
  border: 1px solid #EDC1AD;
  border-radius: 6px;
  color: #201712;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: background .15s, color .15s, border-color .15s;
}
.cap-edit:hover,
.det-edit:hover,
.set-cover-btn:hover:not([disabled]) {
  background: #FCE0D3;
  border-color: #FBD4C2;
  color: #201712;
}

/* Already the cover. Still peach so the row stays even, visibly not pressable,
   and the star keeps its gold — which reads properly against peach where it
   never quite did against the old grey. */
.set-cover-btn[disabled] {
  opacity: 0.55;
  cursor: default;
}
.set-cover-btn[disabled] .ti { color: #B8860B; }

/* Remove a photo. ⚑ The comment below was written when all four buttons looked
   alike and "matches the other tile buttons at rest" was the point. Since
   2026-09-11 the other three are peach and this one deliberately is NOT — it
   stays quiet and grey, set apart by a gap, and still only turns red on hover.
   The reasoning survives the change: a permanently red control draws the eye to
   the single destructive thing on the tile, which is the last thing that should
   be inviting. Now the colour sorts the row as well — peach edits the
   photograph, grey takes it away. */
.img-delete {
  padding: 4px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: #aaa;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.img-delete:hover:not([disabled]) {
  background: rgba(248,81,73,0.14);
  border-color: rgba(248,81,73,0.45);
  color: #f85149;
}
.img-delete[disabled] { opacity: 0.5; cursor: default; }

/* ⚑ On a touch screen there IS no hover, so "grey until you hover, then red"
   means the only destructive button on the tile looks exactly like the three
   harmless ones sitting 6px away from it. Phones get the warning colour all
   the time — the reasoning that kept it quiet on desktop (don't draw the eye)
   loses to the reasoning that a mis-tap here removes a photo. */
@media (hover: none) {
  .img-delete {
    background: rgba(248,81,73,0.10);
    border-color: rgba(248,81,73,0.35);
    color: #f85149;
  }
}

/* ── Tile controls on a phone ────────────────────────────────────────────────
   All four of these were 30px tall with 6px between them, against the 44px
   that both Apple and Google publish as the minimum a finger can be asked to
   hit. Three of them had been that size for months and the worst outcome was
   opening a caption box by mistake. The fourth removes a photo, which changed
   the arithmetic: a mis-tap that used to cost a tap back now costs a
   photograph and a trip to the undo button.

   Only phones. Desktop has a mouse and keeps the compact row. */
@media (hover: none), (max-width: 600px) {
  .thumb-btns { gap: 6px; }
  .cap-edit,
  .det-edit,
  .set-cover-btn,
  .img-delete {
    min-height: 48px;
    padding: 6px 2px;
    /* ⚑ column, NOT inline-flex. This block used to force inline-flex, which
       put the icon and its word side by side and made each button too wide to
       fit four across a tile. The stacked shape is the whole reason the words
       fit at all. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  /* A finger needs the height; it does not need 44px of WIDTH each when the
     four of them share the tile and the whole strip is the target area.
     ⚑ No font-size here — it belongs with the grid breakpoints above, or this
     block silently wins over them and the two-column band clips again. */
}

/* The undo offer, in place of the tile that just left. Deliberately occupies
   the same grid cell rather than appearing as a toast: the photo is gone from
   where the eye already is, so the way back belongs there too. */
.thumb-undo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* height:100% makes it fill the grid row it is in, so the tiles beside it do
     not change size and nothing below jumps. At 140px fixed, removing a photo
     on a phone yanked the rest of the page up by 188px — the picture you were
     looking at moved while you were looking at it. min-height is the floor for
     when it is the only tile left in its row. */
  height: 100%;
  min-height: 180px;
  box-sizing: border-box;
  padding: 14px;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  color: #8b949e;
  font-size: 13px;
  text-align: center;
}
.thumb-undo button {
  padding: 10px 18px;
  min-height: 44px;   /* thumb-sized: this is the way back from a mistake */
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  color: #e6edf3;
  font-size: 15px;
  cursor: pointer;
}
.thumb-undo button:hover { background: rgba(255,255,255,0.16); }

/* ===========================
   Castle state banner
   ---------------------------
   Shown when a castle has lapsed or closed. Deliberately loud: it is the
   explanation for every refusal the person is about to meet, and a quiet
   version of it would be found only by someone already confused.
   =========================== */
.castle-banner {
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 18px;
  line-height: 1.6;
  font-size: 14.5px;
}
.castle-banner.is-warn {
  background: rgba(240,136,62,.09);
  border: 1px solid rgba(240,136,62,.42);
  color: #f0883e;
}
.castle-banner.is-shut {
  background: rgba(248,81,73,.09);
  border: 1px solid rgba(248,81,73,.45);
  color: #ff8b84;
}
.cb-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.cb-body p { margin: 0 0 8px; color: #d7dde3; }
.cb-body p:last-child { margin-bottom: 0; }
.cb-body strong { color: #fff; }
/* The retention line. Quieter than the rest because it is reassurance, not
   instruction — and it is the sentence that replaced "nothing is ever
   deleted", so it must not read as a warning. */
.cb-fine { font-size: 13px; color: #a9b2bc !important; }
.cb-fine strong { color: #e6edf3; }

.cb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 20px;
  border-radius: 9px; font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  color: #e6edf3;
  transition: background .15s, border-color .15s;
}
.cb-btn:hover { background: rgba(255,255,255,.18); }
/* "Take everything home" sits beside "Renew" and must not compete with it —
   but it is the promise the dormant emails make, so it stays visible rather
   than becoming a text link somebody has to hunt for. */
.cb-btn-quiet { background: transparent; }
.cb-btn-quiet:hover { background: rgba(255,255,255,.10); }

@media (max-width: 520px) {
  .cb-actions { flex-direction: column; }
  .cb-btn { width: 100%; }
}

/* ===========================
   Scrollbar styling (dark)
   =========================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #666; }

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #444 #111;
}

/* ===========================
   Responsive tweaks
   =========================== */
@media (max-width: 767px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .grid { grid-template-columns: 1fr; } }

/* ======================================================================
   Login Page (scoped; won’t affect viewer)
   ====================================================================== */

body.login-page {
  background: #000;            /* black background for login page */
  color: #fff;
  display: flex;               /* center only on login page */
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

body.login-page a { color: #9ec5ff; }
body.login-page a:hover { text-decoration: underline; }

/* Centered card (login) */
body.login-page .container {
  background: var(--panel);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  width: 100%;
  max-width:520px;
  text-align: center;
  border: 1px solid var(--panelBorder);
}
body.login-page h1,
body.login-page h2 {
  margin-bottom: 1rem;
  color: #fff;
}
body.login-page label {
  text-align: left;
  font-weight: 500;
  color: #bbb;
}
body.login-page input[type="text"],
body.login-page input[type="password"],
body.login-page input[type="email"] {
  width: 100%;              /* ← THIS is the fix */
  padding: 0.7rem;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  outline: none;
  background: #0b0b0b;
  color: #fff;
  transition: border 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-size: 20px;
}


body.login-page input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(106,169,255,0.25);
  background: #0f0f0f;
}
body.login-page button {
  padding: 0.7rem;
  border: none;
  background: #1a73e8;
  color: white;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease, transform .15s ease;
}
body.login-page button:hover {
  background: #155fbe;
  transform: translateY(-1px);
}

/* Forms (shared) */
form {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The `.error` / `.success` pair that stood here was a byte-for-byte duplicate
   of the one at the top of this file, and being the LATER copy it was the one
   that won. That mattered: sitting after `.notice`, it handed every error and
   success TOAST its own padding, border-radius, margin and font-size, because
   `.error` and `.notice` have equal specificity and source order decides.
   Info toasts have no such twin, which is why they alone looked right.
   Deleted, not merged — the surviving copy is identical and now precedes
   `.notice`, so the toast keeps its own shape. */

/* ======================================================================
   Dashboard / Generic Panels (optional; won’t affect viewer)
   ====================================================================== */

.dashboard {
  max-width: 600px;
  background: white;
  color: #111;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  text-align: center;
}

/* Dashboard layout */
.dashboard-layout { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  background: #4a90e2;
  color: white;
  width: 220px;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sidebar h2 { font-size: 1.2rem; margin-bottom: 1rem; font-weight: 600; }
.sidebar a {
  color: white;
  padding: 0.6rem;
  border-radius: 6px;
  text-decoration: none;
  display: block;
  transition: background 0.2s;
}
.sidebar a:hover { background: rgba(255, 255, 255, 0.2); }

/* Main content area */
.main-content { flex: 1; background: #000; color: #111; padding: 2rem; }
.dashboard-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;
}
.dashboard-header h1 { font-size: 1.6rem; color: #333; }
/* Form action buttons row */
.actions-row {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
/* Normalize action button sizing (must be AFTER .button styles or scoped lower) */
.actions-row button,
.actions-row .button {
  padding: 0.7rem 0.9rem !important;
  font-size: 20px !important;
  line-height: 1.2;
}

/* ---------- Button color system ---------- */
:root{
  --btnPrimaryBg: #2f6fed;        /* primary blue */
  --btnPrimaryBgHover: #255bd0;
  --btnPrimaryText: #fff;

  --btnSecondaryBorder: rgba(255,255,255,0.22);
  --btnSecondaryText: rgba(255,255,255,0.90);
  --btnSecondaryHoverBg: rgba(255,255,255,0.08);
}

/* Primary */
.btn-primary{
  background: var(--btnPrimaryBg);
  border: 1px solid rgba(0,0,0,0.12);
  color: var(--btnPrimaryText);
}
.btn-primary:hover{
  background: var(--btnPrimaryBgHover);
}

/* Secondary */
.btn-secondary{
  background: transparent;
  border: 1px solid var(--btnSecondaryBorder);
  color: var(--btnSecondaryText);
}
.btn-secondary:hover{
  background: var(--btnSecondaryHoverBg);
}

/* ---- When buttons are inside a WHITE card (.container), adjust secondary ink ---- */
.container .btn-secondary{
  border: 1px solid rgba(0,0,0,0.18);
  color: rgba(0,0,0,0.75);
}
.container .btn-secondary:hover{
  background: rgba(0,0,0,0.06);
}

/* Light card override for admin containers */
.container .btn-primary {
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.22);
  color: #111;
}
.container .btn-primary:hover {
  background: rgba(0,0,0,0.10);
}

.container .btn-secondary {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.18);
  color: rgba(0,0,0,0.75);
}
.container .btn-secondary:hover {
  background: rgba(0,0,0,0.06);
}

/* Action buttons */
.action-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.action-btn {
  background: white; color: #333;
  padding: 1rem; border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  text-align: center; flex: 1; min-width: 180px;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none; font-weight: 500;
}
.action-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.1); }

/* Mobile-friendly sidebar */
.menu-toggle {
  display: none;
  background: #4a90e2; color: white;
  padding: 0.8rem 1rem; font-size: 1.2rem; border: none; cursor: pointer;
}
@media (max-width: 768px) {
  .dashboard-layout { flex-direction: column; }
  .menu-toggle { display: block; text-align: left; }
  .sidebar {
    position: absolute; top: 0; left: -240px;
    height: 100%; width: 220px; background: #4a90e2;
    padding: 1.5rem 1rem; transition: left 0.3s ease; z-index: 1000;
  }
  .sidebar.active { left: 0; }
  .menu-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); z-index: 999;
  }
  .menu-overlay.active { display: block; }
}

/* Generic white card container (for non-login pages) */
.container {
  max-width: 900px;
  margin: auto;
  padding: 10px;
  background: #444242f7;
  color: #111;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

/* Tables */
.styled-table {
  width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 20px;
}
.styled-table th, .styled-table td {
  padding: 10px 15px; border-bottom: 1px solid #ddd;
}
.styled-table th {
  background-color: #333; color: white; text-align: left;
}
.styled-table tr:hover { background-color: #f1f1f1; }

/* Generic controls */
select, button { padding: 6px 10px; border-radius: 5px; border: 1px solid #ccc; }
button { background-color: #af4c5c; color: white; cursor: pointer; border: none; }
button:hover { background-color: #091ad5; }
button.danger { background-color: #d9534f; }
button.danger:hover { background-color: #c9302c; }
.button {
  text-decoration: none; background-color: #008CBA; padding: 8px 14px; border-radius: 5px; color: white;
}
.button:hover { background-color: #007bb5; }
/* Hard-disable anything that could be on top of the login form */
body.login-page #xLb,
body.login-page .menu-overlay,
body.login-page .backdrop,
body.login-page [data-close],
body.login-page [data-prev],
body.login-page [data-next] {
  display: none !important;
  pointer-events: none !important;
}

/* Make sure the login card is topmost and clickable */
body.login-page .container {
  position: relative;
  z-index: 999999;
}
/* Kill overlays on the login page (lightbox/menu/backdrops) */
body.login-page #xLb,
body.login-page .menu-overlay,
body.login-page .backdrop,
body.login-page [data-close],
body.login-page [data-prev],
body.login-page [data-next] {
  display: none !important;
  pointer-events: none !important;
}

/* Make sure the login card is topmost and clickable */
body.login-page .container {
  position: relative;
  z-index: 999999;
}
/* ===== Admin Users page: shared utility classes ===== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.page-header__left,
.page-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Reusable button-link helper (no underline, padded click target) */
.button-link {
  text-decoration: none;
  display: inline-block;
  padding: .5rem 1rem;
}

/* Actions column (right-aligned) */
.table-actions {
  text-align: right;
}

/* Inline form (so action buttons sit side-by-side within table cells) */
.inline-form {
  display: inline;
}

/* Optional: small tweak so buttons inside tables don’t look oversized */
table.manage-users button {
  padding: 0.25rem 0.75rem;
}
/* ===== Shared form/grid helpers for admin user pages ===== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.page-header__left,
.page-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.button-link {
  text-decoration: none;
  display: inline-block;
  padding: .5rem 1rem;
}

.form-grid label {
  font-weight: bold;
  margin-bottom: 4px;
  display: block;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 1rem;
}
/* ======================================================================
   FINAL button colors (place at VERY BOTTOM so it overrides everything)
   ====================================================================== */

.actions-row .btn-primary{
  background: #2f6fed !important;   /* visible blue */
  border: 1px solid rgba(0,0,0,0.15) !important;
  color: #fff !important;
}

.actions-row .btn-primary:hover{
  background: #255bd0 !important;
}

.actions-row .btn-secondary{
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
  color: rgba(0,0,0,0.80) !important;
}

.actions-row .btn-secondary:hover{
  background: rgba(0,0,0,0.06) !important;
}
/* ===== Admin Dashboard Stats ===== */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.stat-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 18px;
}

.stat-card .num {
  font-size: 34px;
  line-height: 1.1;
  margin: 0;
}

.stat-card .label {
  opacity: .75;
  font-size: 13px;
  margin-top: 6px;
}

/* ===== Admin Dashboard Actions ===== */

.action-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.action-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 18px;
  transition: transform .15s ease, background .15s ease;
}

.action-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.09);
}

.action-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.action-card h3 {
  margin: 0 0 6px;
}

.action-card .sub {
  opacity: .75;
  font-size: 13px;
}
/* ===== Form Grid Layout ===== */

.form-grid {
  display: grid;
  grid-template-columns: 120px 1fr;   /* tighter label column */
  gap: 2px 8px;                       /* ultra tight */
  align-items: center;
  max-width: 580px;
}

.form-grid label {
  text-align: right;
  font-size: 12px;
  line-height: 1.1;
  margin: 0;
}

.form-grid input,
.form-grid select {
  width: 100%;
  height: 22px;        /* was ~26–36 → now tight */
  padding: 0 4px;
  font-size: 12px;
  border-radius: 3px;
}

.form-grid input:focus,
.form-grid select:focus {
  outline: none;
  border-color: #8cf;
}

.form-actions {
  grid-column: 2 / 3;
  margin-top: 4px;
}
/* ===== Responsive members list: table on desktop, cards on mobile ===== */

.members-table { display: block; }
.member-cards  { display: none; }

@media (max-width: 700px) {
  .members-table { display: none; }
  .member-cards  { display: grid; gap: 12px; }
}

.member-card {
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 14px;
}

.member-card .row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.member-card .row:last-child { border-bottom: 0; }

.member-card .k {
  opacity: .75;
  font-size: 16px;
  text-align: right;
}

.member-card .v {
  font-size: 18px;
  word-break: break-word;
}

.member-card .actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.member-card .actions select { min-width: 140px; }
/* === TIGHT MEMBERS TABLE === */

.members-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.members-table th,
.members-table td {
  padding: 4px 6px;        /* tighter cells */
  line-height: 1.2;
  vertical-align: middle;
}

.members-table th {
  font-size: 12px;
  opacity: 0.8;
}

/* tighten row height */
.members-table tr {
  height: 28px;
}

/* actions tighter */
.members-table .row-actions {
  gap: 3px;
}

.members-table select,
.members-table button {
  height: 22px;
  font-size: 12px;
  padding: 0 4px;
}