*{margin:0;padding:0;box-sizing:border-box}

/* ── Variables — Mode sombre ── */
:root{
  --sidebar-w:224px;
  --topbar-h:52px;
  --bottom-h:60px;
  --green:#4ADE80;
  --green-bg:#0D2818;
  --green-mid:#34D058;
  --amber:#FBB040;
  --amber-bg:#2A1A00;
  --red:#F87171;
  --red-bg:#2D0A0A;
  --border:#2A2D35;
  --border-light:#1E2128;
  --bg:#0E1117;
  --white:#161B24;
  --text:#F0F2F5;
  --text-2:#C8CDD6;
  --text-3:#8B90A0;
  --text-4:#555B6B;
  --shadow:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 2px 10px rgba(0,0,0,.5);
}

/* ── Base ── */
body{background:var(--bg);font-family:'DM Sans',system-ui,sans-serif;color:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
html{color-scheme:dark}
input,textarea,button,select{font-family:'DM Sans',system-ui,sans-serif;font-size:14px}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes tileIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.fade-in{animation:fadeIn .18s ease both}
.tile-in{animation:tileIn .2s ease both}

/* ── Data tables ── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{padding:9px 16px;text-align:left;color:var(--text-4);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid var(--border-light);background:var(--bg)}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--border-light);color:var(--text-2);font-size:14px;vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{cursor:pointer;transition:background .1s}
.tbl tbody tr:hover td{background:#1E2530}

/* ── Cards ── */
.card{background:var(--white);border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow)}

/* ── Topbar ── */
.topbar{height:var(--topbar-h);background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 22px;gap:12px;position:sticky;top:0;z-index:40;box-shadow:var(--shadow)}

/* ── Unit tiles ── */
.unit-tile{border-radius:10px;padding:22px 20px;cursor:pointer;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.unit-tile:hover{transform:translateY(-2px)}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;font-size:10px;font-weight:500;padding:2px 7px;border-radius:3px;white-space:nowrap}

/* ── Layout desktop ── */
.app-shell{display:flex;min-height:100vh}
.app-sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--white);border-right:1px solid var(--border);
  position:fixed;top:0;left:0;height:100vh;
  display:flex;flex-direction:column;z-index:100;
}
.app-main{margin-left:var(--sidebar-w);flex:1;min-width:0}
.app-bottomnav{display:none}

/* ── Layout mobile ── */
@media(max-width:768px){
  .app-sidebar{display:none}
  .app-main{margin-left:0;padding-bottom:var(--bottom-h)}
  .app-bottomnav{
    display:flex;position:fixed;bottom:0;left:0;right:0;
    height:var(--bottom-h);background:var(--white);
    border-top:1px solid var(--border);z-index:100;
  }
  .hide-mobile{display:none!important}
}
@media(min-width:769px){
  .hide-desktop{display:none!important}
}

/* ── Sidebar nav items ── */
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:6px;cursor:pointer;
  font-size:13px;font-weight:400;color:var(--text-3);
  transition:background .12s,color .12s;margin-bottom:3px;
}
.nav-item:hover{background:var(--green-bg)}
.nav-item.active{background:var(--green-bg);color:var(--green);font-weight:500}

/* ── Bottom nav buttons ── */
.bottom-btn{
  flex:1;background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;color:var(--text-3);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:11px;padding:0;position:relative;
  transition:color .12s;
}
.bottom-btn.active{color:var(--green);font-weight:500}
.bottom-btn.active::after{
  content:'';position:absolute;bottom:0;
  width:20px;height:2px;background:var(--green);border-radius:1px;
}

/* ── Print ── */
@media print{
  .no-print,.app-sidebar,.app-bottomnav{display:none!important}
  body{background:#fff!important}
  .app-main{margin-left:0!important}
  #print-area{position:static!important;width:100%!important;padding:15mm!important;background:#fff!important}
}