/* =========================
   THEME TOKENS
   ========================= */

/* Base (LIGHT) */
:root{
  --bg:#f7f8fb; --surface:#ffffff; --text:#1a202c; --text-muted:#6b7280;
  --brand:#6b7bff; --brand-2:#7a5ccf; --success:#10b981; --danger:#ef4444;
  --darker-brand: #667eea; --darker-brand-2: #764ba2;
  --border:#e6e8ee; --shadow:0 8px 24px rgba(17,24,39,.08);
  --radius-lg:16px; --radius-md:12px; --radius-sm:10px;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem;
  --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem;
  --action:#5b6ee1;   /* desaturated periwinkle — not neon, not teal */
  --action-2:#7385f3; /* lighter end for a subtle gradient */
}

/* 1) Tell the UA which scheme we’re in so it doesn't auto-paint black */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark;  }


html, body { background: inherit; }

/* 3) Make Bootstrap’s modal backdrop match your theme bg, not #000 */
.modal-backdrop {
  --bs-backdrop-bg: var(--bg, #ffffff);
  /* keep the same opacity so the dim is still there */
  --bs-backdrop-opacity: 0.5;
}

/* 4) While the modal is animating, avoid scrollbars causing a repaint */
.modal-open { overflow: hidden; }


/* Explicit DARK */
html[data-theme="dark"]{
  --bg:#0f1220; --surface:#161a2b; --text:#e5e7eb; --text-muted:#9aa2b2;
  --brand:#8ea2ff; --brand-2:#a48cff; --success:#34d399; --danger:#f87171;
  --border:#22263a; --shadow:0 8px 24px rgba(0,0,0,.35);
  --action:#7c8cff;
  --action-2:#9aa9ff;
}

/* Explicit LIGHT (inherits :root) */
html[data-theme="light"]{}

/* AUTO = follow system */
html[data-theme="auto"]{}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --bg:#0f1220; --surface:#161a2b; --text:#e5e7eb; --text-muted:#9aa2b2;
    --brand:#8ea2ff; --brand-2:#a48cff; --success:#34d399; --danger:#f87171;
    --border:#22263a; --shadow:0 8px 24px rgba(0,0,0,.35);
  }
}

/* =========================
   BASE LAYOUT
   ========================= */

*{box-sizing:border-box}
html,body{height:100%}
body{
  background:
    radial-gradient(1400px 700px at 80% -200px, color-mix(in srgb, var(--brand) 15%, transparent), transparent) no-repeat,
    radial-gradient(1200px 600px at -200px 20%, color-mix(in srgb, var(--brand-2) 12%, transparent), transparent) no-repeat,
    var(--bg);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.container{ max-width: 660px; padding-bottom: env(safe-area-inset-bottom, 24px); }

.header{
  display:flex; align-items:center; justify-content:space-between;
  margin: var(--space-4) 0 var(--space-3);
}
.app-title{
  font-weight: 800; letter-spacing:.2px; font-size: 1.25rem;
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.header-summary{ font-size:.9rem; color:var(--text-muted); }

.navbar{ display:none } /* keep if you add a bottom nav later */


/* =========================
   CARDS
   ========================= */

.period-card{
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: var(--space-4);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.period-card:hover{ transform: translateY(-2px) }

.card-header{
  padding: .9rem 1rem;
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  color:#fff;
  display:flex; justify-content:space-between; align-items:center;
}
.card-header.current{ background: linear-gradient(120deg, #15c98d, #3fe48e); }
.card-header h2{ margin:0; font-size: .98rem; font-weight: 700; letter-spacing:.2px }

.card-body{ padding: 1rem; color: var(--text); }

/* =========================
   STATS GRID
   ========================= */

.stats-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:.6rem; margin-bottom:.8rem;
}
.stat-item{
  background: color-mix(in srgb, var(--surface), var(--bg) 40%);
  border: 1px solid var(--border);
  padding:.6rem; border-radius: var(--radius-sm); text-align:center;
  transition: background .18s ease, border-color .18s ease;
}
.stat-item:hover{ background: color-mix(in srgb, var(--surface), var(--bg) 55%); }
.stat-label{ font-size:0.8rem; color:var(--text-muted); margin-bottom:.15rem }
.stat-value{ font-weight:700; font-size:1rem }

.recurring-trigger,.oneoff-trigger{ cursor:pointer }

/* =========================
   SPENDABLE
   ========================= */

.spendable{
  font-size:1.15rem; font-weight:800; text-align:center;
  padding:.85rem; border-radius: var(--radius-sm);
  border:1px dashed var(--border);
}
.spendable.positive{ color:var(--success); background: color-mix(in srgb, var(--success) 12%, transparent) }
.spendable.negative{ color:var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent) }

/* =========================
   LISTS
   ========================= */

.expense-list{ list-style:none; margin:0; padding:0 }
.expense-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem .25rem; border-bottom:1px solid var(--border); font-size:.92rem;
}
.expense-item:last-child{ border-bottom:none }
.expense-name{ color:var(--text) }
.expense-amount{ font-weight:700; color:var(--text-muted) }
.no-expenses{ color:var(--text-muted); text-align:center; padding:.8rem; font-style:italic }

/* Bootstrap list-group harmonize with theme */
.list-group-item{
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

/* =========================
   FORMS / INPUTS
   ========================= */

.reset-card{
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.25rem; text-align:center;
}
.reset-card h2{ font-size:1.1rem; margin-bottom:.5rem }

.form-control,
.form-select,
.input-group-text{
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  padding:.7rem .85rem;
  background:var(--surface);
  color:var(--text);
}
.form-control::placeholder{ color: var(--text-muted); opacity:.8; }

.form-label,
.form-check-label{ color: var(--text); }
.form-check-input{
  background: var(--surface);
  border:1px solid var(--border);
}

/* =========================
   BUTTONS / ALERTS
   ========================= */

.btn-primary{
  background: linear-gradient(120deg, var(--action), var(--action-2));
  border:none; border-radius: var(--radius-sm); padding:.65rem .9rem; font-weight:700; width:100%;
  transition: transform .15s ease, box-shadow .15s ease;
  color:#fff;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--action) 35%, transparent) }

.btn-secondary{
  background: transparent; color: var(--text); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding:.65rem .9rem; width:100%; font-weight:700;
}
.btn-danger{
  background: linear-gradient(120deg, #ef4444, #dc2626);
  border:none; border-radius: var(--radius-sm); padding:.65rem .9rem; width:100%; color:#fff; font-weight:700;
}

.alert-warning{
  background: color-mix(in srgb, #f59e0b 12%, var(--surface));
  border:1px solid color-mix(in srgb, #f59e0b 30%, var(--surface));
  color:#b45309; border-radius: var(--radius-sm); padding:.8rem; text-align:center;
}

/* =========================
   FABs / MENU
   ========================= */

.fab {
      position: fixed;
      bottom: 40px;
      right: 20px;
      width: 56px;
      height: 56px;
      /*background-color: #667eea;
      background-color: var(--brand);*/
      background: linear-gradient(160deg, var(--brand), var(--brand-2));
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      cursor: pointer;
      z-index: 1000;
      text-decoration: none; /* Remove underline */
    }
.fab:active{ transform: scale(.98) }
.fab:hover{ text-decoration:none }

/* Settings FAB at top right */
    .settings-fab {
      position: fixed;
      top: 10px;
      right: 20px;
      width: 56px;
      height: 56px;
      color: gray;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      cursor: pointer;
      z-index: 1000;
      background: var(--surface); color: var(--text-muted);
        border:1px solid var(--border); box-shadow: var(--shadow); z-index:1000; cursor:pointer;
    }
    
    /* Dropdown menu */
    .dropdown-menu {
      position: fixed;
      top: 70px;
      right: 45px;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      display: none;
      flex-direction: column;
      z-index: 1000;
      width: 150px;
    }
    .dropdown-menu.show {
      display: flex;
    }
    .dropdown-menu a {
      padding: 0.75rem 1rem;
      color: #4a5568;
      text-decoration: none;
      border-bottom: 1px solid #e2e8f0;
    }
    .dropdown-menu a:last-child {
      border-bottom: none;
    }
    .dropdown-menu a:hover {
      background: #f7fafc;
      color: #667eea;
    }
    .dropdown-menu a.active {
    background: #f7fafc;
    color: #667eea;
    font-weight: 600;
    }

/* =========================
   RESPONSIVE / MOTION
   ========================= */

.modal-dialog-scrollable .modal-body{ max-height: 65vh }

@media (max-width: 480px){
  .stats-grid{ grid-template-columns: 1fr 1fr 1fr; }
  .header{ margin-top: .25rem }
  .app-title{ font-size: 1.1rem }
  .container { padding-bottom: 70px; padding-top: 70px; } /* Space for FABs */
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* =========================
   HEADER EXTRAS / PUBLIC NAV
   ========================= */

.header { text-align: center; margin-bottom: 1rem; position: relative; }
.header h1{
  font-weight: 700; font-size: 1.6rem; display: inline-block;
  background: linear-gradient(120deg, var(--darker-brand) 0%, var(--darker-brand-2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.public-nav{ display:flex; justify-content:space-between; margin-bottom:1rem; }
.public-nav a{ color: var(--brand); text-decoration: none; font-weight: 600; }
.public-nav a:hover{ text-decoration: underline; }

/* =========================
   SMALL LABELS / TAGS
   ========================= */

.days-left,
.saved-tag{
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

/* attach a subtle meta row under the balance */
.spendable { display:flex; flex-direction:column; align-items:center; }
.period-meta { margin-bottom: .2rem; }

.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.8rem; font-weight:700; padding:.25rem .5rem;
  border-radius:999px; border:1px dashed var(--border);
  background: color-mix(in srgb, var(--surface), var(--bg) 35%);
}
.chip-positive{ color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--surface)); }
.chip-negative{ color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 40%, var(--surface)); }
.chip-extra{ opacity:.8; font-weight:600; }

.badge.bg-outline-savings{
  border:1px dashed color-mix(in srgb, var(--success) 50%, var(--surface));
  color: var(--success);
  background: color-mix(in srgb, var(--surface), var(--bg) 40%);
  border-radius: 999px;
  padding: .15rem .45rem;
  font-weight: 700;
  font-size: .65rem;
  margin-right: .35rem;
}

.badge.bg-outline-offset{
  border:1px dashed color-mix(in srgb, var(--text-muted) 50%, var(--surface));
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface), var(--bg) 40%);
  border-radius: 999px; padding:.15rem .45rem; font-weight:700; font-size:.65rem; margin-right:.35rem;
}

.badge.bg-success,
.badge.bg-secondary{
  font-size: 0.7rem;
  padding: 0.25em 0.45em;
  vertical-align: middle;
}

/* Progress visuals */
.progress-card { background: color-mix(in srgb, var(--surface), var(--bg) 10%); border: 1px solid var(--border); }
.progress{
  background: color-mix(in srgb, var(--surface), var(--bg) 50%);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
  height: 10px;
}
.progress-bar{ transition: width 0.6s ease; }

/* Goal stats text sizes */
.goal-stats{ display:flex; flex-direction:column; gap:.4rem; }
.goal-stats .text-muted{ font-size: 0.85rem; }
@media (max-width: 480px){ .goal-stats .text-muted{ font-size: 0.8rem; } }

/* =========================
   CLICKABLE CARD LINKS
   ========================= */

.goal-link { color: inherit; text-decoration: none; }
.goal-link .period-card{ transition: transform .18s ease, box-shadow .18s ease; }
.goal-link .period-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.12); cursor: pointer; }

/* Ensure muted text adapts */
.period-card .card-body .text-muted{ color: var(--text-muted) !important; }

/* =========================
   MODALS (Light + Dark)
   ========================= */

.modal-backdrop.show{
  background: color-mix(in srgb, var(--bg) 60%, #000);
  opacity:.7;
}
.modal-content{
  background: var(--surface);
  color: var(--text);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.modal-header{
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  color:#fff;
  border-bottom: 1px solid transparent;
}
.modal-title{ color:#fff; }
.modal-footer{
  background: color-mix(in srgb, var(--surface), var(--bg) 35%);
  border-top:1px solid var(--border);
}
.modal-header .btn-close{
  filter: invert(1) brightness(140%);
  opacity:.9;
}
@media (prefers-color-scheme: light){
  .modal-header .btn-close{ filter:none; }
}

/* Inputs / lists inside modals */
.modal-content .form-control,
.modal-content .input-group-text,
.modal-content .form-check-input{
  background: var(--surface);
  color: var(--text);
  border:1px solid var(--border);
}
.modal-content .form-control::placeholder{ color: var(--text-muted); }
.modal-content .list-group-item{
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

/* Custom expense list rows inside modals */
.modal-content .expense-list .expense-item{ border-color: var(--border); }
.modal-content .expense-amount{ color: var(--text); }
.modal-content .btn.btn-secondary{
  background: transparent;
  color: var(--text);
  border:1px solid var(--border);
}
.modal-content .btn.btn-secondary:hover{
  background: color-mix(in srgb, var(--surface), var(--bg) 40%);
}

/* Safe-area helpers */
:root{
  /* Support both old constant() and new env() syntaxes */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

/* Give the page some breathing room under the status bar */
.header { padding-top: var(--sat); }

/* If you prefer spacing the whole page instead of only the header: */
/* .container { padding-top: calc(12px + var(--sat)); } */

/* Any fixed elements near the top must also respect the inset */
.settings-fab{
  top: calc(10px + var(--sat));
}

/* If you open a dropdown near the top, offset it too */
.dropdown-menu{
  top: calc(60px + var(--sat));
}

/* Keep Bootstrap modals clear of the notch / Dynamic Island */
.modal{
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* Mobile default: Boostrap uses .5rem margins; add safe-area */
.modal-dialog{
  margin: calc(.5rem + var(--sat)) auto calc(.5rem + var(--sab));
}

/* >= sm breakpoint: Bootstrap uses 1.75rem; keep that + safe-area */
@media (min-width: 576px){
  .modal-dialog{
    margin: calc(1.75rem + var(--sat)) auto calc(1.75rem + var(--sab));
  }
}

/* If you ever use full-bleed/fitted modals, also respect left/right insets */
@supports (padding: max(0px)){
  .modal{
    padding-left: max(.5rem, var(--sal));
    padding-right: max(.5rem, var(--sar));
  }
}

/* Let Bootstrap's radio/checkbox visuals show, including in modals */
.form-check-input,
.modal-content .form-check-input{
  /* use background-color, NOT background (so we don't kill the SVG) */
  background-color: var(--surface);
  border: 1px solid var(--border);
}

/* Radios: restore Bootstrap's SVGs */
.form-check-input[type="radio"]{
  background-image: var(--bs-form-check-radio-bg-image);
}
.form-check-input[type="radio"]:checked,
.modal-content .form-check-input[type="radio"]:checked{
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  background-image: var(--bs-form-check-radio-checked-bg-image);
}

/* Checkboxes too, if you use them */
.form-check-input[type="checkbox"]{
  background-image: var(--bs-form-check-bg-image);
}
.form-check-input[type="checkbox"]:checked,
.modal-content .form-check-input[type="checkbox"]:checked{
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  background-image: var(--bs-form-check-checked-bg-image);
}