/* ============================================================
   Lapa · Madara MES — shared design system (plain CSS)
   Botanical / natural-cosmetics identity. Used by every domain
   page so each HTML file stays lean (DDD shared kernel).
   ============================================================ */

:root{
  --paper:#F5F1E8; --cream:#FBF8F1; --card:#FFFFFF;
  --ink:#25301E; --ink2:#5E6553; --ink3:#8A8F7E;
  --line:#E7E1D3; --line2:#EFEADF;
  --sage50:#F1F5EA; --sage100:#E3EBD7; --sage200:#C8D8B7; --sage300:#A6C08E;
  --sage400:#84A46A; --sage500:#688A4D; --sage600:#4F6E3A; --sage700:#3D552E; --sage900:#26331E;
  --fresh:#6FA043; --freshbg:#E7F1D8; --freshink:#3D5A22;
  --amber:#C2872F; --amberbg:#F5E7CD; --amberink:#7A5414;
  --clay:#BB553C; --claybg:#F6E0D8; --clayink:#7E3322;
  --honey:#E3AE4B;
  --sky:#4F8295; --skybg:#DCE9ED; --skyink:#2C5360;
  --plum:#7A5B86; --plumbg:#ECE2F0; --plumink:#4D3357;
  --sb-w:264px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Outfit',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
.font-display{ font-family:'Fraunces',serif; }
.font-mono{ font-family:'DM Mono',ui-monospace,monospace; }
a{ color:inherit; text-decoration:none; }

/* ---------- atmosphere ---------- */
.botanical{
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(132,164,106,.30), transparent 55%),
    radial-gradient(110% 80% at 100% 0%, rgba(79,130,149,.16), transparent 50%),
    radial-gradient(90% 90% at 50% 120%, rgba(227,174,75,.14), transparent 55%),
    #EFEADC;
}
.grain{ position:relative; }
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* ---------- app shell (topbar + sidebar) ---------- */
.app{ display:flex; min-height:100vh; }
.sidebar{
  width:var(--sb-w); flex:0 0 var(--sb-w); position:sticky; top:0; height:100vh;
  background:linear-gradient(178deg,#2c3a23,#212d1a); color:#E7F1D8;
  display:flex; flex-direction:column; overflow-y:auto; z-index:30;
}
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:6px; }
.brand{ display:flex; align-items:center; gap:.65rem; padding:1.15rem 1.2rem; border-bottom:1px solid rgba(255,255,255,.08); }
.brand .mark{ display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--sage600); color:var(--cream); box-shadow:0 8px 18px -10px rgba(0,0,0,.6); }
.nav-group{ padding:.85rem 0 .25rem; }
.nav-group h4{ margin:0; padding:.2rem 1.25rem .45rem; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(231,241,216,.42); font-weight:600; }
.nav-link{
  display:flex; align-items:center; gap:.7rem; margin:1px .6rem; padding:.55rem .7rem; border-radius:12px;
  font-size:14px; color:rgba(231,241,216,.78); transition:background .18s,color .18s; cursor:pointer; position:relative;
}
.nav-link svg{ flex:0 0 18px; opacity:.7; }
.nav-link:hover{ background:rgba(255,255,255,.07); color:#fff; }
.nav-link.active{ background:rgba(132,164,106,.28); color:#fff; }
.nav-link.active::before{ content:""; position:absolute; left:-6px; top:18%; bottom:18%; width:3px; border-radius:3px; background:var(--honey); }
.nav-link .badge{ margin-left:auto; font-family:'DM Mono',monospace; font-size:10px; background:rgba(227,174,75,.22); color:var(--honey); padding:1px 7px; border-radius:99px; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 1.5rem; background:rgba(245,241,232,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.crumb{ display:flex; align-items:center; gap:.5rem; font-size:13px; color:var(--ink3); }
.crumb b{ color:var(--ink); font-weight:600; }
.content{ padding:1.6rem 1.6rem 3rem; max-width:1320px; width:100%; margin:0 auto; }
@media(max-width:860px){
  .sidebar{ position:fixed; left:-300px; transition:left .25s; box-shadow:0 0 60px rgba(0,0,0,.4); }
  .sidebar.open{ left:0; }
  :root{ --sb-w:0px; }
  .content{ padding:1.1rem; }
}

/* persona / role switcher */
.persona{ display:flex; align-items:center; gap:.6rem; padding:.3rem .3rem .3rem .35rem; border-radius:99px; border:1px solid var(--line); background:var(--card); cursor:pointer; transition:box-shadow .2s; }
.persona:hover{ box-shadow:var(--soft,0 8px 24px -12px rgba(37,48,30,.18)); }
.avatar{ display:grid; place-items:center; width:32px; height:32px; border-radius:99px; font-size:12px; font-weight:600; color:var(--cream); background:var(--sage600); }
.role-menu{ position:absolute; right:0; top:calc(100% + 8px); width:300px; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 48px -20px rgba(37,48,30,.34); padding:.5rem; z-index:60; }
.role-opt{ display:flex; align-items:center; gap:.7rem; padding:.6rem .65rem; border-radius:12px; cursor:pointer; transition:background .15s; }
.role-opt:hover{ background:var(--sage50); }
.role-opt.sel{ background:var(--sage100); }
.role-logout{ display:flex; align-items:center; gap:.7rem; margin-top:.35rem; padding:.6rem .65rem; border-top:1px solid var(--line2); border-radius:0 0 12px 12px; cursor:pointer; transition:background .15s; }
.role-logout:hover{ background:var(--claybg); }
.role-logout .lo-ic{ display:grid; place-items:center; width:32px; height:32px; border-radius:99px; background:var(--claybg); color:var(--clayink); }

/* font-size / UI scale control (3 sizes, scales the whole app) */
.fontscale{ display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line); background:var(--card); border-radius:99px; }
.fontscale button{ display:grid; place-items:center; width:27px; height:27px; padding:0; border:none; background:transparent; border-radius:99px; cursor:pointer; color:var(--ink3); font-family:'Fraunces',serif; font-weight:600; line-height:1; transition:background .15s,color .15s; }
.fontscale button:hover{ color:var(--ink); background:var(--sage50); }
.fontscale button.on{ background:var(--sage600); color:var(--cream); }

/* ---------- surfaces & components ---------- */
.surface{ background:var(--card); border:1px solid var(--line); border-radius:1.4rem; box-shadow:0 1px 2px rgba(37,48,30,.04),0 8px 24px -12px rgba(37,48,30,.12); }
.surface-soft{ background:var(--cream); border:1px solid var(--line); border-radius:1.4rem; }
.pad{ padding:1.25rem; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:.9rem; flex-wrap:wrap; }

.chip{ display:inline-flex; align-items:center; gap:.4rem; border-radius:99px; border:1px solid var(--line); padding:.25rem .7rem; font-size:12px; font-weight:500; letter-spacing:.01em; }
.dot{ width:7px; height:7px; border-radius:99px; display:inline-block; }

/* base layout applies to every variant — modifiers can be used without ".btn" */
.btn,.btn-primary,.btn-ghost,.btn-disabled{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-align:center;
  border-radius:14px; padding:0 1.15rem; min-height:2.7rem; line-height:1;
  font-weight:500; font-size:14px; font-family:inherit; cursor:pointer; user-select:none;
  border:1px solid transparent; transition:all .18s; text-decoration:none;
}
.btn:active,.btn-primary:active,.btn-ghost:active{ transform:scale(.98); }
.btn-primary{ background:var(--sage600); color:var(--cream); }
.btn-primary:hover{ background:var(--sage700); }
.btn-ghost{ background:var(--card); color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--sage50); }
.btn-disabled{ background:var(--line2); color:var(--ink3); cursor:not-allowed; }
.btn-lg{ min-height:3.3rem; font-size:16px; padding:0 1.5rem; border-radius:16px; }
.btn-sm{ min-height:2.1rem; font-size:13px; padding:0 .8rem; border-radius:11px; }

.field{ border-radius:14px; border:1px solid var(--line); background:var(--cream); padding:.65rem .9rem; color:var(--ink); font-family:inherit; font-size:14px; width:100%; }
.field:focus{ outline:none; box-shadow:0 0 0 3px var(--sage200); }

/* status pills (line / task / equipment states) */
.st{ display:inline-flex; align-items:center; gap:.4rem; border-radius:99px; padding:.18rem .6rem; font-size:11.5px; font-weight:600; border:1px solid transparent; white-space:nowrap; }
.st-ready,.st-ok,.st-done{ background:var(--freshbg); color:var(--freshink); border-color:rgba(111,160,67,.3); }
.st-run,.st-running{ background:var(--sage50); color:var(--sage700); border-color:var(--sage300); }
.st-qc,.st-tight,.st-hold{ background:var(--amberbg); color:var(--amberink); border-color:rgba(194,135,47,.34); }
.st-over,.st-stop,.st-reject,.st-late{ background:var(--claybg); color:var(--clayink); border-color:rgba(187,85,60,.34); }
.st-new,.st-idle{ background:var(--cream); color:var(--ink2); border-color:var(--line); }
.st-wash{ background:var(--skybg); color:var(--skyink); border-color:rgba(79,130,149,.3); }
.st-plan{ background:var(--plumbg); color:var(--plumink); border-color:rgba(122,91,134,.3); }

/* KPI / stat block */
.kpi{ background:var(--card); border:1px solid var(--line); border-radius:1.2rem; padding:1.05rem 1.1rem; position:relative; overflow:hidden; }
.kpi .lbl{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); }
.kpi .val{ font-family:'Fraunces',serif; font-weight:600; font-size:1.9rem; line-height:1.05; margin-top:.25rem; }
.kpi .sub{ font-size:12.5px; color:var(--ink2); margin-top:.2rem; }
.kpi .glow{ position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:99px; opacity:.16; filter:blur(6px); }
.delta-up{ color:var(--fresh); } .delta-down{ color:var(--clay); }

/* bars */
.bar{ height:8px; border-radius:99px; background:var(--line); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:99px; background:var(--sage500); }

/* tables */
table.grid{ width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
table.grid th{ text-align:left; font-weight:600; color:var(--ink3); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; padding:.5rem .7rem; border-bottom:1px solid var(--line); }
table.grid td{ padding:.62rem .7rem; border-bottom:1px solid var(--line2); }
table.grid tr:last-child td{ border-bottom:none; }
table.grid tbody tr:hover{ background:var(--cream); }

/* heatmap */
.hm{ font-family:'DM Mono',monospace; font-size:11px; }
.hm-cell{ border-radius:7px; padding:.42rem 0; text-align:center; font-weight:500; color:#fff; transition:transform .15s; cursor:default; }
.hm-cell:hover{ transform:scale(1.08); }
.lv-ok{ background:rgba(111,160,67,.82); }
.lv-good{ background:rgba(132,164,106,.85); }
.lv-tight{ background:rgba(227,174,75,.9); color:#5b3f10; }
.lv-warn{ background:rgba(194,135,47,.92); }
.lv-over{ background:rgba(187,85,60,.94); }
.lv-empty{ background:var(--line2); color:var(--ink3); }

/* timeline (batch record) */
.timeline{ position:relative; }
.timeline::before{ content:""; position:absolute; left:15px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--sage200),var(--line)); }
.tl-item{ position:relative; padding-left:2.4rem; }
.tl-dot{ position:absolute; left:2px; top:1px; display:grid; place-items:center; width:28px; height:28px; border-radius:99px; font-size:10px; font-weight:600; box-shadow:0 0 0 4px var(--card); }

/* device frame (operator tablet) */
.device{ background:linear-gradient(160deg,#2c3a23,#1c2717); padding:14px; border-radius:34px; position:relative; }
.device-screen{ border-radius:22px; overflow:hidden; background:#FBF8F1; position:relative; }

/* misc */
.scroll-soft::-webkit-scrollbar{ width:8px; height:8px; }
.scroll-soft::-webkit-scrollbar-thumb{ background:#D7D0BF; border-radius:8px; }
.scroll-soft::-webkit-scrollbar-track{ background:transparent; }
.muted{ color:var(--ink3); }
.divider{ height:1px; background:var(--line); border:none; margin:1rem 0; }
.hairline{ border:1px solid var(--line); }

/* ---------- animations ---------- */
@keyframes rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.rise{ animation:rise .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fadein{ from{opacity:0;} to{opacity:1;} }
.fadein{ animation:fadein .5s ease both; }
@keyframes pop{ 0%{transform:scale(.6); opacity:0;} 60%{transform:scale(1.08);} 100%{transform:scale(1); opacity:1;} }
.pop{ animation:pop .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes evt{ from{opacity:0; transform:translateX(-10px) scale(.98);} to{opacity:1; transform:translateX(0) scale(1);} }
.evt-in{ animation:evt .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes pulsering{ 0%{box-shadow:0 0 0 0 rgba(227,174,75,.5);} 70%{box-shadow:0 0 0 12px rgba(227,174,75,0);} 100%{box-shadow:0 0 0 0 rgba(227,174,75,0);} }
.pulse-gold{ animation:pulsering 2.2s infinite; }
.d1{ animation-delay:.06s; } .d2{ animation-delay:.12s; } .d3{ animation-delay:.18s; } .d4{ animation-delay:.24s; } .d5{ animation-delay:.3s; } .d6{ animation-delay:.36s; }

/* grid helpers (small set, so pages don't need full Tailwind for layout) */
.row{ display:flex; gap:1rem; }
.col{ display:flex; flex-direction:column; gap:1rem; }
.wrap{ flex-wrap:wrap; }
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media(max-width:1100px){ .grid4{ grid-template-columns:repeat(2,1fr); } .grid3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:680px){ .grid2,.grid3,.grid4{ grid-template-columns:1fr; } }