/* /public_html/assets/css/style.css — Melecio Coop design system
   Motif: family cooperative passbook (dashed perforation edge + ledger figures).
   Tokens defined once; dark mode swaps them. Respects prefers-reduced-motion. */

:root{
  --color-primary:#14532D; --color-primary-600:#0f3d21; --color-primary-050:#e7efe8;
  --color-accent:#D9A400;  --color-accent-600:#b98a00;
  --color-bg:#F7F8F5; --color-surface:#FFFFFF; --color-surface-2:#FbFcfa;
  --color-ink:#1C2621; --color-ink-soft:#55625a; --color-line:#DDE3DA;
  --success:#1E7A46; --warning:#C97A1D; --danger:#B3261E;
  --success-bg:#e6f2ea; --warning-bg:#f8efe2; --danger-bg:#f7e6e4; --info-bg:#e7efe8;
  --radius:8px; --radius-lg:14px; --shadow:0 1px 2px rgba(28,38,33,.04);
  --font-display:"Sora",system-ui,sans-serif;
  --font-body:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --sidebar-w:248px; --tr:160ms ease;
}
[data-theme="dark"]{
  --color-primary:#3f9d63; --color-primary-600:#2f8a52; --color-primary-050:#16241b;
  --color-accent:#e8b62a; --color-accent-600:#d9a400;
  --color-bg:#0f1512; --color-surface:#161d19; --color-surface-2:#1a221d;
  --color-ink:#e7ece8; --color-ink-soft:#9fb0a5; --color-line:#2a352e;
  --success:#4fb87e; --warning:#e0a457; --danger:#e0655c;
  --success-bg:#152a1f; --warning-bg:#2a2216; --danger-bg:#2c1a18; --info-bg:#16241b;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body); background:var(--color-bg); color:var(--color-ink);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--color-primary); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; color:var(--color-ink); line-height:1.2}
small{font-size:12px}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px; border-radius:4px}

/* ---------- App layout ---------- */
.layout{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh}
.sidebar{
  background:var(--color-primary); color:#eaf2ec; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; padding:18px 14px;
}
.brand{display:flex; align-items:center; gap:10px; padding:6px 8px 18px}
.brand__mark{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--color-accent); color:#20321f; font-size:20px; flex:none;
}
.brand__name{font-family:var(--font-display); font-weight:700; font-size:18px; color:#fff}
.nav{display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1}
.nav__link{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radius);
  color:#cfe0d4; font-weight:500; font-size:14.5px; transition:background var(--tr),color var(--tr);
}
.nav__link i{font-size:19px}
.nav__link:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
.nav__link.is-active{background:var(--color-accent); color:#20321f}
.sidebar__foot{padding-top:12px; border-top:1px solid rgba(255,255,255,.14)}
.role-chip{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.02em;
  background:rgba(255,255,255,.12); color:#eaf2ec; padding:5px 10px; border-radius:99px;
}

.main{display:flex; flex-direction:column; min-width:0}
.topbar{
  display:flex; align-items:center; gap:14px; padding:14px 22px;
  background:var(--color-surface); border-bottom:1px solid var(--color-line);
  position:sticky; top:0; z-index:20;
}
.topbar__title{font-size:19px; font-weight:600; flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar__right{display:flex; align-items:center; gap:12px}
.usermenu{display:flex; align-items:center; gap:12px}
.usermenu__name{font-size:13px; color:var(--color-ink-soft); display:flex; align-items:center; gap:6px}
.content{padding:22px; flex:1; max-width:1180px; width:100%}
.pagefoot{padding:16px 22px; color:var(--color-ink-soft); font-size:12.5px; border-top:1px solid var(--color-line)}

.icon-btn{
  width:38px;height:38px;border-radius:var(--radius);border:1px solid var(--color-line);
  background:var(--color-surface); color:var(--color-ink); cursor:pointer; font-size:19px;
  display:grid; place-items:center; transition:background var(--tr),border-color var(--tr);
}
.icon-btn:hover{background:var(--color-bg); border-color:var(--color-accent)}
.only-mobile{display:none}
.scrim{display:none}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:14px; cursor:pointer;
  padding:10px 16px; border-radius:var(--radius); border:1px solid transparent;
  transition:transform var(--tr),background var(--tr),border-color var(--tr),box-shadow var(--tr);
}
.btn i{font-size:17px}
.btn--primary{background:var(--color-primary); color:#fff}
.btn--primary:hover{background:var(--color-primary-600); text-decoration:none}
.btn--accent{background:var(--color-accent); color:#20321f}
.btn--accent:hover{background:var(--color-accent-600); text-decoration:none}
.btn--ghost{background:var(--color-surface); color:var(--color-ink); border-color:var(--color-line)}
.btn--ghost:hover{border-color:var(--color-accent); text-decoration:none}
.btn--danger{background:var(--danger); color:#fff}
.btn--sm{padding:6px 11px; font-size:13px}
.btn--lg{padding:13px 22px; font-size:15px}
.btn--block{width:100%}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55; cursor:not-allowed}

/* ---------- Cards & passbook motif ---------- */
.card{
  background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow); margin-bottom:18px;
}
.card__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.card__title{font-size:16px; font-weight:600; display:flex; align-items:center; gap:9px}
.card__title i{color:var(--color-primary); font-size:20px}

/* Passbook card: thin dashed "perforation" top edge, ledger-style figures. */
.passbook{
  position:relative; background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-lg); padding:18px 18px 16px; box-shadow:var(--shadow);
  border-top:2px dashed var(--color-accent);
}
.passbook::before{
  content:""; position:absolute; top:-6px; left:14px; right:14px; height:10px;
  background:radial-gradient(circle at 6px 50%, transparent 0 3px, var(--color-surface) 3px) repeat-x;
  background-size:12px 10px; pointer-events:none;
}

/* KPI grid */
.kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px}
.kpi__k{display:flex; align-items:center; gap:8px; color:var(--color-ink-soft); font-size:13px; font-weight:500}
.kpi__k i{font-size:18px; color:var(--color-primary)}
.kpi__v{font-family:var(--font-display); font-weight:700; font-size:26px; margin-top:8px; letter-spacing:-.01em}
.kpi__foot{margin-top:6px; font-size:12px; color:var(--color-ink-soft)}
.kpi__v.num, .kpi__v .num{font-family:var(--font-display)} /* KPI numbers use display face */

.grid{display:grid; gap:16px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.cols-2{display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:start}

/* ---------- Tables / ledgers ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--color-line); border-radius:var(--radius-lg); background:var(--color-surface)}
.table{width:100%; border-collapse:collapse; font-size:14px; min-width:520px}
.table th,.table td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--color-line); white-space:nowrap}
.table thead th{
  background:var(--color-surface-2); color:var(--color-ink-soft); font-weight:600; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.03em; position:sticky; top:0;
}
.table tbody tr:hover{background:var(--color-primary-050)}
.table tbody tr:last-child td{border-bottom:none}
/* Ledger figures: mono, right-aligned so decimals line up like a passbook column. */
.num{font-family:var(--font-mono); font-weight:500; text-align:right; font-variant-numeric:tabular-nums}
th.num{text-align:right}
.table tfoot td{font-weight:700; border-top:2px solid var(--color-line); background:var(--color-surface-2)}
.table--ledger tbody tr:nth-child(even){background:var(--color-surface-2)}
.table--ledger tbody tr:nth-child(even):hover{background:var(--color-primary-050)}

/* ---------- Badges ---------- */
.badge{display:inline-block; font-size:12px; font-weight:600; padding:3px 10px; border-radius:99px; letter-spacing:.01em}
.badge--ok{background:var(--success-bg); color:var(--success)}
.badge--warn{background:var(--warning-bg); color:var(--warning)}
.badge--bad{background:var(--danger-bg); color:var(--danger)}
.badge--muted{background:var(--color-bg); color:var(--color-ink-soft); border:1px solid var(--color-line)}

/* ---------- Forms ---------- */
.form{display:flex; flex-direction:column; gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field__label{font-size:13px; font-weight:600; color:var(--color-ink)}
.input,select.input,textarea.input{
  width:100%; padding:10px 12px; font-family:var(--font-body); font-size:14.5px;
  color:var(--color-ink); background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius); transition:border-color var(--tr),box-shadow var(--tr);
}
.input:focus{border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(217,164,0,.18); outline:none}
textarea.input{min-height:90px; resize:vertical}
.input[type="file"]{padding:8px}
.hint{color:var(--color-ink-soft); font-size:12px}
.field--money .input{font-family:var(--font-mono); text-align:right}

.toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px; justify-content:space-between}
.toolbar__actions{display:flex; gap:10px; flex-wrap:wrap}
.filterbar{display:flex; gap:10px; flex-wrap:wrap; align-items:end}
.seg{display:flex; gap:6px; flex-wrap:wrap}

/* ---------- Alerts ---------- */
.alert{display:flex; align-items:center; gap:10px; padding:12px 15px; border-radius:var(--radius);
  border:1px solid var(--color-line); margin-bottom:14px; font-size:14px}
.alert i{font-size:19px; flex:none}
.alert--success{background:var(--success-bg); color:var(--success); border-color:transparent}
.alert--danger{background:var(--danger-bg); color:var(--danger); border-color:transparent}
.alert--warning{background:var(--warning-bg); color:var(--warning); border-color:transparent}
.alert--info{background:var(--info-bg); color:var(--color-primary); border-color:transparent}

/* ---------- Auth / hero ---------- */
.auth-shell{min-height:100vh; display:grid; place-items:center; padding:26px 16px;
  background:radial-gradient(1200px 600px at 50% -10%, var(--color-primary-050), var(--color-bg))}
.authcard{width:100%; max-width:420px; background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-lg); padding:28px; box-shadow:0 10px 30px rgba(20,83,45,.08)}
.authcard--wide{max-width:820px}
.authcard__head{text-align:center; margin-bottom:20px}
.authcard__head .brand__mark{margin:0 auto 12px; width:46px; height:46px; font-size:24px}
.authcard__head h1{font-size:23px}
.authcard__head p{color:var(--color-ink-soft); margin:6px 0 0; font-size:14px}
.authcard__foot{display:flex; justify-content:space-between; gap:12px; margin-top:16px; font-size:13.5px; flex-wrap:wrap}

.hero{max-width:760px; margin:0 auto; text-align:center; padding:40px 8px}
.hero__mark{width:64px;height:64px;border-radius:16px;background:var(--color-accent);color:#20321f;
  display:grid;place-items:center;font-size:34px;margin:0 auto 18px}
.hero__title{font-size:40px; color:var(--color-primary)}
.hero__sub{color:var(--color-ink-soft); font-size:16px; margin:12px auto 22px; max-width:560px}
.hero__cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.hero__cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px; text-align:left}
.mini__k{display:block; color:var(--color-ink-soft); font-size:13px; font-weight:600}
.mini__v{display:block; font-family:var(--font-display); font-weight:700; font-size:22px; margin-top:4px}
.mini__v small{font-family:var(--font-body); font-weight:500; font-size:12px; color:var(--color-ink-soft)}

/* ---------- Utilities ---------- */
.muted{color:var(--color-ink-soft)}
.text-ok{color:var(--success)} .text-bad{color:var(--danger)} .text-warn{color:var(--warning)}
.right{text-align:right} .center{text-align:center}
.stack{display:flex; flex-direction:column; gap:6px}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.between{justify-content:space-between}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.chartbox{position:relative; height:280px}
.empty{text-align:center; color:var(--color-ink-soft); padding:34px 16px}
.empty i{font-size:34px; display:block; margin-bottom:8px; color:var(--color-line)}
.def-list{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:14px}
.def-list dt{color:var(--color-ink-soft)}
.def-list dd{margin:0; font-weight:500}
.promissory{background:var(--color-surface-2); border:1px dashed var(--color-line); border-radius:var(--radius);
  padding:14px 16px; font-size:14px; color:var(--color-ink)}

/* ---------- Motion: staggered dashboard fade-in (max 4) ---------- */
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.stagger>*{opacity:0; animation:fadeUp .3s ease forwards}
.stagger>*:nth-child(1){animation-delay:0ms}
.stagger>*:nth-child(2){animation-delay:50ms}
.stagger>*:nth-child(3){animation-delay:100ms}
.stagger>*:nth-child(4){animation-delay:150ms}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed; z-index:40; left:0; top:0; width:264px; transform:translateX(-100%);
    transition:transform var(--tr)}
  .sidebar.is-open{transform:none}
  .only-mobile{display:grid}
  .scrim.is-open{display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:30}
  .kpi{grid-template-columns:repeat(2,1fr)}
  .cols-2{grid-template-columns:1fr}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .hero__cards{grid-template-columns:1fr}
  .usermenu__name{display:none}
}
@media (max-width:520px){
  .content{padding:16px}
  .kpi,.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .hero__title{font-size:30px}
  .authcard{padding:20px}
}
@media (max-width:360px){
  body{font-size:14px}
  .content{padding:12px}
  .btn{padding:9px 13px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
  .stagger>*{opacity:1}
}

/* ---------- Print (receipts/certs handled by FPDF; screen fallback) ---------- */
@media print{
  .sidebar,.topbar,.pagefoot,.toolbar,.btn{display:none!important}
  .layout{grid-template-columns:1fr}
  body{background:#fff}
}