/* ==========================================================================
   Greyscale Agric FMS — Design System
   World-class, enterprise UI built on the Greyscale brand:
   forest green, leaf green, harvest amber, earthy brown.
   ========================================================================== */

/* ---- 1. Design tokens --------------------------------------------------- */
:root {
    /* Brand — green ramp */
    --g-950:#0E211A; --g-900:#143026; --g-800:#1F4E3D; --g-700:#256B46;
    --g-600:#2E7D52; --g-500:#3FA34D; --g-400:#5FBF5A; --g-300:#8FD68A;
    --g-200:#C2E8BD; --g-100:#E3F4E0; --g-50:#F1FAEF;

    /* Brand — amber/harvest ramp */
    --a-700:#9A6A0C; --a-600:#C8890F; --a-500:#E8A317; --a-400:#F2B705; --a-300:#FFD45E; --a-100:#FFF1CC;

    /* Brand — earth/brown ramp */
    --e-700:#4A3517; --e-600:#6B4F2A; --e-500:#8A6A3E; --e-200:#D9C7AC;

    /* Neutral ink/surface ramp (warm-tinted) */
    --ink-900:#171E1A; --ink-800:#1F2421; --ink-700:#33403A; --ink-600:#4A5A50;
    --ink-500:#647265; --ink-400:#8A968C; --ink-300:#B4BDB6;
    --line:#E4ECE2; --line-strong:#D2DCCF;
    --surface:#FFFFFF; --surface-2:#FBFDFA; --surface-3:#F4F8F2;
    --bg:#F2F6EF; --bg-tint:#EAF2E7;

    /* Semantic */
    --primary:var(--g-800); --primary-600:var(--g-700); --primary-hover:var(--g-900);
    --accent:var(--a-500); --accent-hover:var(--a-600);
    --success:#2E8B57; --success-bg:#E7F5EC; --success-line:#BFE3CC;
    --warning:#B9810D; --warning-bg:#FDF3DC; --warning-line:#F0DDA6;
    --danger:#C0392B;  --danger-bg:#FCEBEA;  --danger-line:#F1C9C4;
    --info:#1F6F8B;    --info-bg:#E6F2F6;    --info-line:#BEDDE6;

    /* Typography */
    --font-sans:'Plus Jakarta Sans','Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
    --fs-xs:11.5px; --fs-sm:13px; --fs-base:14px; --fs-md:15px; --fs-lg:17px;
    --fs-xl:20px; --fs-2xl:25px; --fs-3xl:32px; --fs-4xl:40px;
    --lh-tight:1.2; --lh-normal:1.5; --lh-relaxed:1.7;

    /* Spacing scale */
    --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
    --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px;

    /* Radii */
    --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;

    /* Elevation */
    --sh-xs:0 1px 2px rgba(20,48,38,.06);
    --sh-sm:0 2px 6px rgba(20,48,38,.08);
    --sh-md:0 8px 20px -8px rgba(20,48,38,.18);
    --sh-lg:0 18px 40px -18px rgba(20,48,38,.28);
    --sh-xl:0 30px 60px -28px rgba(20,48,38,.34);

    /* Motion */
    --ease:cubic-bezier(.4,0,.2,1); --dur:.18s;

    /* Layout */
    --sidebar-w:264px; --sidebar-w-collapsed:76px; --topbar-h:64px;
}

/* ---- 2. Reset ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
    margin:0; font-family:var(--font-sans); font-size:var(--fs-base);
    line-height:var(--lh-normal); color:var(--ink-800); background:var(--bg);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}
input,select,textarea{font-family:inherit;font-size:inherit}
svg{display:block}
::selection{background:var(--g-200);color:var(--g-900)}

/* Scrollbar */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-300)}

/* ---- 3. Typography utilities ------------------------------------------- */
.h1{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.02em;line-height:var(--lh-tight)}
.h2{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;line-height:var(--lh-tight)}
.h3{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em}
.h4{font-size:var(--fs-lg);font-weight:700}
.text-sm{font-size:var(--fs-sm)} .text-xs{font-size:var(--fs-xs)}
.text-muted{color:var(--ink-500)} .text-faint{color:var(--ink-400)}
.text-primary{color:var(--primary)} .text-success{color:var(--success)}
.text-danger{color:var(--danger)} .text-warning{color:var(--warning)}
.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}
.mono{font-family:var(--font-mono)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uppercase{text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-xs);font-weight:700}

/* ---- 4. Layout utilities ----------------------------------------------- */
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.gap-1{gap:var(--s-1)}
.gap-2{gap:var(--s-2)}.gap-3{gap:var(--s-3)}.gap-4{gap:var(--s-4)}.gap-5{gap:var(--s-5)}.gap-6{gap:var(--s-6)}
.w-full{width:100%}.hidden{display:none}
.mt-1{margin-top:var(--s-1)}.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}
.mb-1{margin-bottom:var(--s-1)}.mb-2{margin-bottom:var(--s-2)}.mb-3{margin-bottom:var(--s-3)}.mb-4{margin-bottom:var(--s-4)}.mb-6{margin-bottom:var(--s-6)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-4)}

/* ---- 5. Buttons --------------------------------------------------------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
    padding:10px 16px;border:1px solid transparent;border-radius:var(--r-sm);
    font-size:var(--fs-sm);font-weight:600;line-height:1;white-space:nowrap;
    transition:all var(--dur) var(--ease);user-select:none;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--sh-xs)}
.btn-primary:hover{background:var(--primary-hover);box-shadow:var(--sh-sm)}
.btn-accent{background:var(--accent);color:#3a2a00}
.btn-accent:hover{background:var(--accent-hover);color:#fff}
.btn-outline{background:var(--surface);border-color:var(--line-strong);color:var(--ink-700)}
.btn-outline:hover{border-color:var(--g-400);color:var(--primary);background:var(--g-50)}
.btn-ghost{background:transparent;color:var(--ink-600)}
.btn-ghost:hover{background:var(--surface-3);color:var(--ink-800)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(.94)}
.btn-success{background:var(--success);color:#fff}
.btn-sm{padding:7px 12px;font-size:var(--fs-xs)}
.btn-lg{padding:13px 22px;font-size:var(--fs-md)}
.btn-icon{padding:9px;width:38px;height:38px}
.btn-block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ---- 6. Cards ----------------------------------------------------------- */
.card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--sh-xs);overflow:hidden;
}
.card-pad{padding:var(--s-6)}
.card-head{
    padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
}
.card-head h3{font-size:var(--fs-lg);font-weight:700}
.card-body{padding:var(--s-6)}
.card-foot{padding:var(--s-4) var(--s-6);border-top:1px solid var(--line);background:var(--surface-2)}
.card-hover{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}

/* ---- 7. Stat tiles (dashboard KPIs) ------------------------------------ */
.stat{
    position:relative;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--sh-xs);overflow:hidden;
}
.stat::after{content:'';position:absolute;inset:0 0 auto auto;width:120px;height:120px;
    background:radial-gradient(circle at top right,var(--g-100),transparent 70%);opacity:.7;pointer-events:none}
.stat-ico{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
    background:var(--g-100);color:var(--g-700);margin-bottom:var(--s-4)}
.stat-ico svg{width:22px;height:22px}
.stat-ico.amber{background:var(--a-100);color:var(--a-600)}
.stat-ico.earth{background:var(--e-200);color:var(--e-600)}
.stat-ico.info{background:var(--info-bg);color:var(--info)}
.stat-value{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink-900)}
.stat-label{font-size:var(--fs-sm);color:var(--ink-500);margin-top:var(--s-2);font-weight:500}
.stat-delta{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;margin-top:var(--s-3);
    padding:3px 8px;border-radius:var(--r-full)}
.stat-delta.up{background:var(--success-bg);color:var(--success)}
.stat-delta.down{background:var(--danger-bg);color:var(--danger)}

/* ---- 8. Badges / status pills ------------------------------------------ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-full);
    font-size:var(--fs-xs);font-weight:700;line-height:1.4;white-space:nowrap}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.badge--success{background:var(--success-bg);color:var(--success)}
.badge--danger{background:var(--danger-bg);color:var(--danger)}
.badge--warning{background:var(--warning-bg);color:var(--warning)}
.badge--info{background:var(--info-bg);color:var(--info)}
.badge--primary{background:var(--g-100);color:var(--g-700)}
.badge--muted{background:var(--surface-3);color:var(--ink-500)}
.badge--accent{background:var(--a-100);color:var(--a-700)}
.badge.no-dot::before{display:none}

/* ---- 9. Forms ----------------------------------------------------------- */
.field{margin-bottom:var(--s-5)}
.label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink-700);margin-bottom:var(--s-2)}
.label .req{color:var(--danger);margin-left:2px}
.input,.select,.textarea{
    width:100%;padding:10px 13px;background:var(--surface-2);border:1px solid var(--line-strong);
    border-radius:var(--r-sm);font-size:var(--fs-base);color:var(--ink-800);transition:all var(--dur) var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-400)}
.input:focus,.select:focus,.textarea:focus{
    outline:none;border-color:var(--g-500);background:#fff;box-shadow:0 0 0 3px rgba(63,163,77,.14)
}
.input.is-invalid,.select.is-invalid,.textarea.is-invalid{border-color:var(--danger);background:var(--danger-bg)}
.textarea{min-height:96px;resize:vertical;line-height:var(--lh-normal)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23647265' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.field-hint{font-size:var(--fs-xs);color:var(--ink-500);margin-top:var(--s-2)}
.field-error{font-size:var(--fs-xs);color:var(--danger);margin-top:var(--s-2);font-weight:600}
.input-group{display:flex;align-items:stretch}
.input-group .input{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.input-group .addon{display:flex;align-items:center;padding:0 13px;background:var(--surface-3);
    border:1px solid var(--line-strong);border-left:none;border-radius:0 var(--r-sm) var(--r-sm) 0;
    font-size:var(--fs-sm);color:var(--ink-500)}
.checkbox{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);cursor:pointer}
.checkbox input{width:17px;height:17px;accent-color:var(--g-600)}

/* ---- 10. Tables --------------------------------------------------------- */
.table-wrap{overflow-x:auto;border-radius:var(--r-md)}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table thead th{
    text-align:left;padding:12px 16px;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
    letter-spacing:.05em;color:var(--ink-500);background:var(--surface-3);border-bottom:1px solid var(--line);
    white-space:nowrap;position:sticky;top:0;
}
.table tbody td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink-700);vertical-align:middle}
.table tbody tr{transition:background var(--dur) var(--ease)}
.table tbody tr:hover{background:var(--g-50)}
.table tbody tr:last-child td{border-bottom:none}
.table .col-actions{text-align:right;white-space:nowrap}
.table-link{color:var(--primary);font-weight:600}
.table-link:hover{text-decoration:underline}

/* ---- 11. Avatars -------------------------------------------------------- */
.avatar{width:38px;height:38px;border-radius:var(--r-full);background:var(--g-600);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-sm);flex-shrink:0;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.sm{width:30px;height:30px;font-size:var(--fs-xs)}
.avatar.lg{width:56px;height:56px;font-size:var(--fs-lg)}
.avatar.amber{background:var(--a-500);color:#3a2a00}

/* ---- 12. Alerts / flash ------------------------------------------------- */
.alert{display:flex;gap:var(--s-3);padding:13px 16px;border-radius:var(--r-sm);font-size:var(--fs-sm);
    border:1px solid;margin-bottom:var(--s-4)}
.alert svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.alert-success{background:var(--success-bg);border-color:var(--success-line);color:#1c6b3f}
.alert-danger{background:var(--danger-bg);border-color:var(--danger-line);color:#8c2c20}
.alert-warning{background:var(--warning-bg);border-color:var(--warning-line);color:#8a5d09}
.alert-info{background:var(--info-bg);border-color:var(--info-line);color:#185a72}

/* ---- 13. Toasts --------------------------------------------------------- */
.toast-stack{position:fixed;top:18px;right:18px;z-index:1200;display:flex;flex-direction:column;gap:10px;max-width:360px}
.toast{display:flex;gap:var(--s-3);align-items:flex-start;padding:13px 15px;border-radius:var(--r-md);
    background:var(--surface);box-shadow:var(--sh-lg);border:1px solid var(--line);
    animation:toast-in .25s var(--ease);font-size:var(--fs-sm)}
.toast .bar{width:4px;align-self:stretch;border-radius:99px;flex-shrink:0}
.toast.success .bar{background:var(--success)} .toast.error .bar{background:var(--danger)}
.toast.warning .bar{background:var(--warning)} .toast.info .bar{background:var(--info)}
@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ---- 14. Modals / drawers ---------------------------------------------- */
.overlay{position:fixed;inset:0;background:rgba(15,33,26,.5);backdrop-filter:blur(2px);z-index:1100;
    display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:.2s}
.overlay.open{opacity:1;visibility:visible}
.modal{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-xl);width:100%;max-width:560px;
    max-height:90vh;overflow:auto;transform:scale(.96);transition:transform .2s var(--ease)}
.overlay.open .modal{transform:scale(1)}
.modal-head{padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.modal-body{padding:var(--s-6)} .modal-foot{padding:var(--s-4) var(--s-6);border-top:1px solid var(--line);
    display:flex;justify-content:flex-end;gap:var(--s-3);background:var(--surface-2)}

/* ---- 15. Tabs ----------------------------------------------------------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:var(--s-6);overflow-x:auto}
.tab{padding:11px 16px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-500);border-bottom:2px solid transparent;
    white-space:nowrap;transition:all var(--dur) var(--ease)}
.tab:hover{color:var(--ink-800)}
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ---- 16. Stepper (workflows/onboarding) -------------------------------- */
.stepper{display:flex;align-items:center;gap:0;margin-bottom:var(--s-6);flex-wrap:wrap}
.step{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);color:var(--ink-400)}
.step .dot{width:30px;height:30px;border-radius:50%;border:2px solid var(--line-strong);display:flex;
    align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-xs);background:var(--surface)}
.step.done .dot{background:var(--success);border-color:var(--success);color:#fff}
.step.active{color:var(--primary)} .step.active .dot{border-color:var(--primary);color:var(--primary)}
.step-line{width:48px;height:2px;background:var(--line-strong);margin:0 var(--s-2)}
.step.done + .step-line{background:var(--success)}

/* ---- 17. Empty / skeleton ---------------------------------------------- */
.empty{text-align:center;padding:var(--s-9) var(--s-6);color:var(--ink-500)}
.empty-ico{width:64px;height:64px;border-radius:var(--r-lg);background:var(--surface-3);display:flex;
    align-items:center;justify-content:center;margin:0 auto var(--s-4);color:var(--ink-300)}
.empty-ico svg{width:30px;height:30px}
.empty h4{font-size:var(--fs-lg);color:var(--ink-700);margin-bottom:var(--s-2)}
.skeleton{background:linear-gradient(90deg,var(--surface-3) 25%,#eef3ec 50%,var(--surface-3) 75%);
    background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---- 18. Misc ----------------------------------------------------------- */
.divider{height:1px;background:var(--line);margin:var(--s-5) 0;border:none}
.dot-sep::before{content:'·';margin:0 var(--s-2);color:var(--ink-300)}
.kbd{font-family:var(--font-mono);font-size:11px;padding:2px 6px;border:1px solid var(--line-strong);
    border-radius:var(--r-xs);background:var(--surface-2);color:var(--ink-500)}
.pill-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-full);
    background:var(--g-50);border:1px solid var(--g-200);color:var(--g-700);font-size:var(--fs-xs);font-weight:600}
.progress{height:8px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--g-500),var(--g-400));border-radius:99px}

/* ---- 19. Responsive helpers -------------------------------------------- */
@media (max-width:1024px){
    .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
    .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
    .hide-mobile{display:none!important}
    .card-pad,.card-body{padding:var(--s-4)}
}