/* ============================================================
   Điện Lạnh Dương Hiếu — Design System dùng chung cho toàn bộ demo
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#f2f9f3;
  --surface:#ffffff;
  --surface-2:#f5faf6;
  --ink:#17241c;
  --ink-soft:#5c6b60;
  --ink-faint:#8fa397;
  --dark:#0b3d24;
  --dark-2:#062616;
  --green:#1f9d55;
  --green-strong:#0f7a3d;
  --green-tint:#e2f5e8;
  --gold:#f2a900;
  --gold-strong:#a66c00;
  --gold-tint:#fdf1d6;
  --amber:#c99a12;
  --amber-tint:#f8eecb;
  --red:#c0402a;
  --red-tint:#fbe6e1;
  --line:#e1ece3;
  --line-strong:#cfe0d3;
  --shadow-sm:0 1px 2px rgba(15,40,25,.06);
  --shadow-md:0 8px 24px -10px rgba(15,40,25,.22);
  --shadow-lg:0 20px 48px -16px rgba(15,40,25,.28);
  --radius-s:8px;
  --radius-m:14px;
  --radius-l:22px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1712; --surface:#17211a; --surface-2:#1c271f;
    --ink:#e9f2ec; --ink-soft:#a9bcb0; --ink-faint:#748a7c;
    --dark:#062616; --dark-2:#000000;
    --green:#3fcf82; --green-strong:#8de8b3; --green-tint:#173a29;
    --gold:#ffce4d; --gold-strong:#ffe08a; --gold-tint:#3a2e10;
    --amber:#e0b542; --amber-tint:#3a3014;
    --red:#e06850; --red-tint:#3a2119;
    --line:#2a352d; --line-strong:#3a473c;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 8px 24px -10px rgba(0,0,0,.5); --shadow-lg:0 20px 48px -16px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1712; --surface:#17211a; --surface-2:#1c271f;
  --ink:#e9f2ec; --ink-soft:#a9bcb0; --ink-faint:#748a7c;
  --dark:#062616; --dark-2:#000000;
  --green:#3fcf82; --green-strong:#8de8b3; --green-tint:#173a29;
  --gold:#ffce4d; --gold-strong:#ffe08a; --gold-tint:#3a2e10;
  --amber:#e0b542; --amber-tint:#3a3014;
  --red:#e06850; --red-tint:#3a2119;
  --line:#2a352d; --line-strong:#3a473c;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 8px 24px -10px rgba(0,0,0,.5); --shadow-lg:0 20px 48px -16px rgba(0,0,0,.6);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
h1,h2,h3,h4,.brand{ font-family:'Baloo 2', system-ui, sans-serif; }
.mono, .price, .code{ font-family:'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
a{color:inherit;}
button{font-family:inherit;}
img{max-width:100%; display:block;}
::selection{ background:var(--green-tint); }
:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.icon{ display:inline-flex; }
.icon svg{ display:block; }

/* ---------- Photo/spec tile (dùng cho ảnh hoặc thông số sản phẩm) ---------- */
.photo-tile{ border-radius:14px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; flex:none; }
.photo-tile::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 -10px 16px -6px rgba(0,0,0,.35); }
.photo-tile .pt-emoji{ position:relative; z-index:1; filter:drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.photo-tile .pt-spec{ position:relative; z-index:1; color:#fff; font-family:'IBM Plex Mono',monospace; font-weight:700; text-align:center; line-height:1.15; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14.5px; font-weight:600; padding:11px 18px; border-radius:12px;
  border:1px solid transparent; cursor:pointer; transition:transform .12s ease, filter .12s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--green); color:#fff; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-gold{ background:var(--gold); color:#3a2600; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-soft{ background:var(--green-tint); color:var(--green-strong); }
.btn-danger{ background:var(--red-tint); color:var(--red); }
.btn-sm{ padding:7px 12px; font-size:13px; border-radius:9px; }
.btn-icon{ padding:9px; border-radius:10px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-block{ width:100%; }

/* ---------- Badges / pills ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px;
}
.badge-green{ background:var(--green-tint); color:var(--green-strong); }
.badge-gold{ background:var(--gold-tint); color:var(--gold-strong); }
.badge-amber{ background:var(--amber-tint); color:var(--amber); }
.badge-red{ background:var(--red-tint); color:var(--red); }
.badge-gray{ background:var(--surface-2); color:var(--ink-faint); border:1px solid var(--line); }

/* ---------- Cards ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow-sm); }

/* ---------- Top bar (staff apps) ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; background:var(--surface); border-bottom:1px solid var(--line);
}
.topbar .brand-mark{ display:flex; align-items:center; gap:10px; }
.brand-logo{ width:32px; height:32px; border-radius:9px; background:linear-gradient(155deg,#1a6b3f,var(--dark-2)); display:flex; align-items:center; justify-content:center; color:var(--gold); flex:none; }
.brand-name{ font-weight:700; font-size:15.5px; letter-spacing:-0.01em; font-family:'Baloo 2',sans-serif; }
.role-chip{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); }
.role-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-tint); }

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  display:flex; background:var(--surface); border-top:1px solid var(--line);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px 4px; border-radius:10px; color:var(--ink-faint); text-decoration:none; font-size:11px; font-weight:500;
}
.bottom-nav a .icon{ padding:5px; border-radius:9px; transition:background .15s ease, color .15s ease; }
.bottom-nav a.active{ color:var(--green-strong); }
.bottom-nav a.active .icon{ color:#fff; background:var(--green); }

/* ---------- Side rail (desktop dashboards) ---------- */
.app-shell{ display:flex; min-height:100%; }
.side-rail{
  width:230px; flex:none; background:var(--surface); border-right:1px solid var(--line);
  padding:20px 14px; display:flex; flex-direction:column; gap:4px;
}
.side-rail .brand-mark{ padding:6px 8px 22px; }
.rail-link{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  color:var(--ink-soft); text-decoration:none; font-size:14px; font-weight:500;
}
.rail-link:hover{ background:var(--surface-2); }
.rail-link.active{ background:var(--green-tint); color:var(--green-strong); font-weight:600; }
.rail-spacer{ flex:1; }
.main-area{ flex:1; min-width:0; padding:26px 30px 60px; }

/* ---------- Layout helpers ---------- */
.container{ max-width:1180px; margin:0 auto; }
.phone-frame{ max-width:430px; margin:0 auto; min-height:100vh; background:var(--bg); box-shadow:var(--shadow-lg); position:relative; }
@media (min-width:560px){ .phone-frame{ margin:22px auto; min-height:calc(100vh - 44px); border-radius:34px; overflow:hidden; border:1px solid var(--line); } }

.page-title{ font-size:1.5rem; font-weight:700; margin:0 0 4px; font-family:'Baloo 2',sans-serif; }
.page-sub{ color:var(--ink-soft); font-size:14px; margin:0 0 22px; }
.section-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px; }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.hr{ height:1px; background:var(--line); border:none; margin:0; }

.grid{ display:grid; gap:14px; }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }

.empty{ text-align:center; color:var(--ink-faint); font-size:13.5px; padding:40px 20px; }

/* ---------- Toast ---------- */
#toast-root{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{
  background:var(--dark); color:#eafbf0; font-size:13.5px; font-weight:500;
  padding:10px 16px; border-radius:11px; box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:8px;
  animation: toast-in .25s ease-out;
}
@keyframes toast-in{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* ---------- Shared modal / form ---------- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(6,20,12,.5); z-index:60; display:none; }
.modal{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:61; background:var(--surface); border-radius:18px; width:min(520px,92vw); max-height:90vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px 12px; border-bottom:1px solid var(--line); flex:none; }
.modal-head h3{ margin:0; font-size:1.05rem; }
.modal-body{ padding:16px 20px; overflow-y:auto; }
.modal-foot{ padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:10px; flex:none; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.field input[type="text"], .field input[type="number"], .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line-strong);
  background:var(--surface-2); color:var(--ink); font-family:inherit; font-size:13.5px;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--green); outline-offset:1px; }
.field textarea{ resize:vertical; min-height:60px; }
.field-row{ display:flex; gap:12px; }
.field-row .field{ flex:1; }
.menu-row-thumb{ width:38px; height:38px; border-radius:9px; }
.row-actions{ display:flex; gap:6px; }
.row-actions button{ width:30px; height:30px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); }
.row-actions button:hover{ background:var(--surface-2); }
.row-actions .danger:hover{ background:var(--red-tint); color:var(--red); border-color:var(--red-tint); }

@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }