/* ==========================================================================
   ECTOMoneyMate  Global App Styles (Dark/Light theming via CSS variables)
   Tokens work with: html[data-theme="dark|light"] and :root.light
   ========================================================================== */

/* ---------- Color Tokens (Dark defaults) ---------- */
:root{
  /* OS/native controls hint */
  color-scheme: dark;

  --bg:#0b1220;
  --fg:#e5e7eb;
  --muted:#9aa5b1;
  --acc:#22c55e;

  --card:#0f172a;
  --bd:#1f2937;
  --tile:#0b152b;
  --tilebd:#1f2937;

  --btn-bg:#111827;
  --btn-fg:#e5e7eb;
  --btn-bd:#1f2937;

  --chip-bg:#0b152b;
  --chip-bd:#1f2937;

  --table-bd:#1f2937;
  --shadow:0 1px 0 rgba(0,0,0,.04), 0 2px 10px rgba(0,0,0,.08);

  --focus:#60a5fa;          /* focus ring */
  --warn:#f59e0b;
  --danger:#ef4444;
  --ok:#22c55e;

  --field-bg:#0b1220;       /* inputs */
  --field-bd:#243244;
  --field-fg:var(--fg);
  --placeholder:#7b8794;
}

/* ---------- Light theme (supports both patterns) ---------- */
:root.light,
html[data-theme="light"]{
  color-scheme: light;

  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#475569;
  --acc:#16a34a;

  --card:#f8fafc;
  --bd:#e5e7eb;
  --tile:#f1f5f9;
  --tilebd:#e5e7eb;

  --btn-bg:#ffffff;
  --btn-fg:#0f172a;
  --btn-bd:#d1d5db;

  --chip-bg:#f1f5f9;
  --chip-bd:#e5e7eb;

  --table-bd:#e5e7eb;
  --shadow:0 1px 0 rgba(0,0,0,.02), 0 2px 12px rgba(0,0,0,.06);

  --focus:#2563eb;
  --field-bg:#ffffff;
  --field-bd:#d1d5db;
  --field-fg:#0f172a;
  --placeholder:#9ca3af;
}

/* Optional explicit alias — dark keeps :root defaults */
html[data-theme="dark"]{}

/* ---------- Base / Typography ---------- */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
small, .note{font-size:.9rem;color:var(--muted)}
hr{border:none;border-top:1px solid var(--bd);margin:12px 0}

.container{max-width:1200px;margin:0 auto;padding:16px}

/* ---------- Header / Footer ---------- */
header,footer{
  background:var(--card);
  border-bottom:1px solid var(--bd);
}
footer{border-top:1px solid var(--bd);border-bottom:none;margin-top:32px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav .left,.nav .right{display:flex;align-items:center;gap:12px}

.logo{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.logo img{width:120px;height:54px;object-fit:contain;border-radius:10px;border:1px solid var(--bd);background:var(--bg)}
.logo .brand{display:flex;flex-direction:column;line-height:1.1}
.tag{padding:4px 8px;border-radius:999px;background:#0ea5e9;color:#fff;font-size:12px}

/* ---------- Cards / Sections ---------- */
.card{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow);
}
.section{background:var(--tile);border:1px solid var(--tilebd);border-radius:12px;padding:12px}
.section-title{margin:.35rem 0 .5rem; font-size:.98rem; color:var(--muted); display:flex; align-items:center; gap:8px}
.section-title .dot{width:7px;height:7px;border-radius:999px;background:var(--acc);opacity:.8}

/* ---------- Grids ---------- */
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){ .grid,.grid.cols-2,.grid.cols-3{grid-template-columns:1fr} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:.55rem .85rem;border-radius:10px;
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--btn-fg);
  cursor:pointer; text-decoration:none;
  transition:transform .06s ease, background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus{outline:2px solid transparent; box-shadow:0 0 0 3px color-mix(in oklab, var(--focus) 45%, transparent)}
.btn.ghost{background:transparent;border-color:var(--bd)}
.btn.acc{background:var(--acc);border-color:transparent;color:#052e16}
.btn.warn{background:color-mix(in oklab, var(--warn) 18%, transparent);border-color:color-mix(in oklab, var(--warn) 50%, var(--bd));color:inherit}
.btn.danger{background:color-mix(in oklab, var(--danger) 18%, transparent);border-color:color-mix(in oklab, var(--danger) 50%, var(--bd));color:inherit}
.btn .ico{width:16px;height:16px;display:inline-block}

/* ---------- Badges / Chips ---------- */
.badge{
  display:inline-block;padding:.35rem .7rem;border-radius:999px;
  background:var(--chip-bg); color:var(--fg); border:1px solid var(--chip-bd);
  font-size:.88rem;
}
.badge.ok{background:color-mix(in oklab, var(--ok) 18%, transparent); color:var(--ok)}
.badge.warn{background:color-mix(in oklab, var(--warn) 18%, transparent); color:var(--warn)}
.badge.danger{background:color-mix(in oklab, var(--danger) 18%, transparent); color:var(--danger)}
.chip{display:inline-block;padding:.35rem .65rem;border-radius:999px;border:1px solid var(--bd);background:var(--chip-bg)}

/* ---------- Tables ---------- */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--table-bd);vertical-align:top;text-align:left}
.table th{font-weight:600}
.table .num{text-align:right}
.table tfoot th,.table tfoot td{font-weight:700}

/* ---------- Forms (inputs/selects/textarea) ---------- */
label{display:block;font-weight:600;margin-bottom:6px}
.input, input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"],
select, textarea{
  width:100%; padding:.55rem .7rem; border-radius:10px;
  border:1px solid var(--field-bd); background:var(--field-bg); color:var(--field-fg);
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
textarea{min-height:120px; resize:vertical}

/* ▼ Custom arrow (kept as-is) */
select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat
}

/* ▼ NEW: theme-safe popup colours for native options */
select option{
  background: var(--card);
  color: var(--field-fg);
}
select option:checked,
select option:hover,
select option:focus{
  background: color-mix(in oklab, var(--focus) 20%, var(--card));
  color: var(--field-fg);
}
select option[disabled]{ color: var(--muted); opacity:.9 }

/* OS/native widget hint (Firefox/Chromium) */
html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea{
  color-scheme: dark;
}
:root.light select,
html[data-theme="light"] select{
  color-scheme: light;
}

input::placeholder, textarea::placeholder{color:var(--placeholder)}
input:focus, select:focus, textarea:focus{
  outline:2px solid transparent;
  border-color:color-mix(in oklab, var(--focus) 60%, var(--field-bd));
  box-shadow:0 0 0 3px color-mix(in oklab, var(--focus) 35%, transparent);
}

/* File input button (theme-safe) */
input[type="file"]::file-selector-button{
  border:1px solid var(--bd);
  background:var(--btn-bg);
  color:var(--btn-fg);
  border-radius:10px;
  padding:.4rem .6rem;
  margin-right:.6rem;
  cursor:pointer;
}

/* Inline field group */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:820px){ .form-row{grid-template-columns:1fr} }

/* ---------- Alerts ---------- */
.alert{padding:10px 12px;border-radius:12px;border:1px solid var(--bd); background:var(--tile)}
.alert-info{border-color:color-mix(in oklab, var(--focus) 55%, var(--bd)); background:color-mix(in oklab, var(--focus) 12%, var(--tile)); color:inherit}
.alert-warn{border-color:color-mix(in oklab, var(--warn) 55%, var(--bd)); background:color-mix(in oklab, var(--warn) 12%, var(--tile))}
.alert-error{border-color:color-mix(in oklab, var(--danger) 55%, var(--bd)); background:color-mix(in oklab, var(--danger) 12%, var(--tile))}
.alert-success{border-color:color-mix(in oklab, var(--ok) 55%, var(--bd)); background:color-mix(in oklab, var(--ok) 12%, var(--tile))}

/* ---------- Pager ---------- */
.pager{display:flex;gap:6px;flex-wrap:wrap}
.pager .btn{padding:.4rem .65rem}

/* ---------- Utility ---------- */
.no-print{ }
.num{text-align:right}
.center{text-align:center}
.right{text-align:right}
.badline{display:flex;align-items:center;gap:8px}
.divider{height:1px;background:var(--bd);border-radius:1px;margin:12px 0}

/* ---------- Print Rules ---------- */
.print-only{display:none}
@media print{
  header,footer,.no-print{display:none!important}
  .print-only{display:block}
  body{background:#fff!important;color:#000!important}
  .card, .section{border-color:#ddd; box-shadow:none}
  .btn{display:none!important}
}

/* Hide any accidental empty buttons/links so "black pills" won't appear */
.btn:empty { display: none !important; }

/* If some lib injects pseudo-elements, neutralize them for buttons */
.btn::before, .btn::after { content: none !important; }

/* --- Hard override to STOP input+button merging from global styles --- */

/* Show is inside input */
.pw-wrap{ position:relative; flex:1 1 420px; min-width:320px }
.pw-input{ padding-right:92px }
.pw-show{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:1px solid var(--bd); background:#fff; color:var(--fg);
  border-radius:10px; padding:6px 10px; cursor:pointer; white-space:nowrap; z-index:1;
}

/* Separator to break any "adjacent sibling" rules like .form-control + .btn */
.u-split{ display:inline-block; width:12px; height:1px }

/* OUTSIDE cluster */
.actions-bar{
  display:inline-flex !important; align-items:center; gap:10px; margin-left:0;
  background:transparent !important; border:0 !important; padding:0 !important;
}

/* Kill bootstrap-ish grouping / negative margins on our buttons */
.actions-bar .btn{
  position:static !important;
  margin:0 !important;
  border-radius:10px !important;
  border-left-width:1px !important;
}

/* Nuke generic "input + .btn" collapse coming from app.css/Bootstrap */
.form-control + .btn,
input + .btn,
input + .btn-group,
.pw-input + .btn,
.pw-input + .btn-group{
  margin-left:0 !important;
  border-left-width:1px !important;
  border-radius:10px !important;
}