/* ================================================================
   Fast & Fresh — UI "Classic" design system
   Old-school web application look (late-2000s / early-2010s intranet apps).
   Shells  : Manager = mobile · Admin/CO = web sidebar
   Note    : every class name matches the pages — logic untouched.
   Character:
     · gradient beveled buttons, blue title bars, boxy bordered panels
     · Tahoma/Verdana system font, 11–12px, sharp corners
     · gray gradient chrome, inset field wells, classic grid tables
     · minimal animation — this is a workhorse business app
   ================================================================ */

:root{
  color-scheme: light;   /* classic era = light only */

  /* window / chrome greys */
  --bg:#e8ecf0;
  --surface:#ffffff;
  --surface-2:#f4f6f8;
  --surface-3:#eef1f4;
  --panel-grad-top:#fbfcfd;
  --panel-grad-bot:#eef1f5;

  /* the classic blue */
  --blue:#3d6fb4;
  --blue-dark:#2f5892;
  --blue-darker:#274a7c;
  --blue-light:#5b8fd6;
  --title-grad-top:#5b8fd6;
  --title-grad-bot:#2f5892;
  --sel:#d3e4fb;
  --sel-bd:#7ba7de;

  /* borders — the era loved visible borders */
  --line:#c3ccd6;
  --line-2:#aab6c2;
  --line-3:#8f9dab;
  --line-dark:#6d7c8c;

  /* ink */
  --ink:#1e2733;
  --ink-2:#33414f;
  --muted:#5e6b78;
  --muted-2:#8794a1;

  /* button bevels */
  --btn-top:#fdfefe;
  --btn-bot:#dde3ea;
  --btn-top-h:#ffffff;
  --btn-bot-h:#e7edf3;
  --btn-bd:#9aa7b4;

  --btn-blue-top:#6a9bda;
  --btn-blue-bot:#356199;
  --btn-blue-bd:#2a4f7e;

  /* semantic (classic saturated) */
  --ok:#2e7d32;     --ok-bg:#e4f3e4;    --ok-bd:#a6d3a6;
  --warn:#8a6d00;   --warn-bg:#fdf6da;  --warn-bd:#e2cd7a;
  --bad:#c0392b;    --bad-bg:#fbe4e2;   --bad-bd:#e3a49d;
  --inf:#2f5892;    --inf-bg:#e2ecf8;   --inf-bd:#a9c4e6;

  /* shape — mostly square, tiny radius */
  --r-xl:4px; --r-lg:3px; --r-md:3px; --r-sm:2px;

  /* depth — hard, shallow */
  --sh-1:0 1px 1px rgba(30,39,51,.10);
  --sh-2:0 1px 3px rgba(30,39,51,.25);
  --sh-3:0 3px 12px rgba(30,39,51,.4);

  /* shell metrics */
  --topbar-h:0px;         /* classic apps put title in the bar itself */
  --sidebar-w:200px;
  --tabbar-h:54px;
  --row-h:24px;
  --ctrl-h:23px;

  /* motion — almost none */
  --m-short:60ms;
  --m-med:90ms;
  --e-std:linear;

  --font:"Segoe UI",Tahoma,Geneva,Verdana,"Lucida Grande",Arial,sans-serif;
  --mono:"Consolas","Lucida Console","Courier New",monospace;
}

/* ---------------- base ---------------- */
*{ box-sizing:border-box; }
html{ background:var(--bg); }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  font-size:11px; line-height:1.4; color:var(--ink);
  background:var(--bg);
}
a{ color:var(--blue-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:visited{ color:#5a4a86; }
img{ border:0; max-width:100%; }
h1,h2,h3,h4{ margin:0; }
i.fa,i.fas,i.far,i.fab,i[class^="fa-"],i[class*=" fa-"]{ display:none; }

::selection{ background:var(--sel); }

/* classic thin grey scrollbars */
::-webkit-scrollbar{ width:16px; height:16px; }
::-webkit-scrollbar-track{ background:#eef1f4; }
::-webkit-scrollbar-thumb{ background:linear-gradient(90deg,#cdd5dd,#b7c1cc); border:1px solid #9aa7b4; border-radius:2px; }
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(90deg,#c0c9d2,#a9b4bf); }
::-webkit-scrollbar-button{ background:linear-gradient(#f5f7f9,#dde3ea); border:1px solid #9aa7b4; height:16px; }

.content{ animation:none; }

:focus-visible{ outline:1px dotted var(--blue-dark); outline-offset:1px; }

/* ================================================================
   WEB SHELL  (Admin / Computer Operator)
   Blue-gradient title bar + boxed navigation tree.
   ================================================================ */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  position:fixed; inset:0 auto 0 0; z-index:60;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#e9eef3,#d7dfe8);
  color:var(--ink); padding:0;
  border-right:1px solid var(--line-3);
  transition:none;
}
.sidebar .brand{
  display:flex; align-items:center; gap:7px;
  height:44px; flex:0 0 44px;
  padding:0 10px; margin:0;
  background:linear-gradient(180deg,var(--title-grad-top),var(--title-grad-bot));
  border-bottom:1px solid var(--blue-darker);
  color:#fff;
}
.sidebar .brand .logo{
  width:26px; height:26px; border-radius:var(--r-sm); flex:0 0 26px;
  background:linear-gradient(180deg,#fff,#dbe6f4);
  color:var(--blue-dark); border:1px solid #24406a;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px;
}
.sidebar .brand .bt{ font-size:12px; font-weight:700; line-height:1.2; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35); }
.sidebar .brand .bs{ font-size:10px; color:#d3e0f0; }

.sidebar nav{ display:flex; flex-direction:column; gap:0; margin:0; padding:4px 0; overflow-y:auto; }
.sidebar nav .navlabel{
  font-size:10px; text-transform:uppercase; letter-spacing:.02em;
  color:#fff; padding:3px 10px; font-weight:700;
  background:linear-gradient(180deg,#7f909f,#67788a);
  border-top:1px solid #92a1b0; border-bottom:1px solid #566472; margin-top:2px;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
}
.sidebar nav a{
  position:relative;
  display:flex; align-items:center; gap:7px;
  padding:0 10px 0 16px; height:23px;
  color:var(--ink-2); font-size:11px; font-weight:400;
  text-decoration:none; white-space:nowrap;
  border-bottom:1px solid #d7dfe8;
}
.sidebar nav a svg{ width:14px; height:14px; flex:0 0 14px; opacity:.7; }
.sidebar nav a:hover{ background:#f0f5fb; color:var(--blue-dark); text-decoration:none; }
.sidebar nav a:active{ background:#e2ecf8; }
.sidebar nav a.active{
  background:linear-gradient(180deg,#e7f0fb,#cfe0f5); color:var(--blue-darker); font-weight:700;
  border-top:1px solid #b6d0ee; border-bottom:1px solid #a6c3e8;
  box-shadow:inset 3px 0 0 var(--blue);
}
.sidebar nav a.active svg{ opacity:1; color:var(--blue-dark); }
.sidebar .side-foot{ margin-top:auto; padding:4px 0; border-top:1px solid var(--line-3); background:#d7dfe8; }
.scrim{ display:none; }

.main{
  margin-left:var(--sidebar-w); flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; min-height:100vh;
}
/* topbar becomes a classic blue application title bar */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:10px;
  height:44px; padding:0 12px;
  background:linear-gradient(180deg,var(--title-grad-top),var(--title-grad-bot));
  border-bottom:1px solid var(--blue-darker);
  color:#fff;
}
.topbar .tt{ min-width:0; display:flex; align-items:baseline; gap:8px; }
.topbar .tt h1{ font-size:13px; font-weight:700; line-height:1.2; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35); }
.topbar .tt .sub{ font-size:11px; color:#d3e0f0; }
.topbar .grow{ flex:1 1 auto; }
.topbar .tb-actions{ display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.topbar .userchip{ display:flex; align-items:center; gap:6px; padding-left:9px; margin-left:2px; border-left:1px solid #4a6ea0; }
.topbar .userchip .who{ text-align:right; line-height:1.2; }
.topbar .userchip .who .n{ font-size:11px; font-weight:700; color:#fff; }
.topbar .userchip .who .r{ font-size:10px; color:#cdddef; }
.topbar .iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:23px; border-radius:var(--r-sm);
  border:1px solid #24406a;
  background:linear-gradient(180deg,#6a9bda,#356199); color:#fff; cursor:pointer;
}
.topbar .iconbtn:hover{ background:linear-gradient(180deg,#7aa8e2,#3f6ba6); }
.topbar .iconbtn:active{ background:#356199; }
.topbar .iconbtn svg{ width:15px; height:15px; }
.hamburger{ display:none; }

.avatar{
  width:26px; height:26px; border-radius:var(--r-sm); flex:0 0 26px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#fff,#dbe6f4); color:var(--blue-dark);
  border:1px solid #24406a; font-weight:700; font-size:11px;
}
.side-avatar{
  border-radius:var(--r-sm); display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#fff,#dbe6f4); color:var(--blue-dark); border:1px solid #7ba7de; font-weight:700;
}

.content{ width:100%; max-width:none; margin:0; padding:10px 12px; flex:1 1 auto; }

/* ================================================================
   MOBILE APP SHELL  (Manager)
   ================================================================ */
.app.mobile{ display:block; }
.app.mobile .content{
  max-width:none;
  padding:8px 8px calc(var(--tabbar-h) + 10px);
}

.mtopbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:9px;
  min-height:44px;
  padding:0 10px;
  background:linear-gradient(180deg,var(--title-grad-top),var(--title-grad-bot));
  border-bottom:1px solid var(--blue-darker);
  color:#fff;
}
.mtopbar .logo{
  width:26px; height:26px; border-radius:var(--r-sm); flex:0 0 26px;
  background:linear-gradient(180deg,#fff,#dbe6f4); color:var(--blue-dark);
  border:1px solid #24406a;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px;
}
.mtopbar .mt{ margin:0; min-width:0; flex:1 1 auto; }
.mtopbar .mt h1{ font-size:13px; font-weight:700; line-height:1.2; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35); }
.mtopbar .mt .sub{ font-size:10px; color:#d3e0f0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mtopbar .miconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:24px; border-radius:var(--r-sm); color:#fff;
  background:linear-gradient(180deg,#6a9bda,#356199); border:1px solid #24406a;
}
.mtopbar .miconbtn:active{ background:#356199; }
.mtopbar .miconbtn svg{ width:16px; height:16px; }

.app.mobile .content > .page-actions{
  display:flex; gap:5px; overflow-x:auto; margin-bottom:8px; padding-bottom:2px;
}
.app.mobile .content > .page-actions .btn{ flex:0 0 auto; }

.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  height:var(--tabbar-h);
  display:flex;
  background:linear-gradient(180deg,#eef2f6,#d7dfe8);
  border-top:1px solid var(--line-3);
}
.bottomnav a{
  position:relative; flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--muted); font-size:10px; font-weight:400; text-decoration:none;
  padding:5px 2px 4px;
  border-right:1px solid #c3ccd6;
}
.bottomnav a:last-child{ border-right:0; }
.bottomnav a svg{ width:19px; height:19px; }
.bottomnav a span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.bottomnav a.active{ color:var(--blue-darker); font-weight:700;
  background:linear-gradient(180deg,#e7f0fb,#cfe0f5); }
.bottomnav a.active svg{ color:var(--blue-dark); }

/* ================================================================
   Cards / panels — classic bordered group boxes with blue caption bar
   ================================================================ */
.card,.box{
  background:var(--surface); border:1px solid var(--line-3);
  border-radius:var(--r-md); box-shadow:var(--sh-1);
  margin-bottom:10px; overflow:hidden;
}
.card-head,.box-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:0 9px; min-height:26px;
  border-bottom:1px solid var(--line-3);
  background:linear-gradient(180deg,#eef3f9,#dce6f1);
  color:var(--blue-darker);
}
.card-head h3,.box-head h3{ font-size:11px; font-weight:700; color:var(--blue-darker); }
.card-body,.box-body,.card-pad{ padding:10px; background:linear-gradient(180deg,var(--panel-grad-top),#ffffff); }

/* ================================================================
   Stat tiles — beveled group boxes
   ================================================================ */
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin-bottom:10px; }
.stat{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#ffffff,#eef1f5);
  border:1px solid var(--line-3);
  border-radius:var(--r-md); box-shadow:inset 0 1px 0 #fff, var(--sh-1);
  padding:7px 10px 8px;
}
.stat::before{ display:none; }
.stat .ico{ display:none; }
.stat .lbl{ font-size:10px; font-weight:400; color:var(--muted); order:0; margin:0 0 2px; }
.stat .val{ font-size:19px; font-weight:700; line-height:1; color:var(--blue-darker); font-family:var(--font); order:1; }
.stat a{ color:inherit; }

/* ================================================================
   Buttons — classic gradient bevels
   ================================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  font-family:inherit; font-size:11px; font-weight:400; line-height:1;
  height:var(--ctrl-h); min-height:var(--ctrl-h); padding:0 11px;
  border-radius:var(--r-sm); cursor:pointer; white-space:nowrap;
  border:1px solid var(--btn-bd);
  background:linear-gradient(180deg,var(--btn-top),var(--btn-bot)); color:var(--ink);
  text-decoration:none; user-select:none;
  box-shadow:inset 0 1px 0 #fff;
}
.btn:hover{ background:linear-gradient(180deg,var(--btn-top-h),var(--btn-bot-h)); border-color:var(--line-dark); text-decoration:none; color:var(--ink); }
.btn:active{ background:linear-gradient(180deg,#dde3ea,#e9eef3); box-shadow:inset 0 1px 2px rgba(0,0,0,.2); }
.btn:focus-visible{ outline:1px dotted var(--blue-dark); outline-offset:1px; }
.btn svg{ width:14px; height:14px; }

.btn-primary{
  background:linear-gradient(180deg,var(--btn-blue-top),var(--btn-blue-bot)); border-color:var(--btn-blue-bd); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4); text-shadow:0 1px 1px rgba(0,0,0,.3); font-weight:700;
}
.btn-primary:hover{ background:linear-gradient(180deg,#7aa8e2,#3f6ba6); border-color:var(--btn-blue-bd); color:#fff; }
.btn-primary:active{ background:linear-gradient(180deg,#356199,#4574ac); box-shadow:inset 0 1px 3px rgba(0,0,0,.35); }

.btn-success{ background:linear-gradient(180deg,#6fbf73,#3f9d47); border-color:#2e7d32; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.3); font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
.btn-danger{ background:linear-gradient(180deg,#d76b60,#bb3728); border-color:#932a1f; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.3); font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.btn-warning{ background:linear-gradient(180deg,#e6c65a,#c39a1c); border-color:#9a7a12; color:#3a2e00; text-shadow:0 1px 0 rgba(255,255,255,.3); font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
.btn-light{ background:linear-gradient(180deg,#fff,#eef1f5); color:var(--ink); }
.btn-sm{ height:20px; min-height:20px; padding:0 8px; font-size:10px; }
.btn-icon{ padding:0; width:var(--ctrl-h); }
.btn-block{ display:flex; width:100%; }
.btn:disabled{ opacity:.55; cursor:default; box-shadow:none; color:var(--muted-2); }

.btn--busy{ pointer-events:none; opacity:.85; }
.btn--busy::before{
  content:""; width:11px; height:11px; flex:0 0 11px;
  border-radius:50%; border:2px solid currentColor; border-right-color:transparent;
  animation:btnspin .8s linear infinite;
}
@keyframes btnspin{ to{ transform:rotate(360deg); } }

/* ================================================================
   Forms — inset field wells, classic look
   ================================================================ */
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px 12px; }
.field{ margin-bottom:8px; }
.field label{ display:block; font-weight:700; font-size:11px; color:var(--ink-2); margin-bottom:3px; }
.field label .req{ color:var(--bad); }
.field .hint{ font-size:10px; color:var(--muted); margin-top:2px; }
.input,select,textarea,
input:not([type]),input[type=text],input[type=password],input[type=date],
input[type=number],input[type=tel],input[type=email],input[type=search],input[type=file]{
  font-family:inherit; font-size:11px; color:var(--ink); background:#fff;
  border:1px solid var(--line-3); border-top-color:var(--line-dark); border-left-color:var(--line-dark);
  border-radius:var(--r-sm);
  padding:0 6px; width:100%; height:var(--ctrl-h);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.10);
}
select{ appearance:none; padding-right:22px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='%235e6b78'><path d='M6 9l6 6 6-6z'/></svg>");
  background-repeat:no-repeat; background-position:right 5px center; }
textarea{ min-height:60px; height:auto; padding:4px 6px; resize:vertical; line-height:1.45; }
.input::placeholder,input::placeholder,textarea::placeholder{ color:var(--muted-2); }
.input:focus,select:focus,textarea:focus,input:focus{ outline:none; border-color:var(--blue); box-shadow:inset 0 1px 2px rgba(0,0,0,.10), 0 0 3px rgba(61,111,180,.5); background:#fffef8; }
input[type=file]{ padding:3px 5px; height:var(--ctrl-h); background:#f4f6f8; cursor:pointer; font-size:10px; box-shadow:none; }
fieldset{ border:1px solid var(--line-3); border-radius:var(--r-md); padding:9px 11px; margin-bottom:10px; background:linear-gradient(180deg,#fbfcfd,#f2f5f8); }
legend{ font-weight:700; color:var(--blue-darker); padding:0 5px; font-size:11px; }

.inline-form{ display:flex; flex-wrap:wrap; gap:7px; align-items:flex-end; }
.inline-form .field{ margin:0; }
.inline-form input,.inline-form select{ width:100%; }
.inline-form .btn{ height:var(--ctrl-h); }
.inline-form input[type=file]{ height:var(--ctrl-h); }

/* ================================================================
   Tables — classic data grid: blue header, thin grid lines, zebra
   ================================================================ */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line-3); background:#fff; }
table.tbl{ width:100%; border-collapse:collapse; font-size:11px; }
.tbl thead th{
  text-align:left; color:#fff;
  background:linear-gradient(180deg,#6a90c0,#436a9e);
  font-weight:700; font-size:11px;
  padding:0 8px; height:23px; border-right:1px solid #5a7ba8;
  border-bottom:1px solid #345480; white-space:nowrap;
  position:sticky; top:0; z-index:1; text-shadow:0 1px 1px rgba(0,0,0,.3);
}
.tbl thead th:last-child{ border-right:0; }
.tbl tbody td{ padding:0 8px; height:var(--row-h); border-bottom:1px solid #dfe4ea;
  border-right:1px solid #eef1f4; vertical-align:middle; }
.tbl tbody td:last-child{ border-right:0; }
.tbl tbody tr:nth-child(even){ background:#f2f6fb; }
.tbl tbody tr:last-child td{ border-bottom:1px solid #dfe4ea; }
.tbl tbody tr:hover{ background:#fdf7d8; }
.tbl tbody tr.selected,.tbl tbody tr[aria-selected="true"]{ background:var(--sel); box-shadow:inset 0 0 0 1px var(--sel-bd); }
.tbl tfoot td{ padding:0 8px; height:22px; border-top:1px solid var(--line-3); background:linear-gradient(180deg,#eef3f9,#dce6f1); font-weight:700; }
.tbl .mono{ font-family:var(--mono); color:var(--ink); }
.cell-strong{ font-weight:700; }
.cell-muted{ color:var(--muted); }
.tbl td.num,.tbl th.num{ text-align:right; }

/* ================================================================
   Badges — small classic status labels
   ================================================================ */
.badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:700; padding:0 6px; height:15px; border-radius:2px;
  border:1px solid transparent; line-height:15px; white-space:nowrap;
}
.badge-success{ background:var(--ok-bg); color:var(--ok); border-color:var(--ok-bd); }
.badge-warning{ background:var(--warn-bg); color:#7a6000; border-color:var(--warn-bd); }
.badge-error,.badge-danger{ background:var(--bad-bg); color:var(--bad); border-color:var(--bad-bd); }
.badge-secondary{ background:#eaeef2; color:var(--muted); border-color:var(--line-2); }
.badge-info{ background:var(--inf-bg); color:var(--inf); border-color:var(--inf-bd); }
.badge-primary{ background:#e2ecf8; color:var(--blue-darker); border-color:#a9c4e6; }

/* ================================================================
   Alerts — classic message boxes with left rule
   ================================================================ */
.alert{
  display:flex; align-items:flex-start; gap:8px;
  font-size:11px; padding:6px 9px; margin-bottom:9px;
  border:1px solid transparent; border-radius:var(--r-sm); font-weight:400;
  border-left-width:4px;
}
.alert i{ display:none; }
.alert::before{ display:none; }
.alert-success{ background:var(--ok-bg); color:#1f5e22; border-color:var(--ok-bd); border-left-color:var(--ok); }
.alert-error{ background:var(--bad-bg); color:#8f2c20; border-color:var(--bad-bd); border-left-color:var(--bad); }
.alert-info{ background:var(--inf-bg); color:#274a7c; border-color:var(--inf-bd); border-left-color:var(--inf); }
.alert-warning{ background:var(--warn-bg); color:#6f5600; border-color:var(--warn-bd); border-left-color:#c39a1c; }

/* ================================================================
   Toolbar / filters — classic beveled action strip
   ================================================================ */
.toolbar{
  display:flex; flex-wrap:wrap; gap:7px; align-items:flex-end; margin-bottom:9px;
  background:linear-gradient(180deg,#f6f8fa,#e6ebf0); border:1px solid var(--line-3);
  border-radius:var(--r-md); padding:7px 9px; box-shadow:inset 0 1px 0 #fff;
}
.toolbar .field{ margin:0; min-width:130px; flex:0 1 auto; }
.toolbar .field label{ font-size:10px; margin-bottom:2px; }
.toolbar .btn{ height:var(--ctrl-h); }
.toolbar input,.toolbar select{ width:100%; }
.toolbar input[name="search"]{ min-width:170px; }
.search{ position:relative; }
.search i{ display:none; }
.search input{ width:auto; min-width:170px; }

/* ================================================================
   Misc
   ================================================================ */
.empty{ text-align:center; padding:24px 14px; color:var(--muted); }
.empty i{ display:none; }
.empty h4{ font-size:12px; color:var(--ink-2); margin-bottom:3px; }
.muted{ color:var(--muted); }
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:10px; }
.flex{ display:flex; } .items-center{ align-items:center; } .gap{ gap:6px; } .between{ justify-content:space-between; }
.mt{ margin-top:10px; } .mb{ margin-bottom:10px; }
.drop{ border:1px dashed var(--line-dark); border-radius:var(--r-sm); background:#f4f6f8; padding:9px; display:flex; gap:8px; align-items:center; }
.drop:hover{ border-color:var(--blue); background:#eef5fc; }
.drop .dico{ display:none; }
.drop input[type=file]{ width:auto; }
.req{ color:var(--bad); }
.hint{ font-size:10px; color:var(--muted); }

/* ================================================================
   Modal — classic centered dialog with blue caption bar
   ================================================================ */
.modal-overlay,.sheet-overlay{
  display:none; position:fixed; inset:0; z-index:120;
  background:rgba(40,50,62,.45);
  padding:16px; overflow-y:auto;
}
.modal-overlay.open,.sheet-overlay.open{ display:flex; align-items:flex-start; justify-content:center; }
.modal{
  width:500px; max-width:100%; margin:44px auto;
  background:var(--surface); border:1px solid var(--blue-darker); border-radius:var(--r-md); box-shadow:var(--sh-3);
  overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 10px; min-height:28px;
  background:linear-gradient(180deg,var(--title-grad-top),var(--title-grad-bot));
  border-bottom:1px solid var(--blue-darker); color:#fff;
}
.modal-head h3{ font-size:12px; font-weight:700; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35); }
.modal-body{ padding:12px; background:linear-gradient(180deg,#fbfcfd,#fff); }
.modal-foot{ padding:8px 12px; border-top:1px solid var(--line-3); background:linear-gradient(180deg,#f0f3f7,#e2e8ee); display:flex; justify-content:flex-end; gap:6px; }
.modal-close{ background:none; border:0; color:#fff; font-size:16px; line-height:1; cursor:pointer; padding:0 4px; min-height:28px; }
.modal-close:hover{ color:#ffe0e0; }

@media (max-width:560px){
  .modal-overlay.open,.sheet-overlay.open{ align-items:flex-start; padding:8px; }
  .modal{ width:100%; margin:8px auto; }
}

/* ================================================================
   Toasts — classic notification boxes
   ================================================================ */
.toast-wrap{ position:fixed; top:8px; right:8px; left:auto; z-index:200; display:flex; flex-direction:column; gap:6px; align-items:flex-end; pointer-events:none; max-width:calc(100% - 16px); }
.toast{ background:linear-gradient(180deg,#fffef2,#fdf6d4); color:#5a4a00; padding:7px 12px; font-size:11px; font-weight:400; border:1px solid #e2cd7a; border-left:4px solid #c39a1c; border-radius:var(--r-sm); box-shadow:var(--sh-2); max-width:100%; pointer-events:auto; }
.toast.ok{ background:linear-gradient(180deg,#f0f8f0,#e0f0e0); color:#1f5e22; border-color:#a6d3a6; border-left-color:var(--ok); }
.toast.err{ background:linear-gradient(180deg,#fdeeec,#fbe0dd); color:#8f2c20; border-color:#e3a49d; border-left-color:var(--bad); }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width:1024px){
  .sidebar{ transform:translateX(-100%); box-shadow:var(--sh-3); }
  body.nav-open .sidebar{ transform:translateX(0); }
  .main{ margin-left:0; }
  .hamburger{ display:inline-flex; }
  body.nav-open .scrim{ display:block; position:fixed; inset:0; z-index:55; background:rgba(40,50,62,.4); }
}

@media (max-width:560px){
  .content{ padding:8px; }
  .topbar{ padding:0 9px; gap:8px; }
  .topbar .tt{ flex-direction:column; align-items:flex-start; gap:0; }
  .topbar .userchip .who{ display:none; }
  .form-grid{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .toolbar .field{ min-width:calc(50% - 4px); }
  .toolbar input[name="search"]{ min-width:0; }
  .toast-wrap{ left:8px; align-items:stretch; }
}

/* ================================================================
   Print
   ================================================================ */
@media print{
  body{ background:#fff; color:#000; font-size:10px; }
  .sidebar,.topbar,.mtopbar,.bottomnav,.scrim,.toolbar,.btn,.page-actions{ display:none !important; }
  .main,.app.mobile .content{ margin:0; }
  .content{ max-width:none; padding:0; }
  .card,.stat,.table-wrap{ box-shadow:none; border-color:#999; }
  .tbl thead th{ background:#ddd !important; color:#000 !important; text-shadow:none; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .tbl tbody td{ border-color:#ccc; }
}