/* ================================================================
   Dailyfoods CRM — Design System v1.0
   Plus Jakarta Sans · Turuncu #F37A20 · Yeşil #7DBA30
   ================================================================ */
:root {
  --or:#F37A20; --or-h:#e06912; --or-l:#fef1e8; --or-m:rgba(243,122,32,.12);
  --gr:#7DBA30; --gr-h:#6ca327; --gr-l:#f2f8eb;
  --rd:#ef4444; --rd-l:#fef2f2;
  --yw:#f59e0b; --yw-l:#fffbeb;
  --bl:#3b82f6; --bl-l:#eff6ff;
  --bg:#F8FAFC; --sur:#FFFFFF;
  --t1:#0F172A; --t2:#64748B; --t3:#94A3B8;
  --bdr:#E2E8F0; --bdr2:#F1F5F9;
  --sw:272px; --hh:66px; --rad:14px;
  --sh:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04);
  --sh-md:0 4px 16px rgba(0,0,0,.08),0 12px 40px rgba(0,0,0,.05);
  --tr:all .22s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; }
body { font-family:'Plus Jakarta Sans',sans-serif; background:var(--bg); color:var(--t1); display:flex; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
input,select,textarea,button { font-family:inherit; font-size:inherit; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:4px; }
::-webkit-scrollbar-track { background:transparent; }

/* ── OVERLAY ── */
.ov { position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:95; opacity:0; visibility:hidden; transition:var(--tr); backdrop-filter:blur(2px); }
.ov.show { opacity:1; visibility:visible; }

/* ── SIDEBAR ── */
.sidebar {
  width:var(--sw); height:100vh; background:var(--sur);
  border-right:1px solid var(--bdr); position:fixed; top:0; left:0;
  z-index:100; display:flex; flex-direction:column; transition:var(--tr);
}
.sb-logo {
  height:var(--hh); display:flex; align-items:center; padding:0 20px;
  border-bottom:1px solid var(--bdr); flex-shrink:0;
}
.sb-logo img { height:30px; width:auto; object-fit:contain; }
.sb-nav { padding:8px 8px 16px; overflow-y:auto; flex:1; scrollbar-width:thin; scrollbar-color:#CBD5E1 transparent; }
.sb-sect {
  font-size:10px; font-weight:700; color:var(--t3);
  letter-spacing:.1em; text-transform:uppercase; padding:14px 12px 5px;
}
.mi {
  display:flex; align-items:center; padding:9px 11px; color:var(--t2);
  font-weight:600; font-size:13px; border-radius:9px; margin-bottom:1px;
  transition:var(--tr); cursor:pointer; user-select:none; position:relative;
}
.mi i { width:20px; font-size:13px; margin-right:10px; flex-shrink:0; transition:color .15s; }
.mi:hover { background:var(--bg); color:var(--or); }
.mi:hover i { color:var(--or); }
.mi.active { background:var(--or-l); color:var(--or); }
.mi.active::before {
  content:''; position:absolute; left:0; top:15%; height:70%;
  width:3px; background:var(--or); border-radius:0 3px 3px 0;
}
.mi.active i { color:var(--or); }
.bdg { margin-left:auto; font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; color:#fff; }
.bo { background:var(--or); } .bg { background:var(--gr); } .br { background:var(--rd); }
.sb-foot { padding:10px; border-top:1px solid var(--bdr); flex-shrink:0; }
.sb-user {
  display:flex; align-items:center; gap:9px; padding:9px 10px;
  border-radius:9px; cursor:pointer; transition:var(--tr);
}
.sb-user:hover { background:var(--bg); }
.av,.uav {
  width:33px; height:33px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--gr),var(--gr-h));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff;
}
.un { font-size:12.5px; font-weight:700; color:var(--t1); }
.ur { font-size:11px; color:var(--t2); }

/* ── HEADER ── */
.mc { flex:1; margin-left:var(--sw); min-height:100vh; display:flex; flex-direction:column; }
.hdr {
  height:var(--hh); background:var(--sur); border-bottom:1px solid var(--bdr);
  display:flex; justify-content:space-between; align-items:center;
  padding:0 24px; position:sticky; top:0; z-index:90;
}
.hl,.hr { display:flex; align-items:center; gap:14px; }
.mt-btn {
  display:none; background:none; border:none; font-size:17px;
  color:var(--t1); cursor:pointer; padding:6px; border-radius:8px; transition:var(--tr);
}
.mt-btn:hover { background:var(--bg); }
.srch {
  display:flex; align-items:center; background:var(--bg); padding:9px 15px;
  border-radius:100px; width:280px; border:1.5px solid transparent; transition:var(--tr);
}
.srch:focus-within { border-color:var(--or); background:var(--sur); box-shadow:0 0 0 3px var(--or-l); }
.srch i { color:var(--t2); margin-right:9px; font-size:12px; }
.srch input { border:none; background:transparent; outline:none; width:100%; font-size:13px; color:var(--t1); }
.srch input::placeholder { color:var(--t3); }
.ibtn {
  background:var(--bg); border:1px solid var(--bdr); width:36px; height:36px;
  border-radius:50%; display:flex; justify-content:center; align-items:center;
  cursor:pointer; position:relative; color:var(--t2); transition:var(--tr);
}
.ibtn:hover { color:var(--or); border-color:var(--or); background:var(--or-l); }
.ndot {
  position:absolute; top:8px; right:8px; width:7px; height:7px;
  background:var(--rd); border-radius:50%; border:2px solid var(--sur);
  animation:pulse 2s ease infinite;
}
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4);} 50%{box-shadow:0 0 0 4px rgba(239,68,68,0);} }
.hdiv { width:1px; height:22px; background:var(--bdr); }
.upf {
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:5px 9px; border-radius:9px; border:1.5px solid transparent; transition:var(--tr);
}
.upf:hover { background:var(--bg); border-color:var(--bdr); }
.unm { font-size:12.5px; font-weight:700; color:var(--t1); }
.url { font-size:11px; color:var(--t2); }

/* ── CONTENT ── */
.cw { padding:24px; flex:1; }
.ph { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; gap:12px; flex-wrap:wrap; }
.pt { font-size:21px; font-weight:800; color:var(--t1); margin-bottom:4px; }
.ps { font-size:13px; color:var(--t2); }
.pa { display:flex; gap:9px; flex-wrap:wrap; }

/* ── BUTTONS ── */
.btn {
  padding:9px 17px; border-radius:9px; font-weight:700; font-size:13px;
  cursor:pointer; transition:var(--tr); border:none;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-family:inherit;
}
.btn-p { background:var(--or); color:#fff; box-shadow:0 3px 12px rgba(243,122,32,.25); }
.btn-p:hover { background:var(--or-h); transform:translateY(-1px); box-shadow:0 5px 16px rgba(243,122,32,.3); }
.btn-g { background:var(--gr); color:#fff; box-shadow:0 3px 12px rgba(125,186,48,.2); }
.btn-g:hover { background:var(--gr-h); transform:translateY(-1px); }
.btn-o { background:var(--sur); color:var(--t1); border:1.5px solid var(--bdr); }
.btn-o:hover { border-color:var(--t2); background:var(--bg); }
.btn-d { background:var(--rd); color:#fff; }
.btn-d:hover { filter:brightness(.9); transform:translateY(-1px); }
.btn-sm { padding:7px 13px; font-size:12px; }

/* ── STAT GRID ── */
.sg { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.sc {
  background:var(--sur); padding:20px; border-radius:var(--rad);
  box-shadow:var(--sh); border:1px solid rgba(226,232,240,.7);
  display:flex; align-items:flex-start; gap:13px; transition:var(--tr);
  animation:fadeUp .4s ease both;
}
.sc:hover { transform:translateY(-2px); box-shadow:var(--sh-md); }
.sc:nth-child(1){animation-delay:.04s} .sc:nth-child(2){animation-delay:.08s}
.sc:nth-child(3){animation-delay:.12s} .sc:nth-child(4){animation-delay:.16s}
.si { width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.sv { font-size:24px; font-weight:800; color:var(--t1); line-height:1; margin:4px 0; }
.sl { font-size:11px; color:var(--t2); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.str { font-size:12px; font-weight:600; display:flex; align-items:center; gap:4px; }
.pos{color:var(--gr)} .neg{color:var(--rd)} .neu{color:var(--t2)}
.io{background:var(--or-l);color:var(--or)} .ig{background:var(--gr-l);color:var(--gr)}
.ir{background:var(--rd-l);color:var(--rd)} .iy{background:var(--yw-l);color:var(--yw)} .ib{background:var(--bl-l);color:var(--bl)}

/* ── TOOLBAR ── */
.toolbar { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.search-pill {
  display:flex; align-items:center; gap:8px; background:var(--sur);
  border:1.5px solid var(--bdr); border-radius:100px; padding:8px 16px;
  flex:1; min-width:200px; max-width:320px; transition:var(--tr);
}
.search-pill:focus-within { border-color:var(--or); box-shadow:0 0 0 3px var(--or-l); }
.search-pill i { color:var(--t2); font-size:12px; }
.search-pill input { border:none; background:none; outline:none; font-size:13px; color:var(--t1); width:100%; }
.search-pill input::placeholder { color:var(--t3); }
.filter-sel {
  background:var(--sur); border:1.5px solid var(--bdr); border-radius:9px;
  padding:8px 30px 8px 12px; font-size:13px; color:var(--t1); cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  outline:none; transition:var(--tr); font-family:inherit;
}
.filter-sel:focus { border-color:var(--or); }
.tbar-right { margin-left:auto; display:flex; gap:8px; }

/* ── CARD & TABLE ── */
.card {
  background:var(--sur); border-radius:var(--rad); box-shadow:var(--sh);
  border:1px solid rgba(226,232,240,.7); overflow:hidden;
  animation:fadeUp .4s ease .2s both;
}
.ch { display:flex; justify-content:space-between; align-items:center; padding:15px 22px; border-bottom:1px solid var(--bdr2); }
.ct { font-size:14.5px; font-weight:700; color:var(--t1); }
.cl { color:var(--or); font-size:13px; font-weight:700; cursor:pointer; }
.cl:hover { text-decoration:underline; }

.bulk-bar { display:none; align-items:center; gap:12px; padding:11px 22px; background:var(--or-l); border-bottom:1px solid rgba(243,122,32,.2); }
.bulk-bar.visible { display:flex; }
.bulk-info { font-size:13px; font-weight:700; color:var(--or-h); }

.tr-scroll { width:100%; overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th {
  text-align:left; padding:10px 18px; font-size:10.5px; font-weight:700;
  color:var(--t2); text-transform:uppercase; letter-spacing:.07em;
  background:#FAFBFC; border-bottom:1px solid var(--bdr2); white-space:nowrap;
}
thead th:first-child { padding-left:22px; }
tbody tr { border-bottom:1px solid var(--bdr2); transition:background .12s; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:#FAFBFC; }
tbody td { padding:12px 18px; font-size:13px; vertical-align:middle; }
tbody td:first-child { padding-left:22px; }

/* STATUS PILLS */
.spl { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.spl::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.sp-g{background:var(--gr-l);color:var(--gr-h)} .sp-o{background:var(--or-l);color:var(--or-h)}
.sp-r{background:var(--rd-l);color:var(--rd)} .sp-y{background:var(--yw-l);color:#92400e}
.sp-b{background:var(--bl-l);color:var(--bl)} .sp-n{background:var(--bdr2);color:var(--t2)}

/* SKT / STOK */
.sc-crit{color:var(--rd)} .sc-warn{color:var(--yw)} .sc-ok{color:var(--gr)}
.stk-fill { height:100%; border-radius:4px; transition:width .55s .3s; }
.sf-ok{background:var(--gr)} .sf-warn{background:var(--yw)} .sf-crit{background:var(--rd)}

/* ROW ACTIONS */
.row-acts { display:flex; gap:5px; opacity:0; transition:opacity .15s; }
tbody tr:hover .row-acts { opacity:1; }
.ra {
  width:29px; height:29px; border-radius:7px; border:1px solid var(--bdr);
  background:var(--sur); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:12px; color:var(--t2); transition:var(--tr);
}
.ra:hover { border-color:var(--or); color:var(--or); background:var(--or-l); }
.ra.del:hover { border-color:var(--rd); color:var(--rd); background:var(--rd-l); }

/* TOGGLE */
.sw { position:relative; display:inline-block; width:42px; height:23px; }
.sw input { opacity:0; width:0; height:0; }
.sli { position:absolute; cursor:pointer; inset:0; background:#CBD5E1; border-radius:23px; transition:.25s; }
.sli::before { content:''; position:absolute; width:17px; height:17px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.25s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
input:checked + .sli { background:var(--gr); }
input:checked + .sli::before { transform:translateX(19px); }

/* FORM */
.fg { display:flex; flex-direction:column; gap:5px; }
.fg label { font-size:11px; font-weight:700; color:var(--t2); text-transform:uppercase; letter-spacing:.06em; }
.fg input,.fg select,.fg textarea {
  border:1.5px solid var(--bdr); border-radius:9px; padding:9px 13px;
  font-size:13px; color:var(--t1); background:var(--bdr2); outline:none;
  transition:var(--tr); width:100%;
}
.fg input:focus,.fg select:focus,.fg textarea:focus {
  border-color:var(--or); background:var(--sur); box-shadow:0 0 0 3px var(--or-l);
}
.fg textarea { resize:vertical; min-height:80px; }
.fg select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:34px;
}

/* ALLERGEN CHIPS */
.alg {
  display:flex; align-items:center; gap:6px; padding:6px 13px;
  border:1.5px solid var(--bdr); border-radius:20px; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--t2); transition:var(--tr); user-select:none;
}
.alg:hover { border-color:var(--or); color:var(--or); }
.alg.on { background:var(--or-l); border-color:var(--or); color:var(--or-h); }
.alg input { display:none; }

/* OFF-CANVAS */
.oc-overlay {
  position:fixed; inset:0; background:rgba(15,23,42,.45);
  z-index:190; opacity:0; visibility:hidden; transition:var(--tr); backdrop-filter:blur(2px);
}
.oc-overlay.open { opacity:1; visibility:visible; }
.offcanvas {
  position:fixed; top:0; right:-720px; width:680px; max-width:96vw; height:100vh;
  background:var(--sur); z-index:200; display:flex; flex-direction:column;
  transition:right .32s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 32px rgba(0,0,0,.1); border-left:3px solid var(--or);
}
.offcanvas.open { right:0; }

/* OFF-CANVAS TABS */
.oc-tabs { display:flex; border-bottom:1px solid var(--bdr); padding:0 22px; flex-shrink:0; overflow-x:auto; scrollbar-width:none; }
.oc-tabs::-webkit-scrollbar { display:none; }
.oc-tab {
  padding:12px 14px; font-size:12.5px; font-weight:700; color:var(--t2);
  cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1px;
  transition:var(--tr); display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.oc-tab:hover { color:var(--t1); }
.oc-tab.active { color:var(--or); border-color:var(--or); }
.oc-panel { display:none; }
.oc-panel.active { display:block; }

/* PAGINATION */
.pb {
  width:30px; height:30px; border-radius:7px; border:1px solid var(--bdr);
  background:var(--sur); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:12.5px; font-weight:600; color:var(--t2); transition:var(--tr);
}
.pb:hover { border-color:var(--or); color:var(--or); }
.pb.active { background:var(--or); border-color:var(--or); color:#fff; }

/* ALERTS */
.alert-success,.alert-error {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-radius:10px; margin-bottom:16px; font-size:13.5px; font-weight:600;
}
.alert-success { background:var(--gr-l); border:1px solid var(--gr); color:var(--gr-h); }
.alert-error { background:var(--rd-l); border:1px solid var(--rd); color:var(--rd); }

/* EMPTY STATE */
.empty { text-align:center; padding:48px 20px; color:var(--t2); }
.empty i { font-size:44px; color:var(--t3); margin-bottom:14px; display:block; }
.empty h3 { font-size:15px; font-weight:700; color:var(--t1); margin-bottom:5px; }
.empty p { font-size:13px; color:var(--t2); }

/* TOAST */
.tw { position:fixed; bottom:22px; right:22px; z-index:999; display:flex; flex-direction:column; gap:8px; }
.toast {
  display:flex; align-items:center; gap:9px; padding:12px 17px; color:#fff;
  border-radius:11px; font-size:13.5px; font-weight:600; box-shadow:var(--sh-md);
  transform:translateX(120%); transition:transform .3s cubic-bezier(.4,0,.2,1); min-width:260px;
}
.toast.show { transform:translateX(0); }
.toast.ts { background:#14532D; border-left:3px solid var(--gr); }
.toast.te { background:#7F1D1D; border-left:3px solid var(--rd); }

/* ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* RESPONSIVE */
@media(max-width:1200px) { .sg{grid-template-columns:repeat(2,1fr)} }
@media(max-width:992px) {
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:12px 0 40px rgba(0,0,0,.15)}
  .mc{margin-left:0}
  .mt-btn{display:flex}
  .srch{display:none}
}
@media(max-width:768px) {
  .hdr{padding:0 14px}
  .cw{padding:14px}
  .sg{grid-template-columns:1fr 1fr}
  .upf .unm,.upf .url{display:none}
}
@media(max-width:576px) {
  .offcanvas{width:100%;border-left:none;border-top:3px solid var(--or)}
  .sg{grid-template-columns:1fr}
}