/* ============================================================
   Reading by Candlelight · Global + Themes (Mobile-First)
   ============================================================ */

:root { --pad: 14px; --gap: 12px; --radius: 12px; --maxw: 760px; }

/* Default (Fireside) */
:root {
  --bg:#2d1b12;        /* noticeably lighter, warm reddish-brown */
  --fg:#fff3d9;        /* warm candle-cream */
  --card:#3a2418;      /* lifted cards, warm leather tone */
  --border:#6b4631;    /* brighter, more amber brown */
  --muted:#f0d2aa;     /* gentle warm parchment text */
  --primary:#ff7c22;   /* true flame-orange (brighter, more fire) */
  --chip:#4a2c1f;      /* warm cocoa pill background */
  --btn-fg:#2d1b12;    /* rich brown text on primary */
  --danger:#e85f5f;    /* slightly brighter to match palette */
  --row-hover:#4a2c1d; /* warm ember hover, no darkness */
}

/* Midnight */
:root[data-theme="midnight"] {
  --bg:#0b0b0c;
  --fg:#eaeaea;
  --card:#151518;
  --border:#2a2a30;
  --muted:#a4a4aa;
  --primary:#3a7afe;
  --chip:#111114;
  --btn-fg:#ffffff;
  --danger:#b43b3b;
  --row-hover:#18181c;
}


/* Hearth & Honey */
:root[data-theme="hearth"] {
  --bg:#2b211a; --fg:#fff8ee; --card:#3b2c22; --border:#5a4533;
  --muted:#e2cba6; --primary:#f2b35d; --chip:#463327; --btn-fg:#2b211a;
  --danger:#d26b6b; --row-hover:#4a372a;
}

:root[data-theme="fireside"] {
  --bg:#2d1b12;        /* noticeably lighter, warm reddish-brown */
  --fg:#fff3d9;        /* warm candle-cream */
  --card:#3a2418;      /* lifted cards, warm leather tone */
  --border:#6b4631;    /* brighter, more amber brown */
  --muted:#f0d2aa;     /* gentle warm parchment text */
  --primary:#ff7c22;   /* true flame-orange (brighter, more fire) */
  --chip:#4a2c1f;      /* warm cocoa pill background */
  --btn-fg:#2d1b12;    /* rich brown text on primary */
  --danger:#e85f5f;    /* slightly brighter to match palette */
  --row-hover:#4a2c1d; /* warm ember hover, no darkness */
}


/* Neon Dusk */
:root[data-theme="neon"] {
  --bg:#0a0a12; --fg:#e6e7ff; --card:#121225; --border:#1f2240;
  --muted:#b8baf5; --primary:#ff3ea5; --chip:#191a34; --btn-fg:#0a0a12;
  --danger:#ff6b6b; --row-hover:#1b1d3a;
}

/* Frostlight (light) */
:root[data-theme="frost"] {
  --bg:#edf5fa; --fg:#0f172a; --card:#ffffff; --border:#cbd5e1;
  --muted:#475569; --primary:#3b82f6; --chip:#eef2f7; --btn-fg:#ffffff;
  --danger:#b91c1c; --row-hover:#e9f1fb;
}

/* Beehive (light warm) */
:root[data-theme="beehive"] {
  --bg:#fffbee; --fg:#2a1f00; --card:#fff5c5; --border:#e4c86a;
  --muted:#624a00; --primary:#ffd447; --chip:#fff1a8; --btn-fg:#2a1f00;
  --danger:#bb3d3d; --row-hover:#fff1a8;
}

/* Seasonal (current: Christmas) */
:root[data-theme="seasonal"] {
  --bg:#040e09;        /* deep evergreen night */
  --fg:#fff9f0;        /* warm off-white */
  --card:#102319;      /* rich forest green */
  --border:#2f5f3f;    /* pine border */
  --muted:#c9e2d0;     /* soft minty text */
  --primary:#d53b3b;   /* holly red */
  --chip:#183829;      /* darker green chip */
  --btn-fg:#fff7ea;    /* warm button text */
  --danger:#e35858;    /* alert red */
  --row-hover:#163526; /* subtle hover */
}

* { box-sizing: border-box; }
html, body { height:100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

/* LAYOUT */
.wrap { margin: 0 auto; padding: var(--pad); max-width: var(--maxw); }
header {
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--gap); margin-bottom: var(--gap);
}
h1 { font-size: 1.35rem; margin: 0.2rem 0; white-space: nowrap; }
h2 { font-size: 1.05rem; margin: 0.3rem 0; }



/* --- Global stacked header layout (app title + library + page title + nav) --- */


/* Remove underline from all nav links and interactive anchors */
.header-nav a {
  text-decoration: none;
}

.header-nav a:hover,
.header-nav a:focus {
  text-decoration: none;
}



/* Override default header layout when using the global header */
header.header-global {
  display: block;
  margin-bottom: var(--gap);
}

/* Top typography stack */
.header-global .app-title {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0.3rem 0 2px 0;
  text-align: center;
}

.header-global .library-title {
  font-size: 0.95rem;
  opacity: 0.85;
  margin-top: -4px;
  text-align: center;
}

.header-global .page-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: 6px;
  text-align: center;
}

/* Navigation row */
.header-global .header-nav {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Make links/forms behave nicely in the nav row */
.header-global .header-nav a,
.header-global .header-nav form {
  display: inline-flex;
}




/* CARDS & TEXT */
.card {
  background: var(--card);
  padding: var(--pad);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  border:1px solid var(--border);
}
.muted { color: var(--muted); font-size:.9rem; }

/* INPUTS */
input, select {
  width:100%; padding:12px; border-radius:10px;
  border:1px solid var(--border); background: var(--bg); color: var(--fg);
}
input:focus, select:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.row { display:flex; gap: var(--gap); flex-wrap: wrap; align-items:center; }

/* BUTTONS — unified site-wide */
.btn {
  padding:12px 16px; border-radius: 10px; border:1px solid transparent;
  font-weight:600; cursor:pointer; background: var(--chip); color: var(--fg);
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); color: var(--btn-fg); border-color: transparent; }
.btn.secondary { background: var(--chip); color: var(--fg); border-color: var(--border); }
.btn.destructive { background: transparent; color: var(--danger); border-color: var(--danger); }

/* DIALOGS */
dialog::backdrop { background: rgba(0,0,0,0.6); }

/* ============================================================
   Admin Page (scoped)
   ============================================================ */

body[data-page="admin"] .split { display: grid; grid-template-columns: 1fr 360px; gap: var(--gap); }
body[data-page="admin"] .drawer { position: sticky; top: 12px; height: fit-content; }
body[data-page="admin"] table { width: 100%; border-collapse: collapse; }
body[data-page="admin"] th, body[data-page="admin"] td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
body[data-page="admin"] tr:hover { background: var(--row-hover); color: var(--fg); }
body[data-page="admin"] .status { padding: 2px 8px; border-radius: 999px; font-size: 12px; }
body[data-page="admin"] .ok { background:#143d1d; color:#b4f5ca; }
body[data-page="admin"] .bad { background:#3d1414; color:#f5b4b4; }
body[data-page="admin"] .pending {
  background: var(--border);
  color: var(--fg);
}

body[data-page="admin"] dialog {
  border: 0; border-radius: 12px; padding: 16px;
  background: var(--card); color: var(--fg); max-width: 420px;
}
body[data-page="admin"] .actions { display: flex; gap: 8px; flex-wrap: wrap; }
body[data-page="admin"] input,
body[data-page="admin"] select { padding: 10px 12px; }

@media (max-width: 860px) {
  body[data-page="admin"] .split { grid-template-columns: 1fr; }
}

/* ============================================================
   Settings page helpers (tile previews)
   ============================================================ */

/* Desktop: exactly 3 columns; then 2; then 1 */
.theme-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
@media (max-width: 980px){
  .theme-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .theme-grid{ grid-template-columns: 1fr; }
}

.theme-card {
  display:block; border:1px solid var(--border); border-radius:12px;
  padding:12px; background:var(--card); cursor:pointer;
  color: var(--fg);   /* locks in colour */
}


/* Location Manager accordions */
.location-group {
  margin: 22px 0;
  padding: 20px 12px 12px;
  border-radius: 10px;

  /* unified box for ALL groups */
  background: var(--bg-alt);
  border-top: 3px solid var(--fg);
  box-shadow:
    0 -4px 8px rgba(0,0,0,0.35),  /* shelf shadow */
    0 0 0 1px rgba(0,0,0,0.25);   /* outer outline */
}

/* Accordion headers */
.location-group summary {
  list-style: none;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.location-group[open] summary {
  background: rgba(0,0,0,0.25);
}

/* Hide native marker */
.location-group summary::marker,
.location-group summary::-webkit-details-marker {
  display: none;
}

/* Book icons */
.location-group summary::before {
  content: "📕";
  margin-right: 8px;
}

.location-group[open] summary::before {
  content: "📖";
}



/* Swatches stay simple; they’ll use the card-scoped vars if referenced */
.theme-card .swatches { display:flex; gap:6px; margin-top:10px; }
.theme-card .swatches span { flex:1; height:20px; border-radius:6px; }

/* Mini preview zone inside each tile */
.theme-preview {
  margin-top:10px;
  padding:10px;
  border:1px dashed var(--border);
  border-radius:10px;
}

/* Freeze each card to its own theme by re-declaring tokens on the card element */
.theme-card[data-theme="midnight"]{
  --bg:#0b0b0c; --fg:#eaeaea; --card:#151518; --border:#2a2a30;
  --muted:#a4a4aa; --primary:#3a7afe; --chip:#111114; --btn-fg:#ffffff;
}
.theme-card[data-theme="hearth"]{
  --bg:#2b211a; --fg:#fff8ee; --card:#3b2c22; --border:#5a4533;
  --muted:#e2cba6; --primary:#f2b35d; --chip:#463327; --btn-fg:#2b211a;
}
.theme-card[data-theme="fireside"]{
  --bg:#1b1410; --fg:#fff5e6; --card:#251711; --border:#4a3125;
  --muted:#e0c6a4; --primary:#ff914d; --chip:#2f1b13; --btn-fg:#1b1410;
}
.theme-card[data-theme="neon"]{
  --bg:#0a0a12; --fg:#e6e7ff; --card:#121225; --border:#1f2240;
  --muted:#b8baf5; --primary:#ff3ea5; --chip:#191a34; --btn-fg:#0a0a12;
}
.theme-card[data-theme="frost"]{
  --bg:#edf5fa; --fg:#0f172a; --card:#ffffff; --border:#cbd5e1;
  --muted:#475569; --primary:#3b82f6; --chip:#eef2f7; --btn-fg:#ffffff;
}
.theme-card[data-theme="beehive"]{
  --bg:#fffbee; --fg:#2a1f00; --card:#fff5c5; --border:#e4c86a;
  --muted:#624a00; --primary:#ffd447; --chip:#fff1a8; --btn-fg:#2a1f00;
}
.theme-card[data-theme="seasonal"]{
  --bg:#040e09; --fg:#fff9f0; --card:#102319; --border:#2f5f3f;
  --muted:#c9e2d0; --primary:#d53b3b; --chip:#183829; --btn-fg:#fff7ea;
}

/* header subtitle */
.subtitle { font-size: 0.95rem; opacity: .85; }

.sticky-actions {
  position:sticky;
  bottom:0; left:0; right:0;
  padding:12px;
  background:var(--bg);
  border-top:1px solid var(--border);
  margin-top:12px;
}
.sticky-actions .inner {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  max-width: var(--maxw);
  margin: 0 auto;
  padding:0;
}

/* ============================================================
   Delight Pack 1: Achievements, toast, confetti
   ============================================================ */

/* Achievements grid */
.achievements-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.achievement-badge {
  flex: 1 1 140px;
  padding: 10px;
  border-radius: 10px;
  border: 1px dashed var(--border);
  background: rgba(0, 0, 0, 0.16);
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0.6;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
}

.achievement-badge .achv-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.achievement-badge .achv-icon {
  font-size: 1.2rem;
}

.achievement-badge .achv-status {
  font-size: 0.78rem;
  color: var(--muted);
}

.achievement-badge.earned {
  border-style: solid;
  border-color: var(--primary);
  background: rgba(0, 0, 0, 0.25);
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}

/* Toasts */
.toast-container {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  min-width: 220px;
  max-width: 320px;
  background: var(--card);
  color: var(--fg);
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  animation: toast-in 0.18s ease-out, toast-out 0.25s ease-in 3.2s forwards;
}

.toast .toast-icon {
  font-size: 1.1rem;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(8px) scale(0.97); }
}

/* Confetti */
.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 9500;
}

.confetti-piece {
  position: absolute;
  width: 6px;
  height: 12px;
  border-radius: 2px;
  opacity: 0.9;
  animation: confetti-fall 1.2s ease-out forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translate3d(var(--x, 0), -10%, 0) rotateZ(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--x, 0), 110vh, 0) rotateZ(360deg);
    opacity: 0;
  }
}

/* Mobile tweak: let confetti fall farther on small screens */
@media (max-width: 640px) {
  @keyframes confetti-fall {
    0% {
      transform: translate3d(var(--start-x, 0), -10vh, 0);
      opacity: 1;
    }
    100% {
      /* use dynamic viewport height so it goes off the bottom */
      transform: translate3d(var(--end-x, 0), 110dvh, 0);
      opacity: 0;
    }
  }
}

/* ============================================================
   Browse page layout
   ============================================================ */

body[data-page="browse"] .card-title {
  margin-top: 0;
  margin-bottom: 8px;
}

/* Search bar row: small field dropdown + wide input + buttons */
body[data-page="browse"] .card-search .search-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: stretch;
}

/* Shrink the field selector */
body[data-page="browse"] #field {
  flex: 0 0 140px;
  max-width: 180px;
}

/* Let the query input take the remaining space */
body[data-page="browse"] #q {
  flex: 1 1 200px;
}

/* Keep actions tight on the right */
body[data-page="browse"] .search-actions {
  display: flex;
  gap: var(--gap);
  flex: 0 0 auto;
}

/* Filter & Sort grid */
body[data-page="browse"] .card-filters .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

body[data-page="browse"] .filter-block {
  flex: 1 1 180px;
  min-width: 160px;
}

/* Tiny labels above controls */
body[data-page="browse"] .filter-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 4px;
}

/* Mobile-first tweaks */
@media (max-width: 640px) {
  /* Stack search bar elements nicely */
  body[data-page="browse"] .card-search .search-row {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="browse"] #field,
  body[data-page="browse"] #q {
    flex: 1 1 auto;
    max-width: 100%;
  }

  body[data-page="browse"] .search-actions {
    justify-content: flex-end;
    width: 100%;
  }

  /* Filters naturally stack via flex-wrap; no extra rules needed */
}


/* Spacing between Browse cards and results */
body[data-page="browse"] .card-search {
  margin-bottom: 10px;
}

body[data-page="browse"] .card-filters {
  margin-bottom: 8px;
}

/* Mobile: give buttons breathing room under the input */
@media (max-width: 640px) {
  body[data-page="browse"] .card-search .search-row {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="browse"] #field,
  body[data-page="browse"] #q {
    flex: 1 1 auto;
    max-width: 100%;
  }

  body[data-page="browse"] .search-actions {
    justify-content: flex-end;
    width: 100%;
    margin-top: 4px; /* <-- new space below the text input */
  }
}

/* Shared library page: space under search bar only */
.sharedlib-search-actions {
  margin-top: 8px;
}

/* ============================================================
   Settings: Library Sharing location dropdowns
   Keep Location Group/Detail selects the same width, regardless
   of which option is selected (Basement, Main floor, etc.)
   ============================================================ */

#shareLocGroup,
#shareLocDetail {
  width: 100% !important;
  min-width: 260px;   /* 👈 keeps them nicely sized */
  max-width: 100%;
  box-sizing: border-box;
  display: block;
}