/* ==========================================================
   TeaFlow — Design System
   Inspired by Apple / Linear / Stripe / Notion restraint.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap');

:root{
  /* Brand gradient */
  --brand-1:#0ea5a3;
  --brand-2:#0d9488;
  --brand-3:#134e4a;
  --accent:#f59e0b;

  --grad-brand: linear-gradient(135deg,#0ea5a3 0%, #0d9488 45%, #115e59 100%);
  --grad-soft:  linear-gradient(135deg, rgba(14,165,163,.12), rgba(245,158,11,.10));

  --bg: #f6f8f9;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f6f7;
  --border: #e7ebec;
  --text: #14201f;
  --text-dim: #5b6b6a;
  --text-faint: #8b9998;

  --success:#16a34a;
  --warning:#f59e0b;
  --danger:#e11d48;
  --info:#2563eb;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,32,31,.05), 0 1px 1px rgba(20,32,31,.03);
  --shadow-md: 0 6px 20px -6px rgba(20,32,31,.12), 0 2px 6px rgba(20,32,31,.06);
  --shadow-lg: 0 20px 45px -12px rgba(20,32,31,.22);

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Manrope', 'Inter', sans-serif;

  --sidebar-w: 258px;
  --topbar-h: 68px;
  --ease: cubic-bezier(.22,1,.36,1);
}

[data-theme="dark"]{
  --bg:#0d1413;
  --bg-elevated:#131c1b;
  --surface:#141d1c;
  --surface-2:#1a2423;
  --border:#243130;
  --text:#eef4f3;
  --text-dim:#9fb0ae;
  --text-faint:#6c7c7a;
  --shadow-md: 0 6px 24px -6px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 50px -14px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s var(--ease), color .25s var(--ease);
}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; letter-spacing:-0.02em;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;}
::selection{background:rgba(14,165,163,.25);}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- Layout shell ---------- */
.app-shell{display:flex; min-height:100vh;}

.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--bg-elevated);
  border-right:1px solid var(--border);
  padding:20px 14px;
  position:fixed;
  top:0;left:0;bottom:0;
  overflow-y:auto;
  z-index:40;
  transition:transform .3s var(--ease);
}
.brand{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px 22px;
}
.brand-mark{
  width:36px;height:36px;border-radius:11px;
  background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
  color:#fff;font-size:18px;
}
.brand-name{font-family:var(--font-display); font-weight:800; font-size:18px;}

.nav-section-label{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-faint); padding:16px 12px 6px;
}
.nav-link{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:12px;
  font-size:14.5px;font-weight:500;color:var(--text-dim);
  margin-bottom:2px; transition:all .15s var(--ease); cursor:pointer;
}
.nav-link svg{width:18px;height:18px;flex-shrink:0;}
.nav-link:hover{background:var(--surface-2); color:var(--text);}
.nav-link.active{
  background:var(--grad-brand); color:#fff; box-shadow:var(--shadow-sm);
}
.nav-badge{
  margin-left:auto; font-size:11px; font-weight:700; background:var(--danger); color:#fff;
  padding:1px 7px; border-radius:99px;
}

.main{
  flex:1;
  margin-left:var(--sidebar-w);
  min-width:0;
  display:flex; flex-direction:column;
}

.topbar{
  height:var(--topbar-h);
  display:flex;align-items:center;gap:16px;
  padding:0 26px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:30;
}
[data-theme="dark"] .topbar{background:rgba(19,28,27,.7);}

.search-box{
  flex:1; max-width:420px;
  display:flex;align-items:center;gap:8px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:9px 16px; color:var(--text-faint);
  transition:border-color .15s;
}
.search-box:focus-within{border-color:var(--brand-1);}
.search-box input{border:0;background:none;outline:0;width:100%;color:var(--text);font-size:14px;}

.topbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}
.icon-btn{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface); display:flex;align-items:center;justify-content:center;
  cursor:pointer; color:var(--text-dim); transition:all .15s;
}
.icon-btn:hover{background:var(--surface-2); color:var(--text); transform:translateY(-1px);}
.icon-btn svg{width:18px;height:18px;}

.avatar{
  width:38px;height:38px;border-radius:12px;background:var(--grad-brand);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
  cursor:pointer;
}

.content{padding:26px; flex:1;}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card.hoverable:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-pad{padding:22px;}

.glass{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.4);
}
[data-theme="dark"] .glass{background:rgba(20,29,28,.5); border-color:rgba(255,255,255,.06);}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.stat-card{
  padding:20px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border);
  position:relative; overflow:hidden;
}
.stat-card .stat-icon{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad-soft); color:var(--brand-2); margin-bottom:14px;
}
.stat-card .stat-icon svg{width:20px;height:20px;}
.stat-label{font-size:12.5px;color:var(--text-faint); font-weight:600; letter-spacing:.02em;}
.stat-value{font-family:var(--font-display); font-size:26px; font-weight:800; margin-top:4px;}
.stat-delta{font-size:12px; font-weight:600; margin-top:6px; display:inline-flex; align-items:center; gap:4px;}
.stat-delta.up{color:var(--success);}
.stat-delta.down{color:var(--danger);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px; border-radius:12px; border:1px solid transparent;
  font-weight:600; font-size:14px; cursor:pointer; transition:all .15s var(--ease);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;}
.btn-primary{background:var(--grad-brand); color:#fff; box-shadow:var(--shadow-sm);}
.btn-primary:hover{filter:brightness(1.06); transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn-secondary{background:var(--surface-2); color:var(--text); border-color:var(--border);}
.btn-secondary:hover{background:var(--border);}
.btn-ghost{background:transparent; color:var(--text-dim);}
.btn-ghost:hover{background:var(--surface-2); color:var(--text);}
.btn-danger{background:var(--danger); color:#fff;}
.btn-danger:hover{filter:brightness(1.08);}
.btn-sm{padding:6px 12px; font-size:13px; border-radius:9px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}
.btn-icon{padding:9px; border-radius:11px;}

.fab{
  position:fixed; right:30px; bottom:30px; z-index:50;
  width:58px;height:58px;border-radius:50%;
  background:var(--grad-brand); color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg); cursor:pointer; border:none;
  transition:transform .2s var(--ease);
}
.fab:hover{transform:scale(1.07) rotate(90deg);}

/* ---------- Forms ---------- */
.form-group{margin-bottom:16px;}
.form-label{display:block; font-size:13px; font-weight:600; color:var(--text-dim); margin-bottom:6px;}
.form-control{
  width:100%; padding:11px 14px; border-radius:12px;
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--text); font-size:14.5px; outline:0;
  transition:border-color .15s, box-shadow .15s;
}
.form-control:focus{border-color:var(--brand-1); box-shadow:0 0 0 4px rgba(14,165,163,.12);}
select.form-control{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235b6b6a'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
textarea.form-control{resize:vertical; min-height:80px;}
.input-icon-wrap{position:relative;}
.input-icon-wrap svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px;height:17px; color:var(--text-faint);}
.input-icon-wrap .form-control{padding-left:40px;}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--border);}
table.data-table{width:100%; border-collapse:collapse; font-size:14px; background:var(--surface);}
table.data-table thead th{
  position:sticky; top:0; background:var(--surface-2); z-index:2;
  text-align:left; padding:12px 16px; font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint);
  border-bottom:1px solid var(--border);
}
table.data-table td{padding:12px 16px; border-bottom:1px solid var(--border); color:var(--text);}
table.data-table tbody tr{transition:background .12s;}
table.data-table tbody tr:hover{background:var(--surface-2);}
table.data-table tbody tr:last-child td{border-bottom:none;}

.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:700;}
.badge-success{background:rgba(22,163,74,.12); color:var(--success);}
.badge-warning{background:rgba(245,158,11,.14); color:var(--warning);}
.badge-danger{background:rgba(225,29,72,.12); color:var(--danger);}
.badge-info{background:rgba(37,99,235,.12); color:var(--info);}
.badge-gray{background:var(--surface-2); color:var(--text-dim);}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,15,15,.45); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:100;
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease);
}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal{
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:min(520px, 92vw); max-height:88vh; overflow-y:auto;
  transform:translateY(14px) scale(.98); transition:transform .2s var(--ease);
  border:1px solid var(--border);
}
.modal-overlay.open .modal{transform:translateY(0) scale(1);}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--border);}
.modal-header h3{font-size:18px;}
.modal-body{padding:22px;}
.modal-footer{padding:16px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px;}

/* ---------- Toasts ---------- */
#toast-stack{position:fixed; top:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:10px;}
.toast{
  min-width:260px; max-width:360px; padding:14px 16px; border-radius:14px;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-md);
  display:flex; align-items:flex-start; gap:10px; font-size:13.5px;
  animation:toast-in .25s var(--ease);
}
@keyframes toast-in{from{opacity:0; transform:translateX(24px);} to{opacity:1; transform:translateX(0);}}
.toast.success{border-left:4px solid var(--success);}
.toast.error{border-left:4px solid var(--danger);}
.toast.info{border-left:4px solid var(--info);}

/* ---------- Empty / loading states ---------- */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state svg{width:64px;height:64px; margin-bottom:14px; opacity:.5;}
.empty-state h4{color:var(--text); margin-bottom:6px;}

.skeleton{background:linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%); background-size:400% 100%; animation:skeleton 1.4s ease infinite; border-radius:8px;}
@keyframes skeleton{0%{background-position:100% 50%;} 100%{background-position:0 50%;}}

.spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Utility ---------- */
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;}
.mb-8{margin-bottom:8px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;}
.text-dim{color:var(--text-dim);} .text-faint{color:var(--text-faint);}
.text-success{color:var(--success);} .text-danger{color:var(--danger);}
.fw-700{font-weight:700;} .fs-13{font-size:13px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.quick-entry-grid{grid-template-columns:1.2fr .8fr;}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;}
.page-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px;}
.page-title{font-size:24px; font-weight:800; font-family:var(--font-display);}
.chip-filters{display:flex; gap:8px; flex-wrap:wrap;}
.chip{padding:7px 14px; border-radius:99px; font-size:13px; font-weight:600; background:var(--surface-2); color:var(--text-dim); cursor:pointer; border:1px solid var(--border); transition:all .15s;}
.chip.active{background:var(--grad-brand); color:#fff; border-color:transparent;}
.factory-chip.selected, .product-chip.selected{
  background:var(--grad-brand) !important; color:#fff !important; border-color:transparent !important;
  box-shadow:var(--shadow-sm);
}
.factory-chip:hover, .product-chip:hover{border-color:var(--brand-1);}

@media print{
  .sidebar, .topbar, .fab, .no-print{display:none !important;}
  .main{margin-left:0 !important;}
  body{background:#fff;}
}
body.print-modal-only > .app-shell{display:none !important;}
body.print-modal-only .modal-overlay{position:static !important; background:none !important; opacity:1 !important;}
body.print-modal-only .modal-overlay:not(.open){display:none !important;}
body.print-modal-only .modal{box-shadow:none !important; border:none !important; width:100% !important; max-height:none !important;}
body.print-modal-only .modal-header{display:none !important;}

/* ---------- Mobile ---------- */
@media (max-width: 900px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0); box-shadow:var(--shadow-lg);}
  .main{margin-left:0;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .form-row, .grid-2, .grid-3{grid-template-columns:1fr;}
  .content{padding:16px;}
  .quick-entry-summary{position:static !important; top:auto !important;}
}