/* ==========================================================================\n   CBVL UI REDESIGN 2026.09\n   Visual-only layer. Keeps all existing IDs, JS hooks, RPCs and business rules.\n   ========================================================================== */
:root {
  --cbvl-ink: #14392d;
  --cbvl-ink-2: #245243;
  --cbvl-green: #197a4b;
  --cbvl-green-2: #0f653d;
  --cbvl-green-3: #0b5634;
  --cbvl-mint: #dff5e8;
  --cbvl-mint-2: #edf9f2;
  --cbvl-aqua: #ddf5ef;
  --cbvl-sky: #e8f8f3;
  --cbvl-cream: #fffdf8;
  --cbvl-gold: #b7791f;
  --cbvl-gold-soft: #fff5dd;
  --cbvl-red: #b63636;
  --cbvl-red-soft: #fff0f0;
  --cbvl-blue: #2f69b3;
  --cbvl-blue-soft: #edf5ff;
  --cbvl-purple: #6a56b8;
  --cbvl-purple-soft: #f2efff;
  --cbvl-border: #dbe9e1;
  --cbvl-shadow: 0 14px 38px rgba(18, 83, 56, .08);
  --cbvl-shadow-soft: 0 5px 18px rgba(18, 83, 56, .05);
  --bg: #f4faf6;
  --surface: #ffffff;
  --surface-soft: #f8fcfa;
  --text: #163128;
  --muted: #687c73;
  --border: var(--cbvl-border);
  --brand: var(--cbvl-green);
  --brand-dark: var(--cbvl-green-3);
  --brand-soft: var(--cbvl-mint);
  --shadow: var(--cbvl-shadow);
}

html { background:#f4faf6; }
body.cbvl-app {
  color:var(--cbvl-ink);
  background:
    radial-gradient(circle at 82% 3%, rgba(180,239,213,.25), transparent 24rem),
    linear-gradient(180deg,#f8fcfa 0,#f3f9f5 100%);
}

/* Top bar */
.cbvl-app .topbar {
  height:76px;
  padding:0 26px;
  border-bottom:1px solid rgba(25,122,75,.12);
  background:rgba(255,255,255,.93);
  box-shadow:0 2px 16px rgba(19,80,55,.045);
}
.cbvl-app .topbar-brand { gap:10px; }
.cbvl-app .topbar-brand-icon {
  display:grid; place-items:center; width:40px; height:40px;
  border-radius:13px; color:white; font-size:11px; font-weight:900;
  letter-spacing:.05em; background:linear-gradient(145deg,var(--cbvl-green),var(--cbvl-green-3));
  box-shadow:0 8px 20px rgba(17,107,63,.18);
}
.cbvl-app .topbar-brand strong{font-size:14px;letter-spacing:.025em}
.cbvl-app .topbar-brand span{font-size:11px;color:#75877f}
.cbvl-app .topbar-user { gap:14px; }
.cbvl-app .user-summary strong{font-size:13px}
.cbvl-app .button-secondary{
  border:1px solid #d6e6dd; background:#fff; color:var(--cbvl-ink-2);
  box-shadow:0 2px 8px rgba(29,86,61,.035);
}
.cbvl-app .button-secondary:hover{border-color:#b8d9c7;background:#f7fcf9}
.cbvl-app .button-primary{background:linear-gradient(135deg,var(--cbvl-green),var(--cbvl-green-2));box-shadow:0 8px 20px rgba(25,122,75,.16)}

/* Layout and Sidebar */
.cbvl-app .app-layout { grid-template-columns:256px minmax(0,1fr); min-height:calc(100vh - 76px); }
.cbvl-app .sidebar {
  position:sticky; top:76px; align-self:start; height:calc(100vh - 76px); overflow:auto;
  padding:18px 14px 24px;
  border-right:1px solid rgba(25,122,75,.10);
  background:linear-gradient(180deg,#f5fcf8 0%,#fbfefc 58%,#ecf9f1 100%);
  scrollbar-width:thin;
}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;padding:8px 10px 16px;margin-bottom:3px;
  border-bottom:1px solid rgba(25,122,75,.09);
}
.sidebar-brand img{width:48px;height:48px;object-fit:cover;border-radius:14px;box-shadow:0 5px 14px rgba(15,95,57,.12)}
.sidebar-brand div{display:grid;gap:1px}.sidebar-brand strong{font-size:13px;color:var(--cbvl-green-3)}.sidebar-brand span{font-size:10px;color:#70877c}
.nav-section-label{
  padding:18px 12px 7px;color:#2d7456;font-size:10px;font-weight:900;letter-spacing:.11em;
}
.cbvl-app .nav-item{
  position:relative;justify-content:flex-start;align-items:center;gap:10px;
  min-height:42px;margin:2px 0;padding:10px 10px 10px 42px;border-radius:12px;
  color:#28473b;font-size:13px;font-weight:670;transition:.18s ease;
}
.cbvl-app .nav-item::before{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;
  width:22px;height:22px;border-radius:7px;color:#167447;background:#e4f5eb;font-size:13px;font-weight:900;
}
.nav-item[href$="dashboard.html"]::before{content:"⌂"}
.nav-item[href$="operations.html"]::before{content:"◆"}
.nav-item[href$="document-history.html"]::before{content:"▤"}
.nav-item[href$="inventory.html"]::before{content:"◇"}
.nav-item[href$="stocktake.html"]::before{content:"✓"}
.nav-item[href$="cancel-reversal.html"]::before{content:"↶"}
.nav-item[href$="master-data.html"]::before{content:"◉"}
.nav-item[href$="cost-admin.html"]::before{content:"⚙"}
.nav-item[href$="inventory-flow-report.html"]::before{content:"▥"}
.nav-item[href$="capital-dss.html"]::before{content:"◔"}
.nav-item[href$="replenishment-dss.html"]::before{content:"◎"}
.nav-item[href$="financial-dss.html"]::before{content:"◫"}
.cbvl-app .nav-item:hover{background:#eaf8f0;transform:translateX(2px)}
.cbvl-app .nav-item.active{
  color:#0f623b;background:linear-gradient(90deg,#d9f2e4,#eaf8f0);box-shadow:inset 3px 0 0 #1b8451;
}
.cbvl-app .nav-item.active::before{color:white;background:linear-gradient(145deg,#268d5a,#126a40);box-shadow:0 5px 10px rgba(18,106,64,.18)}
.nav-label{flex:1}.nav-badge{margin-left:auto;padding:4px 7px;border-radius:999px;color:#176b45!important;background:#d9f1e4;font-size:9px!important;font-weight:800!important}.nav-chevron{margin-left:auto;color:#9aada4!important;font-size:15px!important}
.sidebar-signature{margin:22px 8px 4px;padding:18px 14px;border-radius:18px;color:#2a7657;background:linear-gradient(145deg,#e3f8eb,#eefaf6);border:1px solid #d7eee1;font-size:11px;font-style:italic;line-height:1.55;display:grid;gap:2px}

/* Main content */
.cbvl-app .content{width:min(1560px,100%);padding:26px 30px 44px}
.cbvl-app .page-heading{
  position:relative;overflow:hidden;min-height:150px;margin-bottom:18px;padding:26px 30px;
  border:1px solid #d8eee1;border-radius:22px;
  background:
    radial-gradient(circle at 79% 20%,rgba(255,255,255,.86),transparent 19%),
    linear-gradient(120deg,#e8faf0 0%,#def6ec 48%,#e8f8f3 100%);
  box-shadow:var(--cbvl-shadow-soft);
}
.cbvl-app .page-heading::before,.cbvl-app .page-heading::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.cbvl-app .page-heading::before{width:210px;height:210px;right:12%;top:-110px;background:rgba(125,207,163,.15)}
.cbvl-app .page-heading::after{width:140px;height:140px;right:3%;bottom:-70px;background:rgba(83,181,137,.12)}
.cbvl-app .page-heading>div{position:relative;z-index:1}
.cbvl-app .page-heading h1{font-size:clamp(28px,3vw,42px);line-height:1.05;letter-spacing:-.025em;color:#11392b}
.cbvl-app .page-heading p:last-child{max-width:820px;color:#496d5f;line-height:1.6}
.cbvl-app .eyebrow{color:#147447;font-size:10px;letter-spacing:.11em}
.cbvl-app .heading-actions{position:relative;z-index:2;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Cards */
.cbvl-app .metric-grid{gap:12px}
.cbvl-app .metric-card,.cbvl-app .panel{
  border:1px solid #dceae2;border-radius:18px;background:rgba(255,255,255,.96);
  box-shadow:0 7px 22px rgba(22,84,57,.045);
}
.cbvl-app .metric-card{position:relative;overflow:hidden;min-height:112px;padding:18px 18px 16px 20px;transition:.18s ease}
.cbvl-app .metric-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(22,84,57,.08)}
.cbvl-app .metric-card::after{content:"";position:absolute;width:74px;height:74px;border-radius:50%;right:-26px;top:-26px;background:rgba(56,173,112,.06)}
.cbvl-app .metric-card span{color:#60786d;font-size:11px;text-transform:none}.cbvl-app .metric-card strong{font-size:27px;color:#112e25}.cbvl-app .metric-card small{font-size:11px;color:#84958d}
.cbvl-app .metric-alert-card{background:linear-gradient(145deg,#fff,#fff7f7);border-color:#f0dede}.cbvl-app .metric-alert-card strong{color:#b03636}
.cbvl-app .panel{padding:20px;margin-bottom:16px}
.cbvl-app .panel-title{align-items:center;gap:14px}.cbvl-app .panel h2,.cbvl-app .dashboard-section-title h2{color:#17392e;letter-spacing:-.01em}

/* Tables */
.cbvl-app .table-wrap{border:1px solid #e0ebe5;border-radius:14px;overflow:auto;background:#fff}
.cbvl-app .data-table{width:100%;border-collapse:separate;border-spacing:0}
.cbvl-app .data-table th{position:sticky;top:0;z-index:1;padding:11px 12px;color:#536f63;background:#f3f9f5;border-bottom:1px solid #dfeae4;font-size:10.5px;font-weight:850;white-space:nowrap}
.cbvl-app .data-table td{padding:11px 12px;border-bottom:1px solid #eef3f0;font-size:12px;color:#334d43}
.cbvl-app .data-table tbody tr:hover td{background:#f7fcf9}.cbvl-app .data-table tbody tr:last-child td{border-bottom:0}

/* Inputs and tabs */
.cbvl-app input,.cbvl-app select,.cbvl-app textarea{border-color:#d6e5dd;border-radius:12px;background:#fff;transition:.15s ease}
.cbvl-app input:focus,.cbvl-app select:focus,.cbvl-app textarea:focus{border-color:#4c9f75;box-shadow:0 0 0 4px rgba(45,148,91,.10)}
.cbvl-app .master-tab,.cbvl-app .receipt-tab{border-radius:11px!important}.cbvl-app .master-tab.active,.cbvl-app .receipt-tab.active{background:#def3e7!important;color:#146740!important;border-color:#bfe2ce!important}

/* Status / chips */
.cbvl-app .status-badge{padding:7px 10px;font-size:10px}.cbvl-app .status-ok{color:#146b43;background:#ddf3e7}.cbvl-app .status-loading{color:#84621b;background:#fff4d5}.cbvl-app .status-error{color:#a63333;background:#ffeded}
.cbvl-app .chip{border-color:#c9e4d5;background:#eaf8f0;color:#1c6744}

/* Dashboard */
.page-dashboard .dashboard-kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.page-dashboard .dashboard-risk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.page-dashboard .dashboard-section{margin-bottom:18px}
.page-dashboard .dashboard-section-title{padding:4px 2px 10px}
.page-dashboard .action-center-panel{background:linear-gradient(180deg,#fff,#fbfefc)}
.page-dashboard .action-list>*{border-radius:14px!important}
.page-dashboard .dashboard-two-column{gap:14px}
.page-dashboard .dashboard-main-grid>.panel:first-child{background:linear-gradient(180deg,#fff,#fbfefa)}

/* Operations / module cards */
.page-operations .module-grid,.page-dashboard .module-grid{gap:12px}
.cbvl-app .module-card{border-color:#dceae2;border-radius:16px;background:linear-gradient(145deg,#fff,#f7fcf9);transition:.18s ease}
.cbvl-app .module-card:hover{transform:translateY(-2px);border-color:#bcdcca;box-shadow:0 12px 26px rgba(20,91,59,.075)}
.cbvl-app .module-card h3{color:#175b3d}.cbvl-app .module-card p{color:#6d8178}

/* Inventory */
.page-inventory .inventory-toolbar{background:#fbfefc}.page-inventory .inventory-tabs{padding:5px;border:1px solid #dceae2;border-radius:14px;background:#f2f9f5;margin-bottom:14px}
.page-inventory .inventory-section .panel{margin-bottom:14px}

/* DSS pages */
.page-capital-dss .page-heading,.page-replenishment-dss .page-heading,.page-financial-dss .page-heading{background:linear-gradient(120deg,#e8faf0,#dff6eb 50%,#edf9f4)}
.page-replenishment-dss .v2-note,.page-financial-dss .v3-note{border-radius:14px!important}
.page-financial-dss .v3-grid,.page-replenishment-dss .v2-two{gap:12px}

/* Finance report */
.page-inventory-flow-report .panel,.page-cost-admin .panel{background:linear-gradient(180deg,#fff,#fbfefc)}

/* Login */
body.cbvl-login{background:linear-gradient(135deg,#ecfaf3 0,#e4f8ef 45%,#f8fcfa 100%)}
.cbvl-login .auth-shell{border-color:#d4e8dc;border-radius:28px;box-shadow:0 28px 70px rgba(20,83,55,.13)}
.cbvl-login .brand-panel{background:linear-gradient(150deg,#176a42,#0d5735);align-items:center}.login-brand-image{width:150px;height:150px;border-radius:30px;object-fit:cover;box-shadow:0 16px 36px rgba(0,0,0,.18)}

.ui-build-mark{position:fixed;right:12px;bottom:8px;z-index:2;font-size:8px;letter-spacing:.08em;color:#8da098;opacity:.45;pointer-events:none}

@media(max-width:1180px){
  .cbvl-app .app-layout{grid-template-columns:220px minmax(0,1fr)}
  .page-dashboard .dashboard-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cbvl-app .content{padding:22px}
}
@media(max-width:960px){
  .cbvl-app .app-layout{grid-template-columns:1fr}.cbvl-app .sidebar{display:none}.cbvl-app .content{padding:18px}
  .page-dashboard .dashboard-kpi-grid,.page-dashboard .dashboard-risk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cbvl-app .page-heading{min-height:auto;padding:22px}
}
@media(max-width:620px){
  .page-dashboard .dashboard-kpi-grid,.page-dashboard .dashboard-risk-grid{grid-template-columns:1fr}
  .cbvl-app .topbar{padding:0 12px}.cbvl-app .topbar-brand span{display:none}.cbvl-app .page-heading h1{font-size:28px}
}

.brand-principles{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 20px}.brand-principles span{padding:8px 11px;border:1px solid #d7eade;border-radius:999px;background:#fff;color:#376252;font-size:11px;font-weight:700;box-shadow:0 4px 12px rgba(22,84,57,.035)}


/* ==========================================================================
   CBVL UI REDESIGN V2 REFINE — 2026.09.16
   Fixes:
   1) Sidebar readability: larger, darker, stronger hierarchy.
   2) Operations page: clean hero / no oversized brand-image effect.
   ========================================================================== */

/* Sidebar — readability refinement */
.cbvl-app .app-layout{
  grid-template-columns:272px minmax(0,1fr);
}

.cbvl-app .sidebar{
  padding:18px 16px 28px;
}

.sidebar-brand{
  gap:12px;
  padding:8px 10px 17px;
}

.sidebar-brand img{
  width:50px;
  height:50px;
  object-fit:cover;
  border-radius:14px;
}

.sidebar-brand strong{
  font-size:14.5px;
  font-weight:850;
  color:#0e5636;
  letter-spacing:.01em;
}

.sidebar-brand span{
  font-size:11.5px;
  font-weight:560;
  color:#49695b;
}

.nav-section-label{
  padding:20px 12px 8px;
  color:#246c4e;
  font-size:11.5px;
  font-weight:900;
  letter-spacing:.095em;
}

.cbvl-app .nav-item{
  min-height:46px;
  margin:3px 0;
  padding:11px 11px 11px 44px;
  border-radius:13px;
  color:#173e31;
  font-size:14.25px;
  font-weight:700;
  line-height:1.28;
}

.cbvl-app .nav-item::before{
  left:12px;
  width:24px;
  height:24px;
  border-radius:8px;
  font-size:14px;
  color:#146e44;
  background:#e0f4e8;
}

.cbvl-app .nav-item:hover{
  color:#0d5b38;
  background:#e6f6ed;
}

.cbvl-app .nav-item.active{
  color:#0b5b37;
  font-weight:800;
  background:linear-gradient(90deg,#d5f1e1,#e8f7ee);
  box-shadow:inset 4px 0 0 #1b8451;
}

.nav-badge{
  padding:4px 8px;
  font-size:10px!important;
  font-weight:850!important;
  color:#105f3b!important;
  background:#d7f0e2;
}

.nav-chevron{
  color:#658076!important;
  font-size:16px!important;
}

.sidebar-signature{
  color:#246b4d;
  font-size:12px;
  font-weight:560;
}

/* Operations — keep the first screen calm and task-focused */
.page-operations .page-heading{
  min-height:128px;
  padding:24px 28px;
  background:
    radial-gradient(circle at 92% 12%,rgba(99,191,145,.12),transparent 12rem),
    linear-gradient(120deg,#eefaf3 0%,#e4f7ed 55%,#f5fbf7 100%);
}

.page-operations .page-heading::before{
  width:150px;
  height:150px;
  right:11%;
  top:-95px;
  background:rgba(77,169,124,.09);
}

.page-operations .page-heading::after{
  width:90px;
  height:90px;
  right:3%;
  bottom:-52px;
  background:rgba(77,169,124,.07);
}

.page-operations .page-heading h1{
  font-size:clamp(30px,2.7vw,39px);
}

.page-operations .page-heading p:last-child{
  color:#3e6655;
  font-size:14px;
  max-width:760px;
}

.page-operations .fast-inbound{
  position:relative;
  z-index:1;
}

.page-operations .fast-mini-card{
  background:#ffffff;
  border-color:#d9e8e0;
  box-shadow:0 5px 16px rgba(22,84,57,.035);
}

.page-operations .three-doc-grid{
  gap:14px;
}

.page-operations .three-doc-card{
  min-height:162px;
  border-color:#d9e8e0;
  box-shadow:0 6px 18px rgba(22,84,57,.045);
}

.page-operations .three-doc-card p{
  color:#4f6b5f;
}

.page-operations .fast-rule-panel{
  background:linear-gradient(180deg,#fff,#fbfefc);
}

/* Make secondary text easier to read globally without becoming heavy */
.cbvl-app .subtle,
.cbvl-app .dashboard-help{
  color:#536d61;
}

@media(max-width:1180px){
  .cbvl-app .app-layout{
    grid-template-columns:238px minmax(0,1fr);
  }
  .cbvl-app .nav-item{
    font-size:13.75px;
  }
}

@media(max-width:960px){
  .cbvl-app .app-layout{
    grid-template-columns:1fr;
  }
}