/* ============================================================
   ZUBAIR CONTRACTING — Operations Hub
   Public site + Admin dashboard
============================================================ */
:root{
  --c-bg:#f6f7f9;
  --c-surface:#ffffff;
  --c-surface-2:#fafbfc;
  --c-border:#e5e7eb;
  --c-border-strong:#d1d5db;
  --c-text:#0f172a;
  --c-text-soft:#475569;
  --c-text-mute:#94a3b8;
  --c-primary:#0a3d62;       /* deep industrial blue */
  --c-primary-2:#0d5283;
  --c-accent:#f39200;        /* construction orange */
  --c-accent-2:#ffb547;
  --c-dark:#0b1220;
  --c-dark-2:#111a2e;
  --c-success:#16a34a;
  --c-warning:#f59e0b;
  --c-danger:#dc2626;
  --c-info:#0284c7;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 4px 14px rgba(15,23,42,.08);
  --shadow-lg:0 18px 40px rgba(15,23,42,.16);
  --radius:14px;
  --radius-sm:8px;
  --radius-lg:20px;
}
[hidden]{display:none !important;}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,sans-serif;color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.01em;margin:0;}
h1{font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.05;}
h2{font-size:clamp(1.6rem,2.8vw,2.4rem);}
h3{font-size:1.15rem;}
p{line-height:1.6;color:var(--c-text-soft);}
.container{max-width:1240px;margin:0 auto;padding:0 28px;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:10px;border:1px solid transparent;cursor:pointer;font-weight:600;font-size:.92rem;transition:.18s;background:transparent;font-family:inherit;}
.btn-sm{padding:8px 14px;font-size:.84rem;}
.btn-primary{background:var(--c-primary);color:#fff;}
.btn-primary:hover{background:var(--c-primary-2);}
.btn-accent{background:var(--c-accent);color:#fff;}
.btn-accent:hover{background:var(--c-accent-2);}
.btn-outline{border-color:rgba(255,255,255,.5);color:#fff;}
.btn-outline:hover{background:#fff;color:var(--c-primary);}
.btn-ghost{background:transparent;color:var(--c-text);border-color:var(--c-border);}
.btn-ghost:hover{background:var(--c-surface);border-color:var(--c-border-strong);}
.btn-danger{background:var(--c-danger);color:#fff;}
.btn-danger:hover{background:#b91c1c;}
.btn-success{background:var(--c-success);color:#fff;}
.btn-link{padding:0;color:var(--c-primary);background:none;border:none;font-weight:600;cursor:pointer;}
.btn-link:hover{text-decoration:underline;}

/* ====================== PUBLIC SITE ====================== */
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{width:46px;height:46px;background:linear-gradient(135deg,var(--c-primary),var(--c-primary-2));color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:1px;box-shadow:var(--shadow-sm);}
.brand-mark.sm{width:36px;height:36px;font-size:1.05rem;}
.brand-text strong{display:block;font-size:.95rem;letter-spacing:.04em;}
.brand-text span{font-size:.72rem;color:var(--c-text-mute);text-transform:uppercase;letter-spacing:.18em;}
.hamburger{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;}

.hero{position:relative;min-height:88vh;background:linear-gradient(135deg,#0b1220 0%,#0a3d62 60%,#0d5283 100%);color:#fff;display:flex;align-items:center;overflow:hidden;}
.hero-overlay{position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" opacity="0.06"><defs><pattern id="g" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M0 40L40 0" stroke="white" stroke-width="1"/></pattern></defs><rect width="800" height="800" fill="url(%23g)"/></svg>');background-size:cover;}
.hero-inner{position:relative;padding:80px 28px;}
.eyebrow{display:inline-block;color:var(--c-accent-2);font-weight:600;letter-spacing:.18em;font-size:.78rem;text-transform:uppercase;margin-bottom:18px;}
.hero h1 .accent{color:var(--c-accent);}
.hero-sub{font-size:1.18rem;max-width:660px;color:rgba(255,255,255,.85);margin:22px 0 36px;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px;border-top:1px solid rgba(255,255,255,.15);padding-top:28px;max-width:760px;}
.hero-stats strong{display:block;font-family:'Bebas Neue',sans-serif;font-size:2.6rem;color:var(--c-accent);}
.hero-stats span{color:rgba(255,255,255,.7);font-size:.84rem;text-transform:uppercase;letter-spacing:.1em;}

.section{padding:90px 0;}
.section-label.light{color:var(--c-accent);}

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;}
.service-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);padding:32px;border-radius:var(--radius);transition:.25s;position:relative;}
.service-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.08);border-color:var(--c-accent);}
.service-num{font-family:'Bebas Neue',sans-serif;color:var(--c-accent);font-size:1.4rem;letter-spacing:1px;margin-bottom:16px;}
.service-card h3{color:#fff;margin-bottom:10px;}

.public-projects{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px;}
.public-project-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s;}
.public-project-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.pp-img{height:170px;background:linear-gradient(135deg,var(--c-primary),var(--c-accent));display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:1px;text-align:center;padding:0 18px;}
.pp-body{padding:20px;}
.pp-body h4{color:var(--c-primary);margin-bottom:8px;}
.pp-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:.78rem;color:var(--c-text-mute);}
.pp-meta span{background:#f1f4f8;padding:4px 10px;border-radius:99px;}

.vacancy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:30px;}
.vacancy-card{background:#fff;border:1px solid var(--c-border);border-left:4px solid var(--c-accent);padding:24px;border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.vacancy-card h4{color:var(--c-primary);margin-bottom:8px;}
.vacancy-meta{font-size:.85rem;color:var(--c-text-mute);margin:6px 0 12px;}
.vacancy-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.empty-vacancies{text-align:center;padding:60px;background:#fff;border:1px dashed var(--c-border-strong);border-radius:var(--radius);grid-column:1/-1;}
.contact-list .label{color:var(--c-accent);width:90px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;}
.contact-form{background:#fff;border-radius:var(--radius);padding:34px;color:var(--c-text);box-shadow:var(--shadow-lg);}
.contact-form h3{color:var(--c-primary);margin-bottom:18px;}
.footer-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:start;}

/* ====================== FORMS ====================== */
.form-row{display:flex;flex-direction:column;margin-bottom:14px;}
.form-row label{font-size:.78rem;color:var(--c-text-soft);font-weight:600;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em;}
.form-row input,.form-row select,.form-row textarea{padding:11px 13px;border:1px solid var(--c-border);border-radius:var(--radius-sm);font-size:.95rem;font-family:inherit;background:#fff;transition:.15s;}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(10,61,98,.12);}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;}
.form-grid .full{grid-column:1/-1;}
.form-grid .form-row{min-width:0;}
.form-row input,.form-row select,.form-row textarea{max-width:100%;}
.form-error{background:#fee2e2;color:#991b1b;padding:10px;border-radius:8px;font-size:.88rem;margin:10px 0;}

/* ====================== ADMIN LAYOUT ====================== */
.view-admin{display:grid;grid-template-columns:260px 1fr;min-height:100vh;}
.sidebar{background:var(--c-dark);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid #1c2538;}
.sidebar-brand{padding:22px 22px 20px;border-bottom:1px solid #1c2538;display:flex;gap:12px;align-items:center;}
.sidebar-brand strong{display:block;font-size:.92rem;}
.sidebar-brand small{color:rgba(255,255,255,.5);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;}
.sidebar-nav{display:flex;flex-direction:column;flex:1;padding:14px 10px;gap:2px;overflow-y:auto;}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:8px;color:rgba(255,255,255,.72);cursor:pointer;font-size:.9rem;font-weight:500;transition:.15s;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-item.active{background:var(--c-primary);color:#fff;}
.nav-icon{width:22px;text-align:center;color:var(--c-accent);font-weight:700;}
.sidebar-foot{padding:14px;border-top:1px solid #1c2538;display:flex;flex-direction:column;gap:8px;}
.sidebar-foot .btn{justify-content:flex-start;color:rgba(255,255,255,.78);border-color:#2a3552;}
.sidebar-foot .btn-danger{color:#fff;border-color:transparent;}

.admin-main{display:flex;flex-direction:column;}
.admin-topbar{display:flex;align-items:center;gap:18px;padding:14px 26px;background:#fff;border-bottom:1px solid var(--c-border);position:sticky;top:0;z-index:20;}
.sidebar-toggle{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;}
.topbar-search{flex:1;}
.topbar-search input{width:100%;max-width:520px;padding:10px 14px;border:1px solid var(--c-border);border-radius:99px;font-size:.9rem;background:#f4f6f9;}
.topbar-actions{display:flex;align-items:center;gap:12px;}
.user-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;background:#eef2f7;border-radius:99px;font-size:.84rem;font-weight:600;}
.user-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--c-success);}

.module-container{padding:28px 30px 70px;}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:24px;}
.page-head h1{font-size:1.7rem;margin-bottom:4px;}
.page-head p{color:var(--c-text-mute);font-size:.92rem;}
.page-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* Cards */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:26px;}
.kpi-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.kpi-card .kpi-label{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-text-mute);}
.kpi-card .kpi-value{font-size:1.8rem;font-weight:800;margin-top:6px;color:var(--c-text);}
.kpi-card .kpi-foot{margin-top:8px;font-size:.78rem;color:var(--c-text-mute);}
.kpi-card.alert{border-left:4px solid var(--c-warning);}
.kpi-card.danger{border-left:4px solid var(--c-danger);}
.kpi-card.success{border-left:4px solid var(--c-success);}
.kpi-card.info{border-left:4px solid var(--c-info);}

.range-toggle{display:inline-flex;background:#fff;border:1px solid var(--c-border);border-radius:99px;padding:3px;}
.range-toggle button{border:none;background:transparent;padding:6px 14px;font-size:.82rem;border-radius:99px;cursor:pointer;font-weight:600;color:var(--c-text-soft);}
.range-toggle button.active{background:var(--c-primary);color:#fff;}

.section-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:22px;margin-bottom:22px;}
.section-card h3{margin-bottom:14px;font-size:1.05rem;}
.split-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;}

.alert-list{display:flex;flex-direction:column;gap:8px;}
.alert-item{padding:12px 14px;border-left:3px solid var(--c-warning);background:#fff8eb;border-radius:8px;font-size:.88rem;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.alert-item.danger{background:#fef2f2;border-color:var(--c-danger);}
.alert-item.info{background:#eff6ff;border-color:var(--c-info);}

/* Tables */
.table-wrap{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);overflow:auto;}
table.data{width:100%;border-collapse:collapse;font-size:.9rem;}
table.data th{background:#f8fafc;padding:12px 14px;text-align:left;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-mute);border-bottom:1px solid var(--c-border);position:sticky;top:0;}
table.data td{padding:12px 14px;border-bottom:1px solid var(--c-border);vertical-align:middle;}
table.data tr:last-child td{border-bottom:none;}
table.data tr:hover{background:#fafbfc;}
.cell-strong{font-weight:600;}
.cell-num{text-align:right;font-variant-numeric:tabular-nums;}
.row-actions{display:flex;gap:6px;}
.row-actions .icon-btn{width:30px;height:30px;border:1px solid var(--c-border);background:#fff;border-radius:6px;cursor:pointer;color:var(--c-text-soft);font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;}
.row-actions .icon-btn:hover{background:#f1f4f8;color:var(--c-primary);}
.row-actions .icon-btn.danger:hover{color:var(--c-danger);border-color:#fecaca;background:#fef2f2;}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:flex-end;}
.filters .form-row{flex:1 1 160px;margin:0;}
.filters .form-row input,.filters .form-row select{padding:8px 12px;font-size:.85rem;}

/* Badges */
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.badge-success{background:#dcfce7;color:#166534;}
.badge-warning{background:#fef3c7;color:#92400e;}
.badge-danger{background:#fee2e2;color:#991b1b;}
.badge-info{background:#dbeafe;color:#1e40af;}
.badge-grey{background:#e5e7eb;color:#374151;}
.badge-primary{background:#cfe1f0;color:#0a3d62;}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--c-border);margin-bottom:18px;flex-wrap:wrap;}
.tab{padding:10px 16px;cursor:pointer;font-size:.88rem;font-weight:600;color:var(--c-text-mute);border-bottom:2px solid transparent;}
.tab.active{color:var(--c-primary);border-bottom-color:var(--c-primary);}
.tab:hover{color:var(--c-primary);}

/* Charts */
.chart-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:22px;}
.chart-card h3{margin-bottom:14px;}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(11,18,32,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px;}
.modal-card{background:#fff;border-radius:var(--radius-lg);max-width:720px;width:100%;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);}
.modal-card.large{max-width:1080px;}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--c-border);display:flex;justify-content:space-between;align-items:center;}
.modal-close{background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--c-text-mute);line-height:1;}
.modal-body{padding:22px;overflow-y:auto;}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--c-border);background:#fafbfc;}

.login-card{max-width:420px;text-align:center;padding:32px;}
.login-head{margin-bottom:22px;}
.login-head .brand-mark{margin:0 auto 14px;}
.login-head h2{margin-bottom:4px;color:var(--c-primary);}
.login-head p{color:var(--c-text-mute);font-size:.85rem;}
.login-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}
.login-hint{font-size:.78rem;color:var(--c-text-mute);margin-top:14px;}
.login-hint code{background:#f1f4f8;padding:2px 6px;border-radius:4px;}

/* Detail panels */
.project-detail-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:18px;}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;background:#f8fafc;padding:18px;border-radius:var(--radius);border:1px solid var(--c-border);margin-bottom:20px;}
.detail-grid div small{display:block;color:var(--c-text-mute);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.detail-grid div strong{font-size:.95rem;}
.budget-bar{height:12px;border-radius:99px;background:#e5e7eb;overflow:hidden;margin-top:8px;}
.budget-bar-fill{height:100%;background:linear-gradient(90deg,var(--c-success),#86efac);}
.budget-bar-fill.warn{background:linear-gradient(90deg,var(--c-warning),var(--c-accent));}
.budget-bar-fill.over{background:linear-gradient(90deg,var(--c-danger),#f87171);}

/* Toast */
.toast{position:fixed;bottom:30px;right:30px;background:var(--c-dark);color:#fff;padding:14px 20px;border-radius:10px;font-size:.9rem;font-weight:500;z-index:200;box-shadow:var(--shadow-lg);animation:toastIn .25s;}
.toast.error{background:var(--c-danger);}
.toast.success{background:var(--c-success);}
@keyframes toastIn{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* Print */
@media print {
  .sidebar,.admin-topbar,.page-actions,.row-actions,.filters,.no-print{display:none !important;}
  .module-container{padding:0;}
  .view-admin{grid-template-columns:1fr;}
  body,html{background:#fff;}
  .section-card,.kpi-card,.table-wrap,.chart-card{break-inside:avoid;border-color:#999;box-shadow:none;}
}

/* Responsive */
@media (max-width:1100px) {
  .service-grid,.public-projects{grid-template-columns:repeat(2,1fr);}
  .vacancy-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;text-align:center;}
  .chart-grid,.split-cols{grid-template-columns:1fr;}
}
@media (max-width:880px) {
  .nav-links.open{display:flex;}
  .hamburger{display:block;}
  .hero-stats{grid-template-columns:repeat(2,1fr);}
  .service-grid,.public-projects,.about-grid{grid-template-columns:1fr;}
  .view-admin{grid-template-columns:1fr;}
  .sidebar{position:fixed;left:-280px;width:260px;transition:.3s;z-index:60;}
  .sidebar.open{left:0;}
  .sidebar-toggle{display:block;}
  /* minmax(0,1fr): a bare 1fr's implicit minimum is content size, so one
     wide-min-content row (the file-upload input) inflated every track 50px
     past the modal card at 375px — fields visibly clipped off the right. */
  .form-grid{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:600px) {
  .hero-stats{grid-template-columns:1fr 1fr;}
  .module-container{padding:18px 16px 60px;}
  .page-head{flex-direction:column;align-items:flex-start;}
  .modal-body{padding:18px;}
}

/* ============================================================
   GROUPED SIDEBAR + WORKFLOW UPGRADES
============================================================ */
.nav-section{margin-bottom:8px;}
.nav-group-label{padding:14px 16px 6px;font-size:.66rem;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.62);text-transform:uppercase;}

/* Dashboard sections */
.dash-section-head{display:flex;align-items:center;justify-content:space-between;margin:18px 0 10px;}
.dash-section-head h2{font-size:.78rem;font-weight:800;color:var(--c-text-mute);text-transform:uppercase;letter-spacing:.16em;}
.dash-section-head h2 .accent-bar{display:inline-block;width:3px;height:14px;background:var(--c-accent);margin-right:10px;vertical-align:-2px;border-radius:99px;}

/* Floating Action Button (Quick Add) */
.fab{position:fixed;bottom:28px;right:28px;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--c-accent),#ff7a00);color:#fff;border:none;font-size:1.7rem;font-weight:300;cursor:pointer;box-shadow:0 12px 30px rgba(243,146,0,.45);z-index:90;transition:.2s;}
.fab:hover{transform:scale(1.06);}
.fab-sheet{position:fixed;bottom:100px;right:28px;background:#fff;border-radius:var(--radius-lg);width:280px;box-shadow:var(--shadow-lg);z-index:91;padding:14px;border:1px solid var(--c-border);}
.fab-sheet h4{margin-bottom:10px;font-size:.78rem;color:var(--c-text-mute);text-transform:uppercase;letter-spacing:.12em;}
.fab-sheet button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-weight:500;font-size:.92rem;font-family:inherit;}
.fab-sheet button:hover{background:#f1f4f8;}
.fab-sheet button .fab-ic{width:34px;height:34px;border-radius:8px;background:#eef2f7;display:flex;align-items:center;justify-content:center;color:var(--c-primary);font-weight:700;}

/* KANBAN BOARDS */
.kanban{display:grid;grid-template-columns:repeat(5,minmax(240px,1fr));gap:14px;overflow-x:auto;padding-bottom:8px;}
.kanban-col{background:#f1f4f8;border-radius:var(--radius);padding:12px;min-height:340px;}
.kanban-col h4{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--c-text-mute);margin-bottom:10px;}
.kanban-col h4 .count{background:#fff;border-radius:99px;padding:2px 9px;font-size:.7rem;color:var(--c-primary);font-weight:700;}
.kcard{background:#fff;border:1px solid var(--c-border);border-radius:10px;padding:12px;margin-bottom:10px;cursor:grab;box-shadow:var(--shadow-sm);transition:.15s;}
.kcard:hover{box-shadow:var(--shadow);transform:translateY(-2px);}
.kcard.dragging{opacity:.4;}
.kcard h5{font-size:.92rem;margin-bottom:4px;color:var(--c-text);font-weight:700;line-height:1.3;}
.kcard .meta{font-size:.74rem;color:var(--c-text-mute);margin-bottom:8px;}
.kcard .foot{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;}
.kcard .agency{color:var(--c-primary);font-weight:600;}
.kcard.urgent{border-left:3px solid var(--c-danger);}
.kcard.warn{border-left:3px solid var(--c-warning);}
.kanban-col.drag-over{background:#dbeafe;outline:2px dashed var(--c-info);}
.view-toggle{display:inline-flex;background:#fff;border:1px solid var(--c-border);border-radius:99px;padding:3px;margin-right:8px;}
.view-toggle button{border:none;background:transparent;padding:6px 14px;font-size:.82rem;border-radius:99px;cursor:pointer;font-weight:600;color:var(--c-text-soft);font-family:inherit;}
.view-toggle button.active{background:var(--c-primary);color:#fff;}

/* APPROVALS CARDS */
.approval-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;}
.appr-card{background:#fff;border:1px solid var(--c-border);border-left:4px solid var(--c-warning);border-radius:var(--radius);padding:18px;}
.appr-card.approved{border-left-color:var(--c-success);}
.appr-card.rejected{border-left-color:var(--c-danger);}
.appr-card .type-pill{display:inline-block;padding:3px 10px;background:#eef2f7;color:var(--c-primary);font-size:.72rem;font-weight:700;border-radius:99px;text-transform:uppercase;letter-spacing:.06em;}
.appr-card h4{margin:10px 0 4px;}
.appr-card .amt{font-size:1.4rem;font-weight:800;color:var(--c-text);margin:8px 0;}
.appr-card .meta{font-size:.82rem;color:var(--c-text-mute);}
.appr-card .actions{display:flex;gap:8px;margin-top:14px;}
.appr-card .actions .btn{flex:1;}

/* TIME GRID — Payroll */
.time-grid-wrap{overflow:auto;background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);}
.time-grid{width:100%;border-collapse:collapse;font-size:.85rem;}
.time-grid th,.time-grid td{padding:8px;border:1px solid #eef2f7;text-align:center;}
.time-grid th{background:#0a3d62;color:#fff;font-weight:600;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;position:sticky;top:0;z-index:2;}
.time-grid th.emp,.time-grid td.emp{position:sticky;left:0;background:#f8fafc;text-align:left;z-index:1;min-width:180px;}
.time-grid th.emp{z-index:3;background:#0d5283;}
.time-grid .hour-cell{cursor:pointer;font-weight:700;color:var(--c-text);min-width:80px;}
.time-grid .hour-cell:hover{background:#fef3c7;}
.time-grid .hour-cell.has-time{background:#dcfce7;color:#166534;}
.time-grid .hour-cell.split{background:#dbeafe;color:#1e40af;}
.time-grid .total{background:#fff8eb;font-weight:800;}

/* PROJECT WORKSPACE (full page replacement) */
.proj-ws{}
.proj-ws-header{background:linear-gradient(135deg,#0a3d62,#0d5283);color:#fff;border-radius:var(--radius);padding:28px;margin-bottom:18px;position:relative;overflow:hidden;}
.proj-ws-header::after{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(243,146,0,.25),transparent 70%);}
.proj-ws-header .id-pill{display:inline-block;background:rgba(255,255,255,.15);padding:4px 12px;border-radius:99px;font-size:.78rem;font-weight:600;}
.proj-ws-header h1{margin:8px 0 6px;font-size:1.6rem;}
.proj-ws-header .sub{color:rgba(255,255,255,.7);font-size:.95rem;}
.proj-ws-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:18px;}
.proj-ws-stat{background:rgba(255,255,255,.1);padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.15);}
.proj-ws-stat small{display:block;color:rgba(255,255,255,.65);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;}
.proj-ws-stat strong{font-size:1.05rem;font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;}
.proj-progress{margin-top:18px;}
.proj-progress-bar{height:8px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden;}
.proj-progress-bar > div{height:100%;background:linear-gradient(90deg,var(--c-accent),#ffb547);}
.proj-progress small{display:block;color:rgba(255,255,255,.7);margin-top:6px;font-size:.78rem;}
.proj-tabs{display:flex;gap:0;background:#fff;border-radius:var(--radius) var(--radius) 0 0;border:1px solid var(--c-border);border-bottom:none;flex-wrap:wrap;overflow:hidden;}
.proj-tabs .tab{padding:14px 18px;border-bottom:3px solid transparent;}
.proj-tabs .tab.active{background:#fff;color:var(--c-primary);border-bottom-color:var(--c-accent);}
.proj-tab-body{background:#fff;border:1px solid var(--c-border);border-radius:0 0 var(--radius) var(--radius);padding:24px;min-height:300px;}
.tab-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;}

/* Activity feed */
.activity-feed{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto;}
.activity-row{display:flex;gap:12px;padding:10px;border-radius:8px;font-size:.86rem;}
.activity-row:hover{background:#f8fafc;}
.activity-row .ic{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.8rem;flex-shrink:0;}
.activity-row .ic.exp{background:#0a3d62;}
.activity-row .ic.lab{background:#f39200;}
.activity-row .ic.fuel{background:#16a34a;}
.activity-row .ic.proj{background:#0284c7;}
.activity-row .ic.appr{background:#dc2626;}
.activity-row .ic.dr{background:#a855f7;}
.activity-row .ic.tend{background:#06b6d4;}
.activity-row strong{display:block;color:var(--c-text);}
.activity-row small{color:var(--c-text-mute);font-size:.78rem;}

/* Mobile-first daily report */
.mobile-form{max-width:520px;margin:0 auto;}
.mobile-form .form-step{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:18px;margin-bottom:14px;}
.mobile-form .form-step h4{font-size:.74rem;color:var(--c-text-mute);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;}
.mobile-form input,.mobile-form select,.mobile-form textarea{width:100%;padding:14px;font-size:1rem;border:1px solid var(--c-border);border-radius:10px;font-family:inherit;}
.mobile-form .quick-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.mobile-form .photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;}
.mobile-form .photo-grid img{width:100%;height:80px;object-fit:cover;border-radius:8px;border:1px solid var(--c-border);}
.mobile-form .voice-btn{display:flex;align-items:center;gap:8px;width:100%;padding:12px;background:#eff6ff;color:var(--c-info);border:1px dashed var(--c-info);border-radius:10px;cursor:pointer;font-weight:600;font-family:inherit;margin-top:8px;justify-content:center;}
.mobile-form .voice-btn.recording{background:#fee2e2;color:var(--c-danger);border-color:var(--c-danger);animation:pulse 1.2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.6;}}
.mobile-form .submit-bar{position:sticky;bottom:0;background:#fff;padding:14px;border-top:1px solid var(--c-border);margin:0 -14px -14px;}
.mobile-form .submit-bar .btn{width:100%;padding:16px;font-size:1.05rem;}

@media (max-width:600px) {
  .kanban{grid-template-columns:repeat(5,260px);}
  .fab{bottom:18px;right:18px;width:54px;height:54px;}
  .fab-sheet{right:18px;bottom:84px;width:calc(100vw - 36px);}
}

/* ============================================================
   INDUSTRIAL COMMAND CENTER — Design System v2
   Overrides earlier rules. JS / module IDs untouched.
============================================================ */
:root{
  /* Surfaces */
  --c-bg:#f8fafc;
  --c-surface:#ffffff;
  --c-surface-2:#f1f5f9;
  --c-border:#e2e8f0;
  --c-border-strong:#cbd5e1;

  /* Text */
  --c-text:#0f172a;
  --c-text-soft:#475569;
  --c-text-mute:#64748b;

  /* Industrial palette */
  --c-dark:#1e293b;        /* deep charcoal */
  --c-dark-2:#0f172a;      /* deeper navy */
  --c-primary:#1e3a5f;     /* rich navy */
  --c-primary-2:#27497a;
  --c-primary-3:#0f2747;

  /* Safety orange */
  --c-accent:#f59e0b;
  --c-accent-2:#fbbf24;
  --c-accent-3:#d97706;

  /* Status */
  --c-success:#16a34a;
  --c-success-soft:#dcfce7;
  --c-warning:#f59e0b;
  --c-warning-soft:#fef3c7;
  --c-danger:#dc2626;
  --c-danger-soft:#fee2e2;
  --c-info:#0284c7;
  --c-info-soft:#dbeafe;

  /* Shadows + radii */
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 4px 14px rgba(15,23,42,.07);
  --shadow-lg:0 24px 48px rgba(15,23,42,.16);
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:18px;
}

body,html{background:var(--c-bg);font-family:'Inter',system-ui,sans-serif;}

/* Reserve Bebas Neue for hero/KPI numbers and major brand-style headings only */
h1,h2,h3,h4{font-family:'Inter',sans-serif;letter-spacing:-.015em;}
.brand-mark,.hero h1,.hero-stats strong,.kpi-card .kpi-value,.proj-ws-stat strong,.pp-img,.kanban-col h4 .count,.range-toggle button.active{font-family:'Bebas Neue','Inter',sans-serif;}
h2.bebas, .section-heading{font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;}

/* ============== SIDEBAR ============== */
.view-admin{grid-template-columns:280px 1fr;}
.sidebar{
  background:linear-gradient(180deg,var(--c-dark) 0%,var(--c-dark-2) 100%);
  width:280px;border-right:1px solid #1e293b;
}
.sidebar-brand{
  padding:24px 22px 20px;border-bottom:1px solid rgba(255,255,255,.06);
}
.sidebar-brand strong{font-size:.95rem;letter-spacing:.02em;}
.sidebar-brand small{color:rgba(255,255,255,.45);font-size:.68rem;letter-spacing:.16em;}
.sidebar-nav{padding:16px 12px;gap:1px;}
.nav-group-label{padding:16px 14px 6px;font-size:.62rem;font-weight:800;letter-spacing:.22em;color:rgba(255,255,255,.62);}
.nav-item{
  min-height:44px;padding:0 14px;display:flex;align-items:center;gap:12px;
  border-radius:10px;color:rgba(255,255,255,.7);font-weight:500;font-size:.92rem;
  cursor:pointer;transition:.15s;
}
.nav-item:hover{background:rgba(245,158,11,.08);color:#fff;}
.nav-item.active{
  background:linear-gradient(135deg,var(--c-accent),var(--c-accent-3));
  color:#1c1106;box-shadow:0 6px 16px rgba(245,158,11,.35);font-weight:700;
}
.nav-item.active .nav-icon{color:#1c1106;}
.nav-icon{
  width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--c-accent);font-size:.95rem;
}
.sidebar-foot{padding:14px;border-top:1px solid rgba(255,255,255,.06);gap:8px;}
.sidebar-foot .btn{min-height:42px;justify-content:flex-start;color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04);}
.sidebar-foot .btn:hover{background:rgba(245,158,11,.1);border-color:var(--c-accent);color:#fff;}
.sidebar-foot .btn-danger{background:transparent;border-color:rgba(239,68,68,.4);color:#fca5a5;}
.sidebar-foot .btn-danger:hover{background:var(--c-danger);color:#fff;}

/* ============== TOP BAR ============== */
.admin-main{background:var(--c-bg);}
.admin-topbar{
  background:#fff;border-bottom:1px solid var(--c-border);padding:14px 28px;
  box-shadow:0 1px 0 rgba(15,23,42,.03);min-height:64px;
}
.topbar-search input{
  min-height:42px;border-radius:99px;border:1px solid var(--c-border);
  background:var(--c-surface-2);padding:0 18px;font-size:.92rem;
}
.topbar-search input:focus{background:#fff;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(245,158,11,.15);}
.user-pill{background:var(--c-surface-2);padding:8px 14px;font-size:.84rem;}
.user-pill .dot{width:8px;height:8px;background:var(--c-success);border-radius:50%;box-shadow:0 0 0 3px rgba(22,163,74,.18);}

/* ============== BUTTONS — chunky 44px ============== */
.btn{min-height:44px;border-radius:10px;font-weight:600;font-size:.92rem;padding:0 22px;display:inline-flex;align-items:center;gap:8px;}
.btn-sm{min-height:36px;padding:0 14px;font-size:.84rem;}
.btn-primary{background:var(--c-primary);color:#fff;border:1px solid var(--c-primary);}
.btn-primary:hover{background:var(--c-primary-2);border-color:var(--c-primary-2);transform:translateY(-1px);box-shadow:var(--shadow);}
.btn-accent{background:linear-gradient(135deg,var(--c-accent),var(--c-accent-3));color:#1c1106;border:none;font-weight:700;}
.btn-accent:hover{box-shadow:0 8px 18px rgba(245,158,11,.4);transform:translateY(-1px);}
.btn-ghost{background:#fff;color:var(--c-text);border:1px solid var(--c-border);}
.btn-ghost:hover{background:var(--c-surface-2);border-color:var(--c-border-strong);}
.btn-danger{background:var(--c-danger);color:#fff;border:1px solid var(--c-danger);}
.btn-success{background:var(--c-success);color:#fff;}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);}

/* ============== INPUTS — chunky 44px ============== */
.form-row input,.form-row select,.form-row textarea{
  min-height:44px;padding:11px 14px;border-radius:10px;border:1px solid var(--c-border);
  font-size:.95rem;background:#fff;font-family:inherit;color:var(--c-text);
}
.form-row textarea{min-height:88px;}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;border-color:var(--c-accent);box-shadow:0 0 0 4px rgba(245,158,11,.18);
}
.form-row label{font-size:.74rem;color:var(--c-text-soft);font-weight:700;letter-spacing:.05em;text-transform:uppercase;}

/* ============== PAGE HEAD ============== */
.module-container{padding:28px 32px 80px;}
.page-head{margin-bottom:24px;align-items:flex-end;}
.page-head h1{font-size:1.7rem;font-weight:800;color:var(--c-text);}
.page-head p{color:var(--c-text-mute);font-size:.92rem;margin-top:4px;}

/* ============== KPI CARDS — Big numbers with gradient accent ============== */
.kpi-grid{gap:16px;margin-bottom:24px;}
.kpi-card{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-lg);
  padding:22px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:.18s;
}
.kpi-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--c-primary),var(--c-primary-2));
}
.kpi-card.alert::before{background:linear-gradient(180deg,var(--c-accent),var(--c-accent-3));}
.kpi-card.danger::before{background:linear-gradient(180deg,#ef4444,#b91c1c);}
.kpi-card.success::before{background:linear-gradient(180deg,#22c55e,#15803d);}
.kpi-card.info::before{background:linear-gradient(180deg,#0ea5e9,#0369a1);}
.kpi-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);}
.kpi-card .kpi-label{font-size:.7rem;font-weight:700;letter-spacing:.12em;color:var(--c-text-mute);text-transform:uppercase;}
.kpi-card .kpi-value{
  font-size:2.4rem;font-weight:600;letter-spacing:.01em;
  color:var(--c-text);margin-top:6px;line-height:1;
}
.kpi-card .kpi-foot{margin-top:8px;font-size:.78rem;color:var(--c-text-mute);}

/* Dashboard section heads */
.dash-section-head h2{
  font-family:'Bebas Neue',sans-serif;font-size:.88rem;letter-spacing:.22em;
  color:var(--c-primary);font-weight:700;
}

/* ============== TABLES — Modernised ============== */
.table-wrap{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
table.data{font-size:.9rem;}
table.data thead{background:var(--c-surface-2);}
table.data th{
  background:var(--c-surface-2);color:var(--c-text-soft);
  padding:14px 16px;font-size:.7rem;letter-spacing:.1em;font-weight:800;
  text-transform:uppercase;border-bottom:1px solid var(--c-border);
}
table.data td{padding:14px 16px;border-bottom:1px solid var(--c-border);vertical-align:middle;}
table.data tr:last-child td{border-bottom:none;}
table.data tbody tr{transition:background .12s;}
table.data tbody tr:hover{background:rgba(245,158,11,.04);}

/* Row actions — chunky icons */
.row-actions .icon-btn{
  min-width:36px;min-height:36px;border-radius:8px;border:1px solid var(--c-border);
  background:#fff;cursor:pointer;font-size:.95rem;color:var(--c-text-soft);
  display:inline-flex;align-items:center;justify-content:center;transition:.15s;
}
.row-actions .icon-btn:hover{background:var(--c-surface-2);color:var(--c-primary);border-color:var(--c-border-strong);}
.row-actions .icon-btn.danger:hover{background:var(--c-danger-soft);color:var(--c-danger);border-color:#fecaca;}

/* ============== BADGES — Pill ============== */
.badge{
  border-radius:99px;padding:4px 11px;font-size:.7rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:5px;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge-success{background:var(--c-success-soft);color:#15803d;}
.badge-warning{background:var(--c-warning-soft);color:#92400e;}
.badge-danger{background:var(--c-danger-soft);color:#991b1b;}
.badge-info{background:var(--c-info-soft);color:#1e40af;}
.badge-grey{background:#e2e8f0;color:#475569;}
.badge-primary{background:#dbeafe;color:#1e3a5f;}

/* ============== SMART CARDS (Equipment / Project list) ============== */
.smart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;}
.smart-card{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-lg);
  padding:20px;box-shadow:var(--shadow-sm);transition:.18s;display:flex;flex-direction:column;
}
.smart-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--c-border-strong);}
.smart-card .sc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px;}
.smart-card .sc-icon{
  width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-2));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;flex-shrink:0;
}
.smart-card .sc-icon.accent{background:linear-gradient(135deg,var(--c-accent),var(--c-accent-3));color:#1c1106;}
.smart-card .sc-icon.danger{background:linear-gradient(135deg,#ef4444,#b91c1c);}
.smart-card .sc-icon.success{background:linear-gradient(135deg,#22c55e,#15803d);}
.smart-card h4{font-size:1rem;font-weight:700;color:var(--c-text);margin-bottom:3px;line-height:1.3;}
.smart-card .sc-id{font-size:.74rem;color:var(--c-text-mute);font-weight:600;letter-spacing:.04em;}
.smart-card .sc-body{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px;padding:10px 0;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);}
.smart-card .sc-stat small{display:block;font-size:.66rem;color:var(--c-text-mute);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:2px;}
.smart-card .sc-stat strong{font-size:.92rem;color:var(--c-text);font-weight:700;}
.smart-card .sc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.smart-card .sc-actions{display:flex;gap:6px;}

/* ============== SECTION CARDS / ALERTS ============== */
.section-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);}
.section-card h3{font-size:1.05rem;font-weight:700;margin-bottom:16px;}
.alert-item{
  background:#fff;border:1px solid var(--c-border);border-left:3px solid var(--c-warning);
  border-radius:10px;padding:14px 16px;font-size:.88rem;
}
.alert-item.danger{border-left-color:var(--c-danger);background:#fef2f2;}
.alert-item.info{border-left-color:var(--c-info);background:#eff6ff;}

/* Filters bar */
.filters{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-lg);
  padding:14px 16px;margin-bottom:18px;box-shadow:var(--shadow-sm);
}
.filters .form-row input,.filters .form-row select{min-height:40px;}

/* Range toggle */
.range-toggle{background:#fff;border:1px solid var(--c-border);}
.range-toggle button{min-height:36px;}
.range-toggle button.active{background:var(--c-primary);color:#fff;}
.view-toggle{background:#fff;border:1px solid var(--c-border);}
.view-toggle button{min-height:36px;}
.view-toggle button.active{background:var(--c-primary);color:#fff;}

/* Tabs */
.tabs{border-bottom:1px solid var(--c-border);}
.tab{min-height:42px;display:flex;align-items:center;}
.tab.active{color:var(--c-accent);border-bottom-color:var(--c-accent);font-weight:700;}

/* FAB */
.fab{
  background:linear-gradient(135deg,var(--c-accent),var(--c-accent-3));
  width:60px;height:60px;color:#1c1106;font-weight:700;
  box-shadow:0 14px 32px rgba(245,158,11,.45);
}
.fab:hover{box-shadow:0 18px 40px rgba(245,158,11,.55);}

/* Modals */
.modal-card{border-radius:var(--radius-lg);}
.modal-head{padding:20px 24px;}
.modal-body{padding:24px;}
.modal-footer{padding:16px 24px;background:var(--c-surface-2);}

/* Project Workspace (already has header — refine accent) */
.proj-ws-header{
  background:linear-gradient(135deg,var(--c-primary-3) 0%,var(--c-dark) 100%);
  border-radius:var(--radius-lg);
}
.proj-ws-header .id-pill{background:rgba(245,158,11,.18);color:var(--c-accent-2);font-weight:700;letter-spacing:.04em;}
.proj-ws-header h1{font-family:'Bebas Neue',sans-serif;letter-spacing:.02em;font-size:2rem;}
.proj-ws-stat strong{color:#fff;}
.proj-tabs{border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
.proj-tab-body{border-radius:0 0 var(--radius-lg) var(--radius-lg);}

/* Kanban refinements */
.kanban-col{background:#f1f5f9;border-radius:var(--radius-lg);}
.kanban-col h4 .count{background:var(--c-primary);color:#fff;}
.kcard{border-radius:12px;}

/* Approval cards */
.appr-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.appr-card .amt{font-family:'Bebas Neue',sans-serif;letter-spacing:.02em;color:var(--c-primary);}

/* Chart cards */
.chart-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.chart-card h3{font-size:.95rem;font-weight:700;}

/* Activity feed refinements */
.activity-row{border-radius:10px;}
.activity-row .ic{border-radius:10px;}

/* Login Card */
.login-card{border-radius:var(--radius-lg);box-shadow:0 30px 60px rgba(15,23,42,.4);}
.login-head .brand-mark{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-2));}

/* ============== MOBILE — Hamburger sidebar ============== */
@media (max-width:1024px) {
  .view-admin{grid-template-columns:1fr;}
  .sidebar{
    position:fixed;left:-300px;top:0;width:280px;height:100vh;
    z-index:80;transition:left .28s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 0 rgba(0,0,0,0);
  }
  .sidebar.open{left:0;box-shadow:30px 0 60px rgba(0,0,0,.4);}
  .sidebar-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;border:1px solid var(--c-border);background:#fff;font-size:1.2rem;cursor:pointer;}
  .sidebar.open ~ .scrim,.scrim.show{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:75;backdrop-filter:blur(2px);}
}
@media (max-width:760px) {
  .module-container{padding:20px 16px 80px;}
  .page-head h1{font-size:1.4rem;}
  .kpi-card{padding:16px;}
  .kpi-card .kpi-value{font-size:2rem;}
  .smart-grid{grid-template-columns:1fr;}
  .filters{padding:12px;}
  .btn{padding:0 16px;}
}

/* Print: clean */
@media print {
  .sidebar,.fab,.fab-sheet,.admin-topbar,.page-actions,.row-actions,.filters,.view-toggle,.range-toggle{display:none !important;}
  .module-container{padding:0;}
  .kpi-card,.section-card,.table-wrap,.smart-card,.chart-card{break-inside:avoid;border-color:#999 !important;box-shadow:none !important;}
  body{background:#fff;}
}

/* ============================================================
   v3 UPGRADE — Compact sidebar, Calendar, Reports grid,
   Document hover preview, Alerts/Activity page
============================================================ */
/* Compact sidebar — fit without scroll */
.sidebar-nav{padding:10px 10px;gap:0;}
.nav-section{margin-bottom:4px;}
.nav-group-label{padding:10px 12px 4px;font-size:.6rem;letter-spacing:.22em;}
.nav-item{min-height:34px;padding:0 12px;font-size:.86rem;gap:10px;}
.nav-icon{width:20px;font-size:.86rem;}
.sidebar-brand{padding:18px 22px 16px;}
.sidebar-foot{padding:10px;gap:6px;}
.sidebar-foot .btn{min-height:36px;font-size:.82rem;}

/* Reports quick-launch grid on dashboard */
.reports-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.report-tile{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-lg);
  padding:18px;cursor:pointer;transition:.15s;display:flex;gap:14px;align-items:flex-start;
}
.report-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--c-accent);}
.report-tile .ic{
  width:42px;height:42px;border-radius:10px;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-2));
  color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;
}
.report-tile h4{font-size:.92rem;margin-bottom:2px;}
.report-tile small{font-size:.74rem;color:var(--c-text-mute);}

/* Calendar */
.cal-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.cal-grid{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.cal-week-head{display:grid;grid-template-columns:repeat(7,1fr);background:var(--c-surface-2);border-bottom:1px solid var(--c-border);}
.cal-week-head div{padding:10px;font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--c-text-soft);text-transform:uppercase;text-align:center;}
.cal-month{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(110px,auto);}
.cal-day{
  border-right:1px solid var(--c-border);border-bottom:1px solid var(--c-border);
  padding:8px;background:#fff;position:relative;overflow:hidden;
}
.cal-day:nth-child(7n){border-right:none;}
.cal-day .num{font-weight:700;font-size:.88rem;color:var(--c-text);}
.cal-day.other-month{background:#fafbfc;color:var(--c-text-mute);}
.cal-day.today{background:#fff7ec;}
.cal-day.today .num{color:var(--c-accent);font-size:1rem;}
.cal-event{
  display:block;padding:3px 6px;margin-top:4px;border-radius:6px;
  font-size:.72rem;font-weight:600;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cal-event.maint{background:#fef3c7;color:#92400e;}
.cal-event.timeoff{background:#dbeafe;color:#1e40af;}
.cal-event.proj{background:#dcfce7;color:#166534;}
.cal-event.tender{background:#fee2e2;color:#991b1b;}
.cal-event.payment{background:#e9d5ff;color:#6b21a8;}
/* v65 — equipment/vehicle paperwork and Documents-module expiry dates. */
.cal-event.doc{background:#fed7aa;color:#9a3412;}
.cal-list-item{
  display:grid;grid-template-columns:80px 30px 1fr auto;gap:12px;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--c-border);
}
.cal-list-item:last-child{border-bottom:none;}
.cal-list-item:hover{background:var(--c-surface-2);}
.cal-list-item .date{font-weight:700;color:var(--c-primary);}
.cal-list-item .badge{align-self:flex-start;}

/* Document hover preview */
.doc-hover{position:relative;display:inline-block;}
.doc-hover-tip{
  position:fixed;background:#fff;border:1px solid var(--c-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:14px;width:300px;z-index:120;pointer-events:none;
  font-size:.85rem;color:var(--c-text);
}
.doc-hover-tip h5{margin:0 0 6px;color:var(--c-primary);}
.doc-hover-tip dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;}
.doc-hover-tip dt{font-weight:700;color:var(--c-text-mute);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;}
.doc-hover-tip dd{margin:0;color:var(--c-text);font-size:.82rem;}
.doc-hover-tip .preview-box{
  margin-top:8px;height:80px;background:linear-gradient(135deg,var(--c-primary),var(--c-primary-2));
  color:#fff;display:flex;align-items:center;justify-content:center;border-radius:8px;
  font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;
}

/* Alerts page */
.alerts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;}
.alert-card{
  background:#fff;border:1px solid var(--c-border);border-left:4px solid var(--c-warning);
  border-radius:var(--radius-lg);padding:16px;
}
.alert-card.critical{border-left-color:var(--c-danger);}
.alert-card.info{border-left-color:var(--c-info);}
.alert-card .alert-cat{
  display:inline-block;padding:2px 10px;border-radius:99px;
  background:#fef3c7;color:#92400e;font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;
}
.alert-card.critical .alert-cat{background:#fee2e2;color:#991b1b;}
.alert-card.info .alert-cat{background:#dbeafe;color:#1e40af;}
.alert-card h4{font-size:.95rem;margin-bottom:4px;}
.alert-card p{font-size:.84rem;color:var(--c-text-soft);margin-bottom:8px;}
.alert-card .meta{font-size:.74rem;color:var(--c-text-mute);}

/* Mini chart container — for charts inside specific pages */
.mini-chart-card{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-lg);
  padding:18px;box-shadow:var(--shadow-sm);
}
.mini-chart-card h3{font-size:.95rem;margin-bottom:10px;}
.mini-chart-card canvas{max-height:240px;}

/* Auto-labour expense row marker */
tr.auto-row{background:rgba(245,158,11,.04);}
tr.auto-row td:first-child::before{content:"⚙";color:var(--c-accent);margin-right:6px;font-size:.85rem;}
.auto-pill{
  display:inline-block;padding:2px 8px;border-radius:99px;
  background:rgba(245,158,11,.15);color:var(--c-accent-3);font-size:.66rem;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-left:6px;
}

/* Approval history list */
.appr-history{margin-top:10px;background:var(--c-surface-2);border-radius:8px;padding:10px;}
.appr-history li{font-size:.78rem;padding:4px 0;color:var(--c-text-soft);list-style:none;}
.appr-history strong{color:var(--c-text);}

/* Filters with date-range row */
.filters .full-row{flex:1 1 100%;display:flex;gap:8px;flex-wrap:wrap;}

/* ============================================================
   v4 — 6-Section navigation, branded logo, hero, sub-nav,
   cascading subcategory dropdown, polished empty states
============================================================ */

/* Brand colors refined to match logo */
:root{
  --c-accent:#f97316;       /* logo orange */
  --c-accent-2:#fb923c;
  --c-accent-3:#ea580c;
}

/* Brand logo in sidebar */
.brand-logo-img{width:42px;height:auto;}
.sidebar-brand{padding:20px 22px 18px;}

/* 6-section nav — chunky, no scroll */
.section-nav{padding:18px 12px;gap:6px;}
.nav-section-btn{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:12px;
  color:rgba(255,255,255,.78);font-weight:600;font-size:.96rem;
  cursor:pointer;transition:.18s;letter-spacing:.01em;
}
.nav-section-btn .nav-icon{
  width:32px;height:32px;border-radius:8px;
  background:rgba(245,158,11,.14);color:var(--c-accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;font-weight:800;
}
.nav-section-btn:hover{background:rgba(245,158,11,.06);color:#fff;}
.nav-section-btn.active{
  background:linear-gradient(135deg,var(--c-accent),var(--c-accent-3));
  color:#fff;box-shadow:0 8px 20px rgba(249,115,22,.35);
}
.nav-section-btn.active .nav-icon{background:rgba(255,255,255,.18);color:#fff;}

/* Sub-nav strip at top of section pages */
.sub-nav{
  display:flex;gap:4px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--c-border);border-radius:14px;
  padding:6px;margin-bottom:20px;box-shadow:var(--shadow-sm);
}
.sub-nav-tab{
  padding:10px 16px;border-radius:10px;
  font-size:.88rem;font-weight:600;color:var(--c-text-soft);
  cursor:pointer;transition:.15s;display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.sub-nav-tab:hover{background:var(--c-surface-2);color:var(--c-text);}
.sub-nav-tab.active{background:var(--c-primary);color:#fff;}

/* Section landing page hero */
.section-hero{
  background:linear-gradient(135deg,var(--c-primary-3) 0%,var(--c-primary) 60%,var(--c-primary-2) 100%);
  color:#fff;border-radius:var(--radius-lg);
  padding:32px 36px;margin-bottom:22px;
  position:relative;overflow:hidden;
}
.section-hero::before{
  content:"";position:absolute;right:-40px;bottom:-40px;
  width:280px;height:280px;
  background:radial-gradient(circle,rgba(249,115,22,.32),transparent 70%);
}
.section-hero h1{font-size:2rem;font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;margin-bottom:8px;}
.section-hero p{color:rgba(255,255,255,.8);max-width:680px;}
.section-hero .hero-img-bg{
  position:absolute;inset:0;background-image:url('assets/hero-skyline.svg');
  background-size:cover;background-position:center;opacity:.18;mix-blend-mode:lighten;
}

/* Module cards in section landing */
.module-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:24px;}
.module-card{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-lg);
  padding:20px;cursor:pointer;transition:.18s;display:flex;gap:14px;align-items:flex-start;
  box-shadow:var(--shadow-sm);
}
.module-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--c-accent);}
.module-card .mc-ic{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--c-accent),var(--c-accent-3));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;
}
.module-card h4{font-size:1rem;margin-bottom:3px;color:var(--c-text);}
.module-card small{font-size:.78rem;color:var(--c-text-mute);line-height:1.45;display:block;}
.module-card .mc-count{
  margin-top:6px;font-size:.74rem;font-weight:700;
  color:var(--c-primary);background:#dbeafe;padding:2px 8px;
  border-radius:99px;display:inline-block;
}

/* Login page — splash background */
.login-card{position:relative;}
.login-splash{
  background:linear-gradient(135deg,#0f172a,#1e3a5f);
  margin:-32px -32px 22px;padding:30px 32px 40px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  position:relative;overflow:hidden;
}
.login-splash::before{
  content:"";position:absolute;inset:0;
  background-image:url('assets/hero-skyline.svg');
  background-size:cover;background-position:center;opacity:.4;
}
.login-splash > *{position:relative;z-index:1;}
.login-card .login-logo{filter:brightness(0) invert(1);}
.login-splash h2{color:#fff;margin-top:8px;}
.login-splash p{color:rgba(255,255,255,.7);font-size:.85rem;}

/* Empty states */
.empty-state{
  text-align:center;padding:48px 24px;
  background:#fff;border:1px dashed var(--c-border-strong);
  border-radius:var(--radius-lg);
}
.empty-state img{width:120px;margin:0 auto 16px;opacity:.85;}
.empty-state h4{color:var(--c-text);margin-bottom:6px;font-size:1.05rem;}
.empty-state p{color:var(--c-text-mute);font-size:.92rem;max-width:380px;margin:0 auto;}

/* Cascading subcategory hint */
.subcat-hint{
  font-size:.74rem;color:var(--c-text-mute);
  margin-top:4px;font-style:italic;
}

/* Dashboard hero banner */
.dash-hero-banner{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  margin-bottom:22px;height:200px;
  background:linear-gradient(135deg,#0f172a,#1e3a5f 60%,#27497a);
  display:flex;align-items:center;padding:0 36px;
}
.dash-hero-banner::before{
  content:"";position:absolute;inset:0;
  background-image:url('assets/hero-skyline.svg');
  background-size:cover;background-position:center;opacity:.45;
}
.dash-hero-banner > div{position:relative;z-index:1;}
.dash-hero-banner h2{
  color:#fff;font-family:'Bebas Neue',sans-serif;font-size:2.4rem;
  letter-spacing:.04em;margin:0 0 4px;
}
.dash-hero-banner h2 .accent{color:var(--c-accent);}
.dash-hero-banner p{color:rgba(255,255,255,.8);}

/* Auto-row revert: hide auto-pill rows by default */
.auto-row{display:none;}
.show-auto .auto-row{display:table-row;}

/* ============================================================
   v5 — LUXURY UI UPGRADE
   Navy + Charcoal + White + Gold accent + Orange CTA
============================================================ */
:root{
  --c-gold:#d4a456;
  --c-gold-2:#e8c07a;
  --c-gold-soft:#faf3e3;
  --c-navy-deep:#0a1628;
}

/* Sidebar — premium dark with gold trim */
.sidebar{
  background:linear-gradient(180deg,#0a1628 0%,#0f2747 60%,#1c3358 100%);
  border-right:1px solid rgba(212,164,86,0.12);
}
.sidebar-brand{
  padding:24px 24px 20px;
  border-bottom:1px solid rgba(212,164,86,0.18);
  position:relative;
}
.sidebar-brand::after{
  content:"";position:absolute;left:24px;right:24px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--c-gold) 50%,transparent);
}
.brand-logo-img{width:46px;height:46px;flex-shrink:0;}
.sidebar-brand strong{font-size:.96rem;letter-spacing:.04em;font-weight:800;color:#fff;}
.sidebar-brand small{color:rgba(212,164,86,0.7);font-size:.66rem;letter-spacing:.2em;font-weight:600;}

/* Premium section nav */
.section-nav{padding:20px 14px;}
.nav-section-btn{
  padding:14px 16px;border-radius:12px;margin-bottom:6px;
  position:relative;letter-spacing:.01em;
}
.nav-section-btn::before{
  content:"";position:absolute;left:0;top:50%;width:3px;height:0;
  background:var(--c-gold);transform:translateY(-50%);
  transition:height .22s ease;border-radius:2px;
}
.nav-section-btn:hover::before{height:60%;}
.nav-section-btn.active{
  background:linear-gradient(135deg,#d4a456 0%,#b88a3f 100%);
  box-shadow:0 10px 24px rgba(212,164,86,.32);color:#1a1108;
}
.nav-section-btn.active::before{display:none;}
.nav-section-btn.active .nav-icon{background:rgba(255,255,255,.22);color:#1a1108;}

/* Top bar — deeper, premium */
.admin-topbar{
  background:#fff;border-bottom:1px solid var(--c-border);
  box-shadow:0 1px 0 rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.03);
  padding:16px 32px;
}

/* Page heads — executive style */
.page-head h1{font-size:1.85rem;font-weight:800;letter-spacing:-.02em;color:var(--c-navy-deep);}
.page-head h1::before{
  content:"";display:inline-block;width:4px;height:24px;
  background:linear-gradient(180deg,var(--c-gold),var(--c-gold-2));
  margin-right:14px;vertical-align:-3px;border-radius:99px;
}
.page-head p{color:var(--c-text-mute);font-size:.95rem;margin-top:6px;}

/* KPI cards — premium */
.kpi-card{
  background:#fff;border:1px solid var(--c-border);
  border-radius:16px;padding:22px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 14px rgba(15,23,42,.04);
}
.kpi-card::before{width:3px;}
.kpi-card .kpi-value{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:2.6rem;letter-spacing:.01em;line-height:1;
}

/* Premium hero on dashboard */
.dash-hero-banner{
  height:240px;padding:0 44px;
  background:linear-gradient(135deg,#0a1628 0%,#0f2747 50%,#1c3358 100%);
  border:1px solid rgba(212,164,86,0.15);
  box-shadow:0 24px 60px rgba(10,22,40,.16);
  border-radius:20px;
}
.dash-hero-banner::before{opacity:.5;}
.dash-hero-banner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--c-gold) 50%,transparent);
}
.dash-hero-banner h2{font-size:2.8rem;font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;}
.dash-hero-banner h2 .accent{color:var(--c-gold);}
.dash-hero-banner p{color:rgba(255,255,255,.78);font-size:1rem;}
.dash-hero-banner .premium-tag{
  display:inline-block;padding:5px 14px;background:rgba(212,164,86,0.18);
  border:1px solid rgba(212,164,86,0.5);color:var(--c-gold-2);
  border-radius:99px;font-size:.7rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;
}

/* Section hero — premium */
.section-hero{
  background:linear-gradient(135deg,#0a1628 0%,#0f2747 60%,#1c3358 100%);
  border:1px solid rgba(212,164,86,0.15);padding:38px 42px;
  box-shadow:0 16px 44px rgba(10,22,40,.2);
}
.section-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--c-gold) 50%,transparent);
}
.section-hero .hero-img-bg{opacity:.32;}
.section-hero h1{font-size:2.4rem;letter-spacing:.04em;}

/* Module cards — premium */
.module-card{
  background:#fff;border:1px solid var(--c-border);border-radius:16px;
  padding:22px;transition:.22s;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.module-card:hover{
  transform:translateY(-3px);
  border-color:var(--c-gold);
  box-shadow:0 16px 32px rgba(15,23,42,.1),0 0 0 4px rgba(212,164,86,0.08);
}
.module-card .mc-ic{
  background:linear-gradient(135deg,#1e3a5f 0%,#27497a 100%);
  border:1px solid rgba(212,164,86,0.25);
}

/* Buttons — premium */
.btn-primary{
  background:linear-gradient(135deg,#1e3a5f 0%,#27497a 100%);
  border:1px solid #27497a;
  box-shadow:0 4px 12px rgba(30,58,95,.18);
}
.btn-primary:hover{box-shadow:0 8px 18px rgba(30,58,95,.28);}
.btn-accent{
  background:linear-gradient(135deg,#d4a456 0%,#b88a3f 100%);
  color:#1a1108;font-weight:700;
  border:1px solid #b88a3f;
  box-shadow:0 4px 12px rgba(212,164,86,.32);
}
.btn-accent:hover{box-shadow:0 10px 24px rgba(212,164,86,.42);}

/* Sub-nav — premium glass card */
.sub-nav{
  background:#fff;border:1px solid var(--c-border);
  border-radius:14px;padding:6px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.03);
}
.sub-nav-tab.active{
  background:linear-gradient(135deg,#1e3a5f 0%,#27497a 100%);
  box-shadow:0 4px 10px rgba(30,58,95,.18);
}

/* Tables — premium */
table.data thead{
  background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);
}
table.data th{
  background:transparent;color:var(--c-navy-deep);
  font-weight:800;font-size:.7rem;letter-spacing:.12em;
}
table.data tbody tr:hover{background:rgba(212,164,86,0.04);}

/* Badges — gold variant */
.badge-gold{background:var(--c-gold-soft);color:#7c5e2a;}
.badge-gold::before{background:var(--c-gold);}

/* Login splash — premium */
.login-card{padding:0;overflow:hidden;}
.login-splash{
  background:linear-gradient(135deg,#0a1628,#0f2747);
  margin:0;padding:36px 36px 44px;
  border-radius:0;
  border-bottom:1px solid rgba(212,164,86,0.3);
  position:relative;
}
.login-splash::before{
  background-image:url('assets/login-splash.svg');
  opacity:.55;
}
.login-splash::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--c-gold) 50%,transparent);
}
.login-splash h2{color:#fff;font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:.06em;}
.login-splash p{color:rgba(212,164,86,0.85);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;}
.login-card form{padding:32px 36px;}
.login-card .login-logo{filter:brightness(0) invert(1);width:200px;}

/* Sidebar foot premium */
.sidebar-foot{
  padding:14px;border-top:1px solid rgba(212,164,86,0.15);
}
.sidebar-foot .btn-danger{
  background:transparent;border:1px solid rgba(220,38,38,.4);
  color:#fca5a5;font-weight:600;
}
.sidebar-foot .btn-danger:hover{background:#dc2626;color:#fff;}

/* Labour breakdown card */
.labour-form-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;}
@media (max-width:760px) {.labour-form-layout{grid-template-columns:1fr;}}
.labour-breakdown-wrap{
  background:linear-gradient(180deg,#0a1628 0%,#0f2747 100%);
  border-radius:14px;padding:20px;color:#fff;
  border:1px solid rgba(212,164,86,0.2);
  position:sticky;top:0;align-self:flex-start;
}
.labour-breakdown-wrap::before{
  content:"LIVE CALCULATION";display:block;
  font-size:.66rem;letter-spacing:.22em;
  color:var(--c-gold);font-weight:700;margin-bottom:14px;
}
.lb-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.86rem;
}
.lb-row small{color:rgba(255,255,255,.55);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;}
.lb-row strong{color:#fff;font-weight:700;}
.lb-row.total{border-top:1px solid var(--c-gold);margin-top:8px;padding-top:14px;}

/* Premium empty state */
.empty-state{
  background:linear-gradient(180deg,#fff 0%,#fafbfc 100%);
  border:1px dashed var(--c-border-strong);
  border-radius:16px;padding:60px 30px;
}
.empty-state h4{font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;font-size:1.4rem;color:var(--c-navy-deep);}

/* Pretty scrollbars */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(15,23,42,.18);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.32);}

/* Print: hide hero img */
@media print {.dash-hero-banner,.section-hero{background:#fff !important;color:#000 !important;border:1px solid #999 !important;}.dash-hero-banner *,.section-hero *{color:#000 !important;}}

/* ============================================================
   v6 — GOVERNMENT SERVICES (Vehicle Repair / Washing / Water)
============================================================ */
/* Job card detail */
.jobcard-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-bottom:18px;}
@media (max-width:1024px) {.jobcard-grid{grid-template-columns:1fr;}}
.jc-section{
  background:#fff;border:1px solid var(--c-border);border-radius:14px;
  padding:18px;box-shadow:var(--shadow-sm);
}
.jc-section h4{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-primary);margin-bottom:12px;font-weight:800;
  display:flex;justify-content:space-between;align-items:center;
}
.jc-summary{
  background:linear-gradient(135deg,#0a1628,#0f2747);color:#fff;
  border-radius:14px;padding:20px;border:1px solid rgba(212,164,86,0.2);
}
.jc-summary .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.88rem;}
.jc-summary .row strong{color:#fff;}
.jc-summary .row small{color:rgba(255,255,255,.6);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;}
.jc-summary .grand{
  border-top:1px solid var(--c-gold);margin-top:8px;padding-top:14px;
  font-size:1.1rem;
}
.jc-summary .grand strong{font-size:1.5rem;font-family:'Bebas Neue',sans-serif;color:var(--c-gold-2);}
.line-items{margin:0;padding:0;list-style:none;}
.line-items li{
  display:grid;grid-template-columns:1fr auto auto;gap:8px;
  padding:10px;border:1px solid var(--c-border);border-radius:8px;
  margin-bottom:6px;background:#fafbfc;align-items:center;
}
.line-items .li-meta{font-size:.78rem;color:var(--c-text-mute);}
.line-items .li-amt{font-weight:700;text-align:right;}
.line-items .li-actions{display:flex;gap:4px;}

/* Status pills for jobs */
.job-status{font-size:.7rem;padding:4px 12px;border-radius:99px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}

/* Invoice template (used in print) */
.invoice-doc{
  font-family:'Inter',sans-serif;color:#0f172a;padding:40px;max-width:850px;margin:0 auto;
}
.invoice-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:3px solid var(--c-primary);padding-bottom:18px;margin-bottom:24px;
}
.invoice-head .brand{display:flex;gap:14px;align-items:center;}
.invoice-head h1{font-size:2rem;color:var(--c-primary);font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;margin:0;}
.invoice-head .meta{text-align:right;font-size:.86rem;color:var(--c-text-soft);}
.invoice-head .meta strong{color:var(--c-text);}
.invoice-bill{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:24px;}
.invoice-bill .label{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--c-text-mute);font-weight:700;margin-bottom:4px;}
.invoice-bill p{margin:2px 0;color:var(--c-text);}
.invoice-table{width:100%;border-collapse:collapse;margin-bottom:20px;}
.invoice-table th{background:#f8fafc;text-align:left;padding:10px 12px;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-text-soft);}
.invoice-table td{padding:10px 12px;border-bottom:1px solid #e5e7eb;}
.invoice-table .right{text-align:right;}
.invoice-totals{margin-left:auto;width:300px;border-top:2px solid var(--c-primary);padding-top:10px;}
.invoice-totals .row{display:flex;justify-content:space-between;padding:4px 0;font-size:.92rem;}
.invoice-totals .row.grand{font-size:1.2rem;font-weight:800;color:var(--c-primary);border-top:1px solid var(--c-border);margin-top:8px;padding-top:8px;}
.invoice-foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--c-border);font-size:.78rem;color:var(--c-text-mute);text-align:center;}
.invoice-paid-stamp{
  position:absolute;top:30%;right:15%;
  border:5px solid #16a34a;color:#16a34a;
  font-family:'Bebas Neue',sans-serif;letter-spacing:.1em;
  font-size:3rem;padding:10px 30px;border-radius:8px;
  transform:rotate(-15deg);opacity:.5;
}

/* Mini KPI compact for nested govservices */
.compact-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:18px;}
.compact-kpi .ckpi{
  background:#fff;border:1px solid var(--c-border);border-radius:10px;padding:14px;box-shadow:var(--shadow-sm);
}
.compact-kpi .ckpi small{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-text-mute);font-weight:700;}
.compact-kpi .ckpi strong{display:block;font-size:1.4rem;font-weight:800;margin-top:4px;color:var(--c-text);}
.compact-kpi .ckpi.alert{border-left:3px solid var(--c-warning);}
.compact-kpi .ckpi.danger{border-left:3px solid var(--c-danger);}
.compact-kpi .ckpi.success{border-left:3px solid var(--c-success);}

/* ============================================================
   v7 — MINIMALIST OVERVIEW REDESIGN
   Light, dense, more data visible at a glance
============================================================ */
:root{
  --c-bg-light:#fafbfc;
  --c-cream:#fef9f0;
  --c-soft-blue:#eff6ff;
  --c-soft-green:#f0fdf4;
  --c-soft-amber:#fef3c7;
  --c-soft-red:#fef2f2;
  --c-line-soft:#eef2f6;
}

/* Lighter overall background on dashboard */
body.dash-overview .module-container{background:#fafbfc;}

/* ===== Light, vibrant hero (replaces dark navy) ===== */
.dash-light-hero{
  position:relative;border-radius:16px;overflow:hidden;
  margin-bottom:18px;height:170px;padding:0 32px;
  background:linear-gradient(135deg,#fef3e2 0%,#fde6c8 50%,#fdd9ad 100%);
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid rgba(251,191,36,0.22);
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
/* v65 — this overlay is retired.
   It was drawn for the old CREAM hero. theme-modern.css now paints a real
   photograph under a navy scrim, and laying a pale line-art SVG over that at
   65% opacity is what turned the banner into the flat grey the owner
   reported. The photo supplies the texture this was for. */
.dash-light-hero::before{ content:none; }
.dash-light-hero > *{position:relative;z-index:2;}
.dash-light-hero .hero-text{max-width:560px;}
.dash-light-hero .hero-pill{
  display:inline-block;padding:4px 11px;background:rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.08);color:var(--c-primary);
  font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;border-radius:99px;margin-bottom:8px;
}
.dash-light-hero h2{
  color:#0a1628;font-family:'Bebas Neue',sans-serif;
  font-size:2.2rem;letter-spacing:.04em;margin:0 0 4px;line-height:1;
}
.dash-light-hero h2 .accent{color:#ea580c;}
.dash-light-hero p{color:#475569;font-size:.92rem;margin:0;}
.dash-light-hero .hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.dash-light-hero .hero-chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  background:#fff;border:1px solid rgba(15,23,42,.1);border-radius:99px;
  font-size:.78rem;font-weight:600;color:#1e3a5f;cursor:pointer;
  transition:.15s;
}
.dash-light-hero .hero-chip:hover{transform:translateY(-1px);border-color:#f97316;box-shadow:0 4px 8px rgba(15,23,42,.06);}
.dash-light-hero .hero-chip strong{color:#ea580c;font-weight:800;}

/* ===== Compact KPI strip — single dense row ===== */
.kpi-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;
  margin-bottom:18px;
}
.kpi-mini{
  background:#fff;border:1px solid var(--c-line-soft);border-radius:12px;
  padding:14px;box-shadow:none;position:relative;overflow:hidden;
  transition:.15s;
}
.kpi-mini:hover{border-color:#f97316;box-shadow:0 4px 12px rgba(15,23,42,.05);}
.kpi-mini::before{display:none;}
.kpi-mini .km-label{font-size:.66rem;color:#94a3b8;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.kpi-mini .km-value{font-size:1.6rem;font-weight:800;color:#0f172a;letter-spacing:-.01em;line-height:1.1;margin-top:2px;font-family:'Inter',sans-serif;}
.kpi-mini .km-foot{font-size:.74rem;color:#64748b;margin-top:4px;display:flex;align-items:center;gap:4px;}
.kpi-mini .km-trend{font-size:.7rem;font-weight:700;}
.kpi-mini .km-trend.up{color:#16a34a;}
.kpi-mini .km-trend.down{color:#dc2626;}
.kpi-mini.tint-blue{background:#eff6ff;border-color:#dbeafe;}
.kpi-mini.tint-green{background:#f0fdf4;border-color:#dcfce7;}
.kpi-mini.tint-amber{background:#fffbeb;border-color:#fef3c7;}
.kpi-mini.tint-red{background:#fef2f2;border-color:#fee2e2;}
.kpi-mini.tint-cream{background:#fef9f0;border-color:#fde6c8;}

/* Sparkline canvas */
.kpi-mini .sparkline{position:absolute;right:8px;bottom:8px;width:64px;height:24px;opacity:.6;}

/* ===== Two-column main grid ===== */
.dash-grid{
  display:grid;grid-template-columns:1.55fr 1fr;gap:16px;
  margin-bottom:20px;align-items:start;
}
@media (max-width:1100px) {.dash-grid{grid-template-columns:1fr;}}

/* Chart canvas wrappers — canvas must fill the position:relative parent */
.data-card canvas{
  position:absolute;inset:0;width:100%!important;height:100%!important;
}


/* Compact data card */
.data-card{
  background:#fff;border:1px solid var(--c-line-soft);border-radius:12px;
  padding:14px 18px;box-shadow:none;
}
.data-card-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--c-line-soft);
}
.data-card-head h3{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;
  color:#475569;font-weight:800;margin:0;
}
.data-card-head .count-pill{
  background:#f1f5f9;color:#475569;font-size:.7rem;
  padding:2px 8px;border-radius:99px;font-weight:700;
}
.data-card-head a.view-all{
  font-size:.74rem;color:#f97316;font-weight:700;text-decoration:none;
}
.data-card-head a.view-all:hover{text-decoration:underline;}

/* Compact list rows */
.compact-list{margin:0;padding:0;list-style:none;}
.compact-list li{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--c-line-soft);font-size:.84rem;
  cursor:pointer;
}
.compact-list li:last-child{border-bottom:none;}
.compact-list li:hover{background:#fafbfc;border-radius:6px;padding-left:6px;padding-right:6px;}
.compact-list li .ic{
  width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:700;color:#fff;flex-shrink:0;
}
.compact-list li .ic.blue{background:#3b82f6;}
.compact-list li .ic.amber{background:#f59e0b;}
.compact-list li .ic.green{background:#16a34a;}
.compact-list li .ic.red{background:#dc2626;}
.compact-list li .ic.purple{background:#a855f7;}
.compact-list li strong{display:block;font-weight:600;color:#0f172a;font-size:.86rem;line-height:1.3;}
.compact-list li small{color:#64748b;font-size:.74rem;}
.compact-list li .right{text-align:right;font-size:.74rem;color:#475569;font-weight:600;}
.compact-list li .right.amount{font-weight:700;color:#0f172a;font-size:.84rem;}

/* Active project bar (in dashboard) */
.project-bar-row{padding:10px 0;border-bottom:1px solid var(--c-line-soft);font-size:.84rem;cursor:pointer;}
.project-bar-row:hover{background:#fafbfc;border-radius:6px;padding-left:6px;padding-right:6px;}
.project-bar-row .pb-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.project-bar-row .pb-name strong{color:#0f172a;font-weight:600;}
.project-bar-row .pb-name small{color:#64748b;font-size:.72rem;}
.project-bar-row .pb-track{height:5px;background:#f1f5f9;border-radius:99px;overflow:hidden;}
.project-bar-row .pb-fill{height:100%;background:linear-gradient(90deg,#f97316,#fbbf24);}
.project-bar-row .pb-fill.warn{background:linear-gradient(90deg,#f59e0b,#fbbf24);}
.project-bar-row .pb-fill.over{background:linear-gradient(90deg,#dc2626,#f97316);}
.project-bar-row .pb-meta{display:flex;justify-content:space-between;font-size:.7rem;color:#64748b;margin-top:3px;}

/* Compact reports row */
.reports-row{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;
}
.report-mini{
  background:#fff;border:1px solid var(--c-line-soft);border-radius:10px;
  padding:12px;cursor:pointer;transition:.15s;text-align:center;
}
.report-mini:hover{border-color:#f97316;background:#fffbf5;}
.report-mini .ic{
  width:32px;height:32px;border-radius:8px;margin:0 auto 6px;
  background:linear-gradient(135deg,#1e3a5f,#27497a);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;
}
.report-mini h5{font-size:.78rem;margin:0;color:#0f172a;font-weight:600;line-height:1.3;}
.report-mini small{font-size:.66rem;color:#94a3b8;}

/* Section spacing on dashboard */
.dash-section-title{
  display:flex;align-items:center;justify-content:space-between;
  margin:18px 0 10px;
}
.dash-section-title h3{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
  color:#475569;font-weight:800;margin:0;
}
.dash-section-title h3::before{
  content:"";display:inline-block;width:3px;height:14px;
  background:#f97316;margin-right:8px;vertical-align:-2px;border-radius:2px;
}

/* Kill old big dash hero on overview */
body.dash-overview .dash-hero-banner{display:none;}
body.dash-overview .page-head{display:none;}
body.dash-overview .dash-section-head{margin:14px 0 8px;}
body.dash-overview .kpi-grid{display:none;}
body.dash-overview .chart-grid{display:none;}
body.dash-overview .reports-grid{display:none;}
body.dash-overview .split-cols{display:none;}


/* ============================================================
   v8 — MINIMALIST DESIGN APPLIED SITE-WIDE
   Override v1-v7 weight with consistent light treatment
============================================================ */

/* Body + main everywhere lighter */
body, html{background:#fafbfc;}
.admin-main{background:#fafbfc;}
.module-container{padding:24px 28px 70px;}
@media (max-width:760px) {.module-container{padding:16px 14px 60px;}}

/* ===== Page heads — slimmer & quieter ===== */
.page-head{margin-bottom:18px;align-items:flex-end;}
.page-head h1{font-size:1.45rem;font-weight:800;color:#0f172a;letter-spacing:-.015em;}
.page-head h1::before{
  content:"";display:inline-block;width:3px;height:18px;
  background:linear-gradient(180deg,#f97316,#fbbf24);
  margin-right:10px;vertical-align:-2px;border-radius:2px;
}
.page-head p{color:#64748b;font-size:.86rem;margin-top:2px;}
.page-actions .btn{min-height:38px;padding:0 14px;font-size:.84rem;}
.page-actions .btn-sm{min-height:32px;font-size:.78rem;}

/* ===== KPI cards — apply mini-style sitewide ===== */
.kpi-grid{gap:10px;margin-bottom:16px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
.kpi-card{
  background:#fff;border:1px solid #eef2f6;border-radius:12px;
  padding:14px 16px;box-shadow:none;position:relative;overflow:hidden;
  transition:.15s;
}
.kpi-card::before{display:none;}
.kpi-card:hover{border-color:#fbbf24;box-shadow:0 4px 12px rgba(15,23,42,.05);}
.kpi-card .kpi-label{font-size:.66rem;color:#94a3b8;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.kpi-card .kpi-value{font-size:1.65rem;font-weight:800;color:#0f172a;letter-spacing:-.01em;line-height:1.1;margin-top:3px;font-family:'Inter',sans-serif;}
.kpi-card .kpi-foot{font-size:.72rem;color:#64748b;margin-top:3px;}
.kpi-card.alert{background:#fffbeb;border-color:#fef3c7;}
.kpi-card.danger{background:#fef2f2;border-color:#fecaca;}
.kpi-card.success{background:#f0fdf4;border-color:#dcfce7;}
.kpi-card.info{background:#eff6ff;border-color:#dbeafe;}

/* ===== Section heroes — replace heavy navy with light cream ===== */
.section-hero{
  background:linear-gradient(135deg,#fef3e2 0%,#fde6c8 100%);
  border:1px solid rgba(251,191,36,0.22);
  padding:24px 28px;border-radius:14px;color:#0f172a;
  box-shadow:none;margin-bottom:18px;
  position:relative;overflow:hidden;
}
.section-hero::before, .section-hero::after{display:none;}
.section-hero .hero-img-bg{
  background-image:url('assets/hero-light.svg');
  opacity:.5;
}
.section-hero h1{
  font-size:1.6rem;color:#0a1628;font-family:'Bebas Neue',sans-serif;
  letter-spacing:.04em;margin-bottom:4px;
}
.section-hero p{color:#475569;font-size:.92rem;max-width:680px;}

/* ===== Module cards (section landing) — light & airy ===== */
.module-cards{gap:10px;}
.module-card{
  padding:16px;border-radius:12px;
  border:1px solid #eef2f6;box-shadow:none;
}
.module-card:hover{
  transform:translateY(-2px);border-color:#fbbf24;
  box-shadow:0 4px 12px rgba(15,23,42,.05);background:#fffbf5;
}
.module-card .mc-ic{
  width:38px;height:38px;border-radius:9px;font-size:.88rem;
  background:linear-gradient(135deg,#1e3a5f,#27497a);
  border:none;
}
.module-card h4{font-size:.92rem;}
.module-card small{font-size:.74rem;line-height:1.4;}
.module-card .mc-count{font-size:.66rem;padding:2px 7px;}

/* ===== Section cards — lighter ===== */
.section-card{
  background:#fff;border:1px solid #eef2f6;border-radius:12px;
  padding:16px 18px;box-shadow:none;
}
.section-card h3{font-size:.92rem;font-weight:800;margin-bottom:12px;}

/* ===== Tables — lighter rows, less border weight ===== */
.table-wrap{
  background:#fff;border:1px solid #eef2f6;border-radius:12px;
  box-shadow:none;
}
table.data{font-size:.84rem;}
table.data thead{background:#f8fafc;}
table.data th{
  padding:10px 14px;font-size:.66rem;letter-spacing:.1em;
  color:#64748b;font-weight:800;border-bottom:1px solid #eef2f6;
}
table.data td{padding:10px 14px;border-bottom:1px solid #f1f5f9;}
table.data tbody tr:hover{background:#fafbfc;}

/* ===== Filters bar — lighter ===== */
.filters{
  background:#fff;border:1px solid #eef2f6;border-radius:12px;
  padding:12px 14px;margin-bottom:14px;box-shadow:none;
}
.filters .form-row label{font-size:.66rem;letter-spacing:.1em;}
.filters .form-row input,.filters .form-row select{min-height:36px;font-size:.84rem;}

/* ===== Sub-nav — lighter ===== */
.sub-nav{
  background:#fff;border:1px solid #eef2f6;border-radius:10px;
  padding:4px;box-shadow:none;
}
.sub-nav-tab{padding:8px 14px;font-size:.82rem;border-radius:8px;}

/* ===== Buttons — keep clean ===== */
.btn{min-height:40px;font-size:.86rem;}
.btn-primary{
  background:#1e3a5f;border:1px solid #1e3a5f;
  box-shadow:none;
}
.btn-primary:hover{
  background:#27497a;border-color:#27497a;
  box-shadow:0 4px 10px rgba(30,58,95,.18);
}
.btn-accent{
  background:linear-gradient(135deg,#f97316,#ea580c);
  color:#fff;border:none;box-shadow:none;
}
.btn-accent:hover{box-shadow:0 4px 10px rgba(249,115,22,.32);}
.btn-ghost{
  background:#fff;border:1px solid #e5e7eb;
  color:#475569;
}
.btn-ghost:hover{background:#f8fafc;color:#0f172a;border-color:#cbd5e1;}

/* ===== Modal — lighter ===== */
.modal-card{border-radius:14px;}
.modal-head{padding:16px 20px;}
.modal-body{padding:20px;}
.modal-footer{padding:14px 20px;background:#fafbfc;}

/* ===== Smart cards (Equipment / Projects) — lighter ===== */
.smart-card{
  border:1px solid #eef2f6;border-radius:12px;padding:16px;
  box-shadow:none;
}
.smart-card:hover{
  border-color:#fbbf24;
  box-shadow:0 4px 12px rgba(15,23,42,.05);
}
.smart-card .sc-icon{
  width:40px;height:40px;font-size:1.1rem;border-radius:10px;
  background:linear-gradient(135deg,#1e3a5f,#27497a);
}

/* ===== Badges — keep pill but quieter ===== */
.badge{padding:3px 9px;font-size:.66rem;}

/* ===== Forms — slightly tighter ===== */
.form-row label{font-size:.7rem;}
.form-row input,.form-row select,.form-row textarea{
  min-height:40px;padding:9px 12px;font-size:.88rem;
  border:1px solid #e5e7eb;background:#fff;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.15);
}

/* ===== Top bar lighter ===== */
.admin-topbar{padding:12px 24px;min-height:56px;box-shadow:none;}
.topbar-search input{min-height:36px;font-size:.86rem;}

/* ===== Sidebar — keep navy but reduce shadow ===== */
.sidebar{box-shadow:none;}

/* ===== Mini chart cards — lighter ===== */
.mini-chart-card{
  border:1px solid #eef2f6;border-radius:12px;padding:16px;
  box-shadow:none;
}
.mini-chart-card h3{font-size:.86rem;}

/* ===== Approval / kanban / activity — lighter ===== */
.alert-item{
  background:#fff;border:1px solid #eef2f6;border-left:3px solid var(--c-warning);
  border-radius:10px;padding:12px 14px;font-size:.84rem;
}
.alert-card{
  background:#fff;border:1px solid #eef2f6;border-left:3px solid var(--c-warning);
  border-radius:12px;padding:14px;
}
.appr-card{
  border-radius:12px;padding:16px;border:1px solid #eef2f6;border-left:3px solid var(--c-warning);
  box-shadow:none;
}
.kanban-col{background:#f1f5f9;padding:10px;border-radius:12px;}
.kcard{padding:10px;border-radius:9px;border:1px solid #eef2f6;box-shadow:none;}
.kcard:hover{box-shadow:0 4px 8px rgba(15,23,42,.05);}

/* ===== Compact KPI helpers used by dashboard ===== */
.compact-kpi .ckpi{
  border-radius:10px;padding:12px;
  border:1px solid #eef2f6;background:#fff;box-shadow:none;
}

/* ===== Print/responsive tweaks unchanged ===== */

/* Reduce noise on dash-overview body class — already handled v7 */

/* ============================================================
   v9 — LIGHT FORMAL SIDEBAR
   White background, dark navy text, navy left-bar active state
============================================================ */

/* Sidebar — light, formal, corporate */
.sidebar{
  background:#ffffff !important;
  border-right:1px solid #e5e7eb;
  box-shadow:1px 0 0 rgba(15,23,42,.02);
}

/* Brand block — clean, restrained */
.sidebar-brand{
  padding:20px 22px 18px;
  border-bottom:1px solid #eef2f6;
  position:relative;
}
.sidebar-brand::after{
  content:"";position:absolute;left:22px;right:22px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,#e5e7eb 50%,transparent);
}
.sidebar-brand strong{
  display:block;font-size:.92rem;letter-spacing:.02em;
  color:#0a1628;font-weight:800;
}
.sidebar-brand small{
  color:#94a3b8;font-size:.62rem;
  letter-spacing:.22em;font-weight:600;text-transform:uppercase;
}
.brand-logo-img{width:42px;height:42px;flex-shrink:0;}

/* Section nav — formal corporate */
.section-nav{padding:14px 12px;gap:2px;}

.nav-section-btn{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:8px;
  color:#475569;
  font-weight:600;font-size:.88rem;letter-spacing:.005em;
  cursor:pointer;transition:.15s;
  position:relative;
  border:1px solid transparent;
}

/* Icon — subtle restrained */
.nav-section-btn .nav-icon{
  width:28px;height:28px;border-radius:7px;
  background:#f1f5f9;color:#475569;
  display:flex;align-items:center;justify-content:center;
  font-size:.92rem;font-weight:700;
  transition:.15s;
}

/* Hover — very subtle */
.nav-section-btn:hover{
  background:#f8fafc;color:#0a1628;
}
.nav-section-btn:hover .nav-icon{
  background:#e2e8f0;color:#1e3a5f;
}

/* Active — navy with thin left bar, no flashy gradient */
.nav-section-btn.active{
  background:#f1f5f9;color:#0a1628;
  font-weight:700;
  box-shadow:none;
}
.nav-section-btn.active::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  background:#1e3a5f;border-radius:0 2px 2px 0;
}
.nav-section-btn.active .nav-icon{
  background:#1e3a5f;color:#fff;
}

/* Foot — light formal */
.sidebar-foot{
  padding:14px;border-top:1px solid #eef2f6;gap:8px;
}
.sidebar-foot .btn{
  min-height:38px;font-size:.82rem;
  background:#fff;border:1px solid #e5e7eb;
  color:#475569;font-weight:600;
}
.sidebar-foot .btn:hover{
  background:#f8fafc;color:#0a1628;border-color:#cbd5e1;
}
.sidebar-foot .btn-danger{
  background:#fff;border:1px solid #fecaca;color:#dc2626;
}
.sidebar-foot .btn-danger:hover{background:#dc2626;color:#fff;border-color:#dc2626;}

/* Mobile open — preserve slide-in */
@media (max-width:1024px) {
  .sidebar{
    background:#ffffff !important;
    box-shadow:0 0 0 rgba(0,0,0,0);
  }
  .sidebar.open{
    box-shadow:30px 0 60px rgba(15,23,42,.16);
  }
}


/* ============================================================
   v10 — Dashboard inline approval action buttons
============================================================ */
.inline-actions-list li{
  grid-template-columns:auto 1fr auto !important;
}
.dash-appr-actions{
  display:flex;gap:4px;align-items:center;
}
.dash-btn-approve, .dash-btn-reject{
  width:30px;height:30px;border-radius:7px;
  border:1px solid;cursor:pointer;
  font-size:.95rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  transition:.15s;font-family:inherit;
}
.dash-btn-approve{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a;}
.dash-btn-approve:hover{background:#16a34a;color:#fff;border-color:#16a34a;}
.dash-btn-reject{background:#fef2f2;border-color:#fecaca;color:#dc2626;}
.dash-btn-reject:hover{background:#dc2626;color:#fff;border-color:#dc2626;}

/* ============================================================
   v11 — Invoice / Quote line item editor
============================================================ */
#iqLines{display:flex;flex-direction:column;gap:6px;}
.line-row{
  display:grid;grid-template-columns:1fr 160px 36px;gap:8px;align-items:center;
}
.line-row .li-desc{
  min-height:38px;padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;
  font-family:inherit;font-size:.88rem;
}
.line-row .li-amt{
  min-height:38px;padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;
  font-family:inherit;font-size:.88rem;text-align:right;font-variant-numeric:tabular-nums;
}
.line-row .li-desc:focus,.line-row .li-amt:focus{
  border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.15);outline:none;
}

/* ============================================================
   v12 — Real brand logos: adjust sizing for wider aspect ratio
============================================================ */

/* Sidebar mark: square crop area for the new mark logo (2488x1834) */
.sidebar-brand .brand-logo-img{
  width:42px;height:42px;object-fit:contain;
}

/* Login splash: full wordmark (1932x757) */
.login-card .login-logo{
  width:260px;height:auto;filter:none;
  /* We'll use white version on dark splash via separate selector */
}
.login-splash .login-logo{
  /* Use white version on dark splash (override via inline src in HTML) */
}

/* Invoice / Quote PDF logo */
@media print { .doc-top .logo-wrap img{width:340px;height:auto;} }


/* ============================================================
   v13 — Invoice line editor: 4-column layout (desc/qty/rate/amt)
============================================================ */
.line-row{
  display:grid;grid-template-columns:1.5fr 80px 110px 110px 36px;gap:6px;align-items:center;margin-bottom:6px;
}
.line-row .li-desc{
  min-height:36px;padding:7px 11px;border:1px solid #e5e7eb;border-radius:8px;
  font-family:inherit;font-size:.86rem;
}
.line-row .li-qty,.line-row .li-rate,.line-row .li-amt{
  min-height:36px;padding:7px 10px;border:1px solid #e5e7eb;border-radius:8px;
  font-family:inherit;font-size:.86rem;text-align:right;font-variant-numeric:tabular-nums;
}
.line-row input:focus{
  border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.15);outline:none;
}
@media (max-width:760px) {
  .line-row{grid-template-columns:1fr 1fr 1fr 1fr 36px;}
}

/* ============================================================
   v15 — Automation toggles
============================================================ */
.toggle{position:relative;display:inline-block;width:40px;height:22px;cursor:pointer;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-slider{
  position:absolute;inset:0;background:#cbd5e1;border-radius:99px;transition:.2s;
}
.toggle-slider::before{
  content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;
  background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(15,23,42,.2);
}
.toggle input:checked + .toggle-slider{background:#16a34a;}
.toggle input:checked + .toggle-slider::before{transform:translateX(18px);}

/* ============================================================
   v16 — Public site v2: animations + generic content
============================================================ */

/* HERO V2 */
.hero-v2{
  position:relative;min-height:92vh;color:#fff;overflow:hidden;
  display:flex;align-items:center;
}
.hero-bg-anim{position:absolute;inset:0;}
.hero-bg-anim .hero-svg{width:100%;height:100%;display:block;}
.hero-sun{transform-origin:1248px 280px;animation:pulseSun 6s ease-in-out infinite;}
@keyframes pulseSun{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.1);opacity:1;}}
.hero-clouds ellipse{animation:cloudDrift 60s linear infinite;}
.hero-clouds ellipse:nth-child(2){animation-duration:80s;animation-delay:-20s;}
.hero-clouds ellipse:nth-child(3){animation-duration:50s;animation-delay:-10s;}
@keyframes cloudDrift{0%{transform:translateX(-200px);}100%{transform:translateX(1800px);}}
.hero-tower-crane{transform-origin:692px 180px;animation:craneSwing 12s ease-in-out infinite;}
@keyframes craneSwing{0%,100%{transform:rotate(0deg);}50%{transform:rotate(2deg);}}
.hero-crane-load{animation:loadDrop 6s ease-in-out infinite;}
@keyframes loadDrop{0%,100%{transform:translateY(0);}50%{transform:translateY(40px);}}
.hero-building-fill{animation:buildingRise 3.4s ease-out forwards;}
@keyframes buildingRise{0%{y:800;}100%{y:430;}}

.hero-inner-v2{position:relative;z-index:2;padding:90px 28px 60px;max-width:1200px;}
.hero-v2 .eyebrow{display:inline-block;color:#fbbf24;font-weight:700;letter-spacing:.18em;font-size:.74rem;text-transform:uppercase;margin-bottom:20px;animation:fadeUp .8s .2s both;}
.hero-v2 h1{font-size:clamp(2.6rem,6vw,5.2rem);font-family:'Bebas Neue',sans-serif;letter-spacing:.02em;line-height:.95;margin:0;animation:fadeUp .8s .35s both;}
.hero-v2 h1 .accent{color:#f97316;}
.hero-v2 .hero-sub{font-size:1.2rem;max-width:700px;color:rgba(255,255,255,.88);margin:24px 0 36px;animation:fadeUp .8s .5s both;line-height:1.6;}
.hero-v2 .hero-cta{display:flex;gap:14px;flex-wrap:wrap;animation:fadeUp .8s .65s both;}
.hero-v2 .hero-cta .btn-lg{padding:0 30px;min-height:52px;font-size:1rem;}
.hero-v2 .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:60px;border-top:1px solid rgba(212,164,86,0.3);padding-top:32px;max-width:780px;animation:fadeUp .8s .85s both;}
.hero-v2 .hero-stats strong{display:block;font-family:'Bebas Neue',sans-serif;font-size:3rem;color:#f97316;line-height:1;}
.hero-v2 .hero-stats span{color:rgba(255,255,255,.7);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin-top:6px;display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

.scroll-down{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  width:30px;height:48px;border:2px solid rgba(255,255,255,.4);border-radius:99px;
  z-index:2;
}
.scroll-down span{
  display:block;width:4px;height:8px;background:#f97316;border-radius:2px;
  margin:8px auto 0;animation:scrollDown 1.8s ease-in-out infinite;
}
@keyframes scrollDown{0%{transform:translateY(0);opacity:1;}80%{transform:translateY(20px);opacity:0;}100%{transform:translateY(0);opacity:0;}}

/* Reveal animations on scroll */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* About cards */

/* Service cards v2 */
.service-card-v2 .service-num{
  font-family:'Bebas Neue',sans-serif;color:#f97316;font-size:1.4rem;
  letter-spacing:1px;margin-bottom:16px;
}

/* Strengths */
.strength-card .str-num{
  font-family:'Bebas Neue',sans-serif;color:#f97316;font-size:1rem;
  letter-spacing:1px;margin-bottom:10px;
}

/* Animated road band */
.section-band{
  background:linear-gradient(135deg,#1e3a5f,#0f2747);
  color:#fff;padding:80px 0 80px;position:relative;overflow:hidden;
  border-top:3px solid #f97316;border-bottom:3px solid #f97316;
}
.section-band .container{position:relative;z-index:2;text-align:center;}
.section-band h2{font-family:'Bebas Neue',sans-serif;letter-spacing:.05em;color:#fff;font-size:2.4rem;}
.section-band h2.centered-headline::before{display:none;}
.section-band p{color:rgba(255,255,255,.75);font-size:1.1rem;}
.road-animation{
  position:absolute;left:0;right:0;bottom:0;height:80px;
  background:#1a1f2e;overflow:hidden;
}
.road{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.road-line{
  position:absolute;top:50%;left:0;right:0;height:6px;background-image:linear-gradient(90deg,#f97316 50%,transparent 50%);
  background-size:60px 6px;animation:roadMove 1.5s linear infinite;
}
@keyframes roadMove{0%{background-position:0 0;}100%{background-position:60px 0;}}
.truck-mover{
  position:absolute;bottom:20px;font-size:2.6rem;
  animation:truckRun 12s linear infinite;
}
@keyframes truckRun{0%{left:-80px;}100%{left:calc(100% + 50px);}}

/* Public footer */

/* Mobile adjustments */
@media (max-width:760px) {
  .hero-v2 .hero-stats{grid-template-columns:1fr 1fr;gap:18px;}
}

/* ============================================================
   v17 — Georgetown skyline showcase section
============================================================ */
.section-skyline{
  position:relative;min-height:560px;
  background-image:url('assets/georgetown-skyline.svg');
  background-size:cover;background-position:center;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.skyline-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,22,40,0) 0%,rgba(10,22,40,0) 40%,rgba(10,22,40,0.55) 75%,rgba(10,22,40,0.85) 100%);
  pointer-events:none;
}
.skyline-content{
  position:relative;z-index:2;width:100%;padding:60px 0 50px;color:#fff;
}
.skyline-content .section-label{
  display:inline-block;background:rgba(249,115,22,0.92);color:#fff;
  padding:4px 14px;border-radius:99px;font-size:.72rem;
  letter-spacing:.18em;font-weight:700;margin-bottom:14px;
}
.skyline-content h2{
  color:#fff;font-family:'Bebas Neue',sans-serif;
  letter-spacing:.03em;font-size:clamp(2rem,4vw,3.4rem);
  text-shadow:0 4px 20px rgba(0,0,0,.4);margin-bottom:14px;
}
.skyline-content .lead{
  color:rgba(255,255,255,.92);max-width:780px;font-size:1.08rem;line-height:1.6;
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.skyline-stats{
  display:grid;grid-template-columns:repeat(3,auto);gap:40px;
  margin-top:30px;justify-content:start;
}
.skyline-stats > div{display:flex;flex-direction:column;}
.skyline-stats strong{
  font-family:'Bebas Neue',sans-serif;color:#fbbf24;
  font-size:3rem;line-height:1;
}
.skyline-stats span{
  color:rgba(255,255,255,.85);font-size:.82rem;
  text-transform:uppercase;letter-spacing:.1em;margin-top:4px;
}

@media (max-width:760px) {
  .section-skyline{min-height:480px;}
  .skyline-stats{grid-template-columns:1fr;gap:14px;}
  .skyline-stats strong{font-size:2.2rem;}
}

/* ============================================================
   v18 — Photo-driven sections: Building One Guyana banner,
   Equipment in Action gallery, Guyana Growth Era
============================================================ */

/* BUILDING ONE GUYANA banner */
.section-bog{position:relative;min-height:540px;display:flex;align-items:center;overflow:hidden;}
.bog-bg{
  position:absolute;inset:0;
  background-image:url('assets/building-one-guyana-banner.svg');
  background-size:cover;background-position:center;
}
.bog-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0) 45%, rgba(15,23,42,0.85) 75%, rgba(10,22,40,0.95) 100%);
}
.bog-content{position:relative;z-index:2;width:100%;display:flex;justify-content:flex-end;color:#fff;padding:60px 28px;}
.bog-text{max-width:540px;text-align:left;}
.bog-logo{width:200px;margin-bottom:20px;filter:brightness(0) invert(1);}
.bog-headline{
  font-family:'Bebas Neue',sans-serif;letter-spacing:.03em;
  font-size:clamp(2.6rem,5vw,4.4rem);color:#fff;line-height:.95;margin-bottom:18px;
}
.bog-headline em{font-style:italic;font-family:'Caveat',cursive,'Bebas Neue';color:#f97316;font-size:1.05em;font-weight:400;}
.bog-headline .accent{color:#f97316;display:block;}
.section-bog p{color:rgba(255,255,255,.85);font-size:1.08rem;line-height:1.6;margin-bottom:24px;max-width:480px;}
.bog-cta{display:flex;gap:12px;flex-wrap:wrap;}

/* EQUIPMENT IN ACTION gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px;}
.gallery-card{
  background:#fff;border-radius:14px;overflow:hidden;
  border:1px solid #eef2f6;box-shadow:0 1px 3px rgba(15,23,42,.04);
  transition:.25s;
}
.gallery-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(15,23,42,.1);}
.gallery-img{
  width:100%;height:200px;
  background-size:cover;background-position:center;
  background-color:#f1f5f9;
  position:relative;
}
.gallery-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(10,22,40,0.55) 100%);
}
.gallery-cap{padding:14px 16px;}
.gallery-cap strong{display:block;font-size:.92rem;color:#0f172a;margin-bottom:2px;}
.gallery-cap span{font-size:.74rem;color:#64748b;letter-spacing:.06em;text-transform:uppercase;font-weight:600;}

/* GUYANA GROWTH ERA */
.section-growth{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;color:#fff;}
.growth-bg{
  position:absolute;inset:0;
  background-image:url('assets/guyana-growth.svg');
  background-size:cover;background-position:center;
}
.growth-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,22,40,0.2) 0%,rgba(10,22,40,0.6) 60%,rgba(10,22,40,0.85) 100%);
}
.growth-content{position:relative;z-index:2;color:#fff;padding:60px 28px;}
.growth-content .section-label{
  display:inline-block;background:rgba(249,115,22,0.92);color:#fff;
  padding:5px 14px;border-radius:99px;font-size:.74rem;letter-spacing:.18em;
  font-weight:700;margin-bottom:14px;
}
.growth-content h2{
  font-family:'Bebas Neue',sans-serif;color:#fff;
  font-size:clamp(2rem,4vw,3.4rem);letter-spacing:.03em;
  text-shadow:0 4px 20px rgba(0,0,0,.5);margin-bottom:16px;
}
.growth-content p{color:rgba(255,255,255,.92);max-width:780px;font-size:1.05rem;line-height:1.65;text-shadow:0 2px 8px rgba(0,0,0,.3);}
.growth-stats{
  display:grid;grid-template-columns:repeat(3,auto);gap:36px;margin-top:30px;justify-content:start;
}
.growth-stats strong{
  font-family:'Bebas Neue',sans-serif;color:#fbbf24;
  font-size:2.6rem;line-height:1;display:block;
}
.growth-stats span{
  color:rgba(255,255,255,.85);font-size:.8rem;
  text-transform:uppercase;letter-spacing:.1em;margin-top:4px;display:block;
}

/* Mobile */
@media (max-width:1024px) {
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px) {
  .gallery-grid{grid-template-columns:1fr;}
  .bog-content{justify-content:center;}
  .growth-stats{grid-template-columns:1fr;gap:14px;}
  .growth-stats strong{font-size:2.2rem;}
}

/* ============================================================
   v19 — Hero v3: full-bleed, glass card, marquee, animated reveal
============================================================ */

/* Background */


/* Vignette + dark gradient for legibility */

/* Floating accent shapes */


/* Inner layout */

/* Tag pill */


/* Title */


/* Subtitle */

/* CTA buttons */
.btn-accent.btn-xl{
  background:linear-gradient(135deg,#f97316,#ea580c);
  color:#fff;font-weight:800;
  box-shadow:0 12px 30px rgba(249,115,22,.4);
  display:inline-flex;align-items:center;gap:10px;
}
.btn-accent.btn-xl:hover{box-shadow:0 18px 38px rgba(249,115,22,.55);transform:translateY(-2px);}

/* Glass stats card */
.hero-v3-card{
  background:rgba(10,22,40,0.55);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:20px;padding:28px;
  box-shadow:0 30px 60px rgba(0,0,0,.4);
  position:relative;overflow:hidden;
}
.hero-v3-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#f97316,#fbbf24,#f97316);
}
.hv-stat strong{
  display:block;font-family:'Bebas Neue',sans-serif;
  font-size:2.4rem;color:#f97316;line-height:1;
}
.hv-stat span{
  display:block;font-size:.72rem;color:rgba(255,255,255,.65);
  text-transform:uppercase;letter-spacing:.1em;margin-top:4px;
}

/* Marquee strip */


/* Scroll indicator */


/* Mobile */
@media (max-width:1100px) {
  .hero-v3-card{max-width:520px;}
}

/* ============================================================
   v21 — Frontend revisions per client feedback
============================================================ */
/* 14. Quick Add FAB — smaller */
.fab{width:48px;height:48px;font-size:1.4rem;bottom:22px;right:22px;}
.fab-sheet{bottom:78px;right:22px;width:256px;}
@media (max-width:600px) {.fab{width:44px;height:44px;font-size:1.25rem;bottom:16px;right:16px;}.fab-sheet{right:16px;bottom:68px;}}

/* 11. Careers section — switch from grey background to navy-tinted with refined accents */

/* Service cards — since numbers were removed, increase top padding so first heading sits cleanly */

/* Materials & Quotes inbox styling */
.msg-thread{
  background:#fff;border:1px solid #eef2f6;border-radius:12px;
  padding:18px;margin-bottom:10px;
}
.msg-thread.unread{border-left:3px solid #f97316;background:#fffbf5;}
.msg-thread .msg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;}
.msg-thread .msg-from{font-weight:700;color:#0f172a;}
.msg-thread .msg-from small{display:block;color:#64748b;font-weight:500;font-size:.78rem;margin-top:2px;}
.msg-thread .msg-when{font-size:.74rem;color:#94a3b8;}
.msg-thread .msg-subj{margin-top:8px;font-weight:600;color:#1e3a5f;}
.msg-thread .msg-body{margin-top:8px;padding:10px 12px;background:#f8fafc;border-radius:8px;font-size:.92rem;color:#334155;line-height:1.55;white-space:pre-wrap;}
.msg-thread .msg-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.msg-status-pill{display:inline-block;font-size:.66rem;padding:2px 8px;border-radius:99px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;}
.msg-status-pill.new{background:#fef3c7;color:#92400e;}
.msg-status-pill.read{background:#dbeafe;color:#1e40af;}
.msg-status-pill.replied{background:#dcfce7;color:#166534;}
.msg-status-pill.archived{background:#e5e7eb;color:#475569;}

/* ============================================================
   v22 — VALS-inspired polish: service icons, CTA banner
============================================================ */

/* Service card icon wrap */

/* Refine service card spacing now that icons are present */

/* Same icon treatment for strength cards — subtle navy dot/bar */

/* "Let's Build the Future Together" CTA banner */
.vals-cta{
  background:linear-gradient(135deg,#0a1628 0%,#0f2747 60%,#1c3358 100%);
  padding:72px 0;color:#fff;position:relative;overflow:hidden;
  border-top:3px solid #f97316;border-bottom:1px solid rgba(212,164,86,0.25);
}
.vals-cta::before{
  content:"";position:absolute;inset:0;
  background-image:url('assets/hero-skyline.svg');
  background-size:cover;background-position:center;opacity:.18;pointer-events:none;
}
.vals-cta::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,#d4a456 50%,transparent);
}
.vals-cta-inner{
  position:relative;z-index:2;display:grid;grid-template-columns:1.4fr 1fr;
  gap:40px;align-items:center;
}
.vals-cta h2{
  color:#fff;font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.2rem,5vw,3.8rem);letter-spacing:.02em;
  margin-bottom:0;line-height:1;
}
.vals-cta h2::before{display:none;}
.vals-cta .section-label{
  display:inline-block;background:rgba(249,115,22,0.18);color:#fbbf24;
  padding:5px 14px;border-radius:99px;font-size:.7rem;
  letter-spacing:.18em;font-weight:700;
  border:1px solid rgba(251,191,36,0.3);margin-bottom:14px;
}
.vals-cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;}

@media (max-width:760px) {
  .vals-cta-inner{grid-template-columns:1fr;text-align:center;}
  .vals-cta-actions{justify-content:center;}
}

/* ============================================================
   v22 — Backend simplification: light tabs, section tints,
   improved data readability
============================================================ */

/* === New sub-nav style: light text tabs with underline, no dark pill === */
.sub-nav{
  background:transparent;border:none;padding:0;margin-bottom:18px;
  border-bottom:1px solid #eef2f6;border-radius:0;box-shadow:none;
  display:flex;flex-wrap:wrap;gap:0;
}
.sub-nav-tab{
  padding:11px 16px;border-radius:0;background:transparent;
  color:#64748b;font-size:.86rem;font-weight:600;letter-spacing:.01em;
  border-bottom:3px solid transparent;margin-bottom:-1px;
  transition:.15s;cursor:pointer;
}
.sub-nav-tab:hover{
  color:#0a1628;background:transparent;
  border-bottom-color:#cbd5e1;
}
.sub-nav-tab.active{
  background:transparent !important;color:#1e3a5f !important;
  border-bottom-color:#f97316 !important;font-weight:800;
  box-shadow:none !important;
}

/* === Section-specific light pastel backgrounds for the main view === */
body.section-overview .admin-main,
body.section-overview .module-container{background:#fefcf7;}
body.section-financials .admin-main,
body.section-financials .module-container{background:#f5fbf6;}
body.section-operations .admin-main,
body.section-operations .module-container{background:#f3f8fc;}
body.section-workforce .admin-main,
body.section-workforce .module-container{background:#fefaf0;}
body.section-intelligence .admin-main,
body.section-intelligence .module-container{background:#f9f6fd;}
body.section-admin .admin-main,
body.section-admin .module-container{background:#f8fafc;}

/* Section indicator strip across top of main area */
.admin-main::before{
  content:"";display:block;height:3px;
  background:linear-gradient(90deg,transparent 0%,#f97316 30%,#fbbf24 50%,#f97316 70%,transparent 100%);
  opacity:.4;
}

/* === Light category-colored chip header for current section === */
.section-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 12px;border-radius:99px;
  font-size:.66rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:10px;
}
.section-chip.overview{background:#fef3c7;color:#92400e;}
.section-chip.financials{background:#dcfce7;color:#166534;}
.section-chip.operations{background:#dbeafe;color:#1e3a8a;}
.section-chip.workforce{background:#fef3c7;color:#9a3412;}
.section-chip.intelligence{background:#ede9fe;color:#5b21b6;}
.section-chip.admin{background:#e5e7eb;color:#475569;}

/* === Cards softer, less heavy === */
.kpi-card, .section-card, .data-card, .table-wrap, .mini-chart-card{
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.kpi-card:hover, .section-card:hover, .data-card:hover{
  box-shadow:0 2px 8px rgba(15,23,42,.06);
}

/* Show auto labour/fuel rows in project expenses by default */
body.show-auto tr.auto-row{display:table-row;}
tr.auto-row td:first-child::before{content:"⚡";color:#f97316;margin-right:6px;}

/* Combined job-card entries — type pill spacing */
.line-items li.work-row{background:#fffbf0;border-left:3px solid #fbbf24;}
.line-items li.part-row{background:#f0f7ff;border-left:3px solid #3b82f6;}

/* Section chips for forms */
input[readonly]{background:#f1f5f9 !important;cursor:not-allowed !important;}

/* Tighter table look */
table.data th{font-weight:700;letter-spacing:.09em;}
.report-total-row td{padding:14px 16px !important;font-size:.92rem;}

/* ============================================================
   v23 — Receipt photo upload UI
============================================================ */
.receipt-upload-box{margin-bottom:12px;}
.receipt-upload-box input[type=file]{display:none;}
.receipt-upload-box .upload-cta{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:22px;background:#fff8eb;
  border:2px dashed #fbbf24;border-radius:12px;
  cursor:pointer;transition:.15s;text-align:center;
}
.receipt-upload-box .upload-cta:hover{background:#fef3c7;border-color:#f97316;}
.receipt-upload-box .upload-cta strong{color:#0a1628;font-size:.92rem;letter-spacing:0;text-transform:none;}
.receipt-upload-box .upload-cta small{color:#94a3b8;font-size:.72rem;}

.receipt-photo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-bottom:14px;
}
.receipt-photo-tile{
  position:relative;border-radius:10px;overflow:hidden;
  border:1px solid #eef2f6;background:#f1f5f9;aspect-ratio:1;
}
.receipt-photo-tile img{width:100%;height:100%;object-fit:cover;}
.rm-photo{
  position:absolute;top:4px;right:4px;
  width:22px;height:22px;border-radius:50%;
  background:rgba(220,38,38,0.92);color:#fff;border:none;
  font-size:.9rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.rm-photo:hover{background:#dc2626;}

/* Receipt photo viewer (gallery modal) */
.receipt-viewer{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;
}
.receipt-viewer-tile{
  cursor:zoom-in;border-radius:10px;overflow:hidden;
  position:relative;background:#f1f5f9;aspect-ratio:3/4;
  border:1px solid #eef2f6;transition:.15s;
}
.receipt-viewer-tile:hover{transform:scale(1.02);box-shadow:0 8px 20px rgba(15,23,42,.15);}
.receipt-viewer-tile img{width:100%;height:100%;object-fit:cover;}
.receipt-viewer-cap{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,0.7));
  color:#fff;padding:14px 10px 8px;font-size:.74rem;font-weight:600;letter-spacing:.05em;
}

/* Full-screen photo zoom */
.photo-zoom{
  position:fixed;inset:0;background:rgba(0,0,0,.92);
  z-index:300;display:flex;align-items:center;justify-content:center;
  cursor:zoom-out;
}
.photo-zoom img{max-width:94vw;max-height:92vh;object-fit:contain;border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,.6);}
.photo-zoom-close{
  position:absolute;top:24px;right:24px;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.95);color:#0a1628;border:none;
  font-size:1.5rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.photo-zoom-close:hover{background:#fff;}

/* ============================================================
   v24 — Sensitivity / Confidentiality controls
============================================================ */
.restricted-field{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:6px;
  background:#fef3c7;color:#92400e;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;
  white-space:nowrap;
}
.conf-flag{
  display:inline-block;margin-right:4px;
  font-size:.78rem;color:#f97316;
}
.restricted-banner{
  margin-top:14px;padding:8px 14px;
  background:rgba(251,191,36,0.95);color:#0a1628;
  border-radius:8px;font-size:.78rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  display:inline-block;
}
.restricted-edit-banner{
  background:#fef3c7;color:#7c2d12;
  padding:10px 14px;border-radius:8px;
  border-left:3px solid #f59e0b;
  font-size:.86rem;margin-bottom:14px;
}
.sensitivity-card{border-left:4px solid #f97316;}
.sensitivity-card h3{color:#0a1628;}

/* ============================================================
   v27 — CEO Dashboard, Approval Center, weekly grouping
============================================================ */

/* Approval Center cards */
.ac-card{
  background:#fff;border:1px solid #eef2f6;border-radius:14px;
  padding:18px 20px;margin-bottom:10px;
  display:grid;grid-template-columns:auto 4px 1fr auto;gap:14px;align-items:center;
  transition:.15s;position:relative;
}
.ac-card:hover{border-color:#cbd5e1;box-shadow:0 4px 12px rgba(15,23,42,.05);}
.ac-card.selected{border-color:#f97316;background:#fffbf5;}
.ac-card[data-pri=high]{border-left:4px solid #dc2626;}
.ac-card[data-pri=medium]{border-left:4px solid #f97316;}
.ac-card[data-pri=low]{border-left:4px solid #16a34a;}
.ac-check{width:18px;height:18px;cursor:pointer;}
.ac-priority{width:4px;height:60px;border-radius:2px;align-self:center;}
.ac-main{min-width:0;}
.ac-row1{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:4px;}
.ac-type{background:#eef2f7;color:#1e3a5f;padding:2px 10px;border-radius:99px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.ac-priority-tag{padding:2px 10px;border-radius:99px;font-size:.7rem;font-weight:800;letter-spacing:.06em;}
.ac-date{font-size:.78rem;color:#94a3b8;}
.ac-main h4{font-size:1.02rem;color:#0a1628;margin:2px 0 6px;line-height:1.3;}
.ac-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:.84rem;color:#475569;}
.ac-meta strong{color:#0a1628;font-weight:600;}
.ac-notes{margin-top:6px;font-size:.82rem;color:#64748b;font-style:italic;}
.ac-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.ac-actions .btn{padding:0 14px;min-height:38px;font-size:.86rem;}

/* Photo column tighter */
.photo-col{width:60px;text-align:center;}
.photo-col .icon-btn{font-size:.78rem;padding:4px 8px;}

/* Week detail row in project workspace */
.week-detail td{background:#f8fafc;padding:8px 14px !important;}
.week-detail table{background:#fff;border-radius:6px;}

/* Mobile adjustments */
@media (max-width:760px) {
  .ac-card{grid-template-columns:1fr;gap:8px;}
  .ac-priority{display:none;}
  .ac-actions{justify-content:stretch;}
  .ac-actions .btn{flex:1;}
}

/* ============================================================
   v28 — CEO sidebar button + reorg
============================================================ */
body.section-ceodashboard .admin-main,
body.section-ceodashboard .module-container{background:#fefcf2;}

/* CEO button — gold accent treatment to stand out */
/* .nav-ceo used to paint the Home button as a permanent amber pill
   (!important gradients). With the accent-wash active state in
   theme-modern.css that meant TWO highlighted items at once — the amber
   Home plus the actual current section — so "where am I" stopped being
   answerable at a glance. Home is now an ordinary item; only the active
   section is highlighted. */
.nav-ceo{ margin-bottom:8px; }


/* ============================================================
   v31 — Page hero treatment (project-workspace style everywhere)
   + Remove small accent bars from headers
============================================================ */

/* Remove the tiny gold/orange bar before all main headings */
.page-head h1::before,
.dash-section-title h3::before,
.dash-section-head h2 .accent-bar{
  display:none !important;
}

/* The main page hero — applied via JS-wrapping */
.page-hero{
  background:linear-gradient(135deg,#0a1628 0%,#1e3a5f 60%,#27497a 100%);
  border:1px solid rgba(212,164,86,0.16);
  border-radius:18px;
  padding:24px 30px 22px;
  margin-bottom:22px;
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(10,22,40,.18);
}
.page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,#d4a456 50%,transparent);
}

/* Subtle decorative radial */
.page-hero::before{
  content:"";position:absolute;right:-40px;top:-40px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(249,115,22,.18),transparent 70%);
  pointer-events:none;
}

/* page-head inside hero */
.page-hero .page-head{
  margin-bottom:18px;align-items:flex-start;
  padding-bottom:0;border:none;position:relative;z-index:1;
}
.page-hero .page-head > div:first-child{flex:1;}
.page-hero .page-head h1{
  color:#fff;
  font-family:'Bebas Neue',sans-serif;
  font-size:1.85rem;letter-spacing:.025em;font-weight:400;
  line-height:1;margin:0;
}
.page-hero .page-head p{
  color:rgba(255,255,255,.72);
  font-size:.92rem;margin-top:6px;
}

/* Page actions inside hero — glass buttons */
.page-hero .page-actions{position:relative;z-index:1;}
.page-hero .page-actions .btn{
  min-height:38px;
}
.page-hero .page-actions .btn-primary{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  backdrop-filter:blur(10px);
  box-shadow:none;
}
.page-hero .page-actions .btn-primary:hover{
  background:rgba(255,255,255,.24);
  border-color:rgba(212,164,86,.45);
  box-shadow:0 6px 14px rgba(0,0,0,.2);
}
.page-hero .page-actions .btn-ghost{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);
}
.page-hero .page-actions .btn-ghost:hover{
  background:rgba(255,255,255,.12);
  color:#fff;border-color:rgba(255,255,255,.35);
}
.page-hero .page-actions .btn-accent{
  background:linear-gradient(135deg,#f97316,#ea580c);
  color:#fff;border:none;font-weight:700;
  box-shadow:0 4px 12px rgba(249,115,22,.35);
}
.page-hero .page-actions .btn-accent:hover{
  box-shadow:0 8px 18px rgba(249,115,22,.5);
}
.page-hero .page-actions .view-toggle,
.page-hero .page-actions .range-toggle{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
}
.page-hero .page-actions .view-toggle button,
.page-hero .page-actions .range-toggle button{
  color:rgba(255,255,255,.7);
}
.page-hero .page-actions .view-toggle button.active,
.page-hero .page-actions .range-toggle button.active{
  background:rgba(255,255,255,.2);color:#fff;
}

/* KPI strip inside hero — glass tiles */
.page-hero .kpi-strip{
  margin:0;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.page-hero .kpi-mini{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:14px 16px;
  position:relative;overflow:hidden;
  backdrop-filter:blur(10px);
}
.page-hero .kpi-mini:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(212,164,86,.32);
  box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.page-hero .kpi-mini .km-label{
  color:rgba(255,255,255,.62);
  font-size:.66rem;
}
.page-hero .kpi-mini .km-value{
  color:#fff;
  font-family:'Bebas Neue',sans-serif;
  font-size:2rem;line-height:1;letter-spacing:.015em;
  font-weight:400;margin-top:4px;
}
.page-hero .kpi-mini .km-foot{
  color:rgba(255,255,255,.5);
  font-size:.7rem;
}
/* Coloured left edge for tinted variants */
.page-hero .kpi-mini.tint-green{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.3);}
.page-hero .kpi-mini.tint-amber{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.32);}
.page-hero .kpi-mini.tint-red{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.3);}
.page-hero .kpi-mini.tint-blue{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.3);}
.page-hero .kpi-mini.tint-cream{background:rgba(251,191,36,.16);border-color:rgba(251,191,36,.3);}
.page-hero .kpi-mini.tint-green .km-value{color:#86efac;}
.page-hero .kpi-mini.tint-amber .km-value{color:#fbbf24;}
.page-hero .kpi-mini.tint-red .km-value{color:#fca5a5;}
.page-hero .kpi-mini.tint-blue .km-value{color:#93c5fd;}
.page-hero .kpi-mini.tint-cream .km-value{color:#fde68a;}

/* Sparklines inside hero must show on dark bg */
.page-hero .kpi-mini .sparkline{opacity:.7;}

/* Don't double-wrap pages that already have their own hero */
.page-hero .dash-light-hero,
.page-hero .section-hero,
.page-hero .proj-ws-header,
.dash-light-hero + .page-hero,
.section-hero + .page-hero,
.proj-ws-header + .page-hero{display:none;}

/* Make the KPI strip below hero (if any) look lighter — but if it's inside hero, gold-tile style applies */

/* Mobile */
@media (max-width:760px) {
  .page-hero{padding:18px 20px;border-radius:14px;}
  .page-hero .page-head h1{font-size:1.5rem;}
  .page-hero .kpi-strip{grid-template-columns:1fr 1fr;}
}


/* ============================================================
   v32 — Strip small icons from sidebar nav + sub-nav tabs
============================================================ */
/* Hide the small character icons in the left sidebar sections */
.section-nav .nav-icon{display:none !important;}
.section-nav .nav-section-btn{padding:13px 16px;gap:0;}
.section-nav .nav-section-btn span:last-child{font-size:.92rem;letter-spacing:.01em;}

/* Tighten sub-nav tab spacing now that icons are gone */
.sub-nav-tab{padding:11px 14px;letter-spacing:.005em;}


/* ============================================================
   v33 — Priority alerts list, section tints
============================================================ */
.priority-alerts{list-style:none;padding:0;margin:0;}
.priority-alerts li{
  display:grid;grid-template-columns:8px 1fr auto;gap:14px;align-items:center;
  padding:12px 8px;border-bottom:1px solid #eef2f6;cursor:pointer;
  transition:.15s;
}
.priority-alerts li:last-child{border-bottom:none;}
.priority-alerts li:hover{background:#f8fafc;}
.pa-dot{width:8px;height:8px;border-radius:50%;}
.pa-body{min-width:0;}
.pa-title{font-weight:600;color:#0a1628;font-size:.92rem;line-height:1.3;margin-bottom:3px;}
.pa-meta{display:flex;gap:8px;align-items:center;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.pa-cat{color:#64748b;}
.pa-level{color:#dc2626;}
.pa-arrow{color:#cbd5e1;font-size:1.1rem;}

/* Section body tints for new sections */
body.section-projectsTop .module-container{background:#f3f8fc;}
body.section-approvalsTop .module-container{background:#fffbeb;}
body.section-services .module-container{background:#fffbf5;}
body.section-tenderswatch .module-container{background:#fefce8;}


/* ============================================================
   v36 — Public site realignment after removing cartoon sections
============================================================ */
/* Section spacing tightening */

/* Strengths section — adjust top padding now that it follows services */

/* About section first under hero — keep generous padding */

/* Reveal animation tightening */

/* ============================================================
   v37 — LIQUID GLASS UI
   Rotating Guyana photo backgrounds + glassmorphism overlay
============================================================ */

/* === HERO: Layered photo backgrounds === */
.hero-bg-layer{
  position:absolute;inset:0;
  background-size:cover;background-position:center center;
  opacity:0;
  transition:opacity 2.4s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.hero-bg-layer.active{opacity:1;}
.hero-bg-layer[data-bg="1"]{background-image:url('assets/guyana-1.jpg'),url('assets/hero-v3.svg');}
/* Layers 2–4 only fetch their images once index.html flags .bg-ready on window load */
.hero-bg-layer.bg-ready[data-bg="2"]{background-image:url('assets/guyana-2.jpg'),url('assets/hero-v3.svg');}
.hero-bg-layer.bg-ready[data-bg="3"]{background-image:url('assets/guyana-3.jpg'),url('assets/hero-v3.svg');}
.hero-bg-layer.bg-ready[data-bg="4"]{background-image:url('assets/guyana-4.jpg'),url('assets/hero-v3.svg');}

/* Subtle Ken-Burns zoom on active layer */
.hero-bg-layer.active{animation:slowZoom 20s ease-in-out infinite alternate;}
@keyframes slowZoom{0%{transform:scale(1.02);}100%{transform:scale(1.12);}}

/* Strong dark gradient overlay so text reads on any photo */

/* === Floating color blobs (liquid life) === */




/* === LIQUID GLASS CARD CLASS === */

/* Hero-v3 card override — apply liquid glass treatment */
.hero-v3-card.liquid-glass{
  background:rgba(10,22,40,0.35);
  backdrop-filter:blur(32px) saturate(180%);
  -webkit-backdrop-filter:blur(32px) saturate(180%);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 40px 80px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.15);
}
.hero-v3-card.liquid-glass::before{
  background:linear-gradient(90deg,transparent 0%,#f97316 50%,transparent 100%);
  height:2px;opacity:0.7;
}

/* === Hero tag pill — liquid glass === */

/* === Glass CTAs === */

/* === Marquee — liquid glass === */

/* === Cards across the site — subtle glass treatment === */

/* === Skyline image bg sections get liquid glass overlay === */
.section-skyline .skyline-overlay{
  background:linear-gradient(180deg,rgba(10,22,40,0) 30%,rgba(10,22,40,0.6) 75%,rgba(10,22,40,0.92) 100%);
}

/* === VALS CTA banner — keep dramatic === */
.vals-cta{position:relative;overflow:hidden;}

/* === Service cards — semi-transparent on dark === */

/* === Strength cards on grey section — slight glass === */

/* === Contact form — liquid glass === */
.contact-form{
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Background photo behind contact section */

/* Section-grey override → glass-like cream */

/* Reveal animation — smoother for liquid feel */
.reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity 1.2s cubic-bezier(.4,0,.2,1),transform 1.2s cubic-bezier(.4,0,.2,1);
}
.reveal.in-view{opacity:1;transform:translateY(0);}


/* ============================================================
   v38 — CEO Operations Hub: compact heroes + new components
============================================================ */

/* === COMPACT HEROES (40-50% smaller) === */
body.compact-heroes .page-hero{
  padding:14px 24px 14px;
  margin-bottom:14px;
  border-radius:12px;
}
body.compact-heroes .page-hero::before{width:160px;height:160px;right:-30px;top:-30px;}
body.compact-heroes .page-hero .page-head{margin-bottom:10px;padding-bottom:0;border:none;}
body.compact-heroes .page-hero .page-head h1{
  font-size:1.3rem;letter-spacing:.02em;line-height:1.1;font-weight:600;font-family:'Inter',sans-serif;
}
body.compact-heroes .page-hero .page-head p{font-size:.8rem;margin-top:2px;}
body.compact-heroes .page-hero .kpi-strip{gap:8px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
body.compact-heroes .page-hero .kpi-mini{padding:10px 12px;}
body.compact-heroes .page-hero .kpi-mini .km-value{font-size:1.45rem;line-height:1;font-family:'Inter',sans-serif;font-weight:800;}
body.compact-heroes .page-hero .kpi-mini .km-label{font-size:.62rem;letter-spacing:.08em;}
body.compact-heroes .page-hero .kpi-mini .km-foot{font-size:.66rem;}

body.compact-heroes .dash-light-hero{height:100px;padding:0 28px;margin-bottom:14px;border-radius:12px;}
body.compact-heroes .dash-light-hero h2{font-size:1.5rem;margin-bottom:2px;}
body.compact-heroes .dash-light-hero p{font-size:.84rem;}
body.compact-heroes .dash-light-hero .hero-pill{padding:3px 9px;font-size:.6rem;margin-bottom:6px;}

body.compact-heroes .section-hero{padding:18px 24px;margin-bottom:14px;border-radius:12px;}
body.compact-heroes .section-hero h1{font-size:1.4rem;}
body.compact-heroes .section-hero p{font-size:.86rem;}

body.compact-heroes .proj-ws-header{padding:18px 24px;}
body.compact-heroes .proj-ws-header h1{font-size:1.4rem;}
body.compact-heroes .proj-ws-stats{gap:10px;margin-top:12px;}
body.compact-heroes .proj-ws-stat{padding:8px 12px;}

body.compact-heroes .module-container{padding:18px 24px 60px;}
body.compact-heroes .kpi-grid{gap:10px;margin-bottom:14px;}

/* === TODAY'S ACTION LIST === */
.todays-action{
  background:#fff;border:1px solid #fde68a;border-left:4px solid #f97316;
  border-radius:12px;padding:14px 18px;margin-bottom:14px;
  box-shadow:0 2px 8px rgba(249,115,22,.08);
}
.ta-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.ta-head h3{font-size:.94rem;color:#0a1628;margin:0;font-weight:800;}
.ta-count{background:#f97316;color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.06em;padding:3px 10px;border-radius:99px;}
.ta-empty{color:#16a34a;font-weight:700;font-size:.9rem;padding:8px 0;}
.ta-list{list-style:none;padding:0;margin:0;}
.ta-item{
  display:grid;grid-template-columns:30px 1fr 20px;gap:12px;align-items:center;
  padding:10px 8px;border-radius:8px;cursor:pointer;
  border-bottom:1px solid #fef3c7;
  transition:.12s;
}
.ta-item:last-child{border-bottom:none;}
.ta-item:hover{background:#fffbeb;}
.ta-icon{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fef3c7;color:#92400e;font-weight:800;font-size:.92rem;
}
.ta-urgent .ta-icon{background:#fee2e2;color:#dc2626;}
.ta-amber .ta-icon{background:#fef3c7;color:#92400e;}
.ta-text{font-size:.88rem;color:#0a1628;line-height:1.35;}
.ta-text small{color:#64748b;font-size:.74rem;}
.ta-arrow{color:#cbd5e1;font-size:1.1rem;}

/* === PROJECT HEALTH PILLS === */
.health-pill{
  display:inline-block;padding:3px 10px;border-radius:99px;
  font-size:.66rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;margin-left:4px;
}
.health-good{background:#dcfce7;color:#166534;}
.health-warning{background:#fef3c7;color:#92400e;}
.health-critical{background:#fee2e2;color:#991b1b;}
.health-completed{background:#dbeafe;color:#1e40af;}
.health-cancelled{background:#e5e7eb;color:#475569;}
.health-hold{background:#ede9fe;color:#5b21b6;}
.health-info{background:#f1f5f9;color:#475569;}

/* Extended project card stats */
.ext-stats{
  border-top:1px solid #eef2f6;
  padding:8px 0 4px;
  margin-top:8px;
}
.ext-row{
  display:flex;justify-content:space-between;
  padding:3px 0;font-size:.78rem;color:#475569;
}
.ext-row strong{color:#0a1628;font-weight:700;}

/* === Old → New value display === */
.value-change{
  display:flex;gap:8px;align-items:center;
  background:#f8fafc;border-radius:6px;padding:6px 10px;
  margin:8px 0;font-family:monospace;font-size:.84rem;
}
.value-change .old-val{color:#dc2626;text-decoration:line-through;}
.value-change .new-val{color:#16a34a;font-weight:700;}
.value-change .arrow{color:#94a3b8;}

/* Approvals page Needs Info badge */
.appr-card.needs-info{border-left-color:#3b82f6;}


/* ============================================================
   v39 — Compact Overview pills + action list spacing
============================================================ */

/* Overview Dashboard — tighter kpi strip pills */
body.dash-overview .kpi-strip{
  gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-bottom:14px;
}
body.dash-overview .kpi-mini{
  padding:10px 12px;
  border-radius:10px;
}
body.dash-overview .kpi-mini .km-label{
  font-size:.6rem;letter-spacing:.1em;font-weight:700;
  line-height:1.1;
}
body.dash-overview .kpi-mini .km-value{
  font-size:1.35rem;font-weight:800;line-height:1.05;margin-top:3px;
  letter-spacing:-.01em;
}
body.dash-overview .kpi-mini .km-foot{
  font-size:.64rem;margin-top:2px;line-height:1.2;
}
body.dash-overview .kpi-mini .sparkline{
  width:48px;height:18px;right:6px;bottom:6px;
}
@media (max-width:760px) {
  body.dash-overview .kpi-strip{grid-template-columns:repeat(2,1fr);}
  body.dash-overview .kpi-mini .km-value{font-size:1.2rem;}
}

/* Today's Action List — when sitting between snapshot and charts */
.dash-section-title + .kpi-strip + .todays-action,
.kpi-strip + .todays-action{
  margin-top:6px;margin-bottom:18px;
}


/* ============================================================
   v40 — Undo v39 pill compaction (restore prior sizes)
============================================================ */
body.dash-overview .kpi-strip{
  gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  margin-bottom:18px;
}
body.dash-overview .kpi-mini{
  padding:14px;
  border-radius:12px;
}
body.dash-overview .kpi-mini .km-label{
  font-size:.66rem;letter-spacing:.12em;font-weight:700;line-height:1.2;
}
body.dash-overview .kpi-mini .km-value{
  font-size:1.6rem;font-weight:800;line-height:1.1;margin-top:2px;
  letter-spacing:-.01em;
}
body.dash-overview .kpi-mini .km-foot{
  font-size:.74rem;margin-top:4px;line-height:1.4;
}
body.dash-overview .kpi-mini .sparkline{
  width:64px;height:24px;right:8px;bottom:8px;
}
@media (max-width:760px) {
  body.dash-overview .kpi-strip{grid-template-columns:repeat(2,1fr);}
}

/* ============================================================
   v41 — CEO Dashboard chart sizing + visual polish
   (Fixed in v47: removed broken max-height that crushed charts)
============================================================ */
.dash-grid .data-card{padding:16px 18px;}
.dash-grid .data-card-head{padding-bottom:8px;margin-bottom:10px;}
.dash-grid .data-card-head h3{font-size:.82rem;}

/* Add subtle gradient backgrounds to chart cards */
.dash-grid > div:first-child .data-card:first-child{
  background:linear-gradient(180deg,#fff,#fafbfc);
  border-color:#e2e8f0;
}
.dash-grid > div:first-child .data-card:last-child{
  background:linear-gradient(180deg,#fff,#fffbf5);
  border-color:#fed7aa;
}

/* Action list when placed below snapshot — full width pop */
.kpi-strip + .todays-action{
  margin-top:10px;
  margin-bottom:18px;
}

/* ============================================================
   v42 — Public site polish, WhatsApp, quick contact, footer
============================================================ */

/* === HERO TRUST LINE & WHATSAPP BUTTON === */
.btn-whatsapp .wa-ic{
  font-size:1.1rem;font-weight:900;
}

/* === SERVICE CARD TAGS + CTA === */

/* === QUICK CONTACT GRID === */

/* === FLOATING WHATSAPP BUTTON === */
.float-wa{
  position:fixed;bottom:24px;right:24px;
  width:58px;height:58px;
  background:linear-gradient(135deg,#25d366,#128c7e);
  color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(37,211,102,.4);
  z-index:60;text-decoration:none;
  transition:.2s;
  animation:floatPulse 2.4s ease-in-out infinite;
}
.float-wa svg{width:30px;height:30px;}
.float-wa:hover{transform:scale(1.1) rotate(5deg);}
@keyframes floatPulse{
  0%,100%{box-shadow:0 12px 30px rgba(37,211,102,.4);}
  50%{box-shadow:0 12px 36px rgba(37,211,102,.6),0 0 0 8px rgba(37,211,102,.18);}
}
@media (max-width:760px) {
  .float-wa{bottom:18px;right:18px;width:52px;height:52px;}
  .float-wa svg{width:26px;height:26px;}
}
/* Hide floating WA inside admin app */
.view-admin ~ .float-wa,
body:has(#adminApp:not([hidden])) .float-wa{display:none !important;}

/* === FOOTER POLISH === */
.public-footer .container > div p{font-size:.84rem;line-height:1.6;}

/* === Hero CTAs — better mobile wrap === */

/* === Mobile polish — hero === */

/* === Service section padding fix on mobile === */

/* === Contact form mobile === */
@media (max-width:760px) {
  .contact-form{padding:24px 20px;}
}


/* ============================================================
   v43 — Tone down orange glow + remove build-with-us
============================================================ */
/* Less aggressive shadow on the primary hero CTA (was bright yellow-orange) */
.btn-accent.btn-xl{
  background:linear-gradient(135deg,#f97316,#ea580c);
  box-shadow:0 6px 16px rgba(249,115,22,.22) !important;
}
.btn-accent.btn-xl:hover{
  box-shadow:0 10px 22px rgba(249,115,22,.32) !important;
  transform:translateY(-2px);
}

/* Tag pill — slightly more refined */


/* ============================================================
   v44 — Remove residual bright yellow glow + soften effects
============================================================ */

/* Kill the yellow/gold floating blob — was the strongest yellow source */
/* Dim the orange blob too */

/* Soften pulsing dot — less of a halo */

/* Tag pill — calmer styling, no yellow tint */

/* Trust line — keep cool */

/* Marquee diamonds — orange dividers */

/* Sub-heading on services section — no glow */

/* Service card hover — keep the subtle orange tint, no bright yellow */


/* ============================================================
   v45 — PROJECTS COMMAND CENTER
============================================================ */

/* Compact projects page hero */
.proj-cmd-head{
  padding:0;margin-bottom:16px;
  background:none;border:none;
}
.proj-cmd-head h1{font-size:1.5rem;}
.proj-cmd-head p{font-size:.82rem;}

/* Status tabs as chips */
.proj-tabs-row{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;
}
.proj-tab-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid #e5e7eb;
  padding:8px 14px;border-radius:99px;
  font-size:.84rem;font-weight:600;color:#475569;
  cursor:pointer;transition:.15s;font-family:inherit;
}
.proj-tab-chip:hover{border-color:#cbd5e1;color:#0a1628;}
.proj-tab-chip.active{
  background:#1e3a5f;color:#fff;border-color:#1e3a5f;
}
.proj-tab-chip .ptc-n{
  background:rgba(255,255,255,.15);
  padding:1px 7px;border-radius:99px;
  font-size:.7rem;font-weight:800;
}
.proj-tab-chip:not(.active) .ptc-n{
  background:#f1f5f9;color:#64748b;
}

/* Summary strip */
.proj-summary-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;margin-bottom:14px;
}
.pss-card{
  background:#fff;border:1px solid #eef2f6;border-radius:10px;
  padding:10px 14px;
}
.pss-card small{
  display:block;font-size:.62rem;color:#94a3b8;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
}
.pss-card strong{
  display:block;font-size:1.15rem;font-weight:800;color:#0a1628;
  margin-top:2px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.pss-card.tint-blue{border-left:3px solid #3b82f6;}
.pss-card.tint-green{border-left:3px solid #16a34a;}
.pss-card.tint-red{border-left:3px solid #dc2626;}
.pss-card.tint-amber{border-left:3px solid #f97316;}

/* Toolbar (filters + sort + quick chips) */
.proj-toolbar{
  background:#fff;border:1px solid #eef2f6;border-radius:12px;
  padding:10px 12px;margin-bottom:14px;
}
.proj-filter-row{
  display:grid;grid-template-columns:1.5fr repeat(4,140px);gap:8px;margin-bottom:10px;
}
.proj-filter-row input, .proj-filter-row select{
  height:36px;padding:7px 12px;border:1px solid #e5e7eb;border-radius:8px;
  font-size:.85rem;background:#fff;
}
.proj-search{font-size:.9rem !important;}
.proj-quick-chips{
  display:flex;gap:6px;flex-wrap:wrap;
}
.qf-chip{
  background:#f8fafc;border:1px solid #eef2f6;
  padding:5px 12px;border-radius:99px;
  font-size:.76rem;font-weight:600;color:#64748b;
  cursor:pointer;transition:.15s;font-family:inherit;
}
.qf-chip:hover{border-color:#cbd5e1;color:#0a1628;}
.qf-chip.active{
  background:#fee2e2;border-color:#fecaca;color:#991b1b;font-weight:800;
}
.qf-chip:nth-child(1).active{background:#1e3a5f;color:#fff;border-color:#1e3a5f;}

/* Empty state */
.proj-empty{
  background:#fff;border:1px dashed #cbd5e1;border-radius:14px;
  padding:48px 24px;text-align:center;
}
.proj-empty-icon{font-size:2.6rem;margin-bottom:10px;}
.proj-empty h3{color:#0a1628;margin-bottom:6px;}
.proj-empty p{color:#64748b;font-size:.9rem;}

/* Project Command Cards Grid */
.proj-cmd-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:14px;align-items:stretch;
}
.proj-cmd-card{
  background:#fff;border:1px solid #eef2f6;border-radius:14px;
  padding:0;display:flex;flex-direction:column;
  transition:.18s;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  position:relative;
}
.proj-cmd-card:hover{
  box-shadow:0 8px 24px rgba(15,23,42,.08);
  border-color:#cbd5e1;
}
.proj-cmd-card.proj-border-critical{border-left:4px solid #dc2626;}
.proj-cmd-card.proj-border-warning{border-left:4px solid #f97316;}
.proj-cmd-card.proj-border-good{border-left:4px solid #16a34a;}

/* Card header */
.pcc-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:14px 16px;border-bottom:1px solid #f1f5f9;cursor:pointer;
}
.pcc-head:hover{background:#fafbfc;}
.pcc-head-l{min-width:0;flex:1;}
.pcc-name{
  font-size:.96rem;font-weight:700;color:#0a1628;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
  margin:0 0 3px;
}
.pcc-sub{font-size:.74rem;color:#64748b;}
.pcc-id{font-family:monospace;color:#475569;font-weight:600;}
.pcc-client{color:#64748b;}
.pcc-head-r{display:flex;flex-direction:column;gap:3px;align-items:flex-end;flex-shrink:0;}

/* Health pills — refined */
.health-pill{
  padding:2px 8px;font-size:.62rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  border-radius:99px;display:inline-block;white-space:nowrap;
}
.health-good{background:#dcfce7;color:#166534;}
.health-warning{background:#fef3c7;color:#92400e;}
.health-critical{background:#fee2e2;color:#991b1b;}
.health-completed{background:#dbeafe;color:#1e40af;}
.health-cancelled{background:#e5e7eb;color:#475569;}
.health-hold{background:#ede9fe;color:#5b21b6;}
.health-info{background:#f1f5f9;color:#475569;}

/* Details row */
.pcc-details{
  display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;
  padding:12px 16px;background:#fafbfc;border-bottom:1px solid #f1f5f9;
}
.pcc-detail span{
  font-size:.66rem;color:#94a3b8;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;display:block;
}
.pcc-detail strong{font-size:.82rem;color:#0a1628;font-weight:600;}

/* Financial mini-rows */
.pcc-fin{padding:10px 16px;border-bottom:1px solid #f1f5f9;}
.pcc-fin-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:3px 0;font-size:.82rem;
}
.pcc-fin-row span{color:#475569;}
.pcc-fin-row strong{color:#0a1628;font-weight:700;font-variant-numeric:tabular-nums;}
.pcc-fin-row.dim{padding-left:14px;}
.pcc-fin-row.dim span, .pcc-fin-row.dim strong{color:#94a3b8;font-size:.74rem;font-weight:500;}
.pcc-fin-row.total{
  border-top:1px solid #eef2f6;margin-top:6px;padding-top:6px;
  font-size:.88rem;
}
.pcc-fin-row.total span{font-weight:700;color:#0a1628;}

/* Progress bars */
.pcc-progress{padding:10px 16px;border-bottom:1px solid #f1f5f9;}
.pcc-pbar{margin-bottom:8px;}
.pcc-pbar:last-child{margin-bottom:0;}
.pcc-pbar-head{
  display:flex;justify-content:space-between;
  font-size:.66rem;color:#64748b;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;margin-bottom:3px;
}
.pcc-pbar-track{
  height:6px;background:#f1f5f9;border-radius:99px;overflow:hidden;
}
.pcc-pbar-fill{
  height:100%;background:linear-gradient(90deg,#16a34a,#22c55e);
  transition:width .4s;
}
.pcc-pbar-fill.warn{background:linear-gradient(90deg,#f97316,#fbbf24);}
.pcc-pbar-fill.over{background:linear-gradient(90deg,#dc2626,#ef4444);}
.pcc-pbar-fill.phys{background:linear-gradient(90deg,#3b82f6,#60a5fa);}

/* Actions */
.pcc-actions{
  display:flex;gap:5px;flex-wrap:wrap;
  padding:10px 16px;background:#fafbfc;
  margin-top:auto;
}
.pcc-btn{
  background:#fff;border:1px solid #e5e7eb;color:#475569;
  padding:5px 10px;border-radius:6px;
  font-size:.74rem;font-weight:600;cursor:pointer;
  transition:.12s;font-family:inherit;
}
.pcc-btn:hover{background:#f1f5f9;color:#0a1628;border-color:#cbd5e1;}
.pcc-btn.warn{background:#fff7ed;color:#9a3412;border-color:#fed7aa;}
.pcc-btn.warn:hover{background:#fed7aa;}
.pcc-btn.primary{background:#1e3a5f;color:#fff;border-color:#1e3a5f;}
.pcc-btn.danger{background:#fef2f2;color:#b91c1c;border-color:#fecaca;}
.pcc-btn.danger:hover{background:#fee2e2;}
.pcc-btn.primary:hover{background:#27497a;}

/* Completion checklist */
.completion-checklist{
  display:flex;flex-direction:column;gap:8px;
  background:#f8fafc;padding:12px;border-radius:8px;
}
.cl-row{
  display:flex;gap:10px;align-items:center;
  padding:8px 10px;background:#fff;border-radius:6px;
  font-size:.88rem;cursor:pointer;
}
.cl-row input{width:18px;height:18px;}
.cl-row:hover{background:#fef9f0;}

/* Table view enhancements */
.proj-cmd-table-wrap{max-height:none;}
.proj-cmd-table thead th{position:sticky;top:0;background:#f8fafc;z-index:1;}
.proj-cmd-table tbody tr:hover{background:#fffbeb !important;}

/* Mobile */
@media (max-width:760px) {
  .proj-cmd-grid{grid-template-columns:1fr;}
  .proj-filter-row{grid-template-columns:1fr;}
  .proj-summary-strip{grid-template-columns:1fr 1fr;}
  .pcc-actions{justify-content:stretch;}
  .pcc-btn{flex:1 1 auto;min-width:80px;text-align:center;}
}



/* ============================================================
   v46 — CAREERS PAGE OPTIMIZATION
   Compact hero, premium job cards, filters, CTA, why-work
   Fix letter-spacing bug so body text reads normally
============================================================ */

/* RESET letter-spacing inside careers body so words like
   "Guyanese", "Anna Regina", "Region 6", "Head Office" render
   correctly. Only small uppercase labels keep wide spacing. */
/* Keep wide tracking only on these small uppercase labels */

/* Outer section reset */

/* === HERO === */

/* === FILTERS === */
.career-filters{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:10px;
  margin-bottom:24px;
  padding:14px;
  background:#fff;
  border:1px solid #e6ebf2;
  border-radius:14px;
  box-shadow:0 2px 8px rgba(15,30,55,.04);
}
.cf-search{
  position:relative;display:flex;align-items:center;
  background:#f5f7fa;border-radius:10px;
  border:1px solid #e2e8f0;
}
.cf-search:focus-within{border-color:#1e3a5f;background:#fff;}
.cf-search-ic{
  position:absolute;left:14px;color:#94a3b8;font-size:1rem;pointer-events:none;
}
.cf-search input{
  border:0;background:transparent;padding:11px 12px 11px 40px;
  font-size:.92rem;color:#0f172a;width:100%;outline:none;
}
.career-filters select{
  background:#f5f7fa;border:1px solid #e2e8f0;
  border-radius:10px;padding:10px 12px;
  font-size:.9rem;color:#0f172a;cursor:pointer;
  font-family:inherit;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}
.career-filters select:focus{outline:none;border-color:#1e3a5f;background-color:#fff;}
@media (max-width:760px) {
  .career-filters{grid-template-columns:1fr 1fr;}
  .cf-search{grid-column:1/-1;}
}

/* === JOB CARDS === */
.career-card{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid #e6ebf2;
  border-left:3px solid #1e3a5f;
  border-radius:12px;
  padding:14px 16px 12px;
  box-shadow:0 2px 6px rgba(15,30,55,.04);
  transition:transform .2s ease, box-shadow .2s ease, border-left-color .2s ease;
  min-height:auto;
}
.career-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(15,30,55,.10);
  border-left-color:#f97316;
}
.career-card .cc-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  margin-bottom:6px;
}
.career-card .cc-title{
  font-size:.98rem;font-weight:800;color:#0a1628;
  line-height:1.2;margin:0;
  letter-spacing:normal !important;
}
.career-card .cc-region-pill{
  flex-shrink:0;
  display:inline-block;
  font-size:.6rem;font-weight:700;
  text-transform:uppercase;
  background:#eef2f7;color:#1e3a5f;
  padding:3px 8px;border-radius:99px;
  border:1px solid #d6deea;
}
.career-card .cc-meta{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:8px;
  font-size:.78rem;color:#475569;
}
.career-card .cc-meta-row{
  display:inline-flex;align-items:center;gap:5px;
}
.career-card .cc-meta-row .ic{color:#94a3b8;font-size:.85rem;}
.career-card .cc-tags{
  display:flex;flex-wrap:wrap;gap:5px;
  margin-bottom:8px;
}
.career-tag{
  display:inline-block;
  font-size:.6rem;font-weight:700;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:99px;
  background:#e2eaf3;color:#1e3a5f;
  border:1px solid #cbd5e1;
}
.career-tag.tag-field{background:#fff4e6;color:#c2410c;border-color:#fed7aa;}
.career-tag.tag-office{background:#e0e7ff;color:#3730a3;border-color:#c7d2fe;}
.career-tag.tag-operator{background:#fef3c7;color:#92400e;border-color:#fde68a;}
.career-tag.tag-urgent{background:#fee2e2;color:#b91c1c;border-color:#fecaca;}
.career-card .cc-req{
  font-size:.8rem;color:#334155;
  line-height:1.5;
  margin:0 0 10px;
  letter-spacing:normal !important;
}
.career-card .cc-actions{
  display:flex;gap:6px;flex-wrap:wrap;
  margin-top:auto;
  padding-top:8px;
  border-top:1px solid #f1f5f9;
}
.career-card .btn-apply{
  flex:1 1 120px;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-size:.75rem;font-weight:700;
  padding:8px 10px;
  border-radius:8px;
  text-decoration:none;
  border:1px solid transparent;
  transition:all .15s ease;
  letter-spacing:normal !important;
}
.career-card .btn-apply-wa{
  background:linear-gradient(135deg,#25d366,#128c7e);
  color:#fff;
}
.career-card .btn-apply-wa:hover{box-shadow:0 8px 20px rgba(37,211,102,.32);transform:translateY(-1px);}
.career-card .btn-apply-email{
  background:#fff;color:#1e3a5f;
  border-color:#cbd5e1;
}
.career-card .btn-apply-email:hover{background:#1e3a5f;color:#fff;border-color:#1e3a5f;}

/* Empty state */
.career-empty{
  grid-column:1/-1;
  padding:48px 24px;
  text-align:center;
  background:#fff;
  border:1px dashed #cbd5e1;
  border-radius:14px;
  color:#64748b;
}
.career-empty h4{color:#0a1628;font-size:1.1rem;margin:0 0 8px;letter-spacing:normal !important;}
.career-empty p{margin:0;letter-spacing:normal !important;}

/* === BOTTOM CTA STRIP === */

/* === WHY WORK === */

/* Responsive: 5 cards → break to fewer columns on smaller screens */

/* === MOBILE === */
@media (max-width:760px) {
  .career-card{padding:18px 18px 14px;min-height:auto;}
  .career-card .cc-head{flex-direction:column;align-items:flex-start;}
}

/* ============================================================
   v47 — CEO Dashboard chart sizing FIX + executive polish
   Goal: charts render at full container height, modern look,
   right column visually balances left column.
============================================================ */

/* Make chart canvas wrappers behave consistently across the grid */
.dash-grid .data-card{
  display:flex;flex-direction:column;
}
.dash-grid .data-card-head{
  flex-shrink:0;
}

/* Reserve real estate for charts — taller, executive sized */
.dash-grid .data-card .ceo-chart-wrap{
  position:relative;width:100%;flex:1 1 auto;
  min-height:280px;
}
.dash-grid .data-card .ceo-chart-wrap.is-doughnut{min-height:310px;}
.dash-grid .data-card .ceo-chart-wrap.is-bar{min-height:300px;}
.dash-grid .data-card .ceo-chart-wrap canvas{
  position:absolute;inset:0;width:100% !important;height:100% !important;
  max-height:none !important;       /* explicitly override any earlier cap */
}

/* Subtle chart card header chip on the right (KPI summary) */
.ceo-chart-summary{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.74rem;font-weight:700;color:#1e3a5f;
  background:#eef4fb;border:1px solid #d8e3f0;
  padding:3px 10px;border-radius:99px;
  letter-spacing:.02em;
}
.ceo-chart-summary .dot{
  width:7px;height:7px;border-radius:50%;background:#f97316;
}

/* "All caught up" empty state — give it real presence */
.dash-grid .ceo-empty-ok{
  padding:34px 12px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:linear-gradient(180deg,#f0fdf4,#ffffff);
  border:1px dashed #bbf7d0;border-radius:12px;
  margin:6px 0 2px;
}
.dash-grid .ceo-empty-ok .ok-badge{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#dcfce7;color:#16a34a;font-size:1.4rem;font-weight:800;
  border:2px solid #86efac;
  box-shadow:0 4px 14px rgba(22,163,74,.18);
}
.dash-grid .ceo-empty-ok h4{
  margin:4px 0 0;color:#15803d;font-size:.92rem;font-weight:800;
  letter-spacing:.02em;
}
.dash-grid .ceo-empty-ok p{
  margin:0;color:#16a34a;font-size:.76rem;font-weight:600;opacity:.85;
}

/* Tighten the columns so charts and side panels line up.
   Use flex columns at all sizes so .data-card spacing is consistent
   regardless of whether the inline margin-top was removed. */
.dash-grid > div{display:flex;flex-direction:column;gap:14px;}
@media (min-width:1101px) {
  .dash-grid{grid-template-columns:1.55fr 1fr;gap:18px;}
}

/* When the dashboard wraps, make charts breathable on mobile */
@media (max-width:1100px) {
  .dash-grid .data-card .ceo-chart-wrap{min-height:260px;}
  .dash-grid .data-card .ceo-chart-wrap.is-doughnut{min-height:280px;}
}
@media (max-width:640px) {
  .dash-grid .data-card .ceo-chart-wrap{min-height:230px;}
  .dash-grid .data-card .ceo-chart-wrap.is-doughnut{min-height:250px;}
}

/* Doughnut center label (CSS-only overlay support) */
.dash-grid .ceo-chart-wrap.is-doughnut .ceo-doughnut-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
  /* keep above canvas but Chart.js still receives hover via tooltip plugin */
  text-align:center;padding-bottom:42px; /* legend sits below */
}
.dash-grid .ceo-doughnut-center .ddc-label{
  font-size:.62rem;font-weight:700;color:#94a3b8;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:2px;
}
.dash-grid .ceo-doughnut-center .ddc-value{
  font-size:1.45rem;font-weight:800;color:#0a1628;letter-spacing:-.01em;
  font-family:'Inter',sans-serif;line-height:1;
}
.dash-grid .ceo-doughnut-center .ddc-foot{
  font-size:.66rem;color:#64748b;font-weight:600;margin-top:4px;
}

/* ============================================================
   v48 — Cash Flow chart card + Profit-by-Project table
============================================================ */

/* Cash Flow card — full width, sits above .dash-grid */
.ceo-cashflow-card{
  background:linear-gradient(180deg,#ffffff,#fbfcfe);
  border:1px solid #e2e8f0;border-radius:14px;
  padding:16px 18px;margin-bottom:18px;
  box-shadow:0 1px 0 rgba(15,23,42,.02);
}
.ceo-cashflow-card .data-card-head{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;
  border-bottom:1px solid #eef1f6;margin-bottom:12px;padding-bottom:10px;
}
.ceo-cashflow-card .data-card-head h3{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;
  color:#0a1628;font-weight:800;margin:0;
}
.ceo-cashflow-totals{
  display:flex;flex-wrap:wrap;gap:8px;
}
.ceo-cashflow-totals .cft{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.74rem;font-weight:700;letter-spacing:.01em;
  background:#f8fafc;border:1px solid #e2e8f0;
  padding:5px 10px;border-radius:99px;color:#1e3a5f;
}
.ceo-cashflow-totals .cft i{
  width:8px;height:8px;border-radius:50%;display:inline-block;
}
.ceo-cashflow-totals .cft-in{background:#f0fdf4;border-color:#bbf7d0;color:#15803d;}
.ceo-cashflow-totals .cft-in i{background:#16a34a;}
.ceo-cashflow-totals .cft-out{background:#fff7ed;border-color:#fed7aa;color:#c2410c;}
.ceo-cashflow-totals .cft-out i{background:#f97316;}
.ceo-cashflow-totals .cft-net.pos{background:#eef4fb;border-color:#cfdcec;color:#1e3a5f;}
.ceo-cashflow-totals .cft-net.pos i{background:#1e3a5f;}
.ceo-cashflow-totals .cft-net.neg{background:#fef2f2;border-color:#fecaca;color:#b91c1c;}
.ceo-cashflow-totals .cft-net.neg i{background:#dc2626;}

.ceo-cashflow-card .ceo-chart-wrap.is-cashflow{
  position:relative;width:100%;height:300px;
}
.ceo-cashflow-card .ceo-chart-wrap.is-cashflow canvas{
  position:absolute;inset:0;width:100% !important;height:100% !important;
  max-height:none !important;
}
@media (max-width:760px) {
  .ceo-cashflow-card .ceo-chart-wrap.is-cashflow{height:240px;}
  .ceo-cashflow-totals{width:100%;}
}

/* Profit-by-Project — compact, executive table */
.ceo-profit-card{
  background:#fff;border:1px solid var(--c-line-soft,#e2e8f0);border-radius:14px;
  padding:16px 18px;margin-top:18px;
}
.ceo-profit-card .data-card-head{
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid #eef1f6;margin-bottom:10px;padding-bottom:10px;
}
.ceo-profit-card .data-card-head h3{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;
  color:#0a1628;font-weight:800;margin:0;
}
.ceo-profit-table-wrap{
  overflow-x:auto;
  border-radius:10px;
}
.ceo-profit-table{
  width:100%;border-collapse:collapse;
  font-family:'Inter',sans-serif;font-size:.84rem;
}
.ceo-profit-table thead th{
  text-align:left;font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:#64748b;padding:8px 10px;
  border-bottom:1px solid #e2e8f0;background:#f8fafc;
}
.ceo-profit-table thead th.num{text-align:right;}
.ceo-profit-table tbody td{
  padding:10px;border-bottom:1px solid #f1f5f9;
  color:#0f172a;vertical-align:middle;
}
.ceo-profit-table tbody td.num{text-align:right;font-variant-numeric:tabular-nums;}
.ceo-profit-table tbody td.num.strong{font-weight:700;}
.ceo-profit-table tbody td.proj-name{
  font-weight:600;color:#0a1628;max-width:260px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ceo-profit-table tbody tr{cursor:pointer;transition:background .12s;}
.ceo-profit-table tbody tr:hover{background:#fafbfc;}
.ceo-profit-table tbody tr:last-child td{border-bottom:none;}
.ceo-profit-table tbody td .dim{color:#cbd5e1;}
.ceo-profit-table tbody td.pos{color:#15803d;font-weight:700;}
.ceo-profit-table tbody td.neg{color:#b91c1c;font-weight:700;}
.ceo-profit-table tbody td.pos small,
.ceo-profit-table tbody td.neg small{font-weight:600;opacity:.75;}

/* Consumed bar inside a cell */
.consumed-cell{min-width:140px;}
.consumed-bar{
  position:relative;width:100%;height:6px;
  background:#f1f5f9;border-radius:99px;overflow:hidden;
  margin-bottom:3px;
}
.consumed-bar span{
  position:absolute;left:0;top:0;height:100%;
  border-radius:99px;transition:width .3s;
}
.consumed-bar span.ok   {background:linear-gradient(90deg,#22c55e,#16a34a);}
.consumed-bar span.watch{background:linear-gradient(90deg,#f59e0b,#f97316);}
.consumed-bar span.over {background:linear-gradient(90deg,#ef4444,#dc2626);}
.consumed-pct{font-size:.7rem;font-weight:700;letter-spacing:.02em;}
.consumed-pct.ok{color:#15803d;}
.consumed-pct.watch{color:#c2410c;}
.consumed-pct.over{color:#b91c1c;}

/* Margin status pill */
.margin-badge{
  display:inline-block;font-size:.66rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:99px;border:1px solid transparent;
}
.margin-badge.mb-healthy{background:#dcfce7;color:#15803d;border-color:#bbf7d0;}
.margin-badge.mb-watch  {background:#fff7ed;color:#c2410c;border-color:#fed7aa;}
.margin-badge.mb-over   {background:#fee2e2;color:#b91c1c;border-color:#fecaca;}

/* Legend below the table */
.ceo-profit-legend{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:10px;padding-top:8px;
  border-top:1px dashed #eef1f6;
  font-size:.72rem;color:#64748b;font-weight:600;
}
.ceo-profit-legend .dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;
  vertical-align:middle;
}
.ceo-profit-legend .dot.ok{background:#16a34a;}
.ceo-profit-legend .dot.watch{background:#f97316;}
.ceo-profit-legend .dot.over{background:#dc2626;}

/* Smaller-screen table — keep readable */
@media (max-width:760px) {
  .ceo-profit-table thead th,
  .ceo-profit-table tbody td{padding:7px 6px;font-size:.74rem;}
  .ceo-profit-table tbody td.proj-name{max-width:140px;}
  .consumed-cell{min-width:90px;}
}


/* ============================================================
   v47 — Audit fixes: button-styled admin link + reveal fallback
============================================================ */

/* Reveal fallback — if IntersectionObserver isn't supported, still show content */
.no-js .reveal,
html.no-js .reveal{opacity:1 !important;transform:none !important;}

/* v48 — Global search results dropdown */
.gsearch-panel{position:absolute;top:calc(100% + 8px);left:0;width:100%;max-width:520px;background:#fff;border:1px solid var(--c-border);border-radius:14px;box-shadow:0 18px 48px rgba(15,23,42,.18);z-index:60;max-height:430px;overflow-y:auto;padding:6px;}
.gsearch-group-label{font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#94a3b8;padding:10px 12px 4px;}
.gsearch-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;cursor:pointer;}
.gsearch-item:hover,.gsearch-item.active{background:#f1f5f9;}
.gsearch-ic{width:30px;height:30px;min-width:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#fff7ed;color:#ea580c;font-size:.92rem;}
.gsearch-tx{min-width:0;flex:1;}
.gsearch-tx strong{display:block;font-size:.85rem;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gsearch-tx small{display:block;font-size:.74rem;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gsearch-empty{padding:18px 14px;text-align:center;color:#94a3b8;font-size:.85rem;}

/* ============================================================
   v52 CLEANUP — empty state, thin page hero, off-canvas mobile
   sidebar w/ backdrop, global-search dropdown, smaller page-head.
============================================================ */

/* Empty-state card (replaces giant "No X" blank rows) */
.empty-state{
  max-width:480px;margin:24px auto;padding:48px 24px;
  background:#fff;border:1px dashed #e2e8f0;border-radius:14px;
  text-align:center;color:#475569;
}
.empty-state .empty-state-icon{
  font-size:3rem;line-height:1;color:#cbd5e1;margin-bottom:14px;
  font-weight:200;
}
.empty-state h3{font-size:1.05rem;margin:0 0 6px;color:#0f172a;font-weight:700;}
.empty-state p{font-size:.86rem;margin:0 0 16px;color:#64748b;}
.empty-state .btn{margin-top:6px;}

/* Page-head — slimmer h1 and tighter margins.
   No background/border here: when nested inside .page-hero (the dark gradient
   banner used on every admin page) any solid bg would paint over the hero. */
.page-head{margin-bottom:14px !important;}
.page-head h1{font-size:1.4rem !important;line-height:1.2;margin:0;}
.page-head p{font-size:.82rem !important;margin-top:2px !important;}
body.dash-overview .page-head{display:none;}

/* Section-hero (landing pages) — shrunk too */
.section-hero{padding:16px 24px !important;border-radius:10px;}
.section-hero h1{font-size:1.4rem !important;letter-spacing:.02em !important;}
.section-hero p{font-size:.84rem !important;}

/* No artificial min-height on module container — let content size itself */
#moduleContainer,.module-container{min-height:auto !important;}

/* Mobile off-canvas sidebar (≤760px) */
@media (max-width:760px) {
  .sidebar{
    position:fixed !important;top:0;left:-100% !important;
    width:280px !important;height:100vh;z-index:90;
    transition:left .2s ease;
    box-shadow:none;
  }
  .sidebar.open{left:0 !important;box-shadow:24px 0 60px rgba(0,0,0,.4);}
  .sidebar-backdrop{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);
    z-index:85;border:none;padding:0;cursor:pointer;
  }
  .sidebar-backdrop.show{display:block;}
}
/* Hide the backdrop on desktop */
@media (min-width:761px) {
  .sidebar-backdrop{display:none !important;}
}

/* Global search dropdown */
.topbar-search{position:relative;}
.global-search-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;
  width:100%;max-width:520px;
  background:#fff;border:1px solid #e2e8f0;border-radius:12px;
  box-shadow:0 18px 48px rgba(15,23,42,.18);
  max-height:360px;overflow-y:auto;
  z-index:60;display:none;
}
.global-search-dropdown .gs-item{
  padding:10px 14px;cursor:pointer;border-bottom:1px solid #f1f5f9;
}
.global-search-dropdown .gs-item:last-child{border-bottom:none;}
.global-search-dropdown .gs-item:hover{background:#f8fafc;}
.global-search-dropdown .gs-label{font-size:.88rem;font-weight:600;color:#0f172a;}
.global-search-dropdown .gs-sub{font-size:.74rem;color:#64748b;margin-top:2px;}

/* ============================================================
   ACCESSIBILITY & UX ENHANCEMENT LAYER  (additive — appended 2026-05)
   Pure progressive enhancement: skip-link, keyboard focus rings,
   reduced-motion support, anchor scroll offset, and touch targets.
   Nothing above this comment is modified.
   ============================================================ */

/* --- Screen-reader-only utility --- */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* --- Skip-to-content link (visible only on keyboard focus) --- */
.skip-link{
  position:fixed;
  top:-60px;
  left:12px;
  z-index:2000;
  padding:10px 18px;
  background:#0a1628;
  color:#fff;
  font-weight:700;
  border-radius:0 0 8px 8px;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:top .18s ease;
}
.skip-link:focus{
  top:0;
  outline:3px solid #f4a81d;
  outline-offset:2px;
}

/* --- Visible keyboard focus for interactive elements ---
   :focus-visible keeps mouse users ring-free; only keyboard users see it. --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.nav-section-btn:focus-visible,
.btn:focus-visible{
  outline:3px solid #f4a81d;
  outline-offset:2px;
  border-radius:4px;
}

/* --- Fixed-nav anchor offset so section headings aren't hidden under the
   sticky public nav when jumping via the menu. --- */
html{ scroll-behavior:smooth; }

/* --- Comfortable touch targets on touch devices --- */
@media (hover:none) and (pointer:coarse) {
  .nav-links a,
  .btn-sm,
  .footer-base a,
  .footer-admin-link{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}

/* --- Respect users who prefer reduced motion ---
   Calms the hero rotation, marquee, floating blobs and reveal animations
   for people with vestibular sensitivity. --- */
@media (prefers-reduced-motion: reduce) {
  html{ scroll-behavior:auto; }
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hv-marquee-track,
  .lg-blob,
  .hero-bg-layer,
  .hero-v3-shape{
    animation:none !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   ADMIN DATA-PRESENTATION PILOT  (additive — appended 2026-05)
   CSS-only modernization of the data tables & cards that appear
   across every admin module (Projects, Finance, HR, Equipment…).
   Scoped under .view-admin so the public site is untouched.
   Enhances existing markup only — no class names invented that the
   render code doesn't already emit. Fully reversible: delete this block.
   ============================================================ */

/* --- Card containers: soft elevation + clearer separation --- */
.view-admin .table-wrap,
.view-admin .section-card,
.view-admin .data-card{
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  transition:box-shadow .18s ease;
}
.view-admin .table-wrap:hover,
.view-admin .data-card:hover{
  box-shadow:0 4px 14px rgba(15,23,42,.08);
}

/* --- Data tables: sticky header, zebra striping, tabular numerics --- */
.view-admin .table-wrap{ overflow:auto; }
.view-admin table.data{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
}
.view-admin table.data thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#f8fafc;
  /* keep the header readable while rows scroll under it */
  box-shadow:inset 0 -1px 0 #e2e8f0;
}
/* Zebra striping for faster row scanning */
.view-admin table.data tbody tr:nth-child(even){ background:#fcfdfe; }
.view-admin table.data tbody tr{ transition:background .12s ease; }
.view-admin table.data tbody tr:hover{ background:#f1f6fc; }
/* Right-align + monospace digits for any cell the app marks as numeric/money,
   and for the last data column which is conventionally an amount in these tables */
.view-admin table.data td.amount,
.view-admin table.data td.num,
.view-admin table.data .money{
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* --- Status badges: upgrade plain status text the render already wraps in
   .badge / .status / .pill / .tag to consistent, legible chips --- */
.view-admin .badge,
.view-admin .status-badge,
.view-admin .pill,
.view-admin .tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px;
  border-radius:99px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.5;
  white-space:nowrap;
}

/* --- Empty-state rows: center, mute, give breathing room --- */
.view-admin table.data td[colspan]{
  text-align:center;
  color:#94a3b8;
  padding:26px 14px;
  font-size:.85rem;
}

/* --- Card-head count pill: subtle tone consistency --- */
.view-admin .data-card-head .count-pill,
.view-admin .data-card-head .count{
  font-variant-numeric:tabular-nums;
}

/* --- Mobile: let wide tables scroll instead of breaking layout --- */
@media (max-width:760px) {
  .view-admin .table-wrap{ -webkit-overflow-scrolling:touch; }
  .view-admin table.data{ min-width:560px; }
}

/* =========================================================
   v52 — Zubair Group section (public site)
========================================================= */

/* ============================================================
   v57 — Mobile: tables become cards, real tap targets
   Staff work on phones and iPads on weak rural data. Data
   tables previously scrolled sideways inside .table-wrap
   (overflow:auto), which is unusable one-handed. Below 760px
   each row becomes a card and each cell shows its column name,
   sourced from the <th> via data-label (stamped generically in
   script.js, so no table markup had to change).
============================================================ */
@media (max-width: 760px) {
  .table-wrap{
    overflow: visible;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  table.data{ font-size: .95rem; }
  table.data thead{ display: none; }
  table.data, table.data tbody, table.data tr, table.data td{
    display: block;
    width: 100%;
  }
  table.data tr{
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  table.data tr:hover{ background: #fff; }
  table.data td{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 14px;
    border-bottom: 1px solid #f1f5f9;
    text-align: right;
    min-height: 44px;
  }
  table.data td:last-child{ border-bottom: none; }
  /* Column name, taken from the header row */
  table.data td[data-label]::before{
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-text-mute);
  }
  /* Empty-state and total rows span the card */
  table.data td[colspan]{
    display: block;
    text-align: center;
    font-weight: 600;
  }
  table.data td[colspan]::before{ content: none; }
  /* Action buttons get their own full-width strip at the card foot */
  table.data td.row-actions{
    justify-content: flex-end;
    gap: 10px;
    background: #fafbfc;
  }
  table.data td.row-actions::before{ content: none; }
  .row-actions{ justify-content: flex-end; }

  /* Also enforce tap size at narrow widths, not only on coarse-pointer
     devices — covers touch laptops and desktop-mode tablets. */
  .row-actions .icon-btn, .icon-btn{
    min-width: 44px;
    min-height: 44px;
    width: auto;
    height: auto;
  }
}

/* Apple/Android minimum touch target is 44px; these were 30px. */
@media (hover: none) and (pointer: coarse) {
  .row-actions .icon-btn,
  .icon-btn{
    min-width: 44px;
    min-height: 44px;
    width: auto;
    height: auto;
    padding: 8px;
    font-size: 1.05rem;
  }
  .sub-nav-tab{ padding: 12px 16px; }
  .btn, .btn-sm{ min-height: 44px; }
  /* Inputs at <16px make iOS Safari zoom the whole page on focus.
     NOTE: at specificity (0,0,1) this loses to every .form-row /
     .filters / .topbar-search rule in this file, so it never actually
     took effect. The rule that does the work is at the foot of
     theme-modern.css; this one is kept only as the harmless default. */
  input, select, textarea{ font-size: 16px; }
}

/* Sync status: this is the only signal that work reached the server,
   so it must be legible at arm's length on a phone in daylight. */
.sync-pill{
  font-size: .78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .sync-pill{
    font-size: .82rem;
    padding: 8px 14px;
  }
}

/* ============================================================
   v60 — Company picker (admin.zubairgrp.com front door)
   Internal screen, not marketing: group mark, company names,
   sign-in. Nothing else is exposed before authentication.
============================================================ */
.cp{
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  overflow-y: auto;
  background:
    radial-gradient(1100px 600px at 50% -10%, #17304f 0%, transparent 60%),
    linear-gradient(160deg, #0a1628 0%, #0d1d33 55%, #0a1628 100%);
  color: #e8eef7;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
/* Slow ambient wash so the screen doesn't feel like a dead form. */
.cp-glow{
  position: absolute;
  top: -30vh; left: 50%;
  width: 120vw; height: 90vh;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(243,146,0,.13), transparent 70%);
  animation: cpDrift 14s ease-in-out infinite alternate;
}
@keyframes cpDrift{
  from{ transform: translateX(-52%) translateY(-8px); }
  to  { transform: translateX(-48%) translateY(10px); }
}
@media (prefers-reduced-motion: reduce) { .cp-glow{ animation: none; } }

.cp-inner{
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cp-head{ text-align: center; margin-bottom: 34px; }
.cp-brand{
  margin: 0 0 10px;
  font-size: 2.05rem;
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.1;
  color: #ffffff;
}
.cp-brand em{ font-style: normal; color: #f39200; }
.cp-brand::after{
  content: '';
  display: block;
  width: 46px;
  height: 2px;
  margin: 13px auto 0;
  background: linear-gradient(90deg, transparent, #f39200, transparent);
}
.cp-eyebrow{
  margin: 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #7f95b3;
}

.cp-step{ width: 100%; }
.cp-title{
  margin: 0 0 20px;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  color: #cfdcec;
}

/* ---- company tiles ---- */
.cp-list{ display: flex; flex-direction: column; gap: 10px; }
.cp-tile{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  color: #eaf1fa;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 13px;
  font: inherit;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.cp-tile:hover, .cp-tile:focus-visible{
  background: rgba(255,255,255,.085);
  border-color: rgba(243,146,0,.55);
  transform: translateY(-1px);
  outline: none;
}
.cp-tile:active{ transform: translateY(0); }
.cp-mark{
  flex: 0 0 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(150deg, #f39200, #d97a00);
  color: #0a1628;
  font-weight: 800;
  font-size: .96rem;
}
.cp-name{ flex: 1; font-size: .97rem; font-weight: 600; }
.cp-arrow{ color: #6f86a5; font-size: 1.1rem; }
.cp-tile:hover .cp-arrow{ color: #f39200; }

.cp-loading, .cp-empty{
  padding: 22px;
  text-align: center;
  font-size: .88rem;
  color: #7f95b3;
}

/* ---- sign-in ---- */
.cp-back{
  background: none;
  border: none;
  color: #7f95b3;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  padding: 6px 0;
  margin-bottom: 6px;
}
.cp-back:hover{ color: #f39200; }

.cp-form{ display: flex; flex-direction: column; gap: 14px; }
.cp-field{ display: flex; flex-direction: column; gap: 6px; }
.cp-field span{
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #7f95b3;
}
.cp-field input{
  width: 100%;
  padding: 13px 15px;
  font-size: 16px;                 /* 16px stops iOS zooming the page on focus */
  color: #f2f6fb;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  transition: border-color .15s ease, background .15s ease;
}
.cp-field input:focus{
  outline: none;
  border-color: #f39200;
  background: rgba(255,255,255,.08);
}
.cp-submit{
  margin-top: 4px;
  min-height: 50px;
  padding: 14px;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #17120a;
  background: linear-gradient(150deg, #f9a51a, #e07f00);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.cp-submit:hover{ filter: brightness(1.06); }
.cp-submit:active{ transform: translateY(1px); }
.cp-submit:disabled{ opacity: .6; cursor: default; }

.cp-error{
  padding: 11px 14px;
  font-size: .85rem;
  color: #ffd9d9;
  background: rgba(190,40,40,.20);
  border: 1px solid rgba(255,120,120,.34);
  border-radius: 9px;
}

.cp-foot{
  margin-top: 40px;
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #4d617c;
}

@media (max-width: 420px) {
  .cp-brand{ font-size: 1.75rem; }
  .cp-head{ margin-bottom: 26px; }
}

/* ============================================================
   v62 — Bottom tab bar (phone)
   Staff work one-handed on site. Previously every action began
   by opening the hamburger menu; the four most-used sections are
   now one thumb tap away, with More opening the full sidebar.
   Desktop is unchanged — the sidebar is already visible there.

   Breakpoint dropped 900px -> 760px: at 900px an iPad in portrait
   (768–820px) got the bar AND lost the hamburger below, which is the
   phone treatment on a screen big enough for the real layout. 760px is
   the breakpoint the rest of the app already treats as "phone", so an
   iPad now keeps the topbar hamburger and the full sidebar drawer.
============================================================ */
.tabbar{ display: none; }

@media (max-width: 760px) {
  .tabbar{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--c-border);
    /* Clears the iPhone home indicator. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tab{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 7px 2px;
    border: none;
    background: none;
    font: inherit;
    color: #64748b;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .14s ease;
  }
  .tab-ic{ font-size: 1.16rem; line-height: 1; }
  .tab-tx{ font-size: .66rem; font-weight: 600; letter-spacing: .02em; }
  .tab.active{ color: var(--c-accent, #f39200); }
  .tab.active .tab-ic{ transform: translateY(-1px); }
  .tab:active{ background: rgba(0,0,0,.04); }

  /* Keep the last rows of content clear of the bar. */
  .admin-main{ padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* The hamburger is redundant now that More opens the sidebar. */
  .admin-topbar .sidebar-toggle{ display: none; }
}

/* The picker is a full-screen takeover — never show the bar behind it. */
.cp:not([hidden]) ~ * .tabbar{ display: none; }

/* ============================================================
   v68 — Payroll on one page
   Summary, charts and the time grid now share a single screen, so
   the grid has to work as a data-entry surface: sticky header, a
   frozen employee column, and rate inputs edited in place.
============================================================ */
.pay-charts{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;
}
.chart-box{height:230px;position:relative;min-width:0;overflow:hidden}
@media (max-width:900px) { .pay-charts{grid-template-columns:1fr} }

.grid-hint{font-size:.85rem;color:#64748b;margin:-4px 0 10px}

/* The week cannot fit a phone, so this box scrolls sideways — but the
   PAGE must not. max-width pins it to the column, and overscroll-behavior
   stops a swipe that runs off the end of the week from being handed to the
   page (which is what made the whole screen slide about on iOS). */
.time-grid-wrap{
  overflow:auto;max-height:70vh;border:1px solid #e2e8f0;border-radius:10px;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
table.time-grid{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem}
table.time-grid th,table.time-grid td{
  padding:7px 9px;border-bottom:1px solid #eef2f7;white-space:nowrap;background:#fff;
}
table.time-grid thead th{
  position:sticky;top:0;z-index:3;background:#f8fafc;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#475569;text-align:center;
  border-bottom:2px solid #e2e8f0;
}
table.time-grid thead th small{display:block;font-weight:500;opacity:.7}
table.time-grid th.is-today{background:#fff7ed;color:#9a3412}

/* Frozen first column so names stay visible while scrolling the week. */
table.time-grid .c-name{
  position:sticky;left:0;z-index:2;text-align:left;min-width:150px;
  box-shadow:1px 0 0 #e2e8f0;
}
table.time-grid thead .c-name{z-index:4}
table.time-grid .c-name small{display:block;font-weight:500;color:#64748b;font-size:.75rem}

table.time-grid .c-rate{width:124px}
table.time-grid .c-rate input{
  width:112px;padding:5px 7px;border:1px solid #e2e8f0;border-radius:6px;
  font-size:.86rem;text-align:right;font-variant-numeric:tabular-nums;background:#f8fafc;
}
/* Typed with a thumb on a phone or iPad: 44px tall, Apple's minimum, and
   padded for the 16px text the iOS zoom fix forces. Left alone on a desk
   machine — a 44px box there would add 10px to every row of the week and
   push employees off the payroll clerk's screen for no benefit. */
@media (max-width:1024px), (hover:none) and (pointer:coarse) {
  table.time-grid .c-rate input{min-height:44px;padding:8px 10px}
}
table.time-grid .c-rate input:focus{outline:none;border-color:#ea580c;background:#fff}

table.time-grid td.c-day{
  text-align:center;cursor:pointer;min-width:56px;transition:background .12s;
}
table.time-grid td.c-day.empty{color:#cbd5e1;font-weight:700}
table.time-grid td.c-day.empty:hover{background:#f1f5f9;color:#ea580c}
table.time-grid td.c-day.filled{background:#f0fdf4;font-weight:700;color:#166534}
table.time-grid td.c-day.filled:hover{background:#dcfce7}
table.time-grid td.c-day.has-ot{background:#fff7ed;color:#9a3412}
table.time-grid td.c-day.has-ot:hover{background:#ffedd5}
table.time-grid td.c-day .ot{
  display:inline-block;margin-left:3px;font-size:.72rem;color:#c2410c;font-weight:800;
}
/* v107: more than one entry that day (two sites) — say so on the cell. */
table.time-grid td.c-day .n{
  display:inline-block;margin-left:3px;font-size:.66rem;color:#0369a1;font-weight:800;vertical-align:top;
}
table.time-grid .c-num{text-align:right;font-variant-numeric:tabular-nums}
table.time-grid .c-num.ot{color:#c2410c;font-weight:700}
table.time-grid .c-num.pay{font-weight:800;color:#0f172a}
table.time-grid tfoot td{
  position:sticky;bottom:0;background:#f8fafc;font-weight:800;
  border-top:2px solid #cbd5e1;text-align:center;
}
table.time-grid tfoot .c-name{text-align:left;z-index:3}
table.time-grid .muted{color:#94a3b8}

/* On a phone the grid is a horizontal scroll — keep the tap targets big. */
@media (max-width:760px) {
  table.time-grid th,table.time-grid td{padding:10px 8px}
  /* A day cell is a button in practice; 44px square is the tap minimum. */
  table.time-grid td.c-day{min-width:48px;height:44px}
  table.time-grid .c-name{min-width:124px}
  /* The frozen name column already eats a third of the screen; give the
     rate box only what it needs so more of the week stays visible. */
  table.time-grid .c-rate{width:112px}
  table.time-grid .c-rate input{width:104px}
}

/* Say out loud that the grid scrolls. A fade over the right edge is not
   possible here without extra markup — every cell paints an opaque
   background over anything behind the table — and staff who have never
   used a spreadsheet do not read a cut-off column as "swipe me".
   Only where the week certainly does not fit: a phone or a tablet. */
@media (max-width:1024px), (hover:none) and (pointer:coarse) {
  .grid-hint::after{content:' Swipe the grid sideways for the rest of the week.'}
}

/* v69 — the "websites we watch" manager */
.src-intro{font-size:.9rem;color:#475569;line-height:1.5;margin:0 0 14px}
.src-empty{font-size:.9rem;color:#94a3b8;padding:14px;text-align:center}
.src-row{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:12px;margin-bottom:10px}
.src-main{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-bottom:8px}
.src-main input{width:100%;padding:9px 11px;border:1px solid #e2e8f0;border-radius:7px;font-size:.9rem;background:#fff}
.src-main input:focus{outline:none;border-color:#ea580c}
.src-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.src-meta select{padding:8px 10px;border:1px solid #e2e8f0;border-radius:7px;font-size:.85rem;background:#fff;flex:1 1 220px}
.src-on{display:flex;align-items:center;gap:6px;font-size:.85rem;color:#334155;white-space:nowrap}
.src-note{margin-top:8px;font-size:.82rem;color:#475569;background:#fff;border-left:3px solid #f97316;padding:7px 10px;border-radius:0 6px 6px 0}
@media (max-width:620px) { .src-main{grid-template-columns:1fr} }

/* v70 — session-expired banner. Fixed to the bottom so it cannot be missed,
   above the FAB (z-index 90) but below modals (100). */
.sess-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:#7f1d1d;color:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.25);
  animation:sessUp .22s ease-out;
}
@keyframes sessUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sess-banner-inner{
  display:flex;align-items:center;gap:14px;
  max-width:1100px;margin:0 auto;padding:13px 18px;
}
.sess-icon{font-size:1.3rem;flex:0 0 auto}
.sess-text{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.sess-text strong{font-size:.95rem}
.sess-text span{font-size:.85rem;color:#fecaca;line-height:1.4}
.sess-banner .btn-primary{background:#fff;color:#7f1d1d;border-color:#fff;flex:0 0 auto;font-weight:700}
.sess-banner .btn-primary:hover{background:#fee2e2}
.sess-x{
  background:none;border:none;color:#fecaca;font-size:1.4rem;line-height:1;
  cursor:pointer;padding:0 4px;flex:0 0 auto;
}
.sess-x:hover{color:#fff}
@media (max-width:640px) {
  .sess-banner-inner{flex-wrap:wrap;padding:12px 14px;gap:10px}
  .sess-text{flex:1 1 100%;order:2}
  .sess-banner .btn-primary{order:3;flex:1 1 auto}
}

/* v70 — tenders: show-closed toggle and the clear-closed action */
.closed-toggle{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  min-height:44px;font-size:.88rem;color:#334155;cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:500;
}
.btn.danger-ghost{color:#b91c1c;border-color:#fecaca}
.btn.danger-ghost:hover{background:#fef2f2;border-color:#f87171}

/* ============================================================
   v71 — Tender board: contain the sideways scroll
   Five lanes cannot fold into one column without ceasing to be a board,
   so the board scrolls — but inside itself, never taking the page with
   it. Same treatment as the payroll time grid above.
============================================================ */
.kanban{
  max-width:100%;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
/* ...and the page must not widen to fit it. .admin-main is the 1fr grid
   item of .view-admin, and a grid item's automatic minimum size is its
   CONTENT's min-content width — 1256px for a five-lane board. That made
   the whole admin app 1592px wide inside a 1280px window, so the board
   did not scroll, the page did. min-width:0 is the one declaration that
   lets a grid item shrink. theme-modern.css already does this below
   900px; nothing was doing it on a desktop or a landscape iPad. */
.admin-main{min-width:0}
/* A soft fade over the right edge says "there are more lanes". Safe here
   (unlike the time grid) because the board has no sticky column and the
   lane backgrounds sit inside the element being masked, not over it. */
@media (max-width:1024px), (hover:none) and (pointer:coarse) {
  .kanban{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
  }
}

/* ============================================================
   v71 — Quick Add must not float over the sign-in screen
   mountFAB() appends #zcFab (and #zcFabSheet) to <body>, i.e. after
   #companyPicker and #adminApp, so a sibling combinator reaches them.
   Hidden whenever the company picker is up or the admin app is not,
   which covers "signed out" and "looking at the public site" too.
   CSS only — the JS that mounts the button is untouched.
============================================================ */
#companyPicker:not([hidden]) ~ #zcFab,
#companyPicker:not([hidden]) ~ #zcFabSheet,
#adminApp[hidden] ~ #zcFab,
#adminApp[hidden] ~ #zcFabSheet{
  display:none !important;
}

/* ============================================================
   v107 cosmetic round (2026-09-03)
============================================================ */
/* Text that must never break mid-token: phone numbers, dates. */
.nw{ white-space: nowrap; }

/* Toasts sat on top of the + button; lift them above it. */
.toast{ bottom: 104px; max-width: min(420px, calc(100vw - 40px)); }
@media (max-width: 760px){
  /* Above the FAB (74px + 54px) and the tab bar, full width, never clipped. */
  .toast{
    left: 12px; right: 12px; bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    max-width: none; font-size: .86rem; line-height: 1.35;
  }
  /* The dashboard's two columns are one on a phone; a long alert line must
     not set the column width and push the cards past the screen edge. */
  .dash-grid{ grid-template-columns: minmax(0, 1fr); }
  .dash-grid > div, .data-card{ min-width: 0; max-width: 100%; }
  .compact-list li > div{ min-width: 0; }
}

/* Between phone and desktop the five fixed filter columns overflowed the card. */
@media (max-width: 1024px) and (min-width: 761px){
  .proj-filter-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proj-filter-row .proj-search{ grid-column: 1 / -1; }
}

/* Government-services filter bars used bare browser controls; dress them
   like every other filter on the site. */
#rjStatus, #rjAgency, #rjSearch, #bwAgency, #bwMonth, #bwStatus, #wsMonth, #wsOffice, #wsStatus,
#erStatus, #erSearch, #tkStatus, #tkSearch{
  min-height: 40px; padding: 8px 12px; border: 1px solid var(--c-border, #e5e7eb); border-radius: 10px;
  background: #fff; font: inherit; font-size: .9rem; color: inherit;
}
#rjSearch, #erSearch, #tkSearch{ min-width: 200px; }

/* ============================================================
   v110 — the projects ledger list
============================================================ */
.plv{background:#fff;border:1px solid #eef2f6;border-radius:14px;overflow:hidden;}
.plv-head, .plv-row{
  display:grid;align-items:center;gap:10px;
  grid-template-columns:4px minmax(190px,1.6fr) minmax(115px,.9fr) repeat(5, minmax(72px,86px)) 50px 36px;
  padding:0 12px 0 0;
}
.plv-head{
  background:#f8fafc;border-bottom:1px solid #eef2f6;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#64748b;min-height:38px;
}
.plv-row{
  --pc:#94a3b8;
  min-height:62px;padding-top:9px;padding-bottom:9px;cursor:pointer;
  border-bottom:1px solid #f1f5f9;transition:background .12s;
}
.plv-row:last-child{border-bottom:none;}
.plv-row:hover{background:#fbfcfe;}
/* The whole row wears a light wash of its project's color. */
@supports (background: color-mix(in srgb, red 8%, white)){
  .plv-row{background:color-mix(in srgb, var(--pc) 8%, #fff);}
  .plv-row:hover{background:color-mix(in srgb, var(--pc) 15%, #fff);}
  .plv-row{border-bottom-color:color-mix(in srgb, var(--pc) 18%, #fff);}
}
.plv-strip{align-self:stretch;background:var(--pc,#e2e8f0);}
.plv-strip.good{background:#22c55e;}
.plv-strip.warn{background:#f59e0b;}
.plv-strip.crit{background:#ef4444;}
.plv-main{min-width:0;}
.plv-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;}
.plv-name strong{font-size:.92rem;color:#0f172a;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.plv-name .health-pill{font-size:.6rem;padding:2px 7px;flex-shrink:0;}
.plv-meta{font-size:.74rem;color:#94a3b8;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.plv-barwrap{min-width:0;}
.plv-bar{height:6px;border-radius:4px;background:#eef2f6;overflow:hidden;}
.plv-fill{height:100%;border-radius:4px;background:#16a34a;}
.plv-fill.warn{background:#f59e0b;}
.plv-fill.over{background:#ef4444;}
.plv-barwrap small{display:block;font-size:.68rem;color:#94a3b8;margin-top:3px;}
.plv-barwrap .muted{color:#cbd5e1;}
.plv-num{text-align:right;}
.plv-money{font-size:.8rem;font-weight:600;color:#0f172a;font-variant-numeric:tabular-nums;white-space:nowrap;}
.plv-money.dim{color:#64748b;font-weight:500;}
.plv-money .zero{color:#cbd5e1;font-weight:500;}
.plv-money.plv-total{font-weight:700;}
.plv-money.bad{color:#dc2626;}
.plv-mrow{display:none;}
.plv-money.amber{color:#b45309;}
.plv-days{text-align:right;font-size:.78rem;font-weight:700;color:#475569;white-space:nowrap;}
.plv-days.soon{color:#b45309;}
.plv-days.late{color:#dc2626;}
.plv-more{
  width:32px;height:32px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;
  font-size:1.05rem;line-height:1;color:#475569;cursor:pointer;justify-self:end;
}
.plv-more:hover{background:#f1f5f9;}
#plvMenu{
  position:fixed;z-index:260;width:200px;background:#fff;border:1px solid #e5e7eb;
  border-radius:12px;box-shadow:0 16px 40px rgba(15,23,42,.16);padding:6px;
}
#plvMenu button{
  display:block;width:100%;text-align:left;padding:9px 12px;border:none;background:none;
  font:inherit;font-size:.86rem;font-weight:500;color:#0f172a;border-radius:8px;cursor:pointer;
}
#plvMenu button:hover{background:#f1f5f9;}
#plvMenu button.warn{color:#92400e;}
#plvMenu button.danger{color:#b91c1c;}
#plvMenu button.danger:hover{background:#fef2f2;}

/* Narrow: keep Total + Owed, fold the breakdown behind the row click. */
@media (max-width:899px){
  .plv-head, .plv-row{grid-template-columns:4px minmax(170px,1.6fr) minmax(110px,1fr) 104px 104px 40px;}
  .plv-head span:nth-child(4), .plv-row .plv-labour,
  .plv-head span:nth-child(5), .plv-row .plv-fuel,
  .plv-head span:nth-child(6), .plv-row .plv-mat,
  .plv-head span:nth-child(9), .plv-row .plv-days{display:none;}
}
/* Phone: two-line block per project, money summarised under the bar. */
@media (max-width:760px){
  .plv-head{display:none;}
  .plv-row{
    grid-template-columns:4px minmax(0,1fr) 40px;
    grid-template-areas:"strip main more" "strip bar more" "strip mrow more";
    row-gap:6px;padding-right:10px;
  }
  .plv-strip{grid-area:strip;}
  .plv-main{grid-area:main;}
  .plv-barwrap{grid-area:bar;}
  .plv-more{grid-area:more;align-self:start;margin-top:2px;}
  .plv-row .plv-money, .plv-row .plv-days{display:none;}
  .plv-mrow{display:block;grid-area:mrow;font-size:.78rem;font-weight:600;color:#334155;font-variant-numeric:tabular-nums;}
  .plv-mrow .plv-days{display:inline;}
  .plv-barwrap small{font-size:.72rem;color:#64748b;}
}

/* v111 — project identity dot (day view and anywhere a name needs its color) */
.zc-proj-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:7px;vertical-align:baseline;flex-shrink:0;
}

/* Keep positioned chart descendants contained even in collapsed details. */
details.zc-fold:not([open]) > .zc-fold-body{display:none;}