/* ============================================================
   Rumbu Industries Group — Shared Design System
   Six themes, switchable per user via <html data-theme="...">:
     navy → Navy & Gold (default) | dark → Sleek Dark
     emerald → Emerald & Gold | burgundy → Burgundy & Gold
     ocean → Ocean Blue | graphite → Graphite
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
   Native-app feel (PWA / installed on mobile)
   Zoom itself is already disabled via each page's viewport meta
   tag (maximum-scale=1.0, user-scalable=no) — these rules handle
   everything else that makes a web page feel like a web page
   rather than an installed app: the ~300ms tap delay, the gray
   flash on tap, rubber-band overscroll bounce, and the long-press
   "save image / copy" callout on touch devices.
   ============================================================ */
html, body{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
button, a, input[type="button"], input[type="submit"], .btn-ghost, .qbtn{
  -webkit-touch-callout: none;
}
img{
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

:root, :root[data-theme="navy"] {
  --side-bg1:#12203c; --side-bg2:#0e1a30; --side-fg:#c3d0e6; --side-muted:#8ea3c4;
  --side-hover:rgba(255,255,255,.07); --side-active-bg:#c8a34e; --side-active-fg:#12203c;
  --logo-bg:#c8a34e; --logo-fg:#12203c;
  --accent:#c8a34e; --accent-2:#b9922f; --primary:#12203c; --primary-2:#1c3157;
  --bg:#eef1f6; --card:#ffffff; --line:#e2e7f0; --line-2:#d3dae6;
  --text:#12203c; --muted:#7286a3; --heading:#12203c;
  --th-bg:#12203c; --th-fg:#ffffff;
  --ok:#1e7d34; --bad:#b02a37; --warn:#9a6b00;
  --input-bg:#ffffff; --input-border:#d3dae6; --input-fg:#12203c;
  --shadow:0 1px 3px rgba(20,35,65,.06), 0 6px 20px rgba(20,35,65,.05);
  --radius:10px; --radius-sm:8px; --side-w:260px; --header-h:56px;
  --sans:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

:root[data-theme="dark"] {
  --side-bg1:#0d1420; --side-bg2:#0a1019; --side-fg:#94a3b8; --side-muted:#64748b;
  --side-hover:#16202f; --side-active-bg:#1e3a5f; --side-active-fg:#38bdf8;
  --logo-bg:#38bdf8; --logo-fg:#0d1420;
  --accent:#38bdf8; --accent-2:#0ea5e9; --primary:#38bdf8; --primary-2:#0ea5e9;
  --bg:#0f1826; --card:#16202f; --line:#1c2738; --line-2:#243349;
  --text:#e2e8f0; --muted:#8296b0; --heading:#ffffff;
  --th-bg:#0d1420; --th-fg:#94a3b8;
  --ok:#22c55e; --bad:#f26d78; --warn:#eab308;
  --input-bg:#0f1826; --input-border:#243349; --input-fg:#e2e8f0;
  --shadow:0 1px 3px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
}

:root[data-theme="emerald"] {
  --side-bg1:#0f3d2e; --side-bg2:#0a2921; --side-fg:#c8e6d9; --side-muted:#8fc4ac;
  --side-hover:rgba(255,255,255,.07); --side-active-bg:#c8a34e; --side-active-fg:#0f3d2e;
  --logo-bg:#c8a34e; --logo-fg:#0f3d2e;
  --accent:#0f8a5f; --accent-2:#0c6f4b; --primary:#0f3d2e; --primary-2:#155a41;
  --bg:#eef6f2; --card:#ffffff; --line:#dce9e2; --line-2:#c9dcd2;
  --text:#0f3d2e; --muted:#5f8570; --heading:#0f3d2e;
  --th-bg:#0f3d2e; --th-fg:#ffffff;
  --ok:#1e7d34; --bad:#b02a37; --warn:#9a6b00;
  --input-bg:#ffffff; --input-border:#c9dcd2; --input-fg:#0f3d2e;
  --shadow:0 1px 3px rgba(15,61,46,.06), 0 6px 20px rgba(15,61,46,.05);
}

:root[data-theme="burgundy"] {
  --side-bg1:#4a1220; --side-bg2:#350d17; --side-fg:#e3c9cf; --side-muted:#b98a93;
  --side-hover:rgba(255,255,255,.07); --side-active-bg:#c8a34e; --side-active-fg:#4a1220;
  --logo-bg:#c8a34e; --logo-fg:#4a1220;
  --accent:#8f2438; --accent-2:#761d2e; --primary:#4a1220; --primary-2:#631a2b;
  --bg:#f7eef0; --card:#ffffff; --line:#eddde1; --line-2:#e0c7cd;
  --text:#4a1220; --muted:#8a6670; --heading:#4a1220;
  --th-bg:#4a1220; --th-fg:#ffffff;
  --ok:#1e7d34; --bad:#b02a37; --warn:#9a6b00;
  --input-bg:#ffffff; --input-border:#e0c7cd; --input-fg:#4a1220;
  --shadow:0 1px 3px rgba(74,18,32,.06), 0 6px 20px rgba(74,18,32,.05);
}

:root[data-theme="ocean"] {
  --side-bg1:#0c3548; --side-bg2:#082533; --side-fg:#bfe0ec; --side-muted:#7fb3c7;
  --side-hover:rgba(255,255,255,.07); --side-active-bg:#38bdf8; --side-active-fg:#0c3548;
  --logo-bg:#38bdf8; --logo-fg:#0c3548;
  --accent:#0891b2; --accent-2:#0e7490; --primary:#0c3548; --primary-2:#155e75;
  --bg:#eef6f9; --card:#ffffff; --line:#dcecf1; --line-2:#c8dde5;
  --text:#0c3548; --muted:#5e88a0; --heading:#0c3548;
  --th-bg:#0c3548; --th-fg:#ffffff;
  --ok:#1e7d34; --bad:#b02a37; --warn:#9a6b00;
  --input-bg:#ffffff; --input-border:#c8dde5; --input-fg:#0c3548;
  --shadow:0 1px 3px rgba(12,53,72,.06), 0 6px 20px rgba(12,53,72,.05);
}

:root[data-theme="graphite"] {
  --side-bg1:#2a2e35; --side-bg2:#1f2228; --side-fg:#cfd3d9; --side-muted:#9aa0aa;
  --side-hover:rgba(255,255,255,.07); --side-active-bg:#c8a34e; --side-active-fg:#2a2e35;
  --logo-bg:#c8a34e; --logo-fg:#2a2e35;
  --accent:#5b6470; --accent-2:#4a525c; --primary:#2a2e35; --primary-2:#3a3f47;
  --bg:#f0f1f3; --card:#ffffff; --line:#e2e4e8; --line-2:#d3d7dc;
  --text:#2a2e35; --muted:#727782; --heading:#2a2e35;
  --th-bg:#2a2e35; --th-fg:#ffffff;
  --ok:#1e7d34; --bad:#b02a37; --warn:#9a6b00;
  --input-bg:#ffffff; --input-border:#d3d7dc; --input-fg:#2a2e35;
  --shadow:0 1px 3px rgba(20,25,30,.06), 0 6px 20px rgba(20,25,30,.05);
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; height:100%; }
body { font-family:var(--sans); background:var(--bg); color:var(--text); font-size:14px; line-height:1.45; -webkit-text-size-adjust:100%; }

.app { display:flex; min-height:100vh; }
.sidebar {
  width:var(--side-w); background:linear-gradient(180deg,var(--side-bg1),var(--side-bg2)); color:var(--side-fg);
  display:flex; flex-direction:column; overflow-y:auto; z-index:45;
  /* Always an overlay drawer — landing/content is full-screen by default
     on every screen size, not just mobile. Hamburger reveals it. */
  position:fixed; top:0; left:0; bottom:0; height:100vh;
  transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow);
}
.sidebar.open{ transform:translateX(0); }
.sidebar::-webkit-scrollbar{width:8px;} .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px;}
.side-brand{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;}
.side-brand .logo{width:36px;height:36px;border-radius:9px;background:var(--logo-bg);color:var(--logo-fg);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 36px;}
.side-brand .b-text{flex:1;min-width:0;}
.side-brand .b-text b{display:block;font-size:13px;color:#fff;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.side-brand .b-text span{font-size:10.5px;color:var(--side-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.side-close{flex:0 0 auto;background:transparent;border:0;color:var(--side-muted);font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px;}
.side-close:hover{background:var(--side-hover);color:#fff;}
.side-scroll{flex:1;padding:8px 10px 20px;overflow-y:auto;min-height:0;}
.side-footer{flex:0 0 auto;padding:10px 12px;border-top:1px solid rgba(255,255,255,.08);}
.side-logout{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.06);color:var(--side-fg);border:1px solid rgba(255,255,255,.1);padding:10px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;}
.side-logout:hover{background:rgba(255,255,255,.12);}

/* Flat, single-row module buttons — clicking one opens a full-screen
   "card" listing that module's pages (see .picker-grid below) instead
   of expanding an inline dropdown. */
.menu-flat{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:11px 12px;margin:1px 0;background:transparent;border:0;border-radius:8px;
  font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--side-fg);text-transform:uppercase;
  cursor:pointer;font-family:inherit;text-align:left;
}
.menu-flat:hover{background:var(--side-hover);color:#fff;}
.menu-flat:hover .m-icon{color:#fff;}
.menu-flat .m-label{display:flex;align-items:center;gap:10px;min-width:0;}
.menu-flat .m-icon{width:17px;height:17px;flex:0 0 17px;display:inline-flex;color:var(--side-muted);}
.menu-flat .m-icon svg{width:100%;height:100%;}
.menu-flat .chev{font-size:16px;opacity:.55;flex:0 0 auto;transition:transform .15s ease,opacity .15s ease;}
/* Active module (its page menu is flown out to the side) */
.menu-flat.active{background:var(--side-active-bg);color:var(--side-active-fg);}
.menu-flat.active .m-icon{color:var(--side-active-fg);}
.menu-flat.active .chev{opacity:1;color:var(--side-active-fg);}

/* ============================================================
   SIDE FLYOUT SUBMENU
   Selecting a module slides its pages out beside the sidebar
   (from the side, not a dropdown below and not a full card screen).
   Positioned in JS relative to the clicked module button.
   ============================================================ */
.side-flyout{
  position:fixed;z-index:50;width:236px;max-height:76vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 38px rgba(15,25,45,.30);
  padding:7px;display:none;opacity:0;transform:translateX(-8px);
  transition:opacity .15s ease,transform .15s ease;
}
.side-flyout.show{display:block;opacity:1;transform:translateX(0);}
.side-flyout::-webkit-scrollbar{width:8px;}
.side-flyout::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px;}
.side-flyout .fly-head{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:9px 11px 7px;}
.flyout-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:transparent;border:0;border-radius:8px;padding:10px 11px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--heading);text-align:left;
  transition:background .12s ease;
}
.flyout-item:hover{background:var(--bg);}
.flyout-item .fi-arrow{color:var(--accent);font-size:15px;flex:0 0 auto;}
.flyout-empty{padding:12px 11px;font-size:12.5px;color:var(--muted);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;overflow:hidden;}
.app-header{height:var(--header-h);flex:0 0 var(--header-h);background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 18px;z-index:20;}
.app-header .hamburger{display:flex;align-items:center;justify-content:center;background:transparent;border:0;font-size:22px;color:var(--heading);cursor:pointer;padding:4px 10px;border-radius:6px;}
.app-header .hamburger:hover{background:var(--bg);}
.app-header .titles{flex:1;min-width:0;}
.app-header .titles h1{margin:0;font-size:15px;color:var(--heading);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-header .titles p{margin:0;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-box{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);white-space:nowrap;}
.user-box .u-name{font-weight:700;color:var(--heading);}
.user-box .u-role{background:var(--bg);border:1px solid var(--line);padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:700;}
.theme-toggle{position:relative;display:flex;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:4px;gap:6px;align-items:center;}
.theme-toggle-trigger{display:none;}
.theme-popover{display:flex;gap:6px;align-items:center;}
.theme-swatch{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;position:relative;transition:transform .12s;}
.theme-swatch:hover{transform:scale(1.12);}
.theme-swatch.on{border-color:var(--text);box-shadow:0 0 0 2px var(--card);}
.theme-swatch.on::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:900;text-shadow:0 0 2px rgba(0,0,0,.6);}

.content{flex:1;overflow:auto;position:relative;}
.content-inner{padding:22px;max-width:1320px;margin:0 auto;}
.module-host{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;background:var(--bg);}
.module-host.show{display:flex;}
.module-host .m-bar{align-self:stretch;height:44px;flex:0 0 44px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 16px;}
.module-host .m-bar .m-back{background:var(--bg);border:1px solid var(--line-2);color:var(--heading);border-radius:7px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;}
.module-host .m-bar .m-title{font-weight:700;color:var(--heading);font-size:14px;display:flex;align-items:center;}
.module-host .m-bar .m-title .m-icon{width:16px;height:16px;color:var(--accent);}
.module-host .m-bar .m-title .m-icon svg{width:100%;height:100%;}
.module-host iframe{flex:1;width:100%;max-width:1320px;border:0;background:var(--bg);}

/* Quick-links bar: sibling pages of the active module */
.module-host .quick-links{
  align-self:stretch;flex:0 0 auto;display:flex;align-items:center;gap:7px;
  padding:8px 16px;background:var(--card);border-bottom:1px solid var(--line);
  overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;
}
.module-host .quick-links::-webkit-scrollbar{height:6px;}
.module-host .quick-links::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px;}
.quick-links .ql-label{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);flex:0 0 auto;padding-right:4px;}
.quick-links .ql-item{
  flex:0 0 auto;background:var(--bg);border:1px solid var(--line-2);color:var(--heading);
  border-radius:20px;padding:6px 13px;font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.quick-links .ql-item:hover{border-color:var(--accent);}
.quick-links .ql-item.active{background:var(--accent);color:var(--logo-fg);border-color:var(--accent);}

/* Module picker — the "fresh card" screen a module opens into, instead
   of an inline sidebar dropdown. Its cards then open a page normally.
   Cards are fixed-width and centered as a cluster in the middle of the
   screen (not stretched edge-to-edge) — reads like a deliberate menu of
   choices rather than a full-bleed data grid. */
.picker-scroll{flex:1;overflow:auto;}
.picker-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:16px;padding:40px 22px;max-width:920px;margin:0 auto;}
.page-card{
  flex:0 0 200px;width:200px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px;box-shadow:var(--shadow);cursor:pointer;font-family:inherit;text-align:left;
  transition:transform .12s ease,border-color .12s ease;
}
.page-card:hover{transform:translateY(-2px);border-color:var(--accent);}
.page-card .pc-label{font-size:14px;font-weight:700;color:var(--heading);}
.page-card .pc-arrow{color:var(--accent);font-size:16px;flex:0 0 auto;}

/* Full-screen page navigation: when any sidebar item is opened, the
   sidebar itself is hidden and the module fills the entire viewport —
   each page reads like its own dedicated screen ("card") rather than a
   panel squeezed beside a permanent sidebar. "← Back" restores it.
   The hamburger stays available throughout, so the sidebar can always
   be reopened to jump straight to a different module. */
.app.module-open .sidebar:not(.open){display:none;}

.dash-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;margin-bottom:10px;box-shadow:var(--shadow);}
.dash-filter{display:flex;align-items:center;gap:8px;flex:0 1 auto;}
.dash-filter label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:0;white-space:nowrap;}
.dash-filter select{min-width:150px;padding:6px 10px;}
.dash-frame{width:100%;height:calc(100vh - var(--header-h) - 80px);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);}

.card-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow);}
.card-panel h2,.card-panel h3{color:var(--heading);margin:0 0 4px;}
.card-panel h2{font-size:17px;} .card-panel h3{font-size:15px;}
.card-panel .sub{color:var(--muted);font-size:12.5px;margin:0 0 16px;}
.field{margin-bottom:15px;}
.field>label{display:block;font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:6px;}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--input-border);border-radius:var(--radius-sm);font-size:14px;font-family:inherit;background:var(--input-bg);color:var(--input-fg);transition:border-color .15s,box-shadow .15s;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,117,182,.18);}
textarea{resize:vertical;min-height:90px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
@media(max-width:720px){.form-row,.form-row-3{grid-template-columns:1fr;}}

button,.btn{font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;border:0;border-radius:var(--radius-sm);padding:11px 18px;background:var(--primary);color:#fff;transition:filter .15s,transform .05s;}
button:hover,.btn:hover{filter:brightness(1.10);}
button:active{transform:translateY(1px);}
button:disabled{opacity:.55;cursor:not-allowed;}
.btn-accent{background:var(--accent);color:var(--logo-fg);}
.btn-ghost{background:var(--bg);color:var(--heading);border:1px solid var(--line-2);}
.btn-ok{background:var(--ok);} .btn-bad,.btn-danger{background:var(--bad);}
.btn-sm{padding:6px 11px;font-size:12.5px;}

.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;box-shadow:var(--shadow);}
.filters .f{flex:1;min-width:150px;} .filters .f.f-min{flex:0 0 auto;}
.filters label{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;}
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip-btn{background:var(--bg);color:var(--heading);border:1px solid var(--line-2);border-radius:20px;padding:7px 14px;font-size:12.5px;font-weight:600;cursor:pointer;}
.chip-btn.active{background:var(--accent);color:var(--logo-fg);border-color:var(--accent);}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);}
.kpi .value{font-size:26px;font-weight:800;color:var(--heading);line-height:1.1;}
.kpi .label{font-size:11px;color:var(--muted);margin-top:5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
.kpi.ok .value{color:var(--ok);} .kpi.ok::before{background:var(--ok);}
.kpi.bad .value{color:var(--bad);} .kpi.bad::before{background:var(--bad);}
.kpi.warn .value{color:var(--warn);} .kpi.warn::before{background:var(--warn);}

.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);}
th{background:var(--th-bg);color:var(--th-fg);font-size:12px;font-weight:600;white-space:nowrap;position:sticky;top:0;}
tbody tr:nth-child(even){background:rgba(127,127,127,.04);}
tbody tr:hover{background:rgba(127,127,127,.08);}

.status{padding:10px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;margin-top:10px;}
.status.ok{background:rgba(30,125,52,.12);color:var(--ok);}
.status.bad,.status.err{background:rgba(176,42,55,.12);color:var(--bad);}
.status.warn{background:rgba(154,107,0,.12);color:var(--warn);}
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;color:#fff;background:var(--accent);}

.overlay{position:fixed;inset:0;background:rgba(15,25,45,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:39;}
.bottom-tabs{display:none;}
.overlay.show{opacity:1;pointer-events:auto;}
@media(max-width:900px){
  .content-inner{padding:16px;}
  .picker-grid{padding:20px 16px;max-width:100%;}
}
@media(max-width:520px){
  .page-card{flex:1 1 140px;width:auto;min-width:140px;}
}

/* ============================================================
   MOBILE LAYOUT (≤640px)
   - Sidebar becomes a bottom sheet instead of a left-edge drawer —
     easier to reach and dismiss with one thumb.
   - Theme swatches collapse behind a single icon + popover instead
     of crowding the header row.
   - A bottom tab bar puts Dashboard/Menu/Log Out within thumb reach,
     hidden while the sidebar sheet itself is open (see body.drawer-open
     below) so the two never overlap.
   - Tap targets are bumped to a comfortable minimum throughout.
   ============================================================ */
@media(max-width:640px){
  .sidebar{
    left:0; right:0; top:auto; bottom:0; width:100%;
    height:75vh; max-height:620px;
    border-radius:16px 16px 0 0;
    transform:translateY(100%);
    box-shadow:0 -8px 28px rgba(0,0,0,.35);
  }
  .sidebar.open{transform:translateY(0);}
  .sidebar::before{
    content:""; display:block; width:40px; height:4px; border-radius:3px;
    background:rgba(255,255,255,.25); margin:8px auto 0;
  }

  .theme-toggle-trigger{display:flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--heading);padding:8px;border-radius:8px;min-width:40px;min-height:40px;}
  .theme-toggle-trigger:hover, .theme-toggle-trigger:active{background:var(--bg);}
  .theme-toggle{background:none;border:0;padding:0;}
  .theme-popover{
    display:none; position:absolute; top:calc(100% + 10px); right:0;
    background:var(--card); border:1px solid var(--line); border-radius:12px;
    padding:12px; box-shadow:var(--shadow); z-index:60; width:max-content;
  }
  .theme-popover.show{display:flex;}
  .theme-swatch{width:32px;height:32px;}

  .user-box .u-role{display:none;} /* keep just the name — role badge is the first thing to drop when space is tight */

  .bottom-tabs{
    display:flex; position:fixed; left:0; right:0; bottom:0; height:60px;
    background:var(--card); border-top:1px solid var(--line); z-index:50;
    padding-bottom:env(safe-area-inset-bottom);
  }
  body.drawer-open .bottom-tabs{display:none;}
  .bottom-tabs button{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; background:transparent; border:0; color:var(--muted); font-size:10.5px; font-weight:700;
    min-height:100%;
  }
  .bottom-tabs button:active{background:var(--bg);}
  .bottom-tabs button svg{color:var(--heading);}

  /* Room for the bottom tab bar so it never sits over the last field
     or button of whatever's on screen. */
  .content{padding-bottom:60px;}
  .module-host{padding-bottom:60px;}

  /* Comfortable minimum tap size app-wide on touch screens. Excludes
     .btn-sm (already a deliberately compact variant used in tables/
     inline actions) and checkbox/radio inputs (bumping those directly
     would blow up their visual size — their tap target is a separate,
     more careful fix, not a blanket min-height). */
  button:not(.btn-sm), .btn:not(.btn-sm), .menu-flat, .page-card{min-height:44px;}
  .theme-swatch, .side-close, .hamburger{min-height:40px;min-width:40px;}
}

/* ============================================================
   SHARED PRINT LETTERHEAD (appears only on printouts/PDF)
   Usage: put this near the top of a report page's body:
   <div class="print-letterhead">
     <img class="pl-logo" src="../../assets/rumbu-logo.png" alt="">
     <div class="pl-org">
       <div class="pl-name">RUMBU INDUSTRIES GROUP</div>
       <div class="pl-addr">KM4, Hadejia Road, Kano State, Nigeria</div>
     </div>
     <div class="pl-meta">
       <div class="pl-branch" id="plBranch">Branch: —</div>
       <div class="pl-date" id="plDate"></div>
     </div>
     <div class="pl-title" id="plTitle">Report</div>
     <div class="pl-sub" id="plSub"></div>
   </div>
   Then call fillLetterhead({title, branch, sub}) before printing.
   ============================================================ */
.print-letterhead{ display:none; }
@media print{
  /* Ensure the letterhead sits above content even on pages whose
     on-screen body uses fl/ grid / centering layouts. */
  body{ display:block !important; }
  /* Hide app chrome + on-screen filter controls when printing */
  .no-print{ display:none !important; }
  .print-letterhead{
    display:block; margin:0 0 14px; padding:0 0 10px;
    border-bottom:3px solid #1F3864; position:relative; color:#111;
  }
  .print-letterhead .pl-logo{
    position:absolute; top:0; left:0; width:52px; height:auto;
  }
  .print-letterhead .pl-org{ text-align:center; padding:0 60px; }
  .print-letterhead .pl-name{
    font-size:20px; font-weight:800; letter-spacing:.5px; color:#1F3864; line-height:1.1;
  }
  .print-letterhead .pl-addr{ font-size:10.5px; color:#444; margin-top:2px; }
  .print-letterhead .pl-meta{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-top:10px; font-size:11px; color:#333;
  }
  .print-letterhead .pl-branch{ font-weight:700; }
  .print-letterhead .pl-title{
    text-align:center; font-size:15px; font-weight:800; color:#111;
    margin-top:8px; text-transform:uppercase; letter-spacing:.4px;
  }
  .print-letterhead .pl-sub{ text-align:center; font-size:11px; color:#555; margin-top:2px; }
  @page{ margin:14mm 12mm; }
}
/* ---------------------------------------------------------------------
   Dropdown option legibility fix (applies globally, every page)
   Many browsers (Firefox, Safari, several mobile WebViews) render an open
   <select>'s option list using the OS's native popup background, while
   still inheriting the page's own text color. Combined with our themed
   --text values (some pale, for dark-card themes), that produced pale
   text sitting on a stubborn native-white popup background — effectively
   invisible. Forcing explicit, always-readable colors directly on the
   option elements (rather than relying on inheritance) fixes this
   regardless of which native behavior a given browser falls back to.
--------------------------------------------------------------------- */
select option{
  background:#ffffff;
  color:#12203c;
}

/* ── Number inputs: remove spin arrows and block scroll-wheel changes ──
   Without this, scrolling a page while a number input is focused
   silently increments/decrements the value — a common data-entry mistake. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }