/* ======================================================================
   CEO OFFICE WORKSPACE — UI V3 FULL REVAMP
   Structural visual system. Loaded after legacy and V3 compatibility CSS.
   ====================================================================== */
:root{
  --r3-nav:#1F2A36;
  --r3-nav-2:#273543;
  --r3-nav-line:rgba(255,255,255,.085);
  --r3-canvas:#EFECE7;
  --r3-surface:#F8F6F2;
  --r3-surface-2:#F3F0EB;
  --r3-surface-3:#EAE5DE;
  --r3-ink:#24384C;
  --r3-text:#465A6D;
  --r3-muted:#7C8995;
  --r3-line:#D7DDD9;
  --r3-line-2:#C9D2D0;
  --r3-accent:#6F8F98;
  --r3-accent-deep:#4E707D;
  --r3-accent-soft:#E1EBED;
  --r3-green:#587765;
  --r3-green-bg:#E7F0E9;
  --r3-amber:#8A6F4E;
  --r3-amber-bg:#F2EBE0;
  --r3-red:#8D5B5B;
  --r3-red-bg:#F3E7E6;
  --r3-blue:#567788;
  --r3-blue-bg:#E5EDF1;
  --r3-radius-xs:7px;
  --r3-radius-sm:10px;
  --r3-radius-md:14px;
  --r3-radius-lg:18px;
  --r3-shadow-sm:0 1px 1px rgba(31,42,54,.025),0 5px 16px rgba(31,42,54,.035);
  --r3-shadow:0 12px 32px rgba(31,42,54,.07);
  --r3-shadow-lg:0 24px 64px rgba(31,42,54,.17);
  --r3-sidebar:248px;
  --r3-sidebar-collapsed:70px;
  --r3-page:1440px;
}

html,body{background:var(--r3-canvas)!important;color:var(--r3-ink)!important}
body{font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif!important;font-size:14px!important;letter-spacing:-.01em!important}
#app{background:var(--r3-canvas)!important}
#moduleBackdrop{background:var(--r3-canvas)!important}

/* ───────────────────────────── APP SHELL ───────────────────────────── */
#sidebar{
  --sidebar-expanded:var(--r3-sidebar)!important;
  --sidebar-collapsed:var(--r3-sidebar-collapsed)!important;
  width:var(--r3-sidebar-collapsed)!important;
  background:var(--r3-nav)!important;
  border:0!important;
  border-right:1px solid rgba(0,0,0,.08)!important;
  box-shadow:10px 0 30px rgba(31,42,54,.06)!important;
  padding:14px 11px!important;
  color:#D8E1E7!important;
}
#sidebar.expanded{width:var(--r3-sidebar)!important}
#app.sidebar-expanded #main{margin-left:var(--r3-sidebar)!important}
#main{margin-left:var(--r3-sidebar-collapsed)!important;background:var(--r3-canvas)!important;transition:margin-left .24s cubic-bezier(.22,1,.36,1)!important}

#sidebar .brand{
  min-height:67px!important;
  padding:7px 7px 14px!important;
  margin-bottom:9px!important;
  border-bottom:1px solid var(--r3-nav-line)!important;
  display:flex!important;align-items:center!important;gap:11px!important;
}
#sidebar .brandMark{
  width:38px!important;height:38px!important;min-width:38px!important;
  display:grid!important;place-items:center!important;
  background:#F0EDE7!important;color:var(--r3-nav)!important;
  border-radius:11px!important;font-size:18px!important;font-weight:900!important;
  box-shadow:0 4px 12px rgba(0,0,0,.14)!important;
}
#sidebar .brandText{display:none!important;color:#F4F5F3!important;line-height:1.05!important;min-width:0!important}
#sidebar.expanded .brandText{display:flex!important;flex-direction:column!important;gap:4px!important}
#sidebar .brandText b{font-size:14px!important;font-weight:760!important;letter-spacing:-.02em!important}
#sidebar .brandText small{font-size:9px!important;color:#91A1AE!important;font-weight:650!important;text-transform:uppercase!important;letter-spacing:.09em!important}
#sidebarToggle{
  margin-left:auto!important;width:30px!important;height:30px!important;
  border:1px solid var(--r3-nav-line)!important;background:rgba(255,255,255,.035)!important;
  color:#9FB0BC!important;border-radius:8px!important;
}
#sidebarToggle:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}

#navList{padding:1px 1px 12px!important;overflow-y:auto!important;scrollbar-width:none!important}
#navList::-webkit-scrollbar{display:none!important}
#navList .navGroup{margin:0 0 15px!important;padding:0!important;border:0!important}
#navList .navSection{
  display:none!important;padding:0 10px 7px!important;
  color:#728492!important;font-size:9px!important;font-weight:800!important;
  text-transform:uppercase!important;letter-spacing:.11em!important;
}
#sidebar.expanded #navList .navSection{display:block!important}
#navList .navGroupItems{gap:3px!important}
#navList .modItem{
  min-height:42px!important;padding:0 11px!important;margin:0!important;
  border:1px solid transparent!important;border-radius:10px!important;
  color:#AEBBC5!important;background:transparent!important;
  font-size:12px!important;font-weight:690!important;letter-spacing:-.005em!important;
  gap:10px!important;overflow:visible!important;box-shadow:none!important;
}
#navList .modItem svg{width:17px!important;height:17px!important;stroke:currentColor!important;color:#8294A2!important}
#navList .modItem:hover{background:rgba(255,255,255,.055)!important;color:#F5F7F7!important;border-color:rgba(255,255,255,.035)!important}
#navList .modItem:hover svg{color:#C8D2D8!important}
#navList .modItem.on{
  background:#F0EDE7!important;color:var(--r3-nav)!important;
  border-color:#F0EDE7!important;box-shadow:0 6px 18px rgba(0,0,0,.16)!important;
}
#navList .modItem.on svg{color:var(--r3-nav)!important}
#navList .modItem.on::before{display:none!important}
#sidebar:not(.expanded) #navList .modItem{width:46px!important;height:44px!important;padding:0!important;justify-content:center!important;margin:0 auto!important}
#sidebar:not(.expanded) #navList .modItem .modLabel{display:none!important}
#sidebar.expanded #navList .modItem .modLabel{display:block!important;opacity:1!important;visibility:visible!important;white-space:nowrap!important}
#sidebar:not(.expanded) #navList .navGroup{margin-bottom:6px!important;padding-top:0!important;border:0!important}

#sidebar .sbBottom{border-top:1px solid var(--r3-nav-line)!important;padding-top:12px!important}
#sidebar #gsBtn{
  min-height:38px!important;border:1px solid var(--r3-nav-line)!important;
  background:rgba(255,255,255,.035)!important;color:#AAB8C3!important;border-radius:10px!important;
  padding:0 10px!important;font-size:10.5px!important;
}
#sidebar #gsBtn:hover{background:rgba(255,255,255,.075)!important;color:#fff!important}
#sidebar .gsKbd{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.08)!important;color:#8294A2!important;border-radius:5px!important;font-size:8px!important}
#sidebar .sbUser{margin-top:9px!important;padding:9px 7px!important;border-radius:11px!important;background:rgba(255,255,255,.025)!important;border:1px solid rgba(255,255,255,.035)!important}
#sidebar .sbUserInfo{min-width:0!important}
#sidebar .sbUser .nm{color:#E9EEF0!important;font-size:10.5px!important;font-weight:750!important}
#sidebar .sbUser .role{color:#7F929F!important;font-size:8.5px!important;text-transform:uppercase!important;letter-spacing:.06em!important}
#sidebar .sbLogoutBtn{color:#8EA0AC!important;border-radius:8px!important}
#sidebar .sbLogoutBtn:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
#sidebar .sbCredit{display:none!important}

/* ───────────────────────────── PAGE CANVAS ───────────────────────────── */
.modFrame{background:var(--r3-canvas)!important;min-height:100vh!important}
#documents-root .dc-wrap,#tenders-root .tn-wrap,#fleet-root .fl-wrap,#library-root .lib-wrap,#wj-root .wj-wrap,#directorclaim-root .dcl-wrap,#admin-root .adm-wrap,#settings-root .set-wrap,#vendors-root .vm-wrap,
#documents-root>.dc-wrap,#admin-root>.adm-wrap{
  max-width:var(--r3-page)!important;margin:0 auto!important;padding:32px 38px 56px!important;
}

/* Most modules use different header class names; normalize all known heads. */
#documents-root .dc-head,#tenders-root .tn-head,#fleet-root .fl-dashboard-head,#fleet-root .fl-head,#library-root .lib-head,#wj-root .wj-head,#directorclaim-root .dcl-head,#admin-root .adm-head,#vendors-root .vm-head,#settings-root .set-head,.ax-module-head{
  margin:0 0 24px!important;padding:0!important;min-height:58px!important;
  display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:18px!important;
  border:0!important;background:transparent!important;
}
#documents-root .dc-title,#tenders-root .tn-title,#fleet-root .fl-dashboard-title,#fleet-root .fl-title,#library-root .lib-title,#wj-root .wj-title,#directorclaim-root .dcl-title,#admin-root .adm-title,#vendors-root .vm-title,#settings-root .set-title,
#documents-root .dc-head h2,#tenders-root .tn-head h2,#fleet-root h2,#library-root h2,#wj-root h2,#directorclaim-root h2,#admin-root h2,#vendors-root h2,#settings-root h2,.ax-module-head h1,.ax-module-head h2{
  color:var(--r3-ink)!important;font-size:28px!important;line-height:1.08!important;font-weight:740!important;letter-spacing:-.045em!important;
}
#documents-root .dc-sub,#tenders-root .tn-sub,#fleet-root .fl-sub,#library-root .lib-sub,#wj-root .wj-sub,#directorclaim-root .dcl-sub,#admin-root .adm-sub,#vendors-root .vm-sub,#settings-root .set-sub,
#documents-root .dc-head p,#tenders-root .tn-head p,#fleet-root p,#library-root .lib-head p,#wj-root .wj-head p,#directorclaim-root .dcl-head p,#admin-root .adm-head p,.ax-module-head p{
  color:var(--r3-muted)!important;font-size:12.5px!important;line-height:1.5!important;margin-top:6px!important;font-weight:480!important;
}

/* ───────────────────────────── COMPONENT SYSTEM ───────────────────────────── */
.card,.panel,.plate,.surface,
#documents-root .dc-card,#tenders-root .tn-card,#fleet-root .fl-card,#library-root .lib-card,#wj-root .wj-card,#directorclaim-root .dcl-card,#admin-root .adm-card,#settings-root .set-card,#vendors-root .vm-card,
#tenders-root .tn-panel,#admin-root .adm-panel{
  background:var(--r3-surface)!important;border:1px solid var(--r3-line)!important;border-radius:var(--r3-radius-md)!important;box-shadow:var(--r3-shadow-sm)!important;
}

/* buttons */
button,.btn,.dc-btn,.tn-btn,.fl-btn,.lib-btn,.wj-btn,.dcl-btn,.vm-btn,.set-btn,.adm-btn,.adm-act-btn{
  font-family:inherit!important;border-radius:9px!important;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease!important;transform:none!important;
}
.btn.primary,.primary-btn,.dc-btn-primary,.tn-btn-primary,.fl-btn-primary,.lib-btn-primary,.wj-btn-primary,.dcl-btn-primary,.vm-btn-primary,
#admin-root .adm-add-user-btn,#admin-root .adm-primary,#tenders-root .tn-primary{
  background:var(--r3-nav)!important;color:#F8F6F2!important;border:1px solid var(--r3-nav)!important;box-shadow:0 5px 14px rgba(31,42,54,.12)!important;
}
.btn.primary:hover,.primary-btn:hover,.dc-btn-primary:hover,.tn-btn-primary:hover,.fl-btn-primary:hover,.lib-btn-primary:hover,.wj-btn-primary:hover,.dcl-btn-primary:hover,.vm-btn-primary:hover,#admin-root .adm-add-user-btn:hover{background:#2A3947!important;border-color:#2A3947!important;filter:none!important}
.btn:not(.primary),.dc-btn-ghost,.tn-btn-ghost,.fl-btn-ghost,.lib-btn-ghost,.wj-btn-ghost,.dcl-btn-ghost,.vm-btn-ghost{
  background:var(--r3-surface)!important;color:var(--r3-ink)!important;border:1px solid var(--r3-line-2)!important;box-shadow:none!important;
}
.btn:not(.primary):hover,.dc-btn-ghost:hover,.tn-btn-ghost:hover,.fl-btn-ghost:hover,.lib-btn-ghost:hover,.wj-btn-ghost:hover,.dcl-btn-ghost:hover,.vm-btn-ghost:hover{background:var(--r3-surface-2)!important;border-color:#B9C5C3!important}

/* inputs */
input:not([type=checkbox]):not([type=radio]),select,textarea,.dc-input,.tn-input,.fl-input,.lib-input,.wj-input,.dcl-input,.vm-input,.adm-input{
  background:var(--r3-surface)!important;color:var(--r3-ink)!important;border:1px solid var(--r3-line-2)!important;border-radius:9px!important;box-shadow:0 1px 0 rgba(31,42,54,.02)!important;font-size:12px!important;
}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:var(--r3-accent)!important;box-shadow:0 0 0 3px rgba(111,143,152,.12)!important;outline:0!important}

/* tab systems become light underline navigation */
.tabs,.segmented,.filter-tabs,#admin-root .adm-tabs,#documents-root .dc-tabs,#tenders-root .tn-tabs,#fleet-root .fl-tabs,#library-root .lib-tabs{
  background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;
}
#admin-root .adm-tab,#documents-root .dc-tab,#tenders-root .tn-tab,#fleet-root .fl-tab,#library-root .lib-tab{
  color:var(--r3-muted)!important;background:transparent!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;font-weight:700!important;
}
#admin-root .adm-tab.on,#documents-root .dc-tab.on,#tenders-root .tn-tab.on,#fleet-root .fl-tab.on,#library-root .lib-tab.on{
  color:var(--r3-ink)!important;border-bottom-color:var(--r3-ink)!important;background:transparent!important;box-shadow:none!important;
}

/* tables: directory-like, less boxed */
.vm-table-shell,#admin-root .adm-table-shell,#documents-root .dc-table-wrap,#tenders-root .tn-table-wrap,#directorclaim-root .dcl-table-wrap,#fleet-root .fl-table-wrap,#library-root .lib-table-wrap{
  background:var(--r3-surface)!important;border:1px solid var(--r3-line)!important;border-radius:14px!important;box-shadow:var(--r3-shadow-sm)!important;overflow:hidden!important;
}
table{color:var(--r3-text)!important}
thead th,.vm-table th,#admin-root table th,#documents-root table th,#tenders-root table th,#directorclaim-root table th,#fleet-root table th,#library-root table th{
  background:var(--r3-surface-2)!important;color:#6F7D87!important;border:0!important;border-bottom:1px solid var(--r3-line)!important;font-size:9.5px!important;font-weight:800!important;letter-spacing:.075em!important;text-transform:uppercase!important;padding-top:11px!important;padding-bottom:11px!important;
}
tbody td,.vm-table td,#admin-root table td,#documents-root table td,#tenders-root table td,#directorclaim-root table td,#fleet-root table td,#library-root table td{
  background:var(--r3-surface)!important;border:0!important;border-bottom:1px solid #E5E7E3!important;color:var(--r3-text)!important;
}
tbody tr:last-child td{border-bottom:0!important}
tbody tr:hover td{background:#F4F3EF!important}

/* statuses */
.status,.badge,.pill,.dc-pill,.tn-pill,.fl-pill,.lib-pill,.wj-pill,.dcl-pill,.adm-status-pill,.adm-access-badge{
  border-radius:999px!important;box-shadow:none!important;border:1px solid transparent!important;font-weight:750!important;
}
[class*="approved"],[class*="success"],[class*="active"]{--r3-status-fg:var(--r3-green);--r3-status-bg:var(--r3-green-bg)}
[class*="pending"],[class*="ongoing"]{--r3-status-fg:var(--r3-amber);--r3-status-bg:var(--r3-amber-bg)}
[class*="reject"],[class*="danger"],[class*="terminated"],[class*="unsuccess"]{--r3-status-fg:var(--r3-red);--r3-status-bg:var(--r3-red-bg)}

/* stats / KPI blocks */
#tenders-root .tn-stat,#documents-root .dc-stat,#fleet-root .fl-stat,#library-root .lib-stat,#directorclaim-root .dcl-stat,.stat-card,.metric-card{
  background:var(--r3-surface)!important;border:1px solid var(--r3-line)!important;border-radius:13px!important;box-shadow:none!important;padding:16px!important;
}

/* dialogs and drawers */
.modal,.modal-card,.dc-modal,.tn-modal,.fl-modal,.lib-modal,.wj-modal,.dcl-modal,.vm-modal,.adm-user-manager-panel,.adm-drawer,.drawer,
body > .dc-modal-ov > div,body > .tn-modal-ov > div{
  background:var(--r3-surface)!important;border:1px solid var(--r3-line)!important;border-radius:18px!important;box-shadow:var(--r3-shadow-lg)!important;
}
.modal-overlay,.dc-modal-ov,.tn-modal-ov,.fl-modal-ov,.lib-modal-ov,.wj-modal-ov,.dcl-modal-ov,.adm-user-manager-overlay,.drawer-overlay{
  background:rgba(26,35,44,.42)!important;backdrop-filter:blur(4px)!important;
}

/* ───────────────────────────── MANAGE ACCESS ───────────────────────────── */
#admin-root .adm-wrap{max-width:1380px!important}
#admin-root .adm-head{margin-bottom:18px!important}
#admin-root .adm-head-actions-clean{gap:8px!important}
#admin-root .adm-access-table-clean{table-layout:fixed!important}
#admin-root .adm-access-table-clean thead th{height:40px!important;padding:0 14px!important}
#admin-root .adm-access-table-clean tbody td{height:64px!important;padding:10px 14px!important}
#admin-root .adm-access-table-clean .adm-user-name{font-size:12px!important;line-height:1.25!important;font-weight:780!important;color:var(--r3-ink)!important}
#admin-root .adm-access-table-clean .adm-user-email{font-size:9.8px!important;color:#83909A!important;margin-top:2px!important}
#admin-root .adm-directory-role{background:var(--r3-surface-3)!important;color:#607180!important;border:0!important;height:19px!important;font-size:8px!important;padding:0 6px!important}
#admin-root .adm-directory-value{font-size:11px!important;color:var(--r3-text)!important;font-weight:700!important}
#admin-root .adm-access-summary-main{height:28px!important;padding:0 9px!important;background:var(--r3-accent-soft)!important;border:1px solid #C9DADD!important;color:var(--r3-accent-deep)!important;font-size:9.5px!important}
#admin-root .adm-access-badge{height:22px!important;padding:0 7px!important;background:var(--r3-surface-3)!important;color:#647581!important;font-size:8px!important}
#admin-root .adm-manage-user-btn{height:32px!important;max-width:112px!important;border:1px solid var(--r3-line-2)!important;background:var(--r3-surface)!important;color:var(--r3-ink)!important;font-size:9.5px!important;box-shadow:none!important}
#admin-root .adm-manage-user-btn:hover{background:var(--r3-accent-soft)!important;border-color:#B8CCD1!important}
#admin-root .adm-search-wrap input{height:40px!important;border-radius:10px!important}
#admin-root .adm-status-filter{min-height:40px!important;background:var(--r3-surface)!important;border:1px solid var(--r3-line)!important;border-radius:10px!important;padding:3px!important}
#admin-root .adm-status-filter button{min-height:31px!important;border-radius:7px!important;font-size:9.5px!important;color:#76848E!important}
#admin-root .adm-status-filter button.on{background:var(--r3-nav)!important;color:#fff!important;box-shadow:none!important}

.adm-user-manager-panel{width:min(520px,95vw)!important;border-radius:18px 0 0 18px!important;background:var(--r3-surface)!important}
.adm-user-manager-head{padding:22px 24px 18px!important;border-bottom:1px solid var(--r3-line)!important;background:var(--r3-surface)!important}
.adm-user-manager-title{font-size:19px!important;font-weight:750!important;letter-spacing:-.03em!important;color:var(--r3-ink)!important}
.adm-user-manager-body{padding:18px 24px 30px!important}
.adm-user-manager-section{padding:17px 0!important;border-bottom:1px solid #E3E5E1!important}
.adm-user-manager-section-title{font-size:9px!important;color:#7A8892!important;letter-spacing:.09em!important;font-weight:820!important}
.adm-user-manager-module{min-height:42px!important;padding:0 11px!important;border:1px solid var(--r3-line)!important;border-radius:9px!important;background:var(--r3-surface-2)!important}

/* ───────────────────────────── TENDER ───────────────────────────── */
#tenders-root .tn-wrap{max-width:1460px!important}
#tenders-root .tn-card,#tenders-root .tn-panel{box-shadow:none!important}
#tenders-root .tn-project-card{background:var(--r3-surface)!important;border-color:var(--r3-line)!important}
#tenders-root .tn-project-card:hover{border-color:#BFCBC8!important;box-shadow:var(--r3-shadow-sm)!important}
#tenders-root .tn-quick-actions-fab,#tenders-root .tn-fab-wrap button{background:var(--r3-nav)!important;color:#fff!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:0 14px 30px rgba(31,42,54,.22)!important;border-radius:14px!important}
#tenders-root .tn-quick-actions-menu{background:var(--r3-surface)!important;border:1px solid var(--r3-line)!important;box-shadow:var(--r3-shadow-lg)!important;border-radius:14px!important}

/* ───────────────────────────── DOCUMENTS ───────────────────────────── */
#documents-root .dc-chip{padding:8px 13px!important;color:#768590!important;border-radius:8px!important}
#documents-root .dc-chip.on{background:var(--r3-accent-soft)!important;color:var(--r3-accent-deep)!important}
#documents-root .dc-table tr.dc-file-row td{background:var(--r3-surface-2)!important}
#documents-root .dc-act-btn{background:var(--r3-surface)!important;border-color:var(--r3-line)!important;color:var(--r3-text)!important}
#documents-root .dc-act-btn:hover{background:var(--r3-accent-soft)!important;color:var(--r3-accent-deep)!important;border-color:#C1D4D8!important}

/* ───────────────────────────── FLEET / LIBRARY / CLAIMS / VENDOR ───────────────────────────── */
#fleet-root .fl-vehicle-card,#fleet-root .fl-booking-card,#library-root .lib-file-card,#directorclaim-root .dcl-summary-card,#vendors-root .vm-vendor-card{
  background:var(--r3-surface)!important;border:1px solid var(--r3-line)!important;border-radius:14px!important;box-shadow:none!important;
}
#fleet-root .fl-vehicle-card:hover,#library-root .lib-file-card:hover,#vendors-root .vm-vendor-card:hover{border-color:#BBC8C6!important;box-shadow:var(--r3-shadow-sm)!important;transform:none!important}

/* Search everything becomes a command palette, not full-screen white sheet. */
#gsOverlay{background:rgba(26,35,44,.40)!important;backdrop-filter:blur(5px)!important}
#gsCard,.gs-card,.gsPanel{background:var(--r3-surface)!important;border:1px solid var(--r3-line)!important;border-radius:18px!important;box-shadow:var(--r3-shadow-lg)!important}

/* Responsive */
@media(max-width:1100px){
  :root{--r3-sidebar:224px;--r3-page:100%}
  #documents-root .dc-wrap,#tenders-root .tn-wrap,#fleet-root .fl-wrap,#library-root .lib-wrap,#wj-root .wj-wrap,#directorclaim-root .dcl-wrap,#admin-root .adm-wrap,#settings-root .set-wrap,#vendors-root .vm-wrap{padding:26px 25px 45px!important}
}
@media(max-width:860px){
  #sidebar{width:var(--r3-sidebar-collapsed)!important}
  #sidebar.expanded{width:min(270px,86vw)!important}
  #main,#app.sidebar-expanded #main{margin-left:var(--r3-sidebar-collapsed)!important}
  #documents-root .dc-wrap,#tenders-root .tn-wrap,#fleet-root .fl-wrap,#library-root .lib-wrap,#wj-root .wj-wrap,#directorclaim-root .dcl-wrap,#admin-root .adm-wrap,#settings-root .set-wrap,#vendors-root .vm-wrap{padding:22px 17px 42px!important}
  #documents-root .dc-title,#tenders-root .tn-title,#fleet-root .fl-dashboard-title,#library-root .lib-title,#wj-root .wj-title,#directorclaim-root .dcl-title,#admin-root .adm-title,#vendors-root .vm-title,#settings-root .set-title{font-size:24px!important}
}

/* =============================================================
   UI V3 — PROCESS SIDE PANEL SYSTEM
   Action workflows use right-side sheets instead of centered cards.
   Full document/PDF previews intentionally remain viewport overlays.
   ============================================================= */

:root{
  --v3-process-panel-w: 520px;
  --v3-process-panel-wide: 720px;
  --v3-process-overlay: rgba(31,45,60,.24);
  --v3-process-line: #DCE5EA;
  --v3-process-bg: #FCFBFA;
}

/* Shared right-aligned overlay shell */
body > :is(
  .dc-modal-ov:not(#dc-preview-ov),
  .tn-modal-ov:not(#tn-preview-ov),
  .dcl-modal-ov,
  #lib-modal.lib-modal-ov,
  .adm-create-user-ov,
  .adm-term-ov,
  .adm-avatar-ov,
  #adm-options-panel.adm-options-panel,
  .vm-review-overlay,
  .vm-performance-overlay,
  .fl-terms-ov,
  #fl-confirm-ov
){
  position:fixed!important;
  inset:0!important;
  align-items:stretch!important;
  justify-content:flex-end!important;
  padding:0!important;
  background:var(--v3-process-overlay)!important;
  backdrop-filter:none!important;
  overflow:hidden!important;
}

body > :is(
  .dc-modal-ov:not(#dc-preview-ov),
  .tn-modal-ov:not(#tn-preview-ov),
  .dcl-modal-ov,
  #lib-modal.lib-modal-ov,
  .adm-create-user-ov,
  .adm-term-ov,
  .adm-avatar-ov,
  .vm-review-overlay,
  .vm-performance-overlay,
  .fl-terms-ov,
  #fl-confirm-ov
).on,
body > #adm-options-panel.adm-options-panel:not([hidden]){
  display:flex!important;
}

/* Shared sheet geometry */
body > .dc-modal-ov:not(#dc-preview-ov) > .dc-modal,
body > .tn-modal-ov:not(#tn-preview-ov) > .tn-modal,
body > .dcl-modal-ov > .dcl-modal,
body > #lib-modal.lib-modal-ov > .lib-modal,
body > .adm-create-user-ov > .adm-create-user-modal,
body > .adm-term-ov > .adm-term-modal,
body > .adm-avatar-ov > .adm-avatar-modal,
body > #adm-options-panel.adm-options-panel > .adm-options-modal,
body > .vm-review-overlay > .vm-review-dialog,
body > .vm-performance-overlay > .vm-performance-dialog,
body > .fl-terms-ov > .fl-terms-modal,
body > #fl-confirm-ov > #fl-confirm-box{
  width:min(var(--v3-process-panel-w),100vw)!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  border:0!important;
  border-left:1px solid var(--v3-process-line)!important;
  border-radius:0!important;
  background:var(--v3-process-bg)!important;
  box-shadow:-16px 0 44px rgba(31,45,60,.10)!important;
  overflow:auto!important;
  transform:translateX(24px);
  opacity:.98;
  animation:v3ProcessPanelIn .20s cubic-bezier(.22,1,.36,1) forwards!important;
}

/* Wider workflows */
body > :is(#tn-report-ov,#tn-new-modal,#tn-package-modal) > .tn-modal,
body > #dcl-payment-ov > .dcl-modal,
body > #dcl-batch-ov > .dcl-modal,
body > .adm-create-user-ov > .adm-create-user-modal,
body > .vm-performance-overlay > .vm-performance-dialog,
body > #adm-options-panel.adm-options-panel > .adm-options-modal{
  width:min(var(--v3-process-panel-wide),100vw)!important;
}

@keyframes v3ProcessPanelIn{
  from{transform:translateX(36px);opacity:.72}
  to{transform:translateX(0);opacity:1}
}

/* Give action sheets comfortable document-like spacing */
body > .dc-modal-ov:not(#dc-preview-ov) > .dc-modal,
body > .tn-modal-ov:not(#tn-preview-ov) > .tn-modal,
body > .dcl-modal-ov > .dcl-modal,
body > #lib-modal.lib-modal-ov > .lib-modal,
body > .adm-create-user-ov > .adm-create-user-modal,
body > .adm-term-ov > .adm-term-modal,
body > .adm-avatar-ov > .adm-avatar-modal,
body > #adm-options-panel.adm-options-panel > .adm-options-modal,
body > .vm-review-overlay > .vm-review-dialog{
  padding:26px 28px 32px!important;
}

/* Sticky workflow action bars at the bottom of long sheets */
body > .dcl-modal-ov .dcl-modal-actions,
body > #lib-modal .lib-modal > div:last-child,
body > .adm-create-user-ov .adm-create-user-actions,
body > .adm-term-ov .adm-term-actions,
body > .adm-avatar-ov .adm-avatar-actions,
body > #adm-options-panel .adm-options-actions,
body > .vm-review-overlay .vm-review-dialog-actions,
body > .vm-performance-overlay .vm-performance-dialog-actions,
body > .fl-terms-ov .fl-terms-foot,
body > #fl-confirm-ov .fl-confirm-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:5!important;
  margin-left:-28px!important;
  margin-right:-28px!important;
  margin-bottom:-32px!important;
  padding:14px 28px 18px!important;
  border-top:1px solid var(--v3-process-line)!important;
  background:rgba(252,251,250,.98)!important;
}

/* Document/Tender action rows are inline-styled, so make their final
   button row feel like the sheet footer without changing existing JS. */
body > .dc-modal-ov:not(#dc-preview-ov) > .dc-modal > div:last-child[style*="display:flex"],
body > .tn-modal-ov:not(#tn-preview-ov) > .tn-modal > div:last-child[style*="display:flex"]{
  position:sticky!important;
  bottom:-32px!important;
  z-index:5!important;
  margin:18px -28px -32px!important;
  padding:14px 28px 18px!important;
  border-top:1px solid var(--v3-process-line)!important;
  background:rgba(252,251,250,.98)!important;
}

/* Vendor performance already owns a padded head/form/footer layout. */
body > .vm-performance-overlay > .vm-performance-dialog{
  padding:0!important;
}
body > .vm-performance-overlay .vm-performance-dialog-actions{
  margin:0!important;
  padding:14px 22px 18px!important;
}

/* Fleet confirm sheet: vertical flow is more natural in a side panel. */
body > #fl-confirm-ov > #fl-confirm-box{
  display:flex!important;
  flex-direction:column!important;
}
body > #fl-confirm-ov .fl-confirm-body{
  padding:28px!important;
}
body > #fl-confirm-ov .fl-confirm-actions{
  margin:auto 0 0!important;
  padding:16px 28px 22px!important;
}

/* Keep true preview experiences centered/full-size. */
body > :is(#dc-preview-ov,#tn-preview-ov,#lib-preview-ov){
  justify-content:center!important;
  align-items:center!important;
}

/* Mobile: process sheets become full-screen workflow pages. */
@media(max-width:680px){
  body > :is(
    .dc-modal-ov:not(#dc-preview-ov),
    .tn-modal-ov:not(#tn-preview-ov),
    .dcl-modal-ov,
    #lib-modal.lib-modal-ov,
    .adm-create-user-ov,
    .adm-term-ov,
    .adm-avatar-ov,
    #adm-options-panel.adm-options-panel,
    .vm-review-overlay,
    .vm-performance-overlay,
    .fl-terms-ov,
    #fl-confirm-ov
  ){
    background:#FCFBFA!important;
  }
  body > :is(
    .dc-modal-ov:not(#dc-preview-ov) > .dc-modal,
    .tn-modal-ov:not(#tn-preview-ov) > .tn-modal,
    .dcl-modal-ov > .dcl-modal,
    #lib-modal.lib-modal-ov > .lib-modal,
    .adm-create-user-ov > .adm-create-user-modal,
    .adm-term-ov > .adm-term-modal,
    .adm-avatar-ov > .adm-avatar-modal,
    #adm-options-panel.adm-options-panel > .adm-options-modal,
    .vm-review-overlay > .vm-review-dialog,
    .vm-performance-overlay > .vm-performance-dialog,
    .fl-terms-ov > .fl-terms-modal,
    #fl-confirm-ov > #fl-confirm-box
  ){
    width:100vw!important;
    max-width:100vw!important;
    border-left:0!important;
    box-shadow:none!important;
  }
}

/* ======================================================================
   UI V3 — OPAQUE SURFACE / CONTRAST PASS 2026-08-28
   Prevent cards, tables and controls from visually dissolving into canvas.
   ====================================================================== */
:root{
  --r3-canvas:#EEEAE4;
  --r3-surface:#FBFAF7;
  --r3-surface-2:#F4F1EC;
  --r3-surface-3:#E9E4DD;
  --r3-line:#CBD3D4;
  --r3-line-2:#B9C5C8;
  --r3-shadow-sm:0 1px 2px rgba(31,42,54,.045),0 7px 20px rgba(31,42,54,.055);
}

html,body,#app,#main,.modFrame,#moduleBackdrop{
  background:var(--r3-canvas)!important;
}

/* Main content surfaces: fully opaque and visibly separated from canvas. */
.card,.panel,.plate,.surface,
#documents-root .dc-card,#tenders-root .tn-card,#fleet-root .fl-card,#library-root .lib-card,
#wj-root .wj-card,#directorclaim-root .dcl-card,#admin-root .adm-card,#settings-root .set-card,#vendors-root .vm-card,
#tenders-root .tn-panel,#admin-root .adm-panel,
#fleet-root .fl-records-table-card,#fleet-root .fl-records-filter-card,
#directorclaim-root .dcl-settings-card,#directorclaim-root .dcl-transaction-card,#directorclaim-root .dcl-paidclaims-card{
  background:#FBFAF7!important;
  border-color:#CBD3D4!important;
  box-shadow:var(--r3-shadow-sm)!important;
  opacity:1!important;
}

/* KPI cards must read as cards, not blank areas of the page. */
#tenders-root .tn-stat,#documents-root .dc-stat,#fleet-root .fl-stat,#fleet-root .fl-stat-card,
#library-root .lib-stat,#directorclaim-root .dcl-stat,.stat-card,.metric-card{
  background:#FAF8F4!important;
  border:1px solid #CCD4D5!important;
  box-shadow:0 3px 12px rgba(31,42,54,.045)!important;
  opacity:1!important;
}

/* Nested settings / form blocks get their own distinct tone. */
#directorclaim-root #dcl-section-settings .dcl-setting-box,
#directorclaim-root .dcl-setting-box,
#settings-root .set-card .set-section,
#admin-root .adm-user-manager-module{
  background:#F3EFE9!important;
  border:1px solid #D2D7D6!important;
  box-shadow:none!important;
  opacity:1!important;
}

/* Inputs should no longer disappear into their parent card. */
input:not([type="checkbox"]):not([type="radio"]),select,textarea,
#directorclaim-root .dcl-setting-box input,
#directorclaim-root .dcl-setting-box select{
  background:#FFFDF9!important;
  border-color:#C5CFD1!important;
  opacity:1!important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus{
  background:#FFFDF9!important;
  border-color:#8EA8B0!important;
  box-shadow:0 0 0 3px rgba(111,143,152,.11)!important;
}

/* Tables: opaque header + alternating row tone for scanability. */
#fleet-root table.fl-table,#fleet-root table.fl-records-table,
#tenders-root table.tn-table,#documents-root table,#library-root table,#directorclaim-root table,#admin-root table,.vm-table{
  background:#FBFAF7!important;
}
#fleet-root table.fl-table thead th,#fleet-root table.fl-records-table thead th,
#tenders-root table.tn-table thead th,#documents-root table thead th,#library-root table thead th,
#directorclaim-root table thead th,#admin-root table thead th,.vm-table thead th{
  background:#EFF1EF!important;
  border-bottom-color:#C8D1D2!important;
  opacity:1!important;
}
#fleet-root table.fl-table tbody td,#fleet-root table.fl-records-table tbody td,
#tenders-root table.tn-table tbody td,#documents-root table tbody td,#library-root table tbody td,
#directorclaim-root table tbody td,#admin-root table tbody td,.vm-table tbody td{
  background:#FBFAF7!important;
  border-bottom-color:#DDE2E1!important;
  opacity:1!important;
}
#fleet-root table.fl-table tbody tr:nth-child(even) td,#fleet-root table.fl-records-table tbody tr:nth-child(even) td,
#tenders-root table.tn-table tbody tr:nth-child(even) td,#documents-root table tbody tr:nth-child(even) td,
#library-root table tbody tr:nth-child(even) td,#directorclaim-root table tbody tr:nth-child(even) td,
#admin-root table tbody tr:nth-child(even) td,.vm-table tbody tr:nth-child(even) td{
  background:#F7F4EF!important;
}
#fleet-root table.fl-table tbody tr:hover td,#fleet-root table.fl-records-table tbody tr:hover td,
#tenders-root table.tn-table tbody tr:hover td,#documents-root table tbody tr:hover td,
#library-root table tbody tr:hover td,#directorclaim-root table tbody tr:hover td,
#admin-root table tbody tr:hover td,.vm-table tbody tr:hover td{
  background:#EDF2F1!important;
}

/* Tender active-project block in particular was visually merging into canvas. */
#tenders-root #tn-view-projects > .tn-card,
#tenders-root #tn-view-archive > .tn-card,
#tenders-root #tn-view-dash > .tn-card{
  background:#FBFAF7!important;
  border:1px solid #CAD3D4!important;
  box-shadow:0 5px 18px rgba(31,42,54,.055)!important;
}
#tenders-root .tn-card-hdr{
  background:#FFFDF9!important;
  border-bottom:1px solid #D5DCDB!important;
}

/* Fleet register: keep register card and rows visibly distinct. */
#fleet-root .fl-records-table-card{
  background:#FBFAF7!important;
  border:1px solid #BFCBCD!important;
}
#fleet-root .fl-records-table-title,
#fleet-root .fl-records-pager{
  background:#F5F6F4!important;
}

/* Statuses/badges need real pigment instead of near-white pills. */
#app :is(.status,.badge,.pill,.dc-pill,.tn-pill,.tn-badge,.fl-pill,.fl-status,.lib-pill,.wj-pill,.dcl-pill,.dcl-status,.adm-status-pill,.adm-access-badge)[class*="approved"],
#app :is(.status,.badge,.pill,.dc-pill,.tn-pill,.tn-badge,.fl-pill,.fl-status,.lib-pill,.wj-pill,.dcl-pill,.dcl-status,.adm-status-pill,.adm-access-badge)[class*="active"],
#app :is(.status,.badge,.pill,.dc-pill,.tn-pill,.tn-badge,.fl-pill,.fl-status,.lib-pill,.wj-pill,.dcl-pill,.dcl-status,.adm-status-pill,.adm-access-badge)[class*="success"]{
  background:#E3F0E8!important;color:#35644C!important;border-color:#BCD9C8!important;opacity:1!important;
}
#app :is(.status,.badge,.pill,.dc-pill,.tn-pill,.tn-badge,.fl-pill,.fl-status,.lib-pill,.wj-pill,.dcl-pill,.dcl-status,.adm-status-pill,.adm-access-badge)[class*="pending"],
#app :is(.status,.badge,.pill,.dc-pill,.tn-pill,.tn-badge,.fl-pill,.fl-status,.lib-pill,.wj-pill,.dcl-pill,.dcl-status,.adm-status-pill,.adm-access-badge)[class*="calling"],
#app :is(.status,.badge,.pill,.dc-pill,.tn-pill,.tn-badge,.fl-pill,.fl-status,.lib-pill,.wj-pill,.dcl-pill,.dcl-status,.adm-status-pill,.adm-access-badge)[class*="ongoing"]{
  background:#F4EADB!important;color:#765B34!important;border-color:#E2CDAA!important;opacity:1!important;
}
#app :is(.status,.badge,.pill,.dc-pill,.tn-pill,.tn-badge,.fl-pill,.fl-status,.lib-pill,.wj-pill,.dcl-pill,.dcl-status,.adm-status-pill,.adm-access-badge)[class*="reject"],
#app :is(.status,.badge,.pill,.dc-pill,.tn-pill,.tn-badge,.fl-pill,.fl-status,.lib-pill,.wj-pill,.dcl-pill,.dcl-status,.adm-status-pill,.adm-access-badge)[class*="terminated"],
#app :is(.status,.badge,.pill,.dc-pill,.tn-pill,.tn-badge,.fl-pill,.fl-status,.lib-pill,.wj-pill,.dcl-pill,.dcl-status,.adm-status-pill,.adm-access-badge)[class*="unsuccess"]{
  background:#F3E4E2!important;color:#7B4949!important;border-color:#E0C1BD!important;opacity:1!important;
}

/* Side-panel workflows are fully opaque; only the backdrop is translucent. */
body > :is(
  .dc-modal-ov:not(#dc-preview-ov) > .dc-modal,
  .tn-modal-ov:not(#tn-preview-ov) > .tn-modal,
  .dcl-modal-ov > .dcl-modal,
  #lib-modal.lib-modal-ov > .lib-modal,
  .adm-create-user-ov > .adm-create-user-modal,
  .adm-term-ov > .adm-term-modal,
  .adm-avatar-ov > .adm-avatar-modal,
  #adm-options-panel.adm-options-panel > .adm-options-modal,
  .vm-review-overlay > .vm-review-dialog,
  .vm-performance-overlay > .vm-performance-dialog,
  .fl-terms-ov > .fl-terms-modal,
  #fl-confirm-ov > #fl-confirm-box
){
  background:#FBFAF7!important;
  opacity:1!important;
}
body > .dcl-modal-ov .dcl-modal-actions,
body > #lib-modal .lib-modal > div:last-child,
body > .adm-create-user-ov .adm-create-user-actions,
body > .adm-term-ov .adm-term-actions,
body > .adm-avatar-ov .adm-avatar-actions,
body > #adm-options-panel .adm-options-actions,
body > .vm-review-overlay .vm-review-dialog-actions,
body > .vm-performance-overlay .vm-performance-dialog-actions,
body > .fl-terms-ov .fl-terms-foot,
body > #fl-confirm-ov .fl-confirm-actions,
body > .dc-modal-ov:not(#dc-preview-ov) > .dc-modal > div:last-child[style*="display:flex"],
body > .tn-modal-ov:not(#tn-preview-ov) > .tn-modal > div:last-child[style*="display:flex"]{
  background:#F7F4EF!important;
  opacity:1!important;
}

/* =============================================================
   UI V3 — DRAWER BUGFIX PASS
   1) Director Claim paid-claim detail footer is a true bottom footer.
   2) Documents New Request submit button keeps readable contrast in
      enabled and disabled states (including WebKit text fill).
   ============================================================= */

/* Director Claim: Paid Claim detail drawer owns a fixed sheet layout.
   Do not let the generic sticky modal footer float over short content. */
body > #dcl-batch-ov > .dcl-modal{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  min-height:100dvh!important;
}
body > #dcl-batch-ov > .dcl-modal > .dcl-modal-title,
body > #dcl-batch-ov > .dcl-modal > .dcl-modal-sub{
  flex:0 0 auto!important;
}
body > #dcl-batch-ov > .dcl-modal > .dcl-batch-details{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  margin-bottom:0!important;
}
body > #dcl-batch-ov > .dcl-modal > .dcl-modal-actions{
  position:static!important;
  flex:0 0 auto!important;
  width:auto!important;
  margin:16px -28px -32px!important;
  padding:14px 28px 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  border-top:1px solid var(--v3-process-line)!important;
  background:#F7F4EF!important;
  backdrop-filter:none!important;
  box-sizing:border-box!important;
}
body > #dcl-batch-ov > .dcl-modal > .dcl-modal-actions > button{
  flex:0 0 auto!important;
  min-width:88px!important;
}

/* Documents: New Request final submit CTA.
   Explicitly reset WebKit text fill so disabled primary styles cannot
   produce white wording on the light disabled surface. */
body > #dc-new-drawer-ov > .dc-drawer > button.dc-btn.dc-btn-primary:last-child{
  background:#2F4156!important;
  background-color:#2F4156!important;
  background-image:none!important;
  border:1px solid #2F4156!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  opacity:1!important;
  text-shadow:none!important;
}
body > #dc-new-drawer-ov > .dc-drawer > button.dc-btn.dc-btn-primary:last-child:hover:not(:disabled),
body > #dc-new-drawer-ov > .dc-drawer > button.dc-btn.dc-btn-primary:last-child:focus:not(:disabled){
  background:#243648!important;
  background-color:#243648!important;
  border-color:#243648!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}
body > #dc-new-drawer-ov > .dc-drawer > button.dc-btn.dc-btn-primary:last-child:disabled{
  background:#EEF1F3!important;
  background-color:#EEF1F3!important;
  background-image:none!important;
  border:1px solid #D4DCE2!important;
  color:#667482!important;
  -webkit-text-fill-color:#667482!important;
  opacity:1!important;
  text-shadow:none!important;
  cursor:not-allowed!important;
}
body > #dc-new-drawer-ov > .dc-drawer > button.dc-btn.dc-btn-primary:last-child:disabled *{
  color:#667482!important;
  -webkit-text-fill-color:#667482!important;
}

@media(max-width:600px){
  body > #dcl-batch-ov > .dcl-modal > .dcl-modal-actions{
    margin:16px -18px -26px!important;
    padding:12px 18px 16px!important;
  }
}

/* =============================================================
   UI V3 — DOCUMENT APPROVAL TRUE DRAWER FOOTER FIX
   The approval form can be shorter than the full-height process panel.
   Make its action wrapper occupy the actual bottom of the drawer instead
   of floating at its natural document position.
   ============================================================= */
body > #dc-ap-modal > .dc-modal{
  display:flex!important;
  flex-direction:column!important;
  min-height:100dvh!important;
  height:100dvh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
body > #dc-ap-modal > .dc-modal > div:last-child[style*="display:flex"][style*="gap:8px"]{
  position:static!important;
  flex:0 0 auto!important;
  width:auto!important;
  margin-top:auto!important;
  margin-left:-28px!important;
  margin-right:-28px!important;
  margin-bottom:-32px!important;
  padding:14px 28px 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  border-top:1px solid var(--v3-process-line)!important;
  background:#F7F4EF!important;
  box-sizing:border-box!important;
}
body > #dc-ap-modal > .dc-modal > div:last-child[style*="display:flex"][style*="gap:8px"] > button{
  min-height:38px!important;
}
body > #dc-ap-modal > .dc-modal > div:last-child[style*="display:flex"][style*="gap:8px"] > #dc-ap-submit-btn{
  flex:1 1 auto!important;
}
@media(max-width:600px){
  body > #dc-ap-modal > .dc-modal > div:last-child[style*="display:flex"][style*="gap:8px"]{
    margin-left:-18px!important;
    margin-right:-18px!important;
    margin-bottom:-26px!important;
    padding:12px 18px 16px!important;
  }
}