/* ====== DueWise UI Theme (light + auto dark) ====== */
:root{
  /* Brand & semantic */
  --dw-brand-1:#10b981; /* emerald */
  --dw-brand-2:#06b6d4; /* cyan */
  --dw-brand-3:#3b82f6; /* blue */

  --dw-ink-900:#0f172a; /* slate-900 */
  --dw-ink-700:#334155; /* slate-700 */
  --dw-ink-500:#64748b; /* slate-500 */
  --dw-ink-300:#94a3b8; /* slate-300 */

  --dw-bg:#f6f8fb;      /* page bg */
  --dw-surface:#ffffff; /* cards, modals */

  --dw-success:#10b981;
  --dw-danger:#ef4444;
  --dw-warning:#f59e0b;

  /* Bootstrap variable overrides */
  --bs-body-font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
  --bs-body-bg: var(--dw-bg);
  --bs-body-color: var(--dw-ink-900);
  --bs-primary: #0ea5e9;       /* tint used for links etc. */
  --bs-secondary: var(--dw-ink-500);
  --bs-dark: #0b1220;
  --bs-border-color: #e6ebf2;
  --bs-link-color: #0ea5e9;
  --bs-border-radius: 7px;
   /* fallback for older iOS 11 */
  --safe-top: constant(safe-area-inset-top);
  --safe-right: constant(safe-area-inset-right);
  --safe-bottom: constant(safe-area-inset-bottom);
  --safe-left: constant(safe-area-inset-left);
  --badge-color: inherit;

  /* modern iOS */
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
}

/* keeps anchors from hiding under sticky bars if someone calls scrollIntoView elsewhere */
#root .day-block { scroll-margin-top: 120px; } /* adjust if your headers change */


/* Fullscreen center with a soft gradient that adapts to theme */
.auth-hero {
  min-height: 100svh; /* handles iOS safe areas nicely */
  padding: 24px;
  background:
    radial-gradient(80% 60% at 10% 10%, rgba(59,130,246,0.12), transparent 60%),
    radial-gradient(80% 60% at 90% 20%, rgba(16,185,129,0.12), transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(234,179,8,0.10), transparent 60%);
}

/* Subtle glass feel for the auth card */
.auth-card {
  backdrop-filter: blur(6px);
  background: color-mix(in oklab, var(--bs-body-bg) 92%, transparent);
  border: 1px solid rgba(125,125,125,0.15) !important;
}



/* Tweak brand line-height for tighter look */
.brand {
  line-height: 1.1;
  display: block;
}

/* Dark mode tune-ups (optional, if not already themed) */
@media (prefers-color-scheme: dark) {
  .auth-hero {
    background:
      radial-gradient(80% 60% at 10% 10%, rgba(59,130,246,0.18), transparent 60%),
      radial-gradient(80% 60% at 90% 20%, rgba(16,185,129,0.18), transparent 60%),
      radial-gradient(80% 60% at 50% 100%, rgba(234,179,8,0.14), transparent 60%);
  }
}


/* ===== Layout containers ===== */
.dw-container{
  max-width: 860px; margin-inline:auto;
}

/* App shell spacing */
.app-shell{ padding-left: 0; padding-right: 0; padding-top: var(--safe-top);
 
  /* whatever your header/bg is, so it fills behind the bar */}

/* ===== Topbar ===== */
.app-topbar{
  position: sticky; top: 0; z-index: 1040;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
   
  
}

.badge{
    color: inherit !important;
    text-transform: capitalize;
}
/* Installed PWA standalone mode */
@media all and (display-mode: standalone) {
  .app-shell {
    background: #0b1a2b; /* your dark theme */
  }
}

.bill-card { transition: transform .06s ease; }
.bill-card:hover { transform: translateY(-1px); }


/* Brand mark */
.brand{
  display:flex; align-items:center; gap:0rem; font-weight:700;
  letter-spacing:.2px;
}
.brand svg path{ fill: var(--dw-brand-1); }
.dw-splash-logo svg path{ fill: var(--dw-brand-1); }

/* Icon buttons */
.icon-btn{
  --size: 40px;
  width: var(--size); height: var(--size);
  border-radius: 12px;
  display:grid; place-items:center;
  border:1px solid var(--bs-border-color);
  transition: transform .06s ease, background-color .2s ease, border-color .2s ease;
}
.icon-btn:hover{ transform: translateY(-1px); }
.icon-btn i{ font-size: 18px; }

/* Segmented control */
.seg-wrap{
  background: #fff; border:1px solid var(--bs-border-color);
  padding: 4px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(15,23,42,.04);
}
.seg-wrap .btn{
  border-radius: 999px; border: 0; padding: 8px 14px;
  color: var(--dw-ink-700); font-weight: 600;
}
.seg-wrap .btn.active{
  color: #fff;
  background: linear-gradient(135deg, var(--dw-brand-1), var(--dw-brand-2) 60%, var(--dw-brand-3));
  box-shadow: 0 6px 14px rgba(16,185,129,.20);
}

/* ===== Month header row ===== */
.month-row{
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  background: transparent;
}
.month-row h3{
  font-weight: 700; letter-spacing:.2px;
}

/* ===== Cards ===== */
.card{
  background: var(--dw-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(15,23,42,.06);
}
.card .card-title{ font-weight:700; }

/* Bill cards */
.bill-card .amount{
  min-width: 92px; text-align:left; font-variant-numeric: tabular-nums;
  font-weight:700; color: var(--dw-ink-900);
}
.bill-card.completed{
  border-color: rgba(16,185,129,.25);
  background: linear-gradient(0deg, rgba(16,185,129,.06), rgba(16,185,129,.06)), var(--dw-surface);
  opacity: 0.6;
}

.bill-card.completed .check{
    padding: 0;
    margin: 0;
    font-size: 29px;
    border: 0;
    color: green;
}

.bill-card .uncheck{
    padding: 14px;
    margin: 0;
    font-size: 29px;
}

/* Section titles */
.section-title{
  font-size:.95rem; font-weight:700; letter-spacing:.24px;
  color: var(--dw-ink-700); text-transform: uppercase;
  margin: .5rem .25rem 1rem; opacity:.9;
}

/* Buttons */
.btn-dark{
  color:#fff; border:0;
  background: linear-gradient(135deg, var(--dw-brand-1), var(--dw-brand-2) 65%, var(--dw-brand-3));
  box-shadow: 0 8px 20px rgba(14,165,233,.25);
}
.btn-dark:hover{ filter: brightness(.98); }
.btn-outline-primary{
  border-color: #cfe8ff; color:#0b63c7; background:#f3f9ff;
}
.btn-outline-primary:hover{ background:#e9f3ff; }

/* Forms */
.form-control, .form-select{
  border-radius: 12px; border-color: var(--bs-border-color);
}
.form-control:focus, .form-select:focus{
  border-color: #93c5fd;
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.15);
}

/* Modals: fix sticky backdrop + elevate content */
.modal-content{
  border-radius: 18px; border-color: var(--bs-border-color);
  box-shadow: 0 24px 60px rgba(15,23,42,.18);
}

/* Charts spacing */
.card canvas{ display:block; }

/* Links & muted text */
.text-muted{ color: var(--dw-ink-500)!important; }

/* ===== Auto Dark Mode (respects system) ===== */
@media (prefers-color-scheme: dark){
  :root{
    --dw-bg:#0b1220;
    --dw-surface:#101a2e;
    --dw-ink-900:#e6ebf3;
    --dw-ink-700:#c5d0e0;
    --dw-ink-500:#98a6bb;
    --bs-border-color:#23304a;
    --bs-body-bg: var(--dw-bg);
    --bs-body-color: var(--dw-ink-900);
    --bs-link-color:#7dd3fc;
  }
  .app-topbar{
    background: rgba(16,26,46,1);
    border-bottom-color: var(--bs-border-color);
  }
  .seg-wrap{ background:#0f172a; border-color: var(--bs-border-color); }
  .seg-wrap .btn{ color: var(--dw-ink-500); }
  .card{
    background: var(--dw-surface);
    border-color: var(--bs-border-color);
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
  }
  .icon-btn{ border-color: var(--bs-border-color); background:#0f172a; color:var(--dw-ink-900); }
  .btn-outline-primary{ border-color:#2b3b5d; background:#0f1b33; color:#a8cfff; }
  .bill-card.completed{
    background: linear-gradient(0deg, rgba(16,185,129,.10), rgba(16,185,129,.10)), var(--dw-surface);
  }
}

/* ===== Micro-interactions ===== */
button, .btn{ transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease; }
.btn:active{ transform: translateY(1px); }
#install-banner{
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
 background: linear-gradient(135deg, var(--dw-brand-1), var(--dw-brand-2) 60%, var(--dw-brand-3)); color: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.25);
  z-index: 9999;
}
#install-btn{ padding: 8px 14px; border-radius: 10px; border: 0; }
#close-install{ margin-left: auto; background: transparent; color: #fff; border: 0; font-size: 20px; }
@media (prefers-color-scheme: light){
#install-banner {
    background: #ffffff;
    color: #ffffff;
    border: 1px solid #e5e7eb;
    background: linear-gradient(135deg, var(--dw-brand-1), var(--dw-brand-2) 60%, var(--dw-brand-3));
}
  
  #close-install{ color: #444; }
}



/* ---- PWA splash overlay ---- */
#dw-splash{
  position:fixed; inset:0; z-index: 3000;
  background: linear-gradient(135deg, #0b1220, #101a2e);
  color:#10b981; display:grid; place-items:center;
}
#dw-splash .dw-splash-inner{ text-align:center; }
#dw-splash .dw-splash-logo{ color:#10b981; margin-bottom:.9rem; }
#dw-splash .dw-splash-title{
  color:#e6ebf3; font-weight:700; letter-spacing:.3px;
  font-size:1.25rem; margin-bottom:.6rem;
}
#dw-splash .dw-splash-spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:#10b981; animation:dwspin 0.9s linear infinite;
  margin-inline:auto;
}
@keyframes dwspin { to { transform: rotate(360deg); } }

/* Light mode variant */
@media (prefers-color-scheme: light){
  #dw-splash{ background: #f6f8fb; }
  #dw-splash .dw-splash-title{ color:#0f172a; }
}

/* Insights layout */
.insights-grid{
  display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 768px){ .insights-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.insights-grid .stat{
  background: var(--dw-surface);
  border:1px solid var(--bs-border-color);
  border-radius: 12px;
  padding: 12px 14px;
}
.insights-grid .stat small{
  display:block; color: var(--dw-ink-500); text-transform: uppercase; letter-spacing:.2px;
}
.insights-grid .stat .k{
  font-weight: 800; font-size: 1.05rem; letter-spacing:.2px;
}
.progress{ background:#eef2f7; }
@media (prefers-color-scheme: dark){
  .progress{ background:#1a2740; }
}

/* Modal elevation + soft surface */
.dw-modal-elevated{
  background: var(--dw-surface);
  border-radius: 14px;
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.18);
}

.hidePaidSwitch input{
  width: 40px !important;
  padding: 10px !important;
  margin: 1px 5px;
  background-color: #d3d3d3;
  border: 0 !important;
}

.hidePaidSwitch .form-check-input:checked {
    background-color: #0eb990;
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(16,185,129,.20);
}

.hidePaidSwitch .form-check-input:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(14 185 146 / 28%);
}

/* Helper text */
.form-hint{
  font-size: .825rem;
  color: var(--dw-ink-500);
  margin-top: .35rem;
}

/* Soft badge (fixed/variable) */
.badge-soft{
  background: rgba(16, 185, 129, .12);
  color: #10b981;
  border-radius: 999px;
  padding: .125rem .5rem;
  font-size: .75rem;
  font-weight: 600;
}

@media (prefers-color-scheme: dark){
  .badge-soft{ background: rgba(16, 185, 129, .16); color: #22c55e; }
}

/* Floating Action Button */
.fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1035; /* above cards */
}
.fab .btn {
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(2,6,23,.18);
}

@media (min-width: 992px) {
  .fab { right: 26px; bottom: 26px; }
}

/* Add a little bottom room so content doesn't hide behind FAB */
.has-fab-padding { padding-bottom: 84px; }

.dw-acc {
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: 12px;
  background: var(--bs-body-bg, #fff);
  margin-bottom: 10px;
  overflow: hidden;
}
.dw-acc-hdr {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 10px 12px;
  
  border: 0;
  cursor: pointer;
  text-align: left;
}
.dw-acc-hdr .bi { transition: transform .18s ease; }
.dw-acc-hdr.open .bi { transform: rotate(180deg); }
/*.dw-acc-hdr:hover { background: #fafafa; }*/
.dw-acc-date { font-size: 0.98rem; }
.dw-acc-body {
  padding: 10px 12px;
  border-top: 1px solid var(--bs-border-color, #eee);
  background: var(--bs-body-bg, #fff);
}

.dw-bill {
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
   background: var(--dw-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(15,23,42,.06);
}
.dw-bill + .dw-bill { margin-top: 8px; }
.dw-bill:hover { background: transparent; border-color: transparent; }
.dw-bill.completed { opacity: .5; text-decoration: line-through; }
.day-hdr{ display: none;}