/* ===== Farmslim — design system (clean / mature) ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#F6F7F9; --surface:#FFFFFF; --surface-2:#FBFCFD;
  --border:#E7EAEF; --border-2:#DBE0E6;
  --ink:#16202E; --ink-2:#586273; --ink-3:#8A93A1;
  --primary:#0F5C72; --primary-700:#0B485A; --primary-weak:#EAF1F3;
  --accent:#1F9D63; --accent-700:#178052; --accent-weak:#E8F4ED;
  --amber:#8A5E14; --amber-weak:#FBF0D9;
  --blue:#345B96; --blue-weak:#E9EEF8;
  --violet:#534AA0; --violet-weak:#ECE9F8;
  --red:#A23F2C; --red-weak:#F7E7E2;
  --sh-sm:0 1px 2px rgba(16,24,40,.05);
  --sh:0 1px 3px rgba(16,24,40,.07),0 1px 2px rgba(16,24,40,.04);
  --sh-md:0 6px 20px rgba(16,24,40,.08);
  --r:10px; --r-sm:8px;
  /* back-compat aliases (older inline styles) */
  --petrol:var(--primary); --teal:var(--primary); --green:var(--accent); --green-l:#4FC487;
  --muted:var(--ink-2); --line:var(--border); --soft:var(--primary-weak); --soft2:var(--accent-weak);
  --card:var(--surface); --warn:var(--red); --shadow:var(--sh); --shadow-sm:var(--sh-sm); --radius:var(--r);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);
  background:var(--bg);line-height:1.5;font-size:14px;-webkit-font-smoothing:antialiased;letter-spacing:-0.006em}
a{color:var(--primary);text-decoration:none}
h1,h2,h3,h4{margin:0 0 .4em;font-weight:600;letter-spacing:-0.02em;color:var(--ink)}
.muted{color:var(--ink-3)} .small{font-size:12.5px}

/* ---- brand / logo ---- */
.brand{display:flex;align-items:center;gap:11px}
.emblem{width:34px;height:34px;flex:none}
.wordmark{font-family:'Poppins','Inter',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.wordmark .f{color:var(--ink)} .wordmark .s{color:var(--primary)}
.tagline{font-size:9px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;margin-top:3px;font-weight:500}

/* ---- top bar ---- */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);height:60px;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40}
.portal-tag{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  padding:4px 10px;border-radius:999px;margin-left:12px;border:1px solid var(--border)}
.tag-med{background:var(--primary-weak);color:var(--primary)}
.tag-cli{background:var(--blue-weak);color:var(--blue)}
.tag-far{background:var(--accent-weak);color:var(--accent-700)}
.tag-adm{background:#EEF0F3;color:var(--ink-2)}
.topbar .right{display:flex;align-items:center;gap:16px;font-size:13.5px;color:var(--ink-2)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-2);
  color:var(--ink-2);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12.5px}
.backlink{font-size:13px;color:var(--ink-3)} .backlink:hover{color:var(--ink)}

/* ---- app shell ---- */
.shell{display:flex;min-height:calc(100vh - 60px)}
.sidebar{width:244px;background:var(--surface);border-right:1px solid var(--border);padding:16px 12px;flex:none}
.sidebar .grp{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:600;margin:18px 10px 6px}
.navitem{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;color:var(--ink-2);
  font-size:14px;font-weight:500;cursor:pointer;margin-bottom:1px;transition:.12s}
.navitem:hover{background:var(--surface-2);color:var(--ink)}
.navitem.active{background:var(--primary-weak);color:var(--primary);font-weight:600}
.navitem .ic{display:inline-flex;color:var(--ink-3)}
.navitem.active .ic{color:var(--primary)}
.ic svg,.iconbtn svg{width:18px;height:18px;display:block;stroke-width:1.75}
.content{flex:1;padding:28px 32px;max-width:1200px;width:100%}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.page-head h1{font-size:22px}

/* ---- cards / grid ---- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--sh-sm)}
.card h3{font-size:15px;font-weight:600}
.stat{font-size:27px;font-weight:680;color:var(--ink);line-height:1.1;letter-spacing:-.025em}
.stat.green{color:var(--accent-700)}
.stat-label{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:8px}
.kicker{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:600;margin-bottom:7px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:var(--r-sm);
  padding:9px 15px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:.13s;letter-spacing:-.01em}
.btn svg{width:16px;height:16px;stroke-width:2}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-700)}
.btn-green{background:var(--accent);color:#fff}.btn-green:hover{background:var(--accent-700)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--border-2)}.btn-ghost:hover{border-color:var(--ink-3);background:var(--surface-2)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#0b1422}
.btn-lg{padding:12px 22px;font-size:15px}
.btn-block{width:100%;justify-content:center}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;letter-spacing:-.01em}
.b-wait{background:var(--amber-weak);color:var(--amber)} .b-paid{background:var(--accent-weak);color:var(--accent-700)}
.b-sep{background:var(--blue-weak);color:var(--blue)} .b-sent{background:var(--violet-weak);color:var(--violet)}
.b-done{background:var(--accent-weak);color:var(--accent-700)} .b-canc{background:var(--red-weak);color:var(--red)}

/* ---- tables ---- */
table.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.tbl th{background:var(--surface-2);color:var(--ink-3);text-align:left;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.05em;font-weight:600;padding:11px 16px;border-bottom:1px solid var(--border)}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--ink)}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--surface-2)}

/* ---- forms ---- */
label.fld{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:14px 0 6px}
input,select,textarea{width:100%;padding:9px 12px;border:1px solid var(--border-2);border-radius:var(--r-sm);
  font-family:inherit;font-size:14px;background:#fff;color:var(--ink);transition:.12s}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-weak)}
.inline{display:flex;gap:14px;flex-wrap:wrap}.inline>*{flex:1;min-width:160px}

/* ---- split summary (dark refined panel) ---- */
.split{background:var(--ink);color:#fff;border-radius:var(--r);padding:20px;border:1px solid #0c1422}
.split h3{color:#fff;font-size:14px;margin-bottom:12px}
.split .row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:13.5px;color:#C5CCD6}
.split .row:last-child{border-bottom:none}
.split .row .v{font-weight:600;color:#fff}
.split .total{font-size:19px;font-weight:700;letter-spacing:-.02em}
.split .comm{color:#5FD39B} .split .fee{color:#F0A593}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);padding:5px 11px;border-radius:999px;font-size:12.5px;margin-top:10px;color:#C5CCD6}
.chip b{color:#fff}

/* ---- product / list rows ---- */
.prod{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--border)}
.prod:last-child{border-bottom:none}
.ico{width:38px;height:38px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-weight:600;font-size:13px;flex:none}
.ico svg{width:18px;height:18px}
.qty{display:flex;align-items:center;gap:9px}
.qty button{width:28px;height:28px;border-radius:7px;border:1px solid var(--border-2);background:#fff;font-size:15px;cursor:pointer;color:var(--ink-2)}
.qty button:hover{border-color:var(--ink-3)}

/* ---- misc ---- */
.divider{height:1px;background:var(--border);margin:20px 0}
.pill-row{display:flex;gap:9px;flex-wrap:wrap}
.tabbar{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:22px}
.tab{padding:10px 16px;cursor:pointer;font-weight:600;font-size:14px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink-2)}
.tab.active{color:var(--primary);border-color:var(--primary)}
.hidden{display:none}
.note{background:var(--primary-weak);border:1px solid #CFE0E6;border-radius:var(--r-sm);padding:13px 15px;font-size:13px;color:#2a5564}
.receipt-up{border:1.5px dashed var(--border-2);border-radius:var(--r-sm);padding:22px;text-align:center;color:var(--ink-3);cursor:pointer;font-size:13.5px;transition:.12s}
.receipt-up:hover{border-color:var(--primary);background:var(--surface-2)}
.receipt-up svg{width:22px;height:22px;color:var(--ink-3);margin-bottom:6px}
.flash{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;
  border-radius:var(--r-sm);box-shadow:var(--sh-md);font-weight:500;font-size:13.5px;opacity:0;pointer-events:none;transition:.25s;z-index:100}
.flash.show{opacity:1}
@media(max-width:860px){.shell{flex-direction:column}.sidebar{width:100%;display:flex;overflow-x:auto;gap:4px}.sidebar .grp{display:none}.g2,.g3,.g4{grid-template-columns:1fr}.content{padding:20px}}