/* ======================
   Tokens & Themes
   ====================== */
:root {
  /* Brand / accent defaults (Dark theme baseline) */
  --blue-1: #3A6EA5;
  --blue-2: #6FA8DC;
  --blue-3: #4F8CC9;

  /* Surfaces - Dark default */
  --bg: #1E1E1E;
  --surface: #242424;
  --surface-2: #2A2A2A;

  /* Text & lines */
  --text: #DDE6F1;
  --text-muted: #A7B5C6;
  --border: #343a40;

  /* Misc */
  --shadow: rgba(0, 0, 0, 0.35);
  --radius: 8px;
  --titlebar-grad: linear-gradient(90deg, var(--blue-1), var(--blue-2));
  --focus-ring: rgba(58, 110, 165, 0.35); /* focus outline color */
  --tint: rgba(79, 140, 201, .15);        /* subtle strip/tint backgrounds */
}

/* Explicit 'theme-dark' hook for clarity (same as :root) */
.theme-dark {}

/* Light theme overrides */
.theme-light {
  --bg: #F0F0F0;
  --surface: #FFFFFF;
  --surface-2: #F7F7F7;
  --text: #202020;
  --text-muted: #4B5563;
  --border: #D0D7DE;
  --shadow: rgba(0, 0, 0, 0.08);
  /* keep --blue-* from root */
  --focus-ring: rgba(58, 110, 165, 0.30);
  --tint: rgba(79, 140, 201, .12);
}

/* iHeartRadio – Dark */
.theme-iheart-dark {
  --blue-1: #B0001E; /* deep red */
  --blue-2: #E4002B; /* iHeart red */
  --bg: #121214;
  --surface: #1A1A1C;
  --surface-2: #222226;
  --text: #FFFFFF;
  --text-muted: #E7A6B0; /* soft rose for subdued text */
  --border: #2a1216;
  --shadow: rgba(0, 0, 0, 0.5);
  --titlebar-grad: linear-gradient(90deg, var(--blue-2), var(--blue-1));
  --focus-ring: rgba(228, 0, 43, 0.35);
  --tint: rgba(228, 0, 43, .12);
}

/* iHeartRadio – Light */
.theme-iheart-light {
  --blue-1: #B0001E;
  --blue-2: #E4002B;
  --bg: #FFF5F7; /* light rose wash */
  --surface: #FFFFFF;
  --surface-2: #FFF0F3;
  --text: #1A1A1A;
  --text-muted: #7A4953;
  --border: #F4C2CB;
  --shadow: rgba(228, 0, 43, 0.08);
  --titlebar-grad: linear-gradient(90deg, var(--blue-2), var(--blue-1));
  --focus-ring: rgba(228, 0, 43, 0.30);
  --tint: rgba(228, 0, 43, .10);
}

/* ======================
   IFDown-inspired Amber Themes
   ====================== */

/* IFDark — amber-forward dark */
.theme-ifdark {
  /* Amber accent set */
  --blue-1: #FFB000; /* Amber 500 */
  --blue-2: #FFD166; /* Amber 300/400 mix */

  /* Warm, high-contrast dark surfaces */
  --bg: #11100E;         /* deep warm charcoal */
  --surface: #181612;    /* card bg */
  --surface-2: #201D17;  /* inputs/buttons bg */

  /* Text */
  --text: #F7F3EA;       /* warm ivory */
  --text-muted: #D7C79A; /* desaturated amber sand */

  /* Lines, shadows, ring */
  --border: #3A2F1A;     /* warm brown edge */
  --shadow: rgba(0, 0, 0, 0.60);
  --titlebar-grad: linear-gradient(90deg, var(--blue-1), var(--blue-2));
  --focus-ring: rgba(255, 176, 0, 0.35);

  /* Subheader tint (theme-aware) */
  --tint: rgba(255, 176, 0, .12);

  /* Sweep intensity controls (more contrast) */
  --sweep-hi: 0.45;
  --sweep-med: 0.30;
  --sweep-lo: 0.18;
}

/* IFLight — amber-forward light */
.theme-iflight {
  /* Amber accent set */
  --blue-1: #FFB000; /* Amber 500 */
  --blue-2: #FFD166; /* Amber 300/400 mix */

  /* Warm light surfaces */
  --bg: #FFFAF2;         /* warm off-white wash */
  --surface: #FFFFFF;
  --surface-2: #FFF4DA;  /* soft pale amber */

  /* Text */
  --text: #221A0E;       /* deep espresso */
  --text-muted: #6E5B36; /* toasted ochre */

  /* Lines, shadows, ring */
  --border: #F0D7A1;     /* light amber border */
  --shadow: rgba(255, 176, 0, 0.08);
  --titlebar-grad: linear-gradient(90deg, var(--blue-1), var(--blue-2));
  --focus-ring: rgba(255, 176, 0, 0.28);

  /* Subheader tint (theme-aware) */
  --tint: rgba(255, 176, 0, .12);

  /* Sweep intensity controls (more contrast, a bit lower than dark theme) */
  --sweep-hi: 0.38;
  --sweep-med: 0.26;
  --sweep-lo: 0.14;
}

/* ======================
   Base layout
   ====================== */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Tahoma, sans-serif;
  margin: 0;
}

.app {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
}

.titlebar {
  background: var(--titlebar-grad);
  color: #fff;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* Needed for animated overlay to sit behind text */
  position: relative;
  overflow: hidden;
}
/* Ensure titlebar content sits above the animated overlay */
.titlebar > * {
  position: relative;
  z-index: 1;
}

/* ------- Animated sweep for IFDark/IFLight only (stronger contrast) ------- */
.theme-ifdark .titlebar::after,
.theme-iflight .titlebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Multiply makes the darkening more pronounced on both light & dark */
  mix-blend-mode: multiply;

  /* Three layered patterns at different scales/speeds to feel “sporadic” */
  background-image:
    /* Narrow band pattern with high peaks */
    linear-gradient(
      90deg,
      rgba(0,0,0,0)                               0%,
      rgba(0,0,0,var(--sweep-med))                4%,
      rgba(0,0,0,0)                               10%,
      rgba(0,0,0,var(--sweep-hi))                 16%,
      rgba(0,0,0,0)                               24%,
      rgba(0,0,0,var(--sweep-lo))                 32%,
      rgba(0,0,0,0)                               40%,
      rgba(0,0,0,var(--sweep-med))                48%,
      rgba(0,0,0,0)                               58%,
      rgba(0,0,0,var(--sweep-hi))                 68%,
      rgba(0,0,0,0)                               78%,
      rgba(0,0,0,var(--sweep-lo))                 88%,
      rgba(0,0,0,0)                               100%
    ),
    /* Wider band pattern to add broader pockets of darkness */
    linear-gradient(
      90deg,
      rgba(0,0,0,0)                               0%,
      rgba(0,0,0,calc(var(--sweep-med) * 0.9))    6%,
      rgba(0,0,0,0)                               16%,
      rgba(0,0,0,calc(var(--sweep-hi) * 0.9))     25%,
      rgba(0,0,0,0)                               38%,
      rgba(0,0,0,calc(var(--sweep-lo) * 0.9))     48%,
      rgba(0,0,0,0)                               60%,
      rgba(0,0,0,calc(var(--sweep-hi) * 0.85))    72%,
      rgba(0,0,0,0)                               86%,
      rgba(0,0,0,calc(var(--sweep-med) * 0.9))    94%,
      rgba(0,0,0,0)                               100%
    ),
    /* Broad soft sweep to visibly deepen as it passes */
    linear-gradient(
      90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.22) 50%,
      rgba(0,0,0,0) 100%
    );

  /* Scales—larger than 100% to allow long, smooth motion */
  background-size: 240% 100%, 320% 100%, 220% 100%;

  /* Right-to-left flow; each layer at a different speed */
  animation: if-amber-sweep 30s linear infinite;

  /* Improve perf */
  will-change: background-position;
}

/* Keyframes to move all layers at different speeds */
@keyframes if-amber-sweep {
  from { background-position: 140% 0, 210% 0, 160% 0; }
  to   { background-position: -40% 0, -110% 0, -60% 0; }
}

/* Subheader */
.subheader {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--tint);      /* theme-aware subtle strip */
  color: var(--text-muted);
}

/* Main area: two columns, Notes is its own panel on the right */
.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 18px;
}
.main-vault {
  display: grid;
  grid-template-columns: 1fr 8fr;
  gap: 20px;
  padding: 18px;
  gap: 12px;
  overflow-y: auto;
}
@media (max-width: 900px) {
  .main { grid-template-columns: 1fr; }
}

/* Panels */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px var(--shadow);
}
.panel-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: bold;
}
.panel-body {
  padding: 14px;
  display: grid;
  gap: 12px;
}
.panel-body-vault {
  padding: 14px;
  display: grid;
  gap: 12px;
  max-height: 220px;        /* Adjust as needed */
  overflow-y: auto;
}

.notes-panel .panel-body {
  display: flex;
  flex-direction: column;
}
.notes-panel textarea {
  flex: 1 1 auto;
  min-height: 420px;
  resize: vertical;
}

/* Inputs */
input[type="text"], select, textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}

/* Checkbox group */
.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Footer / buttons */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  display: flex;
  justify-content: flex-start;    /* 🔄 Changed from space-between to flex-start */
  align-items: center;
}
.btns {
  display: flex;
  gap: 10px;
  margin-left: 1rem;             /* ➕ Added left margin to separate buttons from status text */
}
.btn {
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .2s ease,
    transform .15s ease;
}
/* Primary & Danger base styles */
.btn-primary {
  background: linear-gradient(180deg, var(--blue-2), var(--blue-1));
  color: #fff;
  border-color: transparent;
}
.btn-danger {
  background: linear-gradient(180deg, #c93737, #9a2b2b);
  color: #fff;
  border-color: transparent;
}

/* Primary & Danger base styles */
.btn-primary {
  background: linear-gradient(180deg, var(--blue-2), var(--blue-1));
  color: #fff;
  border-color: transparent;
}
.btn-danger {
  background: linear-gradient(180deg, #c93737, #9a2b2b);
  color: #fff;
  border-color: transparent;
}

/* Button hover/active/focus effects */
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--shadow);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px var(--shadow);
}
.btn:focus-visible {
  outline: 2px solid transparent; /* remove default outline */
  box-shadow:
    0 0 0 3px var(--focus-ring),
    0 6px 18px var(--shadow);
}

/* Make primary & danger feel a touch more responsive */
.btn-primary:hover {
  background: linear-gradient(180deg, var(--blue-1), var(--blue-2));
}
.btn-primary:active {
  background: linear-gradient(180deg, var(--blue-2), var(--blue-1));
}
.btn-danger:hover {
  background: linear-gradient(180deg, #e14d4d, #b93535);
}
.btn-danger:active {
  background: linear-gradient(180deg, #b93535, #e14d4d);
}
/* Save button transition effect */
.btn-save-transition {
  box-shadow: 0 0 0 6px var(--focus-ring), 0 6px 18px var(--shadow);
  transform: scale(1.04);
  transition:
    box-shadow 0.4s cubic-bezier(.4,2,.3,.7),
    transform 0.25s cubic-bezier(.4,2,.3,.7);
}


.status { color: var(--text-muted); }

/* Utilities & a11y */
.titlebar a { color: inherit; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* About page tweak: ensure a single column stack */
.about-page .main {
  grid-template-columns: 1fr;
}

/* ======================
   Solved Checkbox Styling
   ====================== */
.solved-checkbox input[type="checkbox"] {
  accent-color: #28a745; /* Green accent for modern browsers */
}
.solved-checkbox label {
  color: #28a745;
  font-weight: 600;
}
/* A small celebratory pop on label */
html.celebrate .solved-checkbox label {
  animation: solved-pop 800ms ease-out;
  text-shadow: 0 0 0 rgba(40,167,69,0.0);
}
@keyframes solved-pop {
  0%   { transform: scale(1);   text-shadow: 0 0 0 rgba(40,167,69,0); }
  30%  { transform: scale(1.1); text-shadow: 0 0 18px rgba(40,167,69,0.7); }
  100% { transform: scale(1);   text-shadow: 0 0 0 rgba(40,167,69,0); }
}

/* ======================
   Confetti Layer
   ====================== */
#confetti-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Don’t block UI */
  overflow: visible;
  z-index: 9999;
}
.confetti {
  position: absolute;
  top: -10px; /* Start slightly off-screen */
  width: 10px;
  height: 14px;
  opacity: 0.9;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
  /* Animated via CSS vars (set by JS) */
  animation:
    confetti-fall var(--dur, 1.6s) linear forwards,
    confetti-sway var(--sway, 0.8s) ease-in-out infinite alternate;
}
@keyframes confetti-fall {
  to {
    transform:
      translate3d(var(--dx, 0px), 100vh, 0)
      rotate(var(--rot, 720deg));
    opacity: 0;
  }
}
@keyframes confetti-sway {
  from { margin-left: 0; }
  to   { margin-left: var(--sway-x, 30px); }
}

/* ======================
   Smooth theme transitions
   ====================== */
body, .panel, .titlebar, .footer,
input[type="text"], select, textarea, .btn {
  transition:
    background-color .4s ease,
    color .4s ease,
    border-color .4s ease,
    box-shadow .3s ease;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .confetti { animation: none !important; }
  #confetti-container { display: none; }
  html.celebrate .solved-checkbox label { animation: none; }

  /* Disable titlebar sweep animation for accessibility */
  .theme-ifdark .titlebar::after,
  .theme-iflight .titlebar::after {
    animation: none !important;
  }

  /* Reduce or remove transitions/transform-based motion */
  body, .panel, .titlebar, .footer,
  input[type="text"], select, textarea, .btn {
    transition: none !important;
  }
  .btn:hover, .btn:active { transform: none !important; }
}

/* ... (existing styles up to the end of file) ... */

/* Ensure single-column layout on the Entries Viewer and About pages */
.about-page .main,
.dbview-page .main {
  grid-template-columns: 1fr;
}

/* Entries table styling for dbview page */
#entriesTable {
  width: 100%;
  border-collapse: collapse;
}
#entriesTable th, #entriesTable td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
}
#entriesTable th {
  cursor: pointer;
  user-select: none;
}
#entriesTable tbody tr:nth-child(odd) {
  background: var(--surface-2);
}
#entriesTable tbody tr:hover {
  background: var(--tint);
}

.theme-ifdark .titlebar::before,
.theme-iflight .titlebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.10) 0px,
      rgba(0,0,0,0.10) 2px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 3px
    );
  background-size: 100% 4px, 3px 100%;
  mix-blend-mode: multiply;
  animation: crt-scanlines-vertical 12s linear infinite;
  will-change: background-position;
}

@keyframes crt-scanlines-vertical {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 100%, 0 0; }
}

/* ======================
   Vault Modal
   ====================== */
#vaultModal.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;            /* JS sets 'flex' to open it */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.5);
  z-index: 10000;           /* above confetti (9999) */
}

#vaultModal .modal {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow);
  width: min(560px, 92vw);
}

#vaultModal .modal-header,
#vaultModal .modal-footer {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

#vaultModal .modal-footer {
  border-bottom: none;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

#vaultModal .modal-body {
  padding: 14px;
  display: grid;
  gap: 10px;
}

/* Push Reset to far right without moving other buttons */
.footer .spacer { flex: 1; }

/* ======================
   Vault Modal — Hardening
   ====================== */
#vaultModal {                     /* ID-only to maximize specificity */
  position: fixed !important;     /* ensure it escapes normal flow */
  inset: 0 !important;            /* top:0; right:0; bottom:0; left:0 */
  display: none;                  /* JS will flip to 'flex' */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.5);
  z-index: 10000;                 /* above confetti (9999) */
}

#vaultModal .modal {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow);
  width: min(560px, 92vw);
}

#vaultModal .modal-header,
#vaultModal .modal-footer {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

#vaultModal .modal-footer {
  border-bottom: none;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

#vaultModal .modal-body {
  padding: 14px;
  display: grid;
  gap: 10px;
}