*{margin:0;padding:0;box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
img{max-width:100%;height:auto}
:root{
  /* Brand palette derived from the Mobitel logo (blue + orange) */
  --brand-blue:#2856a8;--brand-blue-dark:#1d3f7d;--brand-orange:#d98030;
  --navy:#0f2745;--navy2:#16335c;--ink:#0a1a30;--steel:#2856a8;--sky:#5b8fd6;
  --paper:#eef1f6;--surface:#ffffff;--line:#e3e9f2;--line-soft:#eef2f8;
  --txt:#14233c;--muted:#64748b;--muted-soft:#94a3b8;
  --green:#0e9f6e;--amber:#d98030;--red:#dc3545;
  --shadow-sm:0 1px 2px rgba(15,39,69,.05);
  --shadow:0 1px 3px rgba(15,39,69,.08),0 8px 24px rgba(15,39,69,.05);
  --shadow-lg:0 16px 48px rgba(15,39,69,.14);
  --radius:14px;
}
body{font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;background:var(--paper);min-height:100vh;color:var(--txt);-webkit-font-smoothing:antialiased;font-size:14px;letter-spacing:-.01em}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 30% 20%,#1d3f7d 0%,var(--navy) 55%,var(--ink) 100%);padding:16px}
.login-wrap .card{background:#fff;border-radius:18px;padding:40px;box-shadow:0 24px 60px rgba(10,26,48,.4);max-width:420px;width:100%;text-align:center}

/* ── App shell ── */
.app-shell{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--navy) 0%,var(--ink) 100%);color:#c2d0e2;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;box-shadow:2px 0 16px rgba(10,26,48,.18);z-index:30}
.sidebar-brand{padding:20px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.08);position:relative}
.collapse-btn{margin-left:auto;background:rgba(255,255,255,.08);border:none;color:#aebccf;width:24px;height:24px;border-radius:6px;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.15s}
.collapse-btn:hover{background:rgba(255,255,255,.18);color:#fff}
/* Collapsed state: sidebar shrinks to icons only */
.app-shell.collapsed{grid-template-columns:64px 1fr}
.app-shell.collapsed .brand-text,
.app-shell.collapsed .nav-group-label,
.app-shell.collapsed .nav-item .nav-full,
.app-shell.collapsed .user-meta,
.app-shell.collapsed .sidebar-foot .btn{display:none}
.app-shell.collapsed .nav-item{justify-content:center;padding:11px 0}
.app-shell.collapsed .nav-item .ic{font-size:17px}
.app-shell.collapsed .sidebar-brand{justify-content:center;padding:20px 0}
.app-shell.collapsed .collapse-btn{transform:rotate(180deg);position:absolute;right:8px;top:8px}
.app-shell.collapsed .user-chip{justify-content:center}
.app-shell.collapsed .brand-mark{margin:0}
.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--brand-blue),var(--sky));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;color:#fff;flex-shrink:0;box-shadow:0 6px 16px rgba(40,86,168,.45)}
.brand-text b{display:block;color:#fff;font-size:15px;font-weight:700;letter-spacing:.2px}
.brand-text span{font-size:9.5px;color:#7e93ad;letter-spacing:1px;text-transform:uppercase;font-weight:600}
.sidebar-nav{padding:12px 12px;flex:1;overflow-y:auto}
.sidebar-nav::-webkit-scrollbar{width:5px}.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.nav-group-label{padding:15px 12px 7px}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;cursor:pointer;font-size:13.5px;font-weight:500;color:#aebccf;margin-bottom:2px;transition:.15s;position:relative}
.nav-item .ic{width:18px;text-align:center;font-size:15px;opacity:.92}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:linear-gradient(90deg,var(--brand-blue),rgba(40,86,168,.35));color:#fff;font-weight:600;box-shadow:0 4px 14px rgba(40,86,168,.3)}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:22px;background:var(--brand-orange);border-radius:0 4px 4px 0}
.sidebar-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.collapse-btn{margin-left:auto;background:rgba(255,255,255,.16);border:none;color:#fff;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:19px;line-height:1;flex-shrink:0;transition:.15s;display:flex;align-items:center;justify-content:center}
.collapse-btn:hover{background:var(--brand-orange,#e8852c);color:#fff}
/* Collapsed sidebar — icons only */
.app-shell.collapsed{grid-template-columns:68px 1fr}
.app-shell.collapsed .brand-text,
.app-shell.collapsed .nav-group-label,
.app-shell.collapsed .nav-item .nav-full,
.app-shell.collapsed .user-meta,
.app-shell.collapsed .sidebar-foot .btn{display:none}
.app-shell.collapsed .nav-item{justify-content:center;padding:11px 0}
.app-shell.collapsed .nav-item .ic{font-size:18px}
.app-shell.collapsed .sidebar-brand{justify-content:center;padding:20px 0}
.app-shell.collapsed .collapse-btn{transform:rotate(180deg);position:absolute;top:24px;right:8px}
.app-shell.collapsed .user-chip{justify-content:center;padding:9px 0}
.app-shell.collapsed .brand-mark{margin:0}
/* Sidebar: short label under each icon, kept VISIBLE when collapsed (icon + label always shown, BOQ-style). */
.nav-mini{display:none}
.app-shell.collapsed{grid-template-columns:92px 1fr}
.app-shell.collapsed .nav-item{flex-direction:column;justify-content:center;gap:5px;padding:10px 4px}
.app-shell.collapsed .nav-item .ic{font-size:19px;width:auto}
.app-shell.collapsed .nav-item .nav-full{display:none}
.app-shell.collapsed .nav-item .nav-mini{display:block;font-size:11px;line-height:1.2;font-weight:600;text-align:center;letter-spacing:.1px;white-space:normal;max-width:100%}
.app-shell.collapsed .nav-item.active::before{left:-4px;height:16px}
.app-shell.collapsed #apprBadge{position:absolute;top:5px;right:12px;margin:0}
.user-chip{display:flex;align-items:center;gap:10px;padding:9px;border-radius:10px;background:rgba(255,255,255,.06)}
.avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand-orange),#c0392b);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;flex-shrink:0}
.user-meta b{font-size:12.5px;color:#fff;display:block;line-height:1.3}
.user-meta span{font-size:10px;color:#7e93ad;text-transform:uppercase;letter-spacing:.5px}

.workspace{display:flex;flex-direction:column;min-width:0;background:var(--paper)}
.topbar{background:#fff;border-bottom:1px solid var(--line);height:64px;display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:20;box-shadow:var(--shadow-sm)}
.topbar .logo img{height:38px;vertical-align:middle;display:block}
.hamburger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--navy)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.user-pill{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:30px;padding:5px 14px 5px 6px}
.user-pill-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--brand-blue),var(--sky));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.user-pill-meta b{font-size:12.5px;display:block;line-height:1.2;color:var(--txt)}
.user-pill-meta span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.workspace-body{padding:26px 30px;flex:1;overflow-x:hidden;max-width:2200px;width:100%}

.badge{background:var(--navy);color:#fff;padding:6px 14px;border-radius:20px;font-size:13px;white-space:nowrap;display:inline-block}
.badge-role{background:var(--brand-blue);color:#fff;padding:4px 10px;border-radius:12px;font-size:11px}

/* Section titles */
.section-title{font-size:20px;font-weight:800;color:var(--navy);margin-bottom:18px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}

/* Sub-tabs — framed segmented control, brand-colored active */
.tabs{display:inline-flex;flex-wrap:wrap;gap:4px;border:1px solid var(--line);background:#f4f7fb;border-radius:12px;padding:5px;margin-bottom:22px}
.tab{padding:9px 18px;cursor:pointer;border:none;font-weight:600;font-size:13px;color:var(--muted);transition:all .15s;border-radius:8px;background:transparent}
.tab:hover{background:#e6edf7;color:var(--brand-blue)}
.tab.active{color:#fff;background:var(--brand-blue);box-shadow:0 2px 8px rgba(40,86,168,.3)}
.tab-content{display:none}
.tab-content.active{display:block;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.card{background:var(--surface);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-bottom:18px;border:1px solid var(--line-soft)}
/* Create-BOQ pending-task cards (compact, clickable customer filter) */
.pending-cards{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.pending-cards .pcard{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-left:3px solid #94a3b8;border-radius:8px;padding:7px 12px;cursor:pointer;transition:.15s}
.pending-cards .pcard:hover{box-shadow:0 1px 6px rgba(10,26,48,.1)}
.pending-cards .pcard.active{border-color:var(--brand-blue);border-left-color:var(--brand-blue);background:#f5f8ff}
.pending-cards .pcard .lbl{font-size:11px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.pending-cards .pcard .num{font-size:17px;font-weight:800;color:var(--navy);line-height:1}
.pending-cards .pcard.etisalat{border-left-color:#2563c4}
.pending-cards .pcard.tamdeed{border-left-color:#d4861a}
.pending-cards .pcard.all{border-left-color:#64748b}
.header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--line-soft);padding-bottom:16px;margin-bottom:20px}
.logo{font-size:20px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px}
.user-info{display:flex;align-items:center;gap:10px}

@media(max-width:980px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-264px;width:256px;z-index:60;transition:left .25s}
  .sidebar.open{left:0}
  .hamburger{display:block}
  .workspace-body{padding:18px 16px}
}

/* Forms */
.form-group{margin-bottom:16px}
label{display:block;margin-bottom:6px;font-weight:600;font-size:12.5px;color:#475569}
label span.req{color:var(--red)}
input,select,textarea{width:100%;padding:10px 13px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;transition:.18s;background:#fff;color:var(--txt)}
input[type=checkbox],input[type=radio]{width:auto;padding:0;margin:0;vertical-align:middle}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(40,86,168,.12)}
input[readonly]{background:#f4f7fb;color:#64748b}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:760px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* Buttons */
.btn{padding:10px 18px;border:none;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;transition:.16s;display:inline-flex;align-items:center;gap:6px;letter-spacing:-.01em}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,39,69,.16)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--brand-blue);color:#fff}
.btn-primary:hover{background:var(--brand-blue-dark)}
.btn-secondary{background:#64748b;color:#fff}
.btn-success{background:var(--green);color:#fff}
.btn-warning{background:var(--brand-orange);color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-outline{background:transparent;border:1.5px solid var(--brand-blue);color:var(--brand-blue)}
.btn-sm{padding:6px 13px;font-size:12px;border-radius:8px}

/* KPI / stat cards styled below in the Stats section */



/* Alerts */
.alert{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:13px}
.alert-success{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7}
.alert-error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.alert-info{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd}
.alert-warning{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}
.hidden{display:none!important}

/* Tables */
.table-wrap{overflow-x:auto;margin-top:16px;border:1px solid var(--line);border-radius:12px;background:#fff}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line-soft);font-size:13px}
th{background:#f4f7fb;font-weight:700;color:#475569;position:sticky;top:0;z-index:1;font-size:11px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
tbody tr:nth-child(even){background:#f9fbfd}
tbody tr:hover{background:#eef4fc}
tbody tr{transition:background .12s}
.data-table{width:100%;border-collapse:collapse}
.data-table th{background:#f4f7fb;font-weight:700;color:#475569;font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.data-table td{padding:12px 14px;border-bottom:1px solid var(--line-soft);font-size:13px;color:#0f172a}
/* BOQ owner column: give names room so they don't cramp/wrap */
.data-table .col-owner{min-width:150px;white-space:nowrap}
.data-table .col-activity{min-width:150px;white-space:nowrap}
/* Per-screen text softening (BOQ list first): row text uses a softer slate than the
   near-black navy --txt, easier on the eyes for long reading. Scoped to the BOQ list body. */
#boqListBody td{color:#0f172a}
.drill-link:hover{text-decoration:underline !important}
.lifecycle-card:hover{box-shadow:0 8px 24px rgba(12,35,64,.12) !important}
.data-table tbody tr:nth-child(even){background:#f9fbfd}
.data-table tbody tr:hover{background:#eef4fc}
.status-pill{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700}
.pill-open{background:#dbeafe;color:#1e40af}
.pill-closed{background:#f3f4f6;color:#374151}
.pill-paid{background:#d1fae5;color:#065f46}
.pill-pending{background:#fef3c7;color:#92400e}
.pill-ready{background:#d1fae5;color:#065f46}

/* Stats — dashboard KPI gradient cards (refined) */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark));color:#fff;padding:22px;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);transition:.2s}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat-card.green{background:linear-gradient(135deg,#0e9f6e,#0a7d56)}
.stat-card.amber{background:linear-gradient(135deg,var(--brand-orange),#b8651d)}
.stat-card.red{background:linear-gradient(135deg,#dc3545,#a82835)}
.stat-val{font-size:28px;font-weight:800;margin-bottom:4px;letter-spacing:-.03em}
.stat-lbl{font-size:11.5px;opacity:.9;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
/* Compact stat cards (used in Batches dashboard) */
.stats-grid.compact{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stats-grid.compact .stat-card{padding:14px 16px}
.stats-grid.compact .stat-val{font-size:20px}
.stats-grid.compact .stat-lbl{font-size:10.5px}
/* Compact KPI cards (e.g. Batches dashboard) */
.stats-grid.compact{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.stats-grid.compact .stat-card{padding:14px 16px}
.stats-grid.compact .stat-val{font-size:20px}
.stats-grid.compact .stat-lbl{font-size:10px}

/* Line item rows */
.li-row{display:grid;grid-template-columns:130px 1fr 80px 80px 100px 100px auto;gap:8px;align-items:start;margin-bottom:10px;padding:10px;background:#f8fafc;border-radius:8px;border:1px solid #e5e7eb}
.li-desc{font-size:11px;color:#6b7280;margin-top:3px;grid-column:1/-1;padding:0 4px}
.info-box{background:#eef4fc;border:1px solid #cdddf0;border-radius:10px;padding:14px;margin-bottom:16px}
.info-box h4{color:var(--brand-blue);margin-bottom:8px;font-size:13px}
.info-box p{font-size:13px;color:#374151;margin-bottom:4px}


/* Notes */
.note-item{background:#f8fafc;border-left:4px solid #2d6a8f;border-radius:4px;padding:10px 12px;margin-bottom:8px}
.note-meta{font-size:11px;color:#6b7280;margin-bottom:4px}
.note-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cat-chip{background:#e8f0fe;color:#1e3a5f;padding:3px 8px;border-radius:8px;font-size:11px;font-weight:600}
.cat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cat-item{background:#f8fafc;border-radius:8px;border:1px solid #e5e7eb;padding:10px}
.cat-item label{font-weight:600;font-size:12px;color:#374151;margin-bottom:6px}

/* Login */
.login-logo{margin-bottom:12px;text-align:center}
.login-title{font-size:22px;font-weight:800;color:#1e3a5f;margin-bottom:4px}
.login-sub{color:#6b7280;font-size:13px;margin-bottom:24px}

/* Filter bar */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:#f8fafc;padding:14px;border-radius:8px;margin-bottom:16px}
/* Color-coded filter bars: BOQ=blue, Tasks=amber, Activity=teal */
.filter-bar.fb-blue{background:#E6F1FB;border-left:4px solid #378ADD;border-radius:0 8px 8px 0}
.filter-bar.fb-blue label{color:#185FA5}
.filter-bar.fb-amber{background:#FAEEDA;border-left:4px solid #EF9F27;border-radius:0 8px 8px 0}
.filter-bar.fb-amber label{color:#854F0B}
.fb-teal{background:#E1F5EE;border-left:4px solid #1D9E75;border-radius:0 8px 8px 0}
.fb-teal label,.fb-teal .form-group label{color:#0F6E56}
.filter-bar .form-group{margin-bottom:0;min-width:160px}
.filter-bar label{font-size:11px}

/* Batch detail */
.batch-summary{background:#f0f7ff;border-radius:10px;padding:16px;margin-bottom:16px}
.batch-calc{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px}
.batch-calc .label{color:#6b7280}
.batch-calc .value{font-weight:700;color:#1e3a5f;text-align:right}
.total-row .label,.total-row .value{color:#059669;font-size:15px}

/* PO Bar */
.po-bar{background:#e5e7eb;border-radius:8px;height:10px;overflow:hidden;margin-top:6px}
.po-bar-fill{height:100%;background:#059669;border-radius:8px;transition:width .5s}
.po-bar-fill.warning{background:#d97706}
.po-bar-fill.danger{background:#dc2626}

/* Responsive */
@media(max-width:768px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .li-row{grid-template-columns:1fr !important;gap:6px}
  .li-row > div, .li-row > button {width:100%}
  body{padding:8px}
  .card{padding:16px}
  /* sub-tab rows (Dashboard / BOQ / All Tasks / Batches / Notes / Team Dashboard) scroll sideways instead of overflowing */
  .tabs{display:flex;width:100%;max-width:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab{flex:0 0 auto;white-space:nowrap;font-size:12px;padding:8px 12px}
  .filter-bar{flex-direction:column}
  .filter-bar .form-group{width:100%;min-width:0}
  .filter-bar .btn{width:100%}                 /* Filter / Clear / Export stack full-width on mobile (BOQ List, All Tasks, etc.) */
  .pl-controls .pl-actions .btn{width:100%}     /* Activity Tracker action buttons too */
  .cat-row{grid-template-columns:1fr !important}
  .stats-grid{grid-template-columns:1fr}
  /* Dashboard Overview: collapse its inline 2-column grids (revenue hero, region+engineers, comarch+batch) to a single column so nothing overflows on a phone. Desktop unaffected (rule is mobile-only). */
  #dashOverview [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  #dashOverview canvas{max-width:100%}
  .stat-val{font-size:20px}
  table{font-size:11px}
  th,td{padding:6px 4px}
  .btn{padding:8px 12px;font-size:13px}
  .header{flex-direction:column;gap:8px;text-align:center}
  .user-info{flex-wrap:wrap;justify-content:center}
  /* --- compact mobile header: hamburger + logo + avatar only --- */
  .topbar{padding:0 14px;gap:10px;height:58px}
  .topbar-system-name,.topbar-divider{display:none}
  #viewAsSelect{display:none !important}
  .user-pill{border:none;background:none;padding:0}
  .user-pill-meta{display:none}
  .topbar .logo img{height:34px}
  /* main containers never exceed the screen */
  .workspace-body{max-width:100%}
  .card,.stat-card{max-width:100%}
  /* sub-tab navs (Master Plan / Inventory) scroll sideways instead of overflowing */
  .pl-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pl-nav-item{flex:0 0 auto;white-space:nowrap}
  /* Settings sub-nav (Backup/Discount/Owners/RFA/Data Health) scrolls sideways too */
  .pl-subnav{display:flex;width:100%;max-width:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pl-sub-item{flex:0 0 auto;white-space:nowrap}
  /* planning stat tiles + dashboard cards stack on small screens (override inline grids) */
  .pl-stats{grid-template-columns:repeat(2,1fr) !important;gap:8px}
  .pl-stats2{grid-template-columns:1fr !important;gap:8px}
  .pl-pd-2col{grid-template-columns:1fr !important}
  .pl-avail-grid{grid-template-columns:1fr !important}
  .pl-staff-board{grid-template-columns:repeat(2,1fr) !important}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  /* Daily Plan controls stack full-width */
  .pl-controls{flex-direction:column;align-items:stretch}
  .pl-controls .form-group,.pl-controls select,.pl-controls input{width:100%}
  .pl-controls .pl-actions{margin-left:0}
  /* "Add New Plan Item" form: tidy 2-column layout on mobile, wide fields span both */
  .pl-form-grid{grid-template-columns:1fr 1fr !important;gap:10px}
  .pl-form-grid .full,.pl-form-grid .half,.pl-form-grid .dp-wide{grid-column:1 / -1 !important}
  .pl-form-grid > div:empty{display:none}
  /* every wide table/grid stays within the screen and scrolls sideways on its own */
  .pl-grid-scroll,.dpx-scroll,.table-wrap{max-width:100%;-webkit-overflow-scrolling:touch}
  h3{font-size:14px}
  /* Task stat cards: wrap on mobile */
  #taskStats > div { flex-wrap: wrap; }
  #taskStats > div > div { min-width: 45% !important; flex: 1 1 45%; }
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .tabs{font-size:11px}
}

/* ── Engineer Note Form Enhanced ─── */
.note-item { background:#fff; border-left:4px solid #2d6a8f; border-radius:6px; padding:12px; margin-bottom:10px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.note-meta { font-size:11px; color:#6b7280; margin-bottom:6px; }
#noteHeaderFields input, #noteHeaderFields select, #noteHeaderFields textarea { font-size:14px; padding:10px; }
#catGrid textarea, #recoveryGrid textarea, #faultyGrid textarea { font-size:14px; padding:10px; min-height:60px; }
#catGrid input[type=number], #recoveryGrid input[type=number] { font-size:16px; padding:12px; text-align:center; }
.cat-item { transition: box-shadow .15s; }
.cat-item:focus-within { box-shadow:0 0 0 3px rgba(45,106,143,.2); }

/* Mobile-first engineer layout */
@media(max-width:600px){
  #noteHeaderFields { grid-template-columns:1fr !important; }
  #catGrid, #recoveryGrid, #faultyGrid { grid-template-columns:1fr !important; }
  #noteTypeTabs .tab { font-size:12px; padding:8px 10px; }
  .note-item { padding:10px; }
  button.btn { touch-action:manipulation; }
}

/* ── AUDIT MODE: view-only. Hide all action buttons that mutate data ── */
body.audit-mode .btn-success,
body.audit-mode .btn-danger,
body.audit-mode .btn-warning,
body.audit-mode button[onclick*="submit"],
body.audit-mode button[onclick*="save"],
body.audit-mode button[onclick*="Save"],
body.audit-mode button[onclick*="delete"],
body.audit-mode button[onclick*="Delete"],
body.audit-mode button[onclick*="edit"],
body.audit-mode button[onclick*="Edit"],
body.audit-mode button[onclick*="Create"],
body.audit-mode button[onclick*="create"],
body.audit-mode button[onclick*="addLI"],
body.audit-mode button[onclick*="openAdd"],
body.audit-mode button[onclick*="upload"],
body.audit-mode button[onclick*="Upload"],
body.audit-mode button[onclick*="Batch"],
body.audit-mode button[onclick*="markPaid"],
body.audit-mode button[onclick*="close"],
body.audit-mode button[onclick*="Return"],
body.audit-mode button[onclick*="Link"]{ display:none !important; }

/* Coordinator: no commercial data — hide Batch#/PO# customize checkboxes and columns. */
body.coordinator-mode .cust-batchpo{ display:none !important; }
body.coordinator-mode .col-batchno,
body.coordinator-mode .col-pono{ display:none !important; }
/* keep View / History / search / filters / export visible */
body.audit-mode button[onclick*="view"],
body.audit-mode button[onclick*="View"],
body.audit-mode button[onclick*="History"],
body.audit-mode button[onclick*="export"],
body.audit-mode button[onclick*="Export"],
body.audit-mode button[onclick*="download"],
body.audit-mode button[onclick*="Download"]{ display:inline-flex !important; }
body.audit-mode input:not([type=search]):not(.filter-input),
body.audit-mode#noeffect{}

/* ── ENGINEER MODE: Site Master is view-only (search + download allowed) ── */
body.engineer-mode #sitesSection button[onclick*="openAddSite"],
body.engineer-mode #sitesSection button[onclick*="editSite"],
body.engineer-mode #sitesSection button[onclick*="deleteSite"],
body.engineer-mode #sitesSection button[onclick*="uploadSites"],
body.engineer-mode #sitesSection button[onclick*="sites/export"],
body.engineer-mode #sitesSection label[onclick*="upload"],
body.engineer-mode #sitesSection #siteForm{ display:none !important; }

/* ── Stronger Mobitel branding in topbar ── */
.topbar{height:74px}
.topbar .logo img{height:52px;display:block}
.topbar-divider{width:1px;height:32px;background:var(--line);margin:0 4px}
.topbar-system-name{font-size:15px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.brand-accent-band{height:4px;background:linear-gradient(90deg,var(--brand-blue) 0%,var(--brand-blue) 55%,var(--brand-orange) 55%,var(--brand-orange) 100%);position:sticky;top:74px;z-index:19}
@media(max-width:760px){ .topbar-system-name,.topbar-divider{display:none} }

/* ── Daily Planner search/tags ── */
.dp-results{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid #e6ebf2;border-radius:8px;box-shadow:0 8px 24px rgba(15,39,69,.15);z-index:30;max-height:240px;overflow-y:auto;display:none}
.dp-result-item{padding:9px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid #f1f5f9}
.dp-result-item:hover{background:#eff6ff}
.dp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dp-tag{display:inline-flex;align-items:center;background:#e8f0fe;color:#1e3a5f;border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600}

/* ===================== TEAM PLANNING v2 (redesign) ===================== */
.dpx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.dpx-stat{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);padding:16px 18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm)}
.dpx-stat .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.dpx-stat .n{font-size:26px;font-weight:800;line-height:1;color:var(--navy)}
.dpx-stat .l{font-size:12px;color:var(--muted);margin-top:4px;font-weight:600}
.ic-plan{background:#eaf1fb;color:var(--brand-blue)}.ic-prog{background:#fdf3e7;color:var(--amber)}
.ic-done{background:#e7f6ef;color:var(--green)}.ic-canc{background:#fbeaec;color:var(--red)}
.dpx-stats2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.dpx-scard{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow-sm)}
.dpx-scard .sh{font-weight:800;color:var(--navy);font-size:14px;display:flex;align-items:center;gap:7px;margin-bottom:10px}
.dpx-scard .trio{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.dpx-scard .trio>div{padding:0 4px}.dpx-scard .trio>div+div{border-left:1px solid var(--line-soft)}
.dpx-scard .tn{font-size:22px;font-weight:800;line-height:1}
.dpx-scard .tl{font-size:10.5px;color:var(--muted);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.tn-avail{color:var(--green)}.tn-assigned{color:var(--brand-blue)}.tn-leave{color:var(--red)}
.dpx-avail{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.dpx-rcard{background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;padding:13px 15px;box-shadow:var(--shadow-sm)}
.dpx-rcard .rt{font-weight:800;color:var(--brand-blue);font-size:14px;margin-bottom:9px;letter-spacing:.3px}
.dpx-rcard .row{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0;color:var(--muted)}
.dpx-rcard .row b{color:var(--navy);font-weight:700}.dpx-rcard .row .lv{color:var(--red);font-weight:700;font-size:11px}
.dpx-btitle{font-weight:800;color:var(--navy);font-size:13.5px;display:flex;align-items:center;gap:7px;margin:6px 0 10px}
.dpx-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.dpx-col{border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;background:var(--surface)}
.dpx-col .hd{padding:9px 14px;font-weight:700;font-size:12.5px;display:flex;justify-content:space-between;align-items:center}
.hd-assigned{background:#e7f6ef;color:#0a7a52}.hd-avail{background:#fdf3e7;color:#a96514}.hd-leave{background:#fbeaec;color:#a52834}
.dpx-col .bd{max-height:172px;overflow:auto;padding:4px 0}
.dpx-si{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 14px;font-size:12.5px;border-bottom:1px solid var(--line-soft)}
.dpx-si:last-child{border-bottom:none}
.dpx-rtag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#eef2f8;color:var(--muted);letter-spacing:.3px;white-space:nowrap}
.dpx-roletag{font-size:9px;font-weight:800;padding:1px 5px;border-radius:4px;letter-spacing:.3px;margin-right:5px}
.rt-rig{background:#185fa5;color:#fff}.rt-drv{background:#7b3fb3;color:#fff}.rt-eng{background:#0f6e56;color:#fff}
.dpx-empty{padding:18px 14px;color:var(--muted-soft);font-size:12px;text-align:center}
.dpx-fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dpx-fgrid .full{grid-column:span 4}.dpx-fgrid .half{grid-column:span 2}
.dpx-scroll{overflow-x:auto;border:1px solid var(--line-soft);border-radius:10px}
.dpx-tbl{width:100%;border-collapse:separate;border-spacing:0;min-width:1640px}
.dpx-tbl thead th{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);text-align:left;padding:9px;border-bottom:2px solid var(--line);font-weight:700;white-space:nowrap;background:#f7faff;position:sticky;top:0;z-index:1}
.dpx-tbl tbody td{padding:11px 9px;border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:12.5px}
.dpx-tbl tbody tr:hover{background:#fafcff}
.c-region{width:62px}.c-site{width:122px}.c-task{width:108px}.c-cust{width:84px}.c-owner{width:100px}
.c-act{width:118px}.c-actd{width:170px}.c-team{width:auto;min-width:200px}.c-mat{width:96px}
.c-code{width:74px}.c-date{width:80px}.c-status{width:128px}.c-act2{width:80px}
.dpx-rp{font-size:11px;font-weight:800;padding:3px 9px;border-radius:7px;letter-spacing:.3px;display:inline-block}
.rp-DXB{background:#eaf1fb;color:var(--brand-blue)}.rp-AUH{background:#fdf3e7;color:#a96514}
.rp-NE{background:#e7f6ef;color:#0a7a52}.rp-AAN{background:#f3eafb;color:#7b3fb3}
.dpx-sid{font-weight:800;color:var(--navy);font-size:13px}
.dpx-sname{font-size:11px;color:var(--muted);margin-top:2px}
.dpx-code{font-size:11.5px;color:var(--txt)}
.dpx-code-empty{color:var(--muted-soft)}
.dpx-team{font-size:12px;color:var(--txt);line-height:1.55}
.dpx-team .role{font-size:9.5px;color:var(--muted-soft);font-weight:800;text-transform:uppercase;margin-right:4px}
.dpx-actd{font-size:11.5px;color:var(--muted);line-height:1.5}
.dpx-dcell .dow{font-size:10px;color:var(--muted-soft)}
.dpx-st{padding:6px 7px;font-size:11.5px;font-weight:700;border-radius:8px;border:1.5px solid var(--line);cursor:pointer;width:100%}
.st-Planned{color:var(--brand-blue);background:#eaf1fb;border-color:#cfe0f6}
.st-Progress{color:var(--amber);background:#fdf3e7;border-color:#f3ddbf}
.st-Done{color:var(--green);background:#e7f6ef;border-color:#c4e9d7}
.st-Cancelled{color:var(--red);background:#fbeaec;border-color:#f1c4c8}
.dpx-iconbtn{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--line);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted)}
.dpx-iconbtn:hover{border-color:var(--brand-blue);color:var(--brand-blue)}
.dpx-iconbtn.del:hover{border-color:var(--red);color:var(--red)}
.dpx-drawer td{background:#f7faff;border-bottom:1px solid var(--line)!important;padding:0!important}
.dpx-drawer .inner{padding:16px 18px}
.dpx-cancel{margin-top:6px;font-size:11px;color:var(--red);background:#fbeaec;border-left:3px solid var(--red);padding:5px 9px;border-radius:0 6px 6px 0}
.dpx-dur{display:inline-block;font-size:10px;font-weight:700;padding:2px 9px;border-radius:8px;margin-top:5px;background:#eaf1fb;color:var(--brand-blue-dark)}
.dpx-dur.locked{background:#e7f6ef;color:#0a7a52}
.dpx-lock{display:none;background:linear-gradient(135deg,#fbeaec,#fdf3e7);border:1.5px solid #f1c4c8;border-radius:var(--radius);padding:16px 18px;margin-bottom:16px}
.dpx-lock.show{display:block}
.dpx-lock .lh{display:flex;align-items:center;gap:10px;font-weight:800;color:#a52834;font-size:14.5px}
.dpx-lock .ls{font-size:12.5px;color:#8a3038;margin:6px 0 10px 32px}
.dpx-lock .ll{margin:0 0 0 32px;display:flex;flex-direction:column;gap:6px}
.dpx-lock .li{display:flex;align-items:center;gap:10px;font-size:12.5px;background:#fff;border:1px solid #f1c4c8;border-radius:8px;padding:7px 11px}
.dpx-lock .li .pill{font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;background:#fbeaec;color:#a52834}
.dpx-locked-form{opacity:.5;pointer-events:none;filter:grayscale(.3)}

/* ===================== TEAM PLANNING REDESIGN (pl- namespace) ===================== */
.pl-controls{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.pl-controls .form-group{margin:0}
.pl-controls .pl-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* lock banner */
.pl-lock{display:none;background:linear-gradient(135deg,#fbeaec,#fdf3e7);border:1.5px solid #f1c4c8;border-radius:var(--radius);padding:15px 18px;margin-bottom:16px}
.pl-lock.show{display:block}
.pl-lock .lb-head{display:flex;align-items:center;gap:10px;font-weight:800;color:#a52834;font-size:14.5px}
.pl-lock .lb-sub{font-size:12.5px;color:#8a3038;margin:6px 0 10px 30px}
.pl-lock-list{margin:0 0 0 30px;display:flex;flex-direction:column;gap:6px}
.pl-lock-li{display:flex;align-items:center;gap:10px;font-size:12.5px;background:#fff;border:1px solid #f1c4c8;border-radius:8px;padding:6px 11px}
.pl-lock-li .pill{font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;background:#fbeaec;color:#a52834}
.pl-locked-form{opacity:.5;pointer-events:none;filter:grayscale(.3)}

/* stat cards row 1 */
.pl-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.pl-stat{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);padding:15px 18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm)}
.pl-stat .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
.pl-stat .n{font-size:25px;font-weight:800;line-height:1;color:var(--navy)}
.pl-stat .l{font-size:12px;color:var(--muted);margin-top:4px;font-weight:600}
.pl-ic-plan{background:#eaf1fb;color:var(--brand-blue)}
.pl-ic-prog{background:#fdf3e7;color:var(--amber)}
.pl-ic-done{background:#e7f6ef;color:var(--green)}
.pl-ic-canc{background:#fbeaec;color:var(--red)}

/* stat cards row 2 (staff totals) */
.pl-stats2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.pl-scard{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);padding:13px 18px;box-shadow:var(--shadow-sm)}
.pl-scard .sh{font-weight:800;color:var(--navy);font-size:14px;display:flex;align-items:center;gap:7px;margin-bottom:9px}
.pl-trio{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.pl-trio>div{padding:0 4px}
.pl-trio>div+div{border-left:1px solid var(--line-soft)}
.pl-tn{font-size:21px;font-weight:800;line-height:1}
.pl-tl{font-size:10px;color:var(--muted);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.pl-tn-avail{color:var(--green)}.pl-tn-assigned{color:var(--brand-blue)}.pl-tn-leave{color:var(--red)}

/* region cards */
.pl-avail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.pl-region-card{background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:13px 15px;box-shadow:var(--shadow-sm)}
.pl-region-card .rt{font-weight:800;color:var(--brand-blue);font-size:14px;margin-bottom:9px;letter-spacing:.3px}
.pl-region-card .row{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0;color:var(--muted)}
.pl-region-card .row b{color:var(--navy);font-weight:700}
.pl-region-card .row .lv{color:var(--red);font-weight:700;font-size:11px}

/* staff boards */
.pl-board-title{font-weight:800;color:var(--navy);font-size:13.5px;display:flex;align-items:center;gap:7px;margin:6px 0 10px}
.pl-staff-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.pl-staff-col{border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;background:#fff}
.pl-staff-col .hd{padding:9px 14px;font-weight:700;font-size:12.5px;display:flex;justify-content:space-between;align-items:center}
.pl-hd-assigned{background:#e7f6ef;color:#0a7a52}
.pl-hd-avail{background:#fdf3e7;color:#a96514}
.pl-hd-leave{background:#fbeaec;color:#a52834}
.pl-staff-col .bd{max-height:180px;overflow:auto;padding:4px 0}
.pl-staff-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 14px;font-size:12.5px;border-bottom:1px solid var(--line-soft)}
.pl-staff-item:last-child{border-bottom:none}
.pl-rtag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:#eef2f8;color:var(--muted);letter-spacing:.3px;white-space:nowrap}
.pl-roletag{font-size:9px;font-weight:800;padding:1px 5px;border-radius:4px;letter-spacing:.3px;margin-right:5px}
.pl-rt-rig{background:#185fa5;color:#fff}
.pl-rt-drv{background:#7b3fb3;color:#fff}
.pl-rt-eng{background:#0f6e56;color:#fff}
.pl-empty{padding:18px 14px;color:var(--muted-soft);font-size:12px;text-align:center}

/* create form */
.pl-form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pl-form-grid .full{grid-column:span 4}
.pl-form-grid .half{grid-column:span 2}

/* plan grid */
.pl-grid-scroll{overflow-x:auto;border:1px solid var(--line-soft);border-radius:10px}
.pl-grid{width:100%;border-collapse:separate;border-spacing:0;min-width:1640px}
.pl-grid thead th{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);text-align:left;padding:9px 9px;border-bottom:2px solid var(--line);font-weight:700;white-space:nowrap;background:#f7faff;position:sticky;top:0;z-index:1}
.pl-grid tbody td{padding:12px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:13px}
.pl-grid tbody tr:hover{background:#fafcff}
.pl-c-region{width:62px}.pl-c-site{width:122px}.pl-c-task{width:108px}.pl-c-cust{width:84px}.pl-c-owner{width:100px}
.pl-c-act{width:118px}.pl-c-actd{width:170px}.pl-c-team{width:auto;min-width:200px}.pl-c-mat{width:96px}
.pl-c-code{width:74px}.pl-c-date{width:80px}.pl-c-status{width:128px}.pl-c-act2{width:84px}
.pl-region-pill{font-size:11px;font-weight:800;padding:3px 9px;border-radius:7px;letter-spacing:.3px;display:inline-block}
.pl-rp-DXB{background:#eaf1fb;color:var(--brand-blue)}
.pl-rp-AUH{background:#fdf3e7;color:#a96514}
.pl-rp-NE{background:#e7f6ef;color:#0a7a52}
.pl-rp-AAN{background:#f3eafb;color:#7b3fb3}
.pl-site-id{font-weight:800;color:var(--navy);font-size:13px}
.pl-site-name{font-size:11px;color:var(--muted);margin-top:2px}
.pl-task-id{font-size:12.5px;color:var(--txt)}
.pl-cust-tag{font-size:12.5px;font-weight:700;color:var(--navy)}
.pl-owner-txt{font-size:12.5px;color:var(--txt)}
.pl-act-txt{font-weight:700;color:var(--txt);font-size:13px}
.pl-actd-txt{font-size:12.5px;color:var(--muted);line-height:1.5}
.pl-team-line{font-size:12.5px;color:var(--txt);line-height:1.55}
.pl-team-line .role{font-size:9.5px;color:var(--muted-soft);font-weight:800;text-transform:uppercase;margin-right:4px}
.pl-code-val{font-size:12.5px;color:var(--txt)}
.pl-code-empty{color:var(--muted-soft)}
.pl-date-cell{font-size:12px;color:var(--txt)}
.pl-date-cell .dow{font-size:10px;color:var(--muted-soft)}
.pl-st-sel{padding:6px 7px;font-size:11.5px;font-weight:700;border-radius:8px;border:1.5px solid var(--line);cursor:pointer;width:100%}
.pl-st-Planned{color:var(--brand-blue);background:#eaf1fb;border-color:#cfe0f6}
.pl-st-Progress{color:var(--amber);background:#fdf3e7;border-color:#f3ddbf}
.pl-st-Done{color:var(--green);background:#e7f6ef;border-color:#c4e9d7}
.pl-st-Cancelled{color:var(--red);background:#fbeaec;border-color:#f1c4c8}
.pl-row-actions{display:flex;gap:6px;flex-wrap:wrap}
.pl-icon-btn{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted)}
.pl-icon-btn:hover{border-color:var(--brand-blue);color:var(--brand-blue)}
.pl-icon-btn.del:hover{border-color:var(--red);color:var(--red)}
.pl-icon-btn.carry:hover{border-color:var(--amber);color:var(--amber)}
.pl-edit-drawer td{background:#f7faff;border-bottom:1px solid var(--line)!important;padding:0!important}
.pl-drawer-inner{padding:16px 18px}
.pl-drawer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pl-drawer-grid .full{grid-column:span 4}
.pl-drawer-grid .half{grid-column:span 2}
.pl-drawer-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.pl-cancel-reason{margin-top:6px;font-size:11px;color:var(--red);background:#fbeaec;border-left:3px solid var(--red);padding:5px 9px;border-radius:0 6px 6px 0}
.pl-dur-chip{display:inline-block;font-size:10px;font-weight:700;color:#0a7a52;background:#e7f6ef;padding:2px 9px;border-radius:8px;margin-top:5px}
/* staff search results + tags (create form) */
.pl-results{position:absolute;z-index:50;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);max-height:220px;overflow:auto;width:100%;display:none;margin-top:2px}
.pl-result-item{padding:8px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line-soft)}
.pl-result-item:hover{background:#f4f7fb}
.pl-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pl-tag{background:#eaf1fb;color:var(--brand-blue);border:1px solid #cfe0f6;border-radius:8px;padding:3px 9px;font-size:12px;font-weight:600;display:inline-flex;align-items:center}

/* ===== PLANNING DASHBOARD ===== */
.pl-pd-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.pl-pd-day{padding:2px}
.pl-pd-head{font-weight:800;color:var(--navy);font-size:15px;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.pl-pd-today .pl-pd-head{color:var(--brand-blue)}
.pl-pd-tom .pl-pd-head{color:#0a7a52}
.pl-pd-date{font-size:12px;color:var(--muted);font-weight:600}
.pl-pd-total{margin-left:auto;font-size:12px;font-weight:700;background:#eef2f8;color:var(--navy);padding:2px 10px;border-radius:10px}
.pl-pd-pills{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.pl-pd-pill{border-radius:10px;padding:9px 6px;text-align:center;border:1.5px solid var(--line)}
.pl-pd-pill b{display:block;font-size:20px;line-height:1}
.pl-pd-pill span{font-size:10.5px;font-weight:600}
.pl-pd-staff{font-size:13px;color:var(--txt);display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding-top:6px;border-top:1px solid var(--line-soft)}
@media(max-width:820px){.pl-pd-2col{grid-template-columns:1fr}}
@media(max-width:760px){
  /* Team Dashboard → Utilization: the day cards and stat cards use inline multi-column grids
     that overflow on phones. Force them to a single column on mobile (desktop untouched). */
  #pdUtilDays{grid-template-columns:1fr !important}
  .pl-stats[style*="repeat(2"]{grid-template-columns:1fr !important}
  .pl-util-types{flex-wrap:wrap}
}

/* ===== TASK HISTORY (photo-style groups) ===== */
.pl-hist-group{border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;margin-bottom:14px}
.pl-hist-head{background:#f7faff;padding:9px 14px;font-size:13px;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.pl-hist-group table.pl-grid thead th{background:#fff}

/* ===== Excel-like table for history (clear gridlines, white cells) ===== */
.pl-xl{border-collapse:collapse;width:100%;background:#fff}
.pl-xl th,.pl-xl td{border:1px solid #d3dbe8;padding:7px 11px;text-align:left;font-size:12.5px;vertical-align:top}
.pl-xl thead th{background:#f1f5fb;color:var(--navy);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.pl-xl tbody tr:nth-child(even) td{background:#fafcff}
.pl-xl tbody tr:hover td{background:#f4f8ff}

/* small status badge (not full-width like the dropdown) */
.pl-badge{display:inline-block;width:auto;padding:2px 10px;border-radius:8px;font-size:11px;font-weight:700;border:1.5px solid;white-space:nowrap}

/* utilization per-type breakdown */
.pl-util-types{display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--line-soft);padding-top:8px}
.pl-util-type{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.pl-util-type b{color:var(--navy);font-weight:700}

/* leave conflict warning on plan row */
.pl-leave-warn{margin-top:6px;font-size:11px;color:#a52834;background:#fff4e5;border-left:3px solid var(--amber);padding:5px 9px;border-radius:0 6px 6px 0;font-weight:600}

/* ===================== TEAM PLANNING — page shell, nav, fonts ===================== */
.pl-page{
  background:linear-gradient(160deg,#eaf0f9 0%,#f3edf1 55%,#fdf4ec 100%);
  border:1px solid #e3e9f2;border-radius:18px;padding:20px 22px 26px;font-size:14px;
}
.pl-page .section-title{font-size:22px;margin-bottom:14px}

/* horizontal nav bar — dark, with clear active/inactive colors */
.pl-nav{
  display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center;
  background:linear-gradient(90deg,#0f2745,#1b3c6b);
  padding:8px;border-radius:14px;margin-bottom:20px;
  box-shadow:0 8px 22px rgba(15,39,69,.28);
  max-width:100%;
}
.pl-nav-item{
  padding:11px 22px;border-radius:10px;cursor:pointer;font-weight:700;font-size:14.5px;
  color:#aebfd6;display:flex;align-items:center;gap:8px;transition:.15s;white-space:nowrap;user-select:none;
}
.pl-nav-item:hover{color:#fff;background:rgba(255,255,255,.10)}
.pl-nav-item.active{background:linear-gradient(135deg,#2f70e0,#2856a8);color:#fff;box-shadow:0 4px 14px rgba(40,86,168,.45)}

/* Resource Hub inner toggle */
.pl-subnav{display:inline-flex;gap:5px;background:#e6edf7;padding:5px;border-radius:12px;margin-bottom:16px}
.pl-sub-item{padding:9px 20px;border:none;background:transparent;border-radius:9px;cursor:pointer;font-weight:700;font-size:14px;color:#5b7196;display:flex;align-items:center;gap:6px}
.pl-sub-item:hover{color:var(--brand-blue)}
.pl-sub-item.active{background:#fff;color:var(--brand-blue);box-shadow:0 2px 8px rgba(15,39,69,.14)}

/* bigger, clearer fonts inside the planning page */
.pl-page .data-table th{font-size:12px}
.pl-page .data-table td{font-size:13.5px}
.pl-page label{font-size:12px}
.pl-page input,.pl-page select{font-size:14px}
.pl-page .pl-grid tbody td{font-size:13.5px}
.pl-page .pl-stat .n{font-size:27px}
.pl-page .pl-stat .l{font-size:13px}

/* My Plan rows (engineer view) */
.pl-myrow{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.pl-myrow:last-child{border-bottom:none}
.pl-myrow-main{flex:1;min-width:0}
.pl-myrow-status{width:150px;flex-shrink:0}
.pl-myrow-status .pl-st-sel{width:100%}

/* ===== MY PLAN — engineer mobile cards ===== */
.pl-mp-section{margin-bottom:18px}
.pl-mp-sechead{font-size:16px;color:var(--navy);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.pl-mp-empty{background:#fff;border:1.5px dashed #cfdbec;border-radius:12px;padding:20px;text-align:center;color:var(--muted)}
.pl-mp-card{background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:16px;box-shadow:var(--shadow);margin-bottom:12px}
.pl-mp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.pl-mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line-soft)}
.pl-mp-site{font-size:19px;font-weight:800;color:var(--navy)}
.pl-mp-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.pl-mp-ids{font-size:13px;color:var(--txt);display:flex;flex-direction:column;gap:5px}
.pl-mp-lbl{font-size:11.5px;color:var(--muted);font-weight:600}
.pl-mp-val{font-size:14px;color:var(--navy);font-weight:700}
.pl-mp-crewbox{padding:4px 0 12px;margin-bottom:12px;border-bottom:1px solid var(--line-soft)}
.pl-mp-crew{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:13.5px;color:var(--txt)}
.pl-mp-codes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pl-mp-code{border:1px solid var(--line);border-radius:10px;padding:8px 6px;text-align:center}
.pl-mp-code-h{font-size:10.5px;color:var(--muted);font-weight:700;white-space:nowrap}
.pl-mp-code-v{font-size:12px;color:var(--navy);font-weight:700;margin-top:3px;word-break:break-word}
/* status bottom-sheet */
.pl-sheet{background:#fff;border-radius:18px 18px 0 0;padding:18px 18px 26px;width:100%;max-width:560px;box-shadow:0 -8px 30px rgba(15,39,69,.25)}
.pl-sheet-opt{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;margin-bottom:10px;font-size:15px;color:var(--navy);cursor:pointer;text-align:left}
.pl-sheet-opt:hover{background:#f7faff}
@media(max-width:640px){
  .pl-mp-grid{grid-template-columns:1fr;gap:8px}
  .pl-mp-codes{grid-template-columns:repeat(3,1fr)}
  .pl-page{padding:14px 12px 20px}
  .pl-stats{grid-template-columns:repeat(2,1fr)!important}
  /* Inventory Control toolbar: filters take a full row so Add item / Export / Columns
     wrap onto their own line instead of overlapping the search and filter cells */
  .inv-tools-filters{flex:1 0 100%!important;min-width:0;overflow-x:auto}
}

/* Master Plan scroll box — sticky header + frozen first columns so horizontal scroll is easy */
.mp-scroll thead th{position:sticky;top:0;z-index:3;background:#f1f5fb}
.mp-scroll table.pl-xl thead th:nth-child(1),
.mp-scroll table.pl-xl tbody td:nth-child(1){position:sticky;left:0;z-index:2;background:#fff}
.mp-scroll table.pl-xl thead th:nth-child(6),
.mp-scroll table.pl-xl tbody td:nth-child(6){position:sticky;left:34px;z-index:2;background:#fff;box-shadow:1px 0 0 var(--line)}
.mp-scroll table.pl-xl thead th:nth-child(1),
.mp-scroll table.pl-xl thead th:nth-child(6){z-index:4}

/* Engineers: view-only Site Master (hide edit/delete row actions) */
.engineer-mode .site-row-actions{display:none}

/* User add/edit popup modal */
.umodal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px}
.umodal-overlay.hidden{display:none}
.umodal-card{background:#fff;border-radius:12px;padding:22px;max-width:660px;width:100%;box-shadow:0 24px 60px rgba(10,26,48,.4);max-height:90vh;overflow:auto}

/* ── Movement History modal — enlarged, scrollable, responsive ── */
.mh-card{width:92vw;max-width:1500px;max-height:88vh;padding:0;display:flex;flex-direction:column;overflow:hidden}
.mh-head{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line,#e2e8f0)}
.mh-head h3{margin:0;color:#0f2745;font-size:17px;line-height:1.3;word-break:break-word}
.mh-head h3:focus{outline:none}
.mh-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:16px 22px;overflow:auto}
/* redesigned popup: only the table scrolls — summary cards + footer stay fixed */
.mh-body.mh-fixed{overflow:hidden}
/* summary cards row */
.mh-summary{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.mh-stat{flex:1 1 150px;min-width:130px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 14px}
.mh-stat .lbl{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.3px}
.mh-stat .val{font-size:20px;font-weight:800;color:#0f2745;margin-top:2px;word-break:break-word;line-height:1.2}
.mh-stat .val.sm{font-size:15px}
/* scroll region: horizontal + vertical, sticky header, always-visible horizontal scrollbar.
   overflow-x:scroll keeps the bottom scrollbar present (and, as the scroll box's own bar, it stays
   pinned to the bottom of the visible table area no matter how far down the rows are scrolled). */
.mh-scroll{flex:1 1 auto;min-height:140px;overflow-x:scroll;overflow-y:auto;border:1px solid var(--line,#e2e8f0);border-radius:10px;scrollbar-gutter:stable;scrollbar-color:#94a3b8 #eef2f7;scrollbar-width:auto}
.mh-scroll:focus{outline:2px solid #2563eb;outline-offset:-2px}
.mh-scroll::-webkit-scrollbar{height:14px;width:14px}
.mh-scroll::-webkit-scrollbar-track{background:#eef2f7;border-radius:8px}
.mh-scroll::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:8px;border:3px solid #eef2f7}
.mh-scroll::-webkit-scrollbar-thumb:hover{background:#64748b}
/* fixed layout so a single long Reason/Remarks can't blow out its column — text wraps to the set width */
.mh-table{table-layout:fixed;width:1554px;min-width:1554px;border-collapse:separate;border-spacing:0;font-size:13px}
.mh-table thead th{position:sticky;top:0;z-index:2;background:#1f3a5f;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;padding:11px 14px;text-align:left;white-space:nowrap;border-bottom:1px solid #16304f}
.mh-table tbody td{padding:11px 14px;border-bottom:1px solid #eef2f7;color:#0f172a;vertical-align:top}
/* subtle zebra striping + hover highlight (tr bg so frozen columns inherit it) */
.mh-table tbody tr{background:#fff}
.mh-table tbody tr:nth-child(even){background:#f9fbfd}
.mh-table tbody tr:hover{background:#eaf2fd}
/* frozen first three columns (#, Date & Time, Type) — stay put during horizontal scroll */
.mh-table th.c-num,.mh-table td.c-num,.mh-table th.c-date,.mh-table td.c-date,.mh-table th.c-type,.mh-table td.c-type{position:sticky;background:inherit}
.mh-table td.c-num,.mh-table td.c-date,.mh-table td.c-type{z-index:1}
.mh-table thead th.c-num,.mh-table thead th.c-date,.mh-table thead th.c-type{z-index:4;background:#1f3a5f}
.mh-table .c-num{left:0}
.mh-table .c-date{left:52px}
.mh-table .c-type{left:202px;box-shadow:6px 0 8px -6px rgba(15,39,69,.28)}
.mh-table .c-num{width:52px;min-width:52px;max-width:52px;text-align:right;white-space:nowrap}
.mh-table .c-date{width:150px;min-width:150px;max-width:150px;white-space:nowrap;font-variant-numeric:tabular-nums}
.mh-table .c-type{width:108px;min-width:108px;max-width:108px}
.mh-table .c-item{width:160px;word-break:break-word}
.mh-table .c-qty{width:54px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.mh-table .c-serial{width:150px;word-break:break-word}
.mh-table .c-by{width:250px;word-break:break-word}
.mh-table .c-reason{width:330px;white-space:pre-wrap;word-break:break-word}
.mh-table .c-remarks{width:300px;white-space:pre-wrap;word-break:break-word}
/* body-cell text colours — scoped to tbody so they never override the white header text */
.mh-table tbody td.c-num{color:#94a3b8}
.mh-table tbody td.c-reason,.mh-table tbody td.c-remarks{color:#334155}
.mh-dash{color:#cbd5e1}
/* movement badges — icon + text label always present (never colour-only) */
.mh-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.mh-badge .mh-ic{font-style:normal;margin-right:3px}
.mh-b-add{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.mh-b-issue{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.mh-b-return{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.mh-b-transfer{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe}
.mh-b-repair{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
.mh-b-faulty{background:#fffbeb;color:#b45309;border-color:#fde68a}
.mh-b-damaged{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.mh-b-lost{background:#fef2f2;color:#7f1d1d;border-color:#fecaca}
.mh-b-writeoff{background:#f8fafc;color:#475569;border-color:#e2e8f0}
.mh-b-adjustment{background:#f1f5f9;color:#334155;border-color:#cbd5e1}
/* footer */
.mh-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:14px;margin-top:2px}
.mh-foot .note{font-size:12px;color:#64748b}
.mh-foot .acts{display:flex;gap:8px;flex-wrap:wrap}
.mh-empty{padding:28px;text-align:center;color:#94a3b8}
@media (max-width:768px){
  .mh-card{width:96vw;max-width:96vw;max-height:92vh}
  .mh-head{padding:13px 15px}
  .mh-head h3{font-size:15px}
  .mh-body{padding:13px 15px}
  .mh-stat{flex:1 1 46%;min-width:0}
  .mh-stat .val{font-size:18px}
  .mh-table{min-width:1360px}
  .mh-foot .note{width:100%}
  /* freezing three columns leaves too little room on phones/tablets — drop the horizontal freeze
     (body cells static; header cells keep sticking to the top, just without the left offset) */
  .mh-table td.c-num,.mh-table td.c-date,.mh-table td.c-type{position:static}
  .mh-table thead th.c-num,.mh-table thead th.c-date,.mh-table thead th.c-type{left:auto}
  .mh-table .c-type{box-shadow:none}
}
@media (max-width:430px){
  #invMMovesModal.umodal-overlay{padding:8px}
  .mh-stat{flex:1 1 100%}
}

/* ── Current-state drill-down modal (summary card click) — deliberately distinct from Movement History
   (green "current" header accent, no history framing) ── */
.drill-card{width:88vw;max-width:1100px;max-height:86vh;padding:0;display:flex;flex-direction:column;overflow:hidden}
.drill-head{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid #bbf7d0;background:#f0fdf4}
.drill-head h3{margin:0;color:#0f2745;font-size:16px;line-height:1.3;word-break:break-word}
.drill-head h3:focus{outline:none}
.drill-body{flex:1 1 auto;min-height:0;overflow:auto;padding:16px 22px}
.drill-count{font-size:12.5px;color:#334155;margin-bottom:10px}
.drill-count b{color:#0f2745}
.drill-scroll{overflow-x:auto}
.drill-table{width:100%;border-collapse:collapse;font-size:13px}
.drill-table th{position:sticky;top:0;z-index:1;background:#1f3a5f;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.3px;font-weight:700;text-align:left;padding:9px 11px;white-space:nowrap}
.drill-table td{padding:9px 11px;border-bottom:1px solid #eef2f7;color:#0f172a;vertical-align:top}
.drill-table tbody tr:nth-child(even){background:#f9fbfd}
.drill-table tbody tr:hover{background:#eaf2fd}
.drill-actions{white-space:nowrap}
.drill-actions .btn{margin-right:4px}
/* read-only status panel (counted faulty/damaged/lost/written-off) */
.drill-panel{max-width:600px}
.drill-qty{font-size:32px;font-weight:800;color:#0f2745;line-height:1.1}
.drill-qty small{font-size:14px;font-weight:600;color:#64748b}
.drill-note{font-size:12px;color:#64748b;margin:6px 0 16px}
.drill-sub{font-size:12px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.3px;margin:6px 0 4px}
.drill-kv{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid #f1f5f9;font-size:13px}
.drill-kv>span:first-child{color:#64748b}
.drill-kv>span:last-child{color:#0f172a;text-align:right;word-break:break-word}
.drill-empty{padding:26px;text-align:center;color:#94a3b8}
.drill-histlink{margin-top:18px}
@media (max-width:768px){
  .drill-card{width:96vw;max-width:96vw;max-height:92vh}
  .drill-head{padding:13px 15px}
  .drill-body{padding:13px 15px}
  .drill-table{min-width:680px}
}
@media (max-width:430px){ #invDrillModal.umodal-overlay{padding:8px} }

/* collapsible sidebar category groups */
.nav-group-label{cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none}
.grp-bar{width:3px;height:13px;background:var(--brand-orange,#e8852c);border-radius:2px;flex-shrink:0}
.grp-name{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:#cdd9e9;font-weight:700;white-space:nowrap}
.grp-line{flex:1;height:1px;background:rgba(255,255,255,.12)}
.grp-chev{font-size:10px;opacity:.55;transition:transform .15s}
.nav-group-label.collapsed .grp-chev{transform:rotate(-90deg)}
.app-shell.collapsed .grp-chev,.app-shell.collapsed .grp-bar,.app-shell.collapsed .grp-name,.app-shell.collapsed .grp-line{display:none}

/* sidebar footer — user chip + action rows (matches mockup) */
.sidebar-foot .user-chip{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:9px;background:rgba(255,255,255,.06)}
.sidebar-foot .avatar{width:28px;height:28px;border-radius:7px;background:var(--brand-orange,#e8852c);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.sidebar-foot .user-meta{flex:1;display:flex;flex-direction:column;line-height:1.15}
.sidebar-foot .user-meta b{color:#fff;font-size:12.5px}
.sidebar-foot .user-meta span{color:#7f93b3;font-size:9px;letter-spacing:.6px;text-transform:uppercase}
.user-chip-more{color:#7f93b3;font-size:15px}
.foot-row{display:flex;align-items:center;gap:9px;width:100%;margin-top:5px;padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:#dbe4f0;cursor:pointer;font-size:12.5px;font-weight:600;transition:.15s;text-align:left}
.foot-row:hover{background:rgba(255,255,255,.10)}
.foot-row .fr-ic{font-size:15px}
.foot-row .fr-label{flex:1}
.foot-row .fr-chev{color:#7f93b3;font-size:15px}
.app-shell.collapsed .foot-row .fr-label,.app-shell.collapsed .foot-row .fr-chev,.app-shell.collapsed .user-chip-more{display:none}
.app-shell.collapsed .foot-row{justify-content:center;padding:11px 0}

/* collapsible task-history / day groups */
.pl-hist-head{cursor:pointer}
.hg-chev{display:inline-block;transition:transform .15s;color:var(--muted-soft);font-size:11px}
.pl-hist-group.collapsed .hg-body{display:none}
.pl-hist-group.collapsed .hg-chev{transform:rotate(-90deg)}

/* subtle frame around planning cards (Daily Plan etc.) */
.pl-page .card{border:1px solid #e3e9f2}

/* My Plan collapsible task cards (engineer) */
.pl-mp-top{display:flex;justify-content:space-between;align-items:center}
.mp-chev{color:var(--muted-soft);font-size:13px;transition:transform .15s}
.pl-mp-card.collapsed .mp-body{display:none}
.pl-mp-card.collapsed .mp-chev{transform:rotate(-90deg)}
.pl-mp-card.collapsed{padding-bottom:14px}

/* GM / review-only mode: hide destructive (delete) actions. Other writes are blocked server-side. */
body.readonly-mode .btn-danger { display: none !important; }

/* Activity Tracker full-screen mode */
#mpPaneContent:fullscreen, #masterplanSection:fullscreen { background:#fff; padding:16px; overflow-y:auto; }
#mpPaneContent:fullscreen .mp-scroll, #masterplanSection:fullscreen .mp-scroll { max-height: calc(100vh - 220px); }

/* In-page maximize for Activity Tracker — fills the browser window, no true-fullscreen banner */
.mp-maximized{position:fixed;inset:0;z-index:9000;background:#fff;padding:16px 18px;overflow:auto}

/* ===== MOBILE SIDEBAR DRAWER (≤980px) — desktop layout untouched ===== */
.sidebar-backdrop{display:none}
@media(max-width:980px){
  .sidebar{height:100dvh}
  .sidebar-foot{background:var(--ink)}
  .sidebar-backdrop{position:fixed;inset:0;background:rgba(8,18,33,.5);z-index:55}
  .sidebar.open ~ .sidebar-backdrop{display:block}
}

/* Batch Follow-up (B2) stage badges */
.fu-badge{font-size:12px;padding:3px 9px;border-radius:8px;white-space:nowrap}
.fu-badge-open{background:#e6f1fb;color:#185fa5}
.fu-badge-mid{background:#faeeda;color:#854f0b}
.fu-badge-done{background:#e1f5ee;color:#0f6e56}

/* Batch Follow-up (B2) stage cards */
.fu-cards{display:flex;gap:10px;flex-wrap:wrap}
.fu-card{flex:1;min-width:120px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:10px 14px}
.fu-card-n{font-size:22px;font-weight:800;color:#0f2745;line-height:1.1}
.fu-card-l{font-size:12px;color:#0f2745;font-weight:600;margin-top:2px}
.fu-card-c{font-size:11px;color:#94a3b8}

/* ════════════ Resource Hub recovery + shared pills (v1.2.0) ════════════ */
/* Sidebar brand logo (real Mobitel logo; falls back to the MT mark on error) */
.sidebar-brand .brand-logo{width:40px;height:40px;border-radius:10px;object-fit:cover;flex-shrink:0;box-shadow:0 6px 16px rgba(10,26,48,.45);background:#fff}
.app-shell.collapsed .brand-logo{margin:0}

/* Collapsed sidebar: keep page icons visible (defensive — icons must never go blank); hide only the
   full label — the short .nav-mini label stays visible under each icon. */
.app-shell.collapsed .nav-item .nav-full{display:none}
.app-shell.collapsed .nav-item .ic{display:inline-flex;align-items:center;justify-content:center;font-size:19px;opacity:1}
.app-shell.collapsed .nav-item .nav-mini{display:block;font-size:11px;line-height:1.2;font-weight:600;text-align:center;letter-spacing:.1px;white-space:normal;max-width:100%}

/* Generic pill (the Resource Hub + tables rely on these — base + colour variants) */
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:#eef2f7;color:#475569;line-height:1.5;white-space:nowrap}
.pill-grey{background:#eef2f7;color:#475569}
.pill-blue{background:#e7f0ff;color:var(--brand-blue,#2856a8)}
.pill-green{background:#dcfce7;color:#15803d}
.pill-red{background:#fee2e2;color:#b91c1c}
.pill-amber{background:#fef3c7;color:#92400e}

/* Segmented inner-nav (Resource Hub type toggle) */
.seg{display:inline-flex;gap:4px;background:#eef2f7;border:1px solid var(--line-soft,#e6ebf2);border-radius:10px;padding:4px;flex-wrap:wrap}
.seg button{border:none;background:transparent;color:#475569;font-weight:600;font-size:13px;padding:7px 14px;border-radius:7px;cursor:pointer;transition:.15s}
.seg button:hover{background:rgba(40,86,168,.10);color:var(--brand-blue,#2856a8)}
.seg button.active{background:var(--brand-blue,#2856a8);color:#fff;box-shadow:0 3px 10px rgba(40,86,168,.3)}
.rh-seg{margin-bottom:18px}

/* Dashboard count cards */
.rh-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px}
.rh-card{display:flex;align-items:center;gap:14px;background:var(--surface,#fff);border:1px solid var(--line-soft,#e6ebf2);border-left:4px solid var(--brand-blue,#2856a8);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow,0 6px 18px rgba(15,39,69,.06))}
.rh-card .rh-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:23px;background:#eef4fb;flex-shrink:0}
.rh-card .rh-meta{display:flex;flex-direction:column;line-height:1.15}
.rh-card .rh-meta b{font-size:24px;font-weight:800;color:var(--navy,#0f2745)}
.rh-card .rh-meta span{font-size:12.5px;color:var(--muted,#64748b);font-weight:600}
.rh-card.rh-engineer{border-left-color:#16a34a}.rh-card.rh-engineer .rh-ic{background:#e7f6ef}
.rh-card.rh-rigger{border-left-color:#d97706}.rh-card.rh-rigger .rh-ic{background:#fdf3e7}
.rh-card.rh-driver{border-left-color:#2856a8}.rh-card.rh-driver .rh-ic{background:#eaf1fb}
.rh-card.rh-staff{border-left-color:#7c3aed}.rh-card.rh-staff .rh-ic{background:#f3edfd}

/* ════════════ Inventory Control — hi-fi Item Master (design handoff v2) ════════════ */
/* Numbers use the app's Inter font with tabular figures — clear and column-aligned (not monospace). */
.mono{font-family:inherit;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:0}
.ic2-code{font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace;font-size:10.5px}
/* Stock-health banner */
.ic2-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(180deg,#fff6f0,#fff);border:1px solid #f4d9c6;border-radius:14px;padding:15px 20px;margin-bottom:14px}
.ic2-banner-ic{width:44px;height:44px;border-radius:12px;background:#fde7dc;color:#b4530f;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.ic2-banner-head{font-size:14.5px;font-weight:700;color:#0f2745}
.ic2-banner-sub{font-size:12.5px;color:#64748b;margin-top:2px}
.ic2-banner-cta{margin-left:auto;background:#b4530f;color:#fff;border:none;border-radius:10px;padding:9px 15px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.ic2-banner-cta:hover{filter:brightness(1.06)}
/* KPI strip */
.ic2-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ic2-kpi{background:#fff;border:1px solid #eef2f8;border-left:3px solid #2856a8;border-radius:13px;padding:15px 17px}
.ic2-kpi-top{display:flex;align-items:center;justify-content:space-between}
.ic2-kpi-label{font-size:10.5px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.4px}
.ic2-kpi-ic{font-size:16px;opacity:.85}
.ic2-kpi-val{font-size:27px;font-weight:900;line-height:1.15;margin-top:6px}
.ic2-kpi-sub{font-size:11px;font-weight:600;color:#94a3b8;margin-top:2px}
/* Table card */
.ic2-table-card{background:#fff;border:1px solid #eef2f8;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(15,39,69,.06)}
.ic2-table{width:100%;min-width:1220px;border-collapse:collapse;background:#fff}
.ic2-table thead th{background:#f7faff;border-bottom:2px solid #eef2f8;border-right:1px solid #eaeff6;text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.4px;color:#64748b;padding:11px 10px;white-space:nowrap}
.ic2-table tbody td{border-bottom:1px solid #eef2f8;border-right:1px solid #f2f5f9;font-size:13px}
.ic2-table thead th:last-child,.ic2-table tbody td:last-child{border-right:none}
.ic2-table tbody tr:last-child td{border-bottom:none}
.ic2-table tbody tr:hover{background:#f7fafd}
.ic2-cat{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.ic2-foot{background:#fafcff;border-top:1px solid #eef2f8;padding:11px 16px;font-size:12.5px;color:#64748b}
/* Row actions (hover reveal) + ⋯ menu */
.ic2-acts{opacity:.55;transition:opacity .12s;position:relative;display:inline-flex;gap:7px;align-items:center;justify-content:flex-end}
.ic2-row:hover .ic2-acts{opacity:1}
.ic2-edit{background:#eaf1fb;color:#2856a8;border:none;border-radius:8px;padding:6px 12px;font-weight:700;font-size:12.5px;cursor:pointer}
.ic2-edit:hover{background:#dbe8fb}
.ic2-more{width:30px;height:30px;border-radius:8px;background:#fff;border:1.5px solid #e3e9f2;cursor:pointer;font-size:15px;line-height:1;color:#64748b}
.ic2-more:hover{border-color:#cbd5e6}
.ic2-menu{position:absolute;right:0;top:34px;background:#fff;border:1px solid #e3e9f2;border-radius:10px;box-shadow:0 12px 32px rgba(15,39,69,.18);padding:6px;z-index:60;min-width:140px;display:flex;flex-direction:column;gap:2px}
.ic2-menu.hidden{display:none}
.ic2-menu-item{background:none;border:none;text-align:left;padding:8px 10px;border-radius:7px;font-size:13px;font-weight:600;color:#334155;cursor:pointer}
.ic2-menu-item:hover{background:#f1f5f9}
.ic2-menu-danger{color:#b4233a}
.ic2-menu-danger:hover{background:#fde8ec}
@media(max-width:1100px){ .ic2-kpis{grid-template-columns:repeat(2,1fr)} }

/* ── Global operation loading state (v1.11) — branded Mobitel dialog ── */
.op-busy-overlay{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;background:rgba(15,39,69,.22);backdrop-filter:saturate(105%) blur(1px)}
.op-busy-overlay.hidden{display:none}
.op-busy-card{display:flex;align-items:center;gap:14px;min-width:250px;background:#fff;color:#0f2745;padding:16px 22px;border-radius:14px;box-shadow:0 16px 44px rgba(15,39,69,.28);border:1px solid #e6edf7}
.op-busy-logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.op-busy-body{flex:1;min-width:110px}
.op-busy-title{font-size:14px;font-weight:800;color:#123a74;letter-spacing:.2px}
.op-busy-op{font-size:12.5px;font-weight:600;color:#5b6b82;margin-top:2px;min-height:15px}
.op-busy-spinner{display:inline-block;width:22px;height:22px;border:2.5px solid #d7e3f5;border-top-color:#2856a8;border-radius:50%;animation:opBusySpin .7s linear infinite;flex:0 0 auto}
.op-busy-spinner-sm{width:13px;height:13px;border-width:2px;vertical-align:-2px}
.op-busy-check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:#0e9f6e;font-size:18px;font-weight:800;flex:0 0 auto}
.op-busy-check-sm{color:#0e9f6e;font-weight:800}
@keyframes opBusySpin{to{transform:rotate(360deg)}}
button[aria-busy="true"]{opacity:.8;cursor:progress}
@media(prefers-reduced-motion:reduce){ .op-busy-spinner{animation-duration:1.6s} }