/* ══════════════════════════════════════════
   PEE CMS — Mobile-First App Stylesheet v4.1
   Breakpoints: mobile 320-767 | tablet 768-1023 | desktop 1024+
   ══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --bg:           #f0f4f9;
  --card:         #ffffff;
  --text:         #0f172a;
  --muted:        #64748b;
  --line:         #e2e8f0;
  --brand:        #2563eb;
  --brand2:       #0ea5e9;
  --brand-dark:   #1d4ed8;
  --green:        #16a34a;
  --red:          #dc2626;
  --orange:       #d97706;
  --purple:       #7c3aed;
  --sidebar-bg:   #0f1e3c;
  --sidebar-text: #c7d9f8;
  --radius:       16px;
  --radius-sm:    10px;
  --shadow:       0 4px 24px rgba(15,23,42,.08);
  --shadow-lg:    0 12px 40px rgba(15,23,42,.14);
  --bottom-nav-h: 68px;
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
  --page-pad:     16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { width:100%; overflow-x:clip; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font-family:var(--font); background:var(--bg); color:var(--text); font-size:15px; line-height:1.6; width:100%; overflow-x:clip; }
a { text-decoration:none; color:inherit; }
img,svg,video,canvas,iframe { max-width:100%; height:auto; }

/* APP SHELL */
.app { display:flex; min-height:100vh; }

/* SIDEBAR */
.sidebar {
  width:256px; background:var(--sidebar-bg); color:var(--sidebar-text);
  position:fixed; inset:0 auto 0 0; overflow-y:auto; overflow-x:hidden;
  z-index:200; display:flex; flex-direction:column;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent;
  transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s;
}
.brand { display:flex; align-items:center; gap:10px; padding:20px 16px 14px; border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0; }
.logo { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--brand2),var(--brand)); color:white; display:grid; place-items:center; font-weight:800; font-size:18px; flex-shrink:0; }
.brand b { display:block; font-size:15px; color:#fff; }
.brand small { font-size:11px; color:#94b8e8; display:block; margin-top:1px; }
#sidenav { padding:8px 8px 24px; flex:1; }
.nav-link.top { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:9px; font-size:13.5px; font-weight:500; color:var(--sidebar-text); transition:background .15s,color .15s; margin:1px 0; }
.nav-link.top:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-link.top.active { background:var(--brand); color:#fff; }
.nav-group { margin:2px 0; }
.nav-group-btn { width:100%; display:flex; align-items:center; gap:8px; padding:9px 10px; background:none; border:none; border-radius:9px; color:var(--sidebar-text); font:500 13.5px var(--font); cursor:pointer; text-align:left; transition:background .15s,color .15s; }
.nav-group-btn:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-group.open > .nav-group-btn { color:#fff; background:rgba(255,255,255,.06); }
.chevron { width:14px; height:14px; margin-left:auto; transition:transform .2s; flex-shrink:0; }
.nav-group.open > .nav-group-btn .chevron { transform:rotate(180deg); }
.nav-sub { display:none; padding-left:16px; margin-top:2px; }
.nav-group.open > .nav-sub { display:block; }
.nav-sub .nav-link { display:block; padding:7px 10px; border-radius:8px; font-size:13px; color:#94b8e8; transition:background .15s,color .15s; margin:1px 0; }
.nav-sub .nav-link:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav-sub .nav-link.active { background:var(--brand); color:#fff; }
.nav-icon { font-size:14px; flex-shrink:0; width:18px; text-align:center; }

/* MAIN */
.main { margin-left:256px; flex:1; min-width:0; display:flex; flex-direction:column; }

/* TOPBAR */
.topbar { background:var(--card); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; padding:0 24px; height:64px; position:sticky; top:0; z-index:100; box-shadow:0 1px 0 var(--line); flex-shrink:0; }
.menuBtn { display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px; border-radius:8px; min-height:0!important; }
.menuBtn span { display:block; width:22px; height:2.5px; background:var(--text); border-radius:2px; transition:all .2s; }
.topbar-title { flex:1; min-width:0; }
.topbar-title h1 { margin:0; font-size:17px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-title p { margin:0; font-size:12px; color:var(--muted); }
.userbox { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.user-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:white; display:grid; place-items:center; font-weight:700; font-size:15px; flex-shrink:0; }
.user-info { display:flex; flex-direction:column; line-height:1.3; }
.user-info strong { font-size:13px; font-weight:600; }
.user-info span { font-size:11px; color:var(--muted); }

/* OVERLAY */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:190; }
body.sidebar-open .sidebar-overlay { display:block !important; }

/* CONTENT */
.content { padding:24px; flex:1; overflow-x:visible; }

/* GRIDS */
.grid { display:grid; gap:16px; }
.kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }
.two { grid-template-columns:1fr 1fr; }
.two-wide { grid-template-columns:2fr 1fr; }
.three { grid-template-columns:repeat(3,1fr); }
.plans { grid-template-columns:repeat(3,1fr); }

/* KPI CARDS */
.kpi { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--brand2),var(--brand)); }
.kpi span { display:block; color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.kpi strong { display:block; font-size:28px; font-weight:800; margin:6px 0 4px; color:var(--text); }
.kpi small { color:var(--muted); font-size:12px; }

/* CARDS */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); }
.card h2,.card h3 { margin-top:0; font-weight:700; }
.card h2 { font-size:16px; }
.card h3 { font-size:15px; }

/* BUTTONS */
.btn, button.btn {
  background:var(--brand); color:white; padding:10px 18px; border-radius:var(--radius-sm);
  border:none; font:600 14px var(--font); cursor:pointer; display:inline-block;
  transition:background .15s,transform .1s; line-height:1.3; white-space:nowrap;
  min-height:44px; touch-action:manipulation;
}
.btn:hover { background:var(--brand-dark); }
.btn:active { transform:scale(.98); }
.btn.secondary { background:var(--line); color:var(--text); }
.btn.secondary:hover { background:#d1d5db; }
.btn.danger { background:var(--red); }
.btn.danger:hover { background:#b91c1c; }
.btn.success { background:var(--green); }
.btn.btn-sm { padding:6px 12px; font-size:13px; border-radius:8px; min-height:36px; }
.btn.small { padding:5px 10px; font-size:12px; border-radius:7px; min-height:32px; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* FORMS */
.form { max-width:680px; }
.form label, label.form-label { display:block; font-weight:600; font-size:13px; margin:12px 0 4px; color:var(--text); }
.form input,.form select,.form textarea,
input.form-control,select.form-control,textarea.form-control,
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea {
  width:100%; padding:10px 13px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font:14px var(--font); color:var(--text); background:white;
  transition:border-color .15s,box-shadow .15s; outline:none; min-height:44px;
}
input:focus,select:focus,textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.12); }

/* TABLES */
.table-wrap { overflow:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; min-width:600px; }
th,td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); font-size:14px; }
th { background:#f8fafc; color:#475569; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:#f8fafc; }

/* ALERTS */
.alert { padding:12px 16px; border-radius:12px; margin-bottom:14px; font-size:14px; font-weight:500; }
.alert-success { background:#dcfce7; color:#15803d; border:1px solid #bbf7d0; }
.alert-danger  { background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; }
.alert-warning { background:#fef9c3; color:#a16207; border:1px solid #fde68a; }
.alert-info    { background:#dbeafe; color:#1e40af; border:1px solid #bfdbfe; }

/* BADGES */
.badge { padding:3px 10px; border-radius:99px; font-size:11px; font-weight:700; display:inline-block; letter-spacing:.02em; }
.badge-success,.badge.success { background:#dcfce7; color:#15803d; }
.badge-danger,.badge.danger   { background:#fee2e2; color:#b91c1c; }
.badge-warning,.badge.warning { background:#fef9c3; color:#a16207; }
.badge-info    { background:#dbeafe; color:#1e40af; }
.badge-primary { background:#ede9fe; color:#6d28d9; }
.badge-secondary { background:#f1f5f9; color:#475569; }

/* PROGRESS */
.progress { height:8px; background:#e2e8f0; border-radius:99px; overflow:hidden; margin:4px 0 12px; }
.bar { height:100%; background:linear-gradient(90deg,var(--brand2),var(--brand)); border-radius:99px; transition:width .4s; }

/* STAT LIST */
.stat-list { display:grid; gap:8px; }
.stat-row { display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:10px 0; font-size:14px; }
.stat-row:last-child { border-bottom:none; }

/* AUTH */
.auth { min-height:100vh; display:grid; place-items:center; padding:20px; background:linear-gradient(135deg,#071b3a 0%,#1e40af 100%); }
.auth-card { width:min(920px,100%); background:white; border-radius:24px; overflow:hidden; display:grid; grid-template-columns:1fr 1.2fr; box-shadow:0 30px 100px rgba(0,0,0,.3); }
.auth-side { background:#071b3a; color:white; padding:40px; display:flex; flex-direction:column; gap:20px; }
.auth-main { padding:44px; }
.auth-split { min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,#071b3a,#1e3a8a); padding:20px; }
.auth-brand { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.auth-logo { width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,var(--brand2),var(--brand)); display:grid; place-items:center; font-weight:800; font-size:20px; color:white; }
.auth-error { background:#fee2e2; color:#b91c1c; border-radius:10px; padding:10px 14px; font-size:14px; margin-bottom:16px; }
.auth-note { font-size:13px; color:var(--muted); margin-top:14px; }
.auth-links { display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.auth-links a { font-size:13px; color:var(--brand); font-weight:500; }

/* PLANS */
.plan { border:2px solid var(--line); border-radius:var(--radius); padding:22px; }
.plan.featured { border-color:var(--brand); }
.price { font-size:32px; font-weight:800; }

/* CHART */
.chart { height:200px; display:flex; align-items:flex-end; gap:10px; padding-top:16px; }
.chart div { flex:1; background:linear-gradient(180deg,#38bdf8,#1e40af); border-radius:8px 8px 0 0; min-height:30px; }

/* MOBILE CARDS */
.mobile-cards { display:none; }
.mobile-card { background:white; border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow); }

/* INSTALL */
.install-wrap { max-width:860px; margin:30px auto; padding:20px; }

/* ══════════════════════════
   BOTTOM NAV (mobile only)
   ══════════════════════════ */
.mobile-bottom-nav {
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:65;
  grid-template-columns:repeat(5,1fr); gap:2px;
  padding:6px 8px calc(6px + var(--safe-bottom));
  background:rgba(255,255,255,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line); box-shadow:0 -8px 30px rgba(15,23,42,.1);
}
.mobile-bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; min-height:54px; border-radius:14px; color:#64748b; font-size:10px; font-weight:700; text-align:center; line-height:1.2; padding:5px 4px; overflow:hidden; transition:background .15s,color .15s; }
.mobile-bottom-nav a .mbn-icon { font-size:20px; line-height:1; }
.mobile-bottom-nav a .mbn-label { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:9.5px; }
.mobile-bottom-nav a.active { background:#eef4ff; color:var(--brand); }
.mobile-bottom-nav a:hover { background:#f1f5f9; }

/* ══════════════════════════
   TABLET (768–1023)
   ══════════════════════════ */
@media (max-width:1023px) {
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .two-wide { grid-template-columns:1fr 1fr; }
  .three,.plans { grid-template-columns:repeat(2,1fr); }
}

/* ══════════════════════════
   SIDEBAR COLLAPSE ≤860
   ══════════════════════════ */
@media (max-width:860px) {
  .sidebar { transform:translateX(-100%); box-shadow:none; }
  body.sidebar-open .sidebar { transform:translateX(0) !important; box-shadow:4px 0 50px rgba(0,0,0,.35); }
  .sidebar-overlay { display:none; }
  body.sidebar-open .sidebar-overlay { display:block !important; }
  .main { margin-left:0; }
  .menuBtn { display:flex !important; }
}

/* ══════════════════════════
   MOBILE ≤767  TRUE APP MODE
   ══════════════════════════ */
@media (max-width:767px) {
  /* === BODY === */
  body { background:#f0f4f9; padding-bottom:calc(var(--bottom-nav-h) + var(--safe-bottom) + 10px); font-size:15px; -webkit-font-smoothing:antialiased; }

  /* === LAYOUT === */
  .app { display:block; width:100%; }
  .main { margin-left:0!important; width:100%; max-width:100%; min-width:0; display:block; }
  .content { padding:14px!important; padding-top:10px!important; width:100%; max-width:100%; }

  /* === TOPBAR === */
  .topbar {
    position:sticky; top:0; z-index:100;
    height:auto!important; min-height:56px;
    padding:10px 14px!important;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    border-radius:0 0 18px 18px;
    box-shadow:0 4px 20px rgba(15,23,42,.08);
    display:flex; align-items:center; gap:10px;
    flex-wrap:nowrap; margin-bottom:12px;
  }
  .topbar-title { flex:1; min-width:0; overflow:hidden; }
  .topbar-title h1 { font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 0 1px; }
  .topbar-title p { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }
  .menuBtn { display:inline-flex!important; align-items:center; justify-content:center; width:38px!important; height:38px!important; min-width:38px; min-height:38px!important; border-radius:10px; background:#eef4ff; border:1.5px solid #dbe7ff; flex-shrink:0; padding:0!important; }
  .menuBtn span { width:18px; height:2px; }
  .user-info { display:none!important; }
  .user-avatar { width:32px!important; height:32px!important; min-width:32px; font-size:13px; flex-shrink:0; }
  .userbox { gap:8px; }
  .userbox .btn, .topbar a.btn { padding:7px 12px!important; font-size:12px!important; min-height:34px!important; border-radius:10px!important; width:auto!important; white-space:nowrap; }

  /* === SIDEBAR DRAWER === */
  .sidebar {
    position:fixed!important;
    top:0!important; left:0!important; bottom:0!important; right:auto!important;
    width:min(82vw, 290px)!important;
    height:100%!important; height:100dvh!important;
    z-index:200!important;
    transform:translateX(-110%)!important;
    transition:transform .28s cubic-bezier(.4,0,.2,1)!important;
    overflow-y:auto!important;
    padding-bottom:calc(var(--bottom-nav-h) + 20px)!important;
    border-radius:0!important;
  }
  body.sidebar-open .sidebar { transform:translateX(0)!important; box-shadow:8px 0 50px rgba(0,0,0,.4)!important; }
  .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:190!important; }
  body.sidebar-open .sidebar-overlay { display:block!important; }

  /* === BOTTOM NAV === */
  .mobile-bottom-nav { display:grid!important; }

  /* === GRIDS → SINGLE COLUMN === */
  .grid, .kpis, .two, .two-wide, .three, .plans { grid-template-columns:1fr!important; gap:10px!important; }

  /* === KPI CARDS → 2 COLUMN === */
  .kpis { grid-template-columns:1fr 1fr!important; }

  /* === CARDS === */
  .card { padding:14px!important; border-radius:16px!important; }
  .kpi { padding:14px!important; border-radius:16px!important; }
  .kpi strong { font-size:24px!important; }
  .kpi span { font-size:11px!important; }

  /* === BUTTONS — full width only for standalone buttons, not inline === */
  .btn, button.btn, [type=submit].btn, a.btn {
    border-radius:10px!important; padding:10px 16px!important;
    font-size:14px!important; font-weight:700; min-height:40px;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
  }
  /* Standalone action buttons go full width */
  .content > .btn,
  .card > .btn,
  form .btn[type=submit],
  .form-actions .btn,
  .hero-actions .btn { width:100%; }
  /* Small inline buttons stay auto-width */
  .btn.btn-sm, .btn.small, td .btn, td a.btn, th .btn,
  .badge ~ a, .topbar .btn { width:auto!important; min-height:34px!important; padding:6px 12px!important; font-size:12px!important; border-radius:8px!important; }

  /* === FORMS === */
  .form { max-width:100%; }
  input:not([type=checkbox]):not([type=radio]),
  select, textarea,
  input.form-control:not([type=checkbox]):not([type=radio]),
  select.form-control, textarea.form-control {
    width:100%!important;
    padding:9px 12px!important;
    font-size:15px!important; /* 15px stops iOS zoom but feels less oversized */
    border-radius:10px!important;
    min-height:42px!important;
    line-height:1.4;
  }
  /* Checkboxes and radios — small, fixed size, never full-width */
  input[type=checkbox], input[type=radio] {
    width:18px!important; height:18px!important;
    min-height:0!important; min-width:0!important;
    padding:0!important; border-radius:4px!important;
    flex-shrink:0!important; cursor:pointer;
  }
  textarea { min-height:80px!important; }
  label, .form-label,
  .form label, .form .form-label {
    font-size:clamp(12px,3vw,13px) !important;
    font-weight:700; display:block;
    margin-bottom:3px !important;
    margin-top:8px !important;
  }
  /* Tighten card padding on mobile */
  .card { padding:14px!important; }
  /* Tighten form field spacing */
  .form { display:flex; flex-direction:column; gap:0; }

  /* === TABLES → MOBILE CARDS === */
  .table-wrap { overflow:visible!important; border:none!important; background:transparent!important; box-shadow:none!important; border-radius:0!important; }
  table:not(.keep-table), table:not(.keep-table) thead,
  table:not(.keep-table) tbody, table:not(.keep-table) th,
  table:not(.keep-table) td, table:not(.keep-table) tr { display:block!important; width:100%!important; }
  table:not(.keep-table) { border-collapse:separate!important; border-spacing:0!important; background:transparent!important; box-shadow:none!important; min-width:0!important; }
  table:not(.keep-table) thead { display:none!important; }
  table:not(.keep-table) tr { background:#fff; border:1px solid #e8edf5; border-radius:16px; margin:0 0 10px; padding:10px 14px; box-shadow:0 4px 16px rgba(15,23,42,.06); }
  table:not(.keep-table) td { display:flex!important; align-items:center; justify-content:space-between; gap:10px; border:0!important; border-bottom:1px solid #f1f5f9!important; padding:8px 0!important; text-align:right!important; font-size:13px; word-break:break-word; min-height:0; }
  table:not(.keep-table) td:last-child { border-bottom:0!important; padding-bottom:2px!important; }
  table:not(.keep-table) td:first-child { padding-top:2px!important; }
  table:not(.keep-table) td::before { content:attr(data-label); font-weight:700; font-size:11px; color:var(--muted); text-align:left; min-width:35%; max-width:45%; flex:0 0 38%; word-break:normal; text-transform:uppercase; letter-spacing:.02em; }
  table:not(.keep-table) td:not([data-label])::before,
  table:not(.keep-table) td[data-label=""]::before { display:none!important; }
  table:not(.keep-table) td:not([data-label]) { text-align:left!important; }

  /* === MOBILE CARDS (existing .mobile-card elements) === */
  .mobile-cards { display:grid!important; gap:10px; }
  .mobile-card { border-radius:16px; padding:14px; }

  /* === MODALS → FULL SCREEN SHEETS === */
  .modal, .modal-dialog, .popup, .dialog,
  [id*="Modal"], [id*="modal"], [class*="modal-content"] {
    position:fixed!important; inset:0!important;
    max-width:100%!important; width:100%!important;
    z-index:300!important; overflow-y:auto!important;
    background:#fff!important; border-radius:0!important;
    padding:14px!important; margin:0!important;
    border:none!important; box-shadow:none!important;
  }

  /* === AUTH === */
  .auth-card { grid-template-columns:1fr!important; }
  .auth-side { display:none!important; }
  .auth-main { padding:20px!important; }

  /* === TYPOGRAPHY === */
  .topbar-title h1 { font-size:16px!important; }
  /* h2/h3 not overridden globally — dashboard CSS handles its own headings */

  /* === PREVENT HORIZONTAL SCROLL === */
  /* Prevent overflow — scoped to avoid breaking charts */
  /* overflow-wrap only for text, not grid containers */
  .content p, .content span, .content small, .content td, .content th, .content label, .card p, .card span { overflow-wrap:break-word; word-break:break-word; }
  pre, code { overflow-x:auto; white-space:pre-wrap; word-break:break-all; }
  img:not(.pie) { max-width:100%!important; height:auto!important; }

  /* === HERO ACTIONS === */
  .hero-actions { display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; margin-top:12px!important; }
  .hero-actions .btn { font-size:13px!important; padding:10px 8px!important; min-height:42px; border-radius:12px!important; }
}


@media (max-width:380px) {
  :root { --page-pad:12px; --bottom-nav-h:60px; }
  .topbar { padding:8px 12px!important; }
  .topbar-title h1 { font-size:14px!important; }
  .topbar-title p { font-size:10px!important; }
  .menuBtn { width:34px!important; height:34px!important; min-width:34px!important; }
  .user-avatar { width:28px!important; height:28px!important; min-width:28px!important; font-size:11px!important; }
  .userbox .btn, .topbar a.btn { padding:6px 9px!important; font-size:11px!important; }
  .kpis { grid-template-columns:1fr 1fr!important; }
  .kpi { padding:12px!important; }
  .kpi strong { font-size:20px!important; }
  .mobile-bottom-nav { gap:1px; padding:4px 4px calc(4px + var(--safe-bottom)); }
  .mobile-bottom-nav a { font-size:9px!important; min-height:48px; border-radius:10px; padding:4px 2px; }
  .mobile-bottom-nav a .mbn-icon { font-size:17px!important; }
  .mobile-bottom-nav a .mbn-label { font-size:8.5px!important; }
  .topbar-title h1 { font-size:15px!important; }
  h2 { font-size:15px!important; }
  .card { padding:12px!important; }
  .hero-actions { grid-template-columns:1fr!important; }
}


/* ══════════════════════════
   PHASE 5 (Finance)
   ══════════════════════════ */
.p5-shell { display:flex; min-height:100vh; }
.p5-side { width:260px; background:#082044; color:#fff; padding:22px 18px; position:fixed; top:0; left:0; bottom:0; height:100vh; overflow-y:auto; transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s; z-index:200; }
.p5-brand { font-weight:800; font-size:20px; margin-bottom:26px; }
.p5-brand span { font-size:13px; color:#9db7d8; }
.p5-nav { display:block; color:#dce9ff; text-decoration:none; padding:13px 14px; border-radius:12px; margin:6px 0; }
.p5-nav:hover { background:#1d3a61; }
.p5-nav-active { background:#1d3a61!important; color:#fff!important; font-weight:700; border-left:3px solid #4a9eff; }
.p5-main { margin-left:260px; flex:1; padding:26px; min-width:0; }
.p5-top { background:#fff; border-radius:18px; padding:20px; margin-bottom:22px; box-shadow:0 10px 28px rgba(8,32,68,.07); display:flex; align-items:center; gap:12px; }
.p5-top h1 { margin:0 0 4px; font-size:22px; }
.p5-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.p5-card { background:#fff; border-radius:18px; padding:18px; box-shadow:0 10px 28px rgba(8,32,68,.07); border:1px solid #e5edf7; }
.p5-card h3 { margin:0 0 8px; font-size:14px; color:#6b7d94; }
.p5-value { font-size:28px; font-weight:900; }
.p5-actions { display:flex; gap:10px; flex-wrap:wrap; margin:16px 0; }
.p5-btn { background:#2546c8; color:white; text-decoration:none; border:0; border-radius:10px; padding:11px 14px; display:inline-flex; align-items:center; cursor:pointer; min-height:44px; touch-action:manipulation; font:600 14px var(--font); }
.p5-btn.gray { background:#e9eef5; color:#082044; }
.p5-table { width:100%; border-collapse:collapse; background:#fff; border-radius:16px; overflow:hidden; }
.p5-table th,.p5-table td { padding:13px; border-bottom:1px solid #e8eef7; text-align:left; }
.p5-table th { background:#f8fbff; font-size:13px; }
.p5-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.p5-form label { font-weight:700; font-size:13px; }
.p5-form input,.p5-form select,.p5-form textarea { width:100%; padding:12px; border:1px solid #d7e1ee; border-radius:10px; }
.p5-full { grid-column:1/-1; }
.p5-alert { padding:14px; border-radius:12px; margin-bottom:18px; background:#e9fbe9; color:#17682b; }
.p5-badge { display:inline-block; padding:5px 9px; border-radius:999px; background:#edf3ff; color:#2546c8; font-size:12px; font-weight:700; }
.p5-badge.pending { background:#fff4d8; color:#946200; }
.p5-badge.approved { background:#e7fbec; color:#137331; }
.p5-badge.rejected { background:#ffe8e8; color:#9c1d1d; }
.p5-badge.posted { background:#e8efff; color:#2546c8; }
@media (max-width:860px) {
  .p5-shell { display:block; }
  .p5-side { transform:translateX(-110%); transition:transform .22s cubic-bezier(.4,0,.2,1); }
  body.sidebar-open .p5-side { transform:translateX(0)!important; box-shadow:8px 0 50px rgba(0,0,0,.4)!important; }
  body.sidebar-open .sidebar-overlay { display:block!important; }
  .p5-main { margin-left:0; padding:14px; }
  .p5-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .p5-form { grid-template-columns:1fr; }
}
@media (max-width:767px) {
  .p5-side { position:fixed!important; inset:0 auto 0 0!important; width:min(84vw,300px)!important; height:100dvh!important; z-index:200!important; padding-bottom:calc(var(--bottom-nav-h) + 20px)!important; overflow-y:auto!important; transform:translateX(-110%)!important; transition:transform .28s cubic-bezier(.4,0,.2,1)!important; }
  body.sidebar-open .p5-side { transform:translateX(0) !important; box-shadow:8px 0 50px rgba(0,0,0,.4) !important; }
  body.sidebar-open .sidebar-overlay { display:block !important; }
  .p5-grid { grid-template-columns:1fr; }
  .p5-top { padding:12px 14px; border-radius:20px; }
  .p5-top .menuBtn { display:inline-flex!important; }
  .p5-btn { width:100%; justify-content:center; border-radius:14px!important; padding:13px 16px!important; font-size:15px!important; }
  .p5-actions { display:grid!important; grid-template-columns:1fr!important; gap:10px!important; }
  .p5-table,.p5-table thead,.p5-table tbody,.p5-table th,.p5-table td,.p5-table tr { display:block; }
  .p5-table thead { display:none!important; }
  .p5-table tr { margin-bottom:12px; background:white; border-radius:16px; box-shadow:0 6px 18px rgba(8,32,68,.06); padding:10px 14px; border:1px solid #e5edf7; }
  .p5-table td { display:flex!important; justify-content:space-between; gap:12px; border:0!important; border-bottom:1px solid #f1f5f9!important; padding:9px 0!important; text-align:right!important; font-size:14px; word-break:break-word; }
  .p5-table td:last-child { border-bottom:0!important; }
  .p5-table td::before { content:attr(data-label); font-weight:700; font-size:12px; color:#6b7d94; text-align:left; min-width:40%; flex:0 0 40%; }
  .p5-form input:not([type=checkbox]):not([type=radio]),.p5-form select,.p5-form textarea { font-size:15px!important; border-radius:10px!important; min-height:42px!important; padding:9px 12px!important; }
  .p5-card { border-radius:18px; }
}

/* ══════════════════════════
   PHASE 6 (Reports)
   ══════════════════════════ */
.p6-shell { display:flex; min-height:100vh; }
.p6-side { width:260px; background:#092044; color:#fff; padding:18px; position:fixed; inset:0 auto 0 0; overflow-y:auto; transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s; z-index:200; }
.p6-brand { font-weight:800; font-size:18px; margin-bottom:24px; }
.p6-brand span { font-size:12px; color:#b8c7e6; }
.p6-nav { display:block; color:#d7e4ff; text-decoration:none; padding:12px 14px; border-radius:12px; margin:4px 0; }
.p6-nav:hover,.p6-nav.active { background:rgba(255,255,255,.12); color:#fff; }
.p6-main { margin-left:260px; flex:1; padding:24px; min-width:0; }
.p6-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.p6-top h1 { margin:0; font-size:24px; }
.p6-top p { margin:6px 0 0; color:#667085; }
.p6-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.p6-card { background:#fff; border:1px solid #e6eaf2; border-radius:20px; padding:20px; box-shadow:0 10px 24px rgba(16,24,40,.05); }
.p6-card h2,.p6-card h3 { margin-top:0; }
.p6-value { font-size:34px; font-weight:800; color:#102e7a; }
.p6-muted { color:#667085; }
.p6-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.p6-btn { display:inline-flex; align-items:center; justify-content:center; background:#2347b7; color:#fff; text-decoration:none; border:0; border-radius:12px; padding:12px 14px; font-weight:700; cursor:pointer; min-height:44px; touch-action:manipulation; font:600 14px var(--font); }
.p6-btn.secondary { background:#e7ecf7; color:#102044; }
.p6-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.p6-form label { display:block; font-weight:700; margin-bottom:6px; }
.p6-form input,.p6-form select,.p6-form textarea { width:100%; padding:12px; border:1px solid #d9e0ec; border-radius:12px; }
.p6-full { grid-column:1/-1; }
.p6-table { width:100%; border-collapse:collapse; }
.p6-table th,.p6-table td { padding:12px; border-bottom:1px solid #edf1f7; text-align:left; }
.p6-badge { display:inline-block; padding:6px 10px; border-radius:999px; background:#e8efff; color:#183a9e; font-size:12px; font-weight:800; }
.p6-alert { background:#dcfce7; color:#166534; border-radius:12px; padding:12px 14px; margin:0 0 16px; }
.p6-warn { background:#fff7da; color:#9a5b00; border-radius:12px; padding:12px 14px; }
@media (max-width:860px) {
  .p6-shell { display:block; }
  .p6-side { transform:translateX(-110%); }
  body.sidebar-open .p6-side { transform:translateX(0)!important; box-shadow:8px 0 50px rgba(0,0,0,.4)!important; }
  body.sidebar-open .sidebar-overlay { display:block!important; }
  .p6-main { margin-left:0; padding:14px; }
  .p6-grid { grid-template-columns:repeat(2,1fr); }
  .p6-actions { grid-template-columns:1fr 1fr; }
}
@media (max-width:767px) {
  .p6-side { position:fixed!important; inset:0 auto 0 0!important; width:min(84vw,300px)!important; height:100dvh!important; z-index:200!important; padding-bottom:calc(var(--bottom-nav-h) + 20px)!important; overflow-y:auto!important; transform:translateX(-110%)!important; transition:transform .28s cubic-bezier(.4,0,.2,1)!important; }
  body.sidebar-open .p6-side { transform:translateX(0) !important; box-shadow:8px 0 50px rgba(0,0,0,.4) !important; }
  body.sidebar-open .sidebar-overlay { display:block !important; }
  .p6-grid,.p6-form,.p6-actions { grid-template-columns:1fr!important; }
  .p6-top { display:block; }
  .p6-btn { width:100%; border-radius:14px!important; padding:13px 16px!important; font-size:15px!important; }
  .p6-table,.p6-table thead,.p6-table tbody,.p6-table th,.p6-table td,.p6-table tr { display:block; }
  .p6-table thead { display:none!important; }
  .p6-table tr { background:#fff; border:1px solid #e6eaf2; border-radius:16px; margin-bottom:12px; padding:12px 14px; }
  .p6-table td { display:flex!important; justify-content:space-between; gap:12px; border:0!important; border-bottom:1px solid #f1f5f9!important; padding:9px 0!important; text-align:right!important; word-break:break-word; }
  .p6-table td:last-child { border-bottom:0!important; }
  .p6-table td::before { content:attr(data-label); font-weight:700; font-size:12px; color:#667085; text-align:left; min-width:40%; flex:0 0 40%; }
  .p6-form input:not([type=checkbox]):not([type=radio]),.p6-form select,.p6-form textarea { font-size:15px!important; border-radius:10px!important; min-height:42px!important; padding:9px 12px!important; }
  .p6-card { border-radius:18px; }
}

/* ── Branch dashboard: vertical column chart ── */
.vcol-bar { min-height: 4px; transition: height .4s cubic-bezier(.4,0,.2,1); }

/* ── Global: prevent any text being hidden on small screens ── */
* {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
img, svg { max-width: 100%; height: auto; }
.fin-card, .card, .kpi, .fin-kpi {
  overflow: hidden;
  min-width: 0;
}
/* Ensure clamp() headings never overflow */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ══ DEFINITIVE Z-INDEX FIX ══
   overflow:hidden/clip on ANY ancestor traps fixed children.
   We use overflow:clip on html/body only.
   .content and .main must NOT have overflow:hidden.
   sidebar = z-index 200, overlay = 190.
══════════════════════════════ */
@media (max-width: 860px) {
  /* Sidebars — position:fixed escapes all ancestors */
  .sidebar,
  .p5-side,
  .p6-side {
    position: fixed !important;
    z-index: 200 !important;
    will-change: transform;
  }
  /* Overlay — sits below sidebar, above content */
  .sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 190 !important;
    background: rgba(0,0,0,.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.sidebar-open .sidebar,
  body.sidebar-open .p5-side,
  body.sidebar-open .p6-side {
    transform: translateX(0) !important;
    box-shadow: 8px 0 60px rgba(0,0,0,.4) !important;
  }
  body.sidebar-open .sidebar-overlay {
    display: block !important;
  }
  /* Accounting nav dropdown — fixed to escape overflow containers */
  .acc-nav-dropdown.open {
    position: fixed !important;
    z-index: 999999 !important;
  }
}