
/* ===== inline-style ===== */

/* ============ SHARED DESIGN TOKENS — used as the visual reference for
   every module's own scoped stylesheet too, so the whole suite reads as
   one consistent product. ============ */
:root{
  --ink:#2F4156; --ink2:#2F4156; --mute:#2F4156; --mute2:#2F4156;
  --line:#C8D9E6; --line2:#f2eee5; --bg:#F5EFEB; --white:#FCFBFA;
  --primary:#567C8D; --primary-dark:#2F4156; --primary-light:#C8D9E6;
  --accent2:#567C8D; --accent2-dark:#2F4156; --accent2-light:#C8D9E6;
  --accent3:#C8D9E6; --accent3-dark:#2F4156; --accent3-light:#C8D9E6;
  --success:#567C8D; --success-light:#C8D9E6;
  --warning:#567C8D; --warning-light:#C8D9E6;
  --danger:#2F4156; --danger-light:#C8D9E6;
  --violet:#567C8D; --violet-light:#C8D9E6;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px;
  --sh-sm:0 1px 2px rgba(47,65,86,.04);
  --sh-md:0 4px 12px rgba(47,65,86,.06);
  --sh-lg:0 16px 40px rgba(47,65,86,.10);
  --sidebar-w:230px;
}
*{box-sizing:border-box;font-family:"Google Sans"!important}
html,body{height:100%;overflow:hidden}
body{margin:0;color:var(--ink);-webkit-font-smoothing:antialiased;background:var(--bg);}
a{color:inherit}

/* ---------- AUTH SCREEN ---------- */
#authScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.authCard{width:100%;max-width:380px;background:transparent;border:none;border-radius:0;padding:32px;box-shadow:none!important;}
.authCard h1{font-size:21px;margin:0 0 4px;font-weight:800;letter-spacing:-.3px;text-align:center}
.authCard p.sub{color:var(--mute);font-size:13px;margin:0 0 22px;text-align:center}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:11.5px;font-weight:700;color:var(--mute);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.fld input,.fld select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);font-size:14px;background:var(--white)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--primary);box-shadow:none!important;}
.btn{width:100%;padding:11px;border:none;border-radius:var(--r-md);background:var(--ink);color:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:.15s}
.btn:hover{background:var(--ink2)}
.authTabs{display:flex;gap:6px;margin-bottom:20px;padding:4px;border-radius:var(--r-md);background:rgba(245,239,235,.54);border:1px solid rgba(200,217,230,.78);backdrop-filter:none!important;backdrop-filter:none!important;}
.authTabs button{flex:1;border:1px solid transparent;background:transparent;padding:9px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--mute);cursor:pointer;transition:.18s;background-clip:padding-box}
.authTabs button:hover{background:rgba(255,255,255,.58);color:#2F4156}
.authTabs button.on{background:#2F4156!important;color:#ffffff!important;border-color:#2F4156!important;box-shadow:none!important;backdrop-filter:none!important;}
.msg{margin-top:12px;padding:10px 13px;border-radius:var(--r-md);font-size:12.5px;display:none;font-weight:500}
.msg.err{display:block;background:var(--danger-light);color:#2F4156}
.msg.ok{display:block;background:var(--success-light);color:#2F4156}
.link{color:var(--primary);font-size:12.5px;cursor:pointer;font-weight:600}

/* ---------- APP SHELL ---------- */
#app{display:none;height:100vh;overflow:hidden}
#sidebarOverlay{position:fixed;inset:0;background:rgba(47,65,86,.4);z-index:39;display:none}
#sidebarOverlay.on{display:block}
#sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--white);color:var(--ink);position:fixed;top:0;left:0;bottom:0;padding:18px 12px;display:flex;flex-direction:column;z-index:40;transition:transform .25s ease;border-right:1px solid var(--line)}
#sidebar .brand{font-weight:800;font-size:15.5px;padding:8px 10px 20px;letter-spacing:-.3px;display:flex;align-items:center;gap:9px;justify-content:flex-start;color:var(--ink)}
.brand > button{margin-left:auto}
#sidebarClose, #hamburger{background:none;border:1px solid var(--line);color:var(--mute);border-radius:var(--r-sm);width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
#sidebarClose{display:none}
.navSection{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--mute2);padding:16px 10px 6px}
#gsBtn{display:flex;align-items:center;gap:8px;padding:9px 10px;margin:0 0 8px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--line2);color:var(--mute);font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s;width:100%}
#gsBtn:hover{background:var(--white);border-color:var(--mute2)}
.gsKbd{font-size:10px;font-weight:700;color:var(--mute2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;flex-shrink:0}
#gsOverlay{position:fixed;inset:0;background:rgba(47,65,86,.45);display:none;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:300}
#gsOverlay.on{display:flex}
#gsBox{width:min(560px,92vw);max-height:70vh;background:var(--white);border-radius:var(--r-xl);box-shadow:none!important;overflow:hidden;display:flex;flex-direction:column;animation:modalPopIn .18s cubic-bezier(.22,1,.36,1)}
#gsInputWrap{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
#gsInputWrap input{flex:1;border:none;outline:none;font-size:15px;font-family:"Google Sans"!important}
#gsResults{overflow-y:auto;flex:1;padding:6px}
#gsHint{padding:10px 18px;border-top:1px solid var(--line);font-size:11px;color:var(--mute2)}
.gsGroup{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--mute2);padding:10px 12px 4px}
.gsItem{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer}
.gsItem:hover{background:var(--line2)}
.gsItem .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;color:var(--ink)}
.gsItem .s{font-size:11px;color:var(--mute);flex-shrink:0}
.modItem{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;color:var(--ink2);font-size:13.5px;font-weight:600;margin-bottom:2px;transition:.15s;border:1px solid transparent}
.modItem:hover{background:var(--line2)}
.modItem.on{background:var(--accent3-light);color:var(--primary-dark);border-color:var(--accent3)}
.sbBottom{margin-top:auto;flex-shrink:0}
.sbUser{padding:12px 8px;border-top:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.sbUserInfo{display:flex;align-items:flex-start;gap:10px;min-width:0;flex:1}
.sbUserText{min-width:0;flex:1}
.sbUser .nm{overflow-wrap:break-word;word-break:break-word;white-space:normal;color:var(--ink);font-size:12.5px;font-weight:700;line-height:1.35}
.sbUser .role{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mute2);font-size:10.5px;text-transform:capitalize;margin-top:2px}
.sbLogoutBtn{flex-shrink:0;width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--line);background:transparent;color:var(--mute);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;margin-top:2px}
.sbLogoutBtn:hover{background:var(--danger-light);border-color:#C8D9E6;color:var(--danger)}
#main{margin-left:var(--sidebar-w);height:100vh;overflow-y:auto;overflow-x:hidden}
#topbar{display:none;align-items:center;gap:12px;padding:12px 16px;background:var(--white);border-bottom:1px solid var(--line);position:static;z-index:auto}
#hamburger{background:none;border:1px solid var(--line);border-radius:var(--r-md);width:34px;height:34px;font-size:16px;cursor:pointer}
.modFrame{display:none;min-height:100%;padding-bottom:0}
.modFrame.on{display:block}

/* ---------- ADMIN: MANAGE ACCESS ---------- */
































.avatar-choice{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);cursor:pointer;font-size:10.5px;font-weight:700;color:var(--mute);transition:.15s}
.avatar-choice:hover{border-color:var(--primary)}
.avatar-choice.on{background:var(--primary-light);border-color:var(--primary);color:var(--primary-dark)}
.avatar-choice .ic{font-size:26px}


.sbCredit{position:static;margin:0 8px;padding:9px 4px 2px;border-top:1px solid var(--line);color:var(--mute2);font-size:9px;font-weight:500;line-height:1.35;text-align:center;white-space:nowrap}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  #sidebar{transform:translateX(-100%);position:fixed}
  #sidebar.open{transform:translateX(0);box-shadow:none!important;}
  #sidebarClose{display:block}
  #main{margin-left:0}
  #topbar{display:flex}
  
  
  
  
}











/* Paid Claims action buttons: aligned and consistently sized */






/* V39 — compact drawer corrections: allow page-level scrolling when attachment list grows, tighten upload area, and improve submit-button contrast. */
#dc-new-drawer-ov{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
}














/* ===== v181-manage-access-table-layout ===== */

/* Semantic desktop table with a deliberate mobile card view. */






































/* ===== v181-manage-access-card-layout-final ===== */

/* Manage Access card layout: replaces the old table so Apps and Actions cannot overlap. */




















/* ===== v180-manage-access-seven-column-layout-fix ===== */

/* Manage Access now has seven columns. This final override supersedes the
   legacy six-column widths and mobile labels retained in older style blocks. */





















/* ===== manage-access-final-tail ===== */



















/* ===== manage-access-final-clean ===== */

/* Keep the six app controls and the Actions column visually independent. */
















































/* ===== inline-style ===== */

/* Press/hover feedback on every interactive control across the suite */



button:disabled, .btn:disabled{ cursor:not-allowed; opacity:.6; transform:none!important; }

/* Spinner — shared by every "Submitting…" / "Loading…" state */
.spinner-sm{ width:14px; height:14px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; display:inline-block; animation:sharedSpin .6s linear infinite; vertical-align:-2px; }
.spinner-sm.dark{ border-color:rgba(47,65,86,.15); border-top-color:#2F4156; }
@keyframes sharedSpin{ to{ transform:rotate(360deg); } }

/* Skeleton loading blocks — used while a list is being fetched */
.skel{ background:#FCFBFA!important; background-size:400% 100%; animation:skelShimmer 1.3s ease infinite; border-radius:8px; }
@keyframes skelShimmer{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.skel-row{ height:64px; margin-bottom:10px; border-radius:13px; }

/* Toast entrance */
@keyframes toastSlideIn{ from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:none} }

/* Modal / drawer entrance */
@keyframes modalPopIn{ from{opacity:0;transform:translateY(10px) scale(.97)} to{opacity:1;transform:none} }
@keyframes overlayFadeIn{ from{opacity:0} to{opacity:1} }



/* Page/frame entrance so switching tabs doesn't feel like a hard cut */
.modFrame.on{ animation:overlayFadeIn .15s ease; }

/* Richer shared motion system — used across every module */
@keyframes fadeInUp{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes softPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
@keyframes spinSlow{ to{transform:rotate(360deg)} }

/* Universal card hover lift — applies across Documents/Fleet/Tenders/Library/Admin cards */



/* Row entrance animation was removed — it re-triggered on every table
   re-render (including every keystroke while searching), which caused
   real jank on larger lists rather than feeling "lively." */

/* Section/tab-switch fade, reused by every module's internal tabs */



/* Notification bell — gentle pulse while there's something unread */


/* Smoother initial reveal once login succeeds */
#app{ animation: overlayFadeIn .25s ease; }

/* Kanban card lift already exists via .tn-kcard:hover; keep consistent timing */



/* ===== lambda-console-fx ===== */

:root{
  --fx-x:50%; --fx-y:50%; --fx-tilt-x:0deg; --fx-tilt-y:0deg;
  --fx-cyan:#567C8D; --fx-violet:#C8D9E6; --fx-blue:#567C8D; --fx-light:#F5EFEB;
}
html,body{overflow:hidden}
#authScreen{
  position:relative;overflow:hidden;isolation:isolate;
  background:#F5EFEB!important;
}
#authScreen::before{
  content:"";position:absolute;inset:-35%;z-index:-2;pointer-events:none;
  background-image:rgb(86,124,141)!important;
  background-size:44px 44px;
  transform:perspective(700px) rotateX(62deg) translateY(22%);
  transform-origin:center;animation:fxGridDrift 15s linear infinite;
  mask-image:linear-gradient(to bottom,transparent 3%,#000 30%,#000 76%,transparent 100%);
}
#authScreen::after{
  content:none;display:none;
}
.authCard{
  position:relative;background:transparent!important;border:none!important;
  box-shadow:none!important;backdrop-filter:none!important;
}
.authCard::before{display:none}
.authCard h1{font-size:34px!important;text-shadow:none!important;}
.authCard .btn{
  position:relative;
  overflow:hidden;
  color:#ffffff!important;
  background:#2F4156!important;
  border:1px solid #2F4156!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.authCard .btn:hover{
  background:#2F4156!important;
  border-color:#2F4156!important;
}
.authCard .btn::after{content:none;display:none}
.authCard .btn:hover::after{animation:none}
.fld input,.fld select{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--primary);box-shadow:none!important;}
#portalFx{
  position:fixed;inset:0;z-index:99999;display:none;
  pointer-events:none;overflow:hidden;
}
#portalFx.on{display:block}
#portalFx.phase-out .portal-blur-layer{animation:fxBlurOut 1.2s cubic-bezier(.4,0,.2,1) forwards}
#portalFx.phase-in .portal-blur-layer{animation:fxBlurIn 1s cubic-bezier(.4,0,.2,1) forwards}
.portal-blur-layer{position:fixed;inset:0;backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,0)}
@keyframes fxBlurOut{
  0%{backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,0)}
  60%{backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,.6)}
  100%{backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,.95)}
}
@keyframes fxBlurIn{
  0%{backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,.95)}
  100%{backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,0)}
}
.modFrame.on{animation:fxModuleIn .5s cubic-bezier(.4,0,.2,1)!important}

/* active press feedback removed — user prefers no movement */
.fx-ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(200,217,230,.32);transform:translate(-50%,-50%) scale(0);animation:fxRipple .78s ease-out forwards}


.fx-flash{animation:fxSuccessPulse .9s ease both!important}
@keyframes fxGridDrift{to{transform:perspective(700px) rotateX(62deg) translateY(calc(22% + 44px))}}
@keyframes fxCardBoot{from{opacity:0;transform:perspective(900px) translateY(28px) scale(.94) rotateX(8deg)}to{opacity:1}}
@keyframes fxScan{0%,55%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}
@keyframes fxButtonSweep{to{transform:translateX(120%)}}
@keyframes fxRipple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@keyframes fxSuccessPulse{0%{box-shadow:none!important;}100%{box-shadow:none!important;}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .authCard{transform:none!important}
}
@media(max-width:700px){#authScreen::before{background-size:32px 32px}.authCard{transform:none!important}}


/* ===== professional-motion ===== */

/* Professional motion system */
:root{
  --motion-fast:160ms;
  --motion-normal:260ms;
  --motion-slow:380ms;
  --motion-ease:cubic-bezier(.22,.61,.36,1);
}

html,body{
  scroll-behavior:smooth;
}

#authScreen{
  background:#F5EFEB;
}

.authCard:focus-within{}

.modFrame.on{
  animation:professionalPageIn var(--motion-normal) var(--motion-ease) both;
}





.professional-loading-overlay{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(245,239,235,.92);
  backdrop-filter:none!important;
}

.professional-loading-overlay.on{
  display:flex;
  animation:professionalFadeIn var(--motion-fast) ease both;
}

.professional-loading-card{
  min-width:210px;
  padding:22px 24px;
  border:1px solid #F5EFEB;
  border-radius:14px;
  background:#FCFBFA;
  box-shadow:none!important;
  text-align:center;
}

.professional-loading-spinner{
  width:30px;
  height:30px;
  margin:0 auto 12px;
  border:3px solid #F5EFEB;
  border-top-color:#2F4156;
  border-radius:50%;
  animation:professionalSpin .8s linear infinite;
}

.professional-loading-text{
  font-size:13px;
  font-weight:700;
  color:#2F4156;
}

@keyframes professionalCardIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes professionalPageIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes professionalModalIn{
  from{opacity:0;transform:translateY(8px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes professionalFadeIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes professionalSpin{
  to{transform:rotate(360deg)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}


/* ===== top-navigation-layout ===== */

/* Collapsible left sidebar — collapsed by default, expandable by the user */
:root{--sidebar-expanded:230px;--sidebar-collapsed:68px}
#app{padding-top:0!important}
#sidebar{
  position:fixed!important;top:0!important;left:0!important;right:auto!important;bottom:0!important;
  width:var(--sidebar-collapsed)!important;height:100vh!important;padding:14px 10px!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;
  border-right:1px solid var(--line)!important;border-bottom:0!important;
  transform:none!important;box-shadow:none!important;
  overflow:hidden!important;transition:width .22s cubic-bezier(.22,1,.36,1)!important
}
#sidebar.expanded{width:var(--sidebar-expanded)!important}
#sidebar .brand{
  min-height:42px!important;padding:0 4px 14px!important;font-size:20px!important;line-height:1!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;flex:0 0 auto!important
}
#sidebar.expanded .brand{justify-content:flex-start!important}
#sidebarToggle{
  margin-left:auto;width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--white);
  color:var(--mute);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto
}
#sidebar:not(.expanded) .brandMark{display:none!important}
#sidebar:not(.expanded) #sidebarToggle{margin:0 auto!important;width:38px!important;height:38px!important}
#sidebar.expanded #sidebarToggle{margin-left:auto!important}
#sidebarToggle svg{display:block!important;margin:auto!important;transition:transform .2s ease!important}
#sidebar.expanded #sidebarToggle svg{transform:rotate(180deg)!important}
#sidebarClose,#sidebarOverlay,#topbar{display:none!important}
#navList{display:block!important;flex:1!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin;padding-top:4px}
#navList .navSection{display:none!important}
.modItem{
  margin:2px 0!important;padding:10px 12px!important;min-height:40px!important;width:100%!important;
  white-space:nowrap!important;font-size:13.5px!important;justify-content:flex-start!important;overflow:hidden!important
}
.modItem svg{width:17px!important;height:17px!important;flex:0 0 17px!important}
.modItem .modLabel{display:none;opacity:0;visibility:hidden;transition:opacity .15s ease;overflow:hidden;text-overflow:ellipsis}
#sidebar.expanded .modItem .modLabel{display:block;opacity:1;visibility:visible}
#sidebar:not(.expanded) .modItem{
  justify-content:center!important;align-items:center!important;padding:0!important;margin:2px auto!important;
  width:40px!important;height:40px!important;min-height:40px!important;border-radius:9px!important;gap:0!important
}
#sidebar:not(.expanded) .modItem svg{display:block!important;margin:0!important;flex:0 0 18px!important;width:18px!important;height:18px!important}
#sidebar.expanded .modItem{gap:10px!important}
.sbBottom{margin-top:auto!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;flex:0 0 auto!important}
#gsBtn{margin:0!important;width:100%!important;min-width:0!important;flex:none!important;height:40px!important;padding:8px 11px!important;overflow:hidden!important}
#gsBtn > span:first-of-type,#gsBtn .gsKbd{display:none!important}
#sidebar.expanded #gsBtn > span:first-of-type{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#sidebar.expanded #gsBtn .gsKbd{display:inline-block!important;margin-left:auto!important}
#sidebar:not(.expanded) #gsBtn{justify-content:center!important;padding:8px 0!important}
.sbUser{padding:10px 0 0!important;border-top:1px solid var(--line)!important;align-items:center!important;gap:6px!important}
.sbUserInfo{align-items:center!important;justify-content:center!important;min-width:0!important}
.sbUserText{display:none!important;min-width:0!important}
#sidebar.expanded .sbUserInfo{justify-content:flex-start!important}
#sidebar.expanded .sbUserText{display:block!important;max-width:125px!important}
.sbUser .nm{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:12px!important}
.sbUser .role{font-size:9.5px!important;margin-top:0!important}
.sbLogoutBtn{width:32px!important;height:32px!important;margin-top:0!important;flex:0 0 auto!important}
#sidebar:not(.expanded) .sbUser{flex-direction:column!important}
.sbCredit{display:none!important}
#main{margin-left:var(--sidebar-collapsed)!important;height:100vh!important;overflow-y:auto!important;transition:margin-left .22s cubic-bezier(.22,1,.36,1)!important}
#app.sidebar-expanded #main{margin-left:var(--sidebar-expanded)!important}

@media(max-width:860px){
  #sidebar{width:var(--sidebar-collapsed)!important}
  #sidebar.expanded{width:min(var(--sidebar-expanded),82vw)!important;box-shadow:none!important;}
  #sidebarOverlay{display:none!important;position:fixed!important;inset:0!important;background:rgba(47,65,86,.4)!important;z-index:39!important}
  #sidebarOverlay.on{display:block!important}
  #sidebar{z-index:40!important}
  #main,#app.sidebar-expanded #main{margin-left:var(--sidebar-collapsed)!important}
}


/* ===== inline-style ===== */



/* ---------- DESKTOP APP DOWNLOAD ---------- */










/* ===== module-morph-css ===== */

/* Lightweight module-to-module scene morph. Pure CSS/SVG: no network image load. */
#moduleBackdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#FCFBFA;transition:background-color .55s ease}
#moduleBackdrop .mb-scene{position:absolute;inset:-5%;opacity:0;transform:scale(1.045);transition:opacity .42s ease,transform .68s cubic-bezier(.22,1,.36,1);background-position:center;background-size:cover;filter:saturate(.92)}
#moduleBackdrop .mb-scene.on{opacity:1;transform:scale(1)}
#moduleBackdrop .mb-scene::after{content:"";position:absolute;inset:0;background:rgb(245,239,235)!important;}
#moduleBackdrop .mb-orb{position:absolute;border-radius:50%;filter:none!important;opacity:.34;transition:left .78s cubic-bezier(.22,1,.36,1),top .78s cubic-bezier(.22,1,.36,1),width .78s cubic-bezier(.22,1,.36,1),height .78s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1),background .45s ease}
#moduleBackdrop .mb-orb.a{width:var(--mb-a-size,34vw);height:var(--mb-a-size,34vw);min-width:300px;min-height:300px;left:var(--mb-a-x,74vw);top:var(--mb-a-y,-12vw);background:var(--mb-a,#C8D9E6)}
#moduleBackdrop .mb-orb.b{width:var(--mb-b-size,27vw);height:var(--mb-b-size,27vw);min-width:240px;min-height:240px;left:var(--mb-b-x,13vw);top:var(--mb-b-y,72vh);background:var(--mb-b,#C8D9E6)}
#moduleBackdrop.morphing .mb-orb.a{transform:translate(-2vw,2vh) scale(1.08)}
#moduleBackdrop.morphing .mb-orb.b{transform:translate(2vw,-2vh) scale(.94)}
#moduleTransitionVeil{position:fixed;inset:0;z-index:38;pointer-events:none;opacity:0;background:rgba(245,239,235,.0);backdrop-filter:none!important;backdrop-filter:none!important;transition:opacity .18s ease,backdrop-filter .22s ease,background .22s ease}
#moduleTransitionVeil.on{opacity:1;background:rgba(245,239,235,.34);backdrop-filter:none!important;backdrop-filter:none!important;}
#app{position:relative;z-index:1;background:transparent!important}
#main{position:relative;background:transparent!important}
.modFrame{position:relative}
.modFrame.module-enter{animation:moduleSceneEnter .42s cubic-bezier(.22,1,.36,1) both!important}
@keyframes moduleSceneEnter{from{opacity:0;transform:translateY(8px) scale(.994)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#moduleBackdrop .mb-scene,#moduleBackdrop .mb-orb,#moduleTransitionVeil,.modFrame.module-enter{transition:none!important;animation:none!important}}


/* Documents and Tenders top-background correction */

#frame-documents::before,#frame-documents::after,#frame-tenders::before,#frame-tenders::after{display:none!important;content:none!important}


/* Fleet and Library background-obstruction correction */
#frame-fleet,#frame-library{background:transparent!important}
#frame-fleet::before,#frame-fleet::after,#frame-library::before,#frame-library::after{display:none!important;content:none!important}






/* ===== inline-style ===== */

/* =========================================================
   Unified segmented controls and selection buttons
   ========================================================= */
:root{
  --ax-sel-bg:rgba(245,239,235,.64);
  --ax-sel-border:rgba(200,217,230,.82);
  --ax-sel-idle:rgba(255,255,255,.72);
  --ax-sel-idle-text:#2F4156;
  --ax-sel-active:#567C8D;
  --ax-sel-active-text:#ffffff;
  --ax-sel-dot:#567C8D;
  --ax-sel-radius:10px;
  --ax-sel-height:34px;
  --ax-sel-shadow:0 8px 20px rgba(47,65,86,.08), inset 0 1px 0 rgba(255,255,255,.82);
}

/* Segmented-control containers */



/* Shared visual language for selectable controls */


/* Standalone Fleet category filters keep the same style without a large slab */



/* Idle hover */


/* Unified selected state */


/* Green selected indicator: one consistent dot */


/* Fleet filters already contain meaningful vehicle/status icons */


/* Remove legacy checkmark so active controls do not look inconsistent */




/* Module-access permission toggles use the same shape and proportions */


/* Better focus accessibility */


/* Compact responsive behavior */



/* ===== inline-style ===== */

/* Library modal portal: always centered in the current browser viewport */









/* ===== inline-style ===== */

/* =========================================================
   Library modal UI polish after moving dialogs to <body>
   ========================================================= */


/* Upload / edit modal */


body > #lib-modal #lib-modal-title{
  font-size:18px!important;
  line-height:1.25!important;
  font-weight:800!important;
  color:#2F4156!important;
  margin:0 0 18px!important;
}















body > #lib-modal #lib-meta-fields > div[style*="grid-template-columns"]{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:12px!important;
}



















body > #lib-modal #lib-submit-btn{
  flex:0 0 auto!important;
  min-width:112px!important;
}

/* Preview modal */




body > #lib-preview-ov #lib-preview-title{
  min-width:0!important;
  flex:1 1 auto!important;
  margin:0!important;
  color:#2F4156!important;
  font-size:13px!important;
  line-height:1.35!important;
  font-weight:750!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}







body > #lib-preview-ov #lib-preview-frame{
  display:block!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  background:#FCFBFA!important;
}

/* Small screens */
@media(max-width:640px){
  

  body > #lib-modal #lib-meta-fields > div[style*="grid-template-columns"]{
    grid-template-columns:1fr!important;
    gap:0!important;
  }

  

  

  

  body > #lib-preview-ov #lib-preview-title{
    white-space:normal!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
  }

  
}


/* ===== inline-style ===== */

/* Library pagination */











/* ===== inline-style ===== */

/* =========================================================
   Shared pagination — based on the Documents module
   Applies to Documents, Tenders, Library and Admin
   ========================================================= */





















/* ===== inline-style ===== */

/* Library pagination placement correction — match Documents module */






/* ===== inline-style ===== */

/* Director Claim — soften the bottom edge of the Create Record table */















/* ===== inline-style ===== */






@keyframes wslAmbientA{to{transform:translate(-5vw,7vh) scale(1.08)}}
@keyframes wslAmbientB{to{transform:translate(6vw,-5vh) scale(.94)}}



































@keyframes wslRise{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}

#sidebar,#main{transition:opacity .42s ease,transform .58s cubic-bezier(.22,1,.36,1)}






/* ===== inline-style ===== */






/* ===== inline-style ===== */

/* Frosted emphasis for login screen actions */
#authScreen .btn{
  text-shadow:none!important;
}
#authScreen .btn:focus-visible,
.authTabs button:focus-visible{
  outline:3px solid rgba(86,124,141,.18)!important;
  outline-offset:2px!important;
}


/* ===== all-buttons-frosted-glass ===== */

/* =========================================================
   Unified frosted-glass action buttons
   ========================================================= */
:root{
  --ax-btn-bg:rgb(245,239,235);
  --ax-btn-bg-hover:rgb(245,239,235);
  --ax-btn-border:rgba(200,217,230,.92);
  --ax-btn-text:#2F4156;
  --ax-btn-shadow:0 10px 26px rgba(47,65,86,.08), inset 0 1px 0 rgba(255,255,255,.88);
  --ax-btn-shadow-hover:0 14px 28px rgba(47,65,86,.10), inset 0 1px 0 rgba(255,255,255,.92);
}

/* Shared action-button family */




/* Primary / dark variants no longer use dark fill */


/* Director Claim action toolbar buttons */




/* Gentle tinted semantic buttons while keeping same overall design */









/* Small destructive/confirm buttons in Fleet inline actions */



/* Better visibility for loading spinner on light frosted buttons */
.spinner-sm{
  border-color:rgba(47,65,86,.20)!important;
  border-top-color:#2F4156!important;
}

/* Preserve disabled state clearly */


/* Link buttons should still look like buttons */



/* ===== smooth-auth-tab-transitions ===== */

/* Smooth Log in / Register / Reset transitions */
.authCard{
  transition:height .42s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
#paneLogin,#paneReg,#paneReset{
  transform-origin:50% 0;
  will-change:opacity,transform,filter;
}
.auth-pane-enter{
  animation:authPaneEnter .42s cubic-bezier(.22,1,.36,1) both;
}
.auth-pane-leave{
  animation:authPaneLeave .18s ease both;
  pointer-events:none;
}
.authTabs button{
  position:relative;
  overflow:hidden;
}
.authTabs button::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:2px;
  height:2px;
  border-radius:999px;
  background:rgba(47,65,86,.58);
  transform:scaleX(0);
  opacity:0;
  transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .2s ease;
}
.authTabs button.on::after{
  transform:scaleX(1);
  opacity:.55;
}
@keyframes authPaneEnter{
  from{opacity:0;transform:translateY(10px) scale(.992);filter:none!important;}
  to{opacity:1;transform:none;filter:none!important;}
}
@keyframes authPaneLeave{
  from{opacity:1;transform:none;filter:none!important;}
  to{opacity:0;transform:translateY(-6px) scale(.996);filter:none!important;}
}
@media(prefers-reduced-motion:reduce){
  .authCard{transition:none!important}
  .auth-pane-enter,.auth-pane-leave{animation:none!important}
}


/* ===== auth-tabs-clean-no-underline ===== */

.authTabs button::after{
  content:none!important;
  display:none!important;
}


/* ===== work-journal-button-alignment-frosted ===== */

/* Bring Work Journal buttons into the same frosted-glass button language */








/* ===== fleet-book-vehicle-frosted-fix ===== */






/* ===== all-table-headers-readable-centered ===== */

table thead th{
  font-size:12px!important;
  font-weight:750!important;
  line-height:1.3!important;
  letter-spacing:.02em!important;
  text-align:center!important;
  vertical-align:middle!important;
}
table thead th > *{margin-left:auto!important;margin-right:auto!important}


/* ===== global-viewport-overlay-portal ===== */

/* All module overlays live directly under body, outside transformed modules. */
body.ax-overlay-open{overflow:hidden!important}

/* Shared viewport overlay foundation */



/* Documents drawer remains a side panel, but now uses the current viewport. */




/* Documents modal and preview styles restored after body portal. */






/* Tender modal and document preview styles restored after body portal. */



body > #tn-preview-ov iframe{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  border:0!important;
}

/* Director Claim modal styles remain centered and viewport-safe. */



/* Keep existing Library body portal above normal module content too. */


/* Mobile viewport safety */



/* ===== global-preview-action-button-standard ===== */

/* =========================================================
   Standard action buttons inside body-level preview portals
   ========================================================= */




/* Compact preview-toolbar variants */


/* Icon-only close controls */


/* Ensure icons inherit the standardized text color */


/* Keep preview toolbar layouts neat */


/* Semantic portal actions retain soft color cues */



/* Disabled controls */





/* ===== global-button-size-system ===== */

/* =========================================================
   Balanced button-size system
   Standard action: 36px
   Compact/table action: 32px
   Icon-only action: 34px square
   ========================================================= */
:root{
  --ax-btn-h:36px;
  --ax-btn-h-sm:32px;
  --ax-btn-icon:34px;
  --ax-btn-pad:14px;
  --ax-btn-pad-sm:10px;
  --ax-btn-font:12.5px;
  --ax-btn-font-sm:11.5px;
  --ax-btn-radius:9px;
}

/* Standard action buttons across every module */


/* Do not make normal module actions unnecessarily wide */


/* Full-width buttons remain full-width where intentionally designed */


/* Compact utility, toolbar, table and pagination actions */


/* Icon-only controls */


/* Selection tabs/filters use the existing compact standard */


/* Work Journal header and footer buttons */



/* Keep table-row actions compact instead of oversized */


/* Preview toolbar actions match the same standard */


/* Exceptions: controls whose shape is intentionally different */
#tn-fab{
  width:48px!important;
  min-width:48px!important;
  height:48px!important;
  min-height:48px!important;
  padding:0!important;
  border-radius:50%!important;
}
/* Welcome application cards must remain responsive rectangular cards.
   Do not force them into the global circular control exception. */


#sidebarToggle,#hamburger,.sbLogoutBtn{
  min-height:unset!important;
}

/* Prevent inline padding declarations from creating uneven button heights */


/* Mobile remains comfortably tappable without becoming bulky */
@media(max-width:700px){
  :root{
    --ax-btn-h:35px;
    --ax-btn-h-sm:32px;
    --ax-btn-pad:12px;
  }
  
}


/* ===== standard-module-headers-full-workspace ===== */

/* =========================================================
   Unified module page headers and full-workspace layout
   ========================================================= */
:root{
  --ax-page-pad-x:32px;
  --ax-page-pad-y:28px;
  --ax-page-title-size:26px;
  --ax-page-sub-size:13.5px;
}

/* Every module occupies the full workspace instead of a narrow centered shell. */






/* Settings was previously restricted to 640px. */


/* Common header geometry. */


/* Unified title typography. */


/* Unified subtitle typography. */


/* Tender header sits above the navigation tabs, like every other module. */



/* Cards, tables, dashboards and sections stretch to available workspace width. */


/* Remove artificial narrow Work Journal and Settings presentation. */



/* Keep fleet content aligned with the same page edge. */


/* Responsive page spacing remains consistent across all modules. */
@media(max-width:860px){
  :root{
    --ax-page-pad-x:20px;
    --ax-page-pad-y:22px;
    --ax-page-title-size:24px;
  }
}
@media(max-width:640px){
  :root{
    --ax-page-pad-x:12px;
    --ax-page-pad-y:16px;
    --ax-page-title-size:22px;
    --ax-page-sub-size:13px;
  }
  
}


/* ===== portal-modal-component-style-restoration ===== */

/* =========================================================
   Restore component styles after modal portal relocation
   ========================================================= */

/* ---------- Documents modal internals ---------- */














/* Modal action rows: balanced, aligned and responsive */




/* ---------- Tender modal internals ---------- */








/* ---------- Director Claim modal internals ---------- */







/* General modal layout safety */



/* Mobile action rows stack cleanly rather than squeeze/distort. */



/* ===== library-header-copy-group-fix ===== */





/* ===== standard-toolbar-control-system ===== */

/* =========================================================
   Unified toolbar and form-control proportions
   ========================================================= */
:root{
  --ax-control-h:42px;
  --ax-search-w:720px;
  --ax-filter-w:170px;
  --ax-toolbar-gap:10px;
  --ax-control-radius:10px;
  --ax-control-border:#F5EFEB;
}

/* Shared toolbar layout */


/* Consistent vertical spacing around toolbar rows */


/* Search fields use the same visual width across modules. */
#dc-search,
#lib-search,
#tn-search,
#tn-archive-search,
#fl-search,
#wj-q,
#dcl-search,
#dcl-batch-search,
#adm-search,
#admin-search{
  flex:0 1 var(--ax-search-w)!important;
  width:min(100%,var(--ax-search-w))!important;
  max-width:var(--ax-search-w)!important;
  min-width:280px!important;
  height:var(--ax-control-h)!important;
  min-height:var(--ax-control-h)!important;
  padding:0 13px!important;
  border:1px solid var(--ax-control-border)!important;
  border-radius:var(--ax-control-radius)!important;
  background:rgba(255,255,255,.88)!important;
  color:#2F4156!important;
  font-family:"Google Sans"!important;
  font-size:13px!important;
  line-height:1!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
  outline:none!important;
}

/* All toolbar selects, date filters and secondary fields share one width. */


/* Search focus state is consistent everywhere. */
#dc-search:focus,
#lib-search:focus,
#tn-search:focus,
#tn-archive-search:focus,
#fl-search:focus,
#wj-q:focus,
#dcl-search:focus,
#dcl-batch-search:focus,
#adm-search:focus,
#admin-search:focus{
  border-color:#567C8D!important;
  box-shadow:none!important;
}

/* Toolbar buttons share a balanced minimum width but remain content-aware. */


/* Document status chips remain compact and do not stretch. */


/* Work Journal toolbar follows the same widths instead of filling arbitrary columns. */




/* Director Claim search is not allowed to become excessively wide. */


/* Form controls elsewhere use one consistent height and radius. */


/* Textareas remain naturally taller but match width/radius. */


/* Responsive: controls use the full row instead of squeezing. */
@media(max-width:900px){
  :root{
    --ax-search-w:100%;
    --ax-filter-w:160px;
  }
  #dc-search,
  #lib-search,
  #tn-search,
  #tn-archive-search,
  #fl-search,
  #wj-q,
  #dcl-search,
  #dcl-batch-search,
  #adm-search,
  #admin-search{
    flex:1 1 100%!important;
    width:100%!important;
    max-width:none!important;
  }
}



/* ===== documents-new-request-drawer-restoration ===== */

/* Restore the Documents new-request drawer after body-level portal relocation. */
body > #dc-new-drawer-ov{
  align-items:stretch!important;
  justify-content:flex-end!important;
}






body > #dc-new-drawer-ov #dc-nr-expiry{
  width:100%!important;
}


body > #dc-new-drawer-ov #dc-nr-amt-yes,
body > #dc-new-drawer-ov #dc-nr-amt-no{
  width:auto!important;
  min-width:70px!important;
  height:36px!important;
  padding:0 15px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:9px!important;
}
body > #dc-new-drawer-ov #dc-new-close-btn{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  padding:0!important;
  flex:0 0 36px!important;
}






/* ===== all-portal-cards-placeholders-audit-fix ===== */

/* =========================================================
   Portal component restoration + global control safeguards
   ========================================================= */

/* Never apply text-field dimensions to native compact controls. */
input[type="checkbox"],
input[type="radio"]{
  width:16px!important;
  min-width:16px!important;
  max-width:16px!important;
  height:16px!important;
  min-height:16px!important;
  max-height:16px!important;
  padding:0!important;
  margin:0!important;
  border-radius:3px!important;
  box-shadow:none!important;
  flex:0 0 16px!important;
  vertical-align:middle!important;
  accent-color:#2F4156;
}

/* Placeholder text remains visually consistent in every module/dialog. */
input::placeholder,
textarea::placeholder{
  color:#2F4156!important;
  opacity:1!important;
  font-weight:400!important;
}

/* Grid children may shrink instead of overflowing or crushing siblings. */


/* ---------- Tender body-portal form restoration ---------- */



























/* Site visit checkbox row stays compact and aligned. */
body > #tn-new-modal #tn-n-sv-toggle{
  width:16px!important;
  min-width:16px!important;
  height:16px!important;
}



/* New Project action row remains visible and balanced. */

body > #tn-new-modal #tn-create-btn{
  flex:1 1 180px!important;
}

/* ---------- General portal-card safety ---------- */



/* File/upload placeholders never collapse into plain inline text. */


/* Dropdown/select controls cannot exceed their containing card. */


/* Desktop two-column modal grids; stack safely on narrow screens. */



/* ===== cohesive-depth-design-system ===== */

/* =========================================================
   Cohesive visual hierarchy
   Primary = navy glass
   Secondary = clear glass
   Destructive = soft red
   Status colours are reserved for status indicators
   ========================================================= */
:root{
  --ax-page-surface:rgba(245,239,235,.74);
  --ax-card:rgba(255,255,255,.88);
  --ax-card-strong:rgba(255,255,255,.96);
  --ax-line:rgba(200,217,230,.78);
  --ax-line-strong:rgba(86,124,141,.62);
  --ax-text:#2F4156;
  --ax-muted:#2F4156;

  --ax-shadow-card:
    0 1px 2px rgba(47,65,86,.035),
    0 10px 28px rgba(47,65,86,.065),
    inset 0 1px 0 rgba(255,255,255,.88);
  --ax-shadow-card-hover:
    0 2px 4px rgba(47,65,86,.04),
    0 16px 38px rgba(47,65,86,.09),
    inset 0 1px 0 rgba(255,255,255,.92);

  --ax-btn-primary-bg:rgb(35,33,39);
  --ax-btn-primary-hover:rgb(35,33,39);
  --ax-btn-primary-border:rgba(47,65,86,.78);
  --ax-btn-primary-text:#C8D9E6;
  --ax-btn-primary-shadow:
    0 8px 20px rgba(47,65,86,.16),
    inset 0 1px 0 rgba(255,255,255,.14);

  --ax-btn-secondary-bg:rgb(245,239,235);
  --ax-btn-secondary-hover:rgb(245,239,235);
  --ax-btn-secondary-border:rgba(200,217,230,.9);
  --ax-btn-secondary-text:#2F4156;
  --ax-btn-secondary-shadow:
    0 5px 14px rgba(47,65,86,.055),
    inset 0 1px 0 rgba(255,255,255,.94);

  --ax-danger-bg:rgb(245,239,235);
  --ax-danger-border:rgba(200,217,230,.9);
  --ax-danger-text:#2F4156;
}

/* ---------- Layered module surfaces ---------- */






/* Table area uses a distinct inset layer instead of looking flat. */
table{
  background:rgba(255,255,255,.62)!important;
}
table thead th{
  background:rgb(245,239,235)!important;
  border-bottom:1px solid rgba(86,124,141,.44)!important;
  box-shadow:none!important;
}
table tbody tr{
  transition:background .15s ease!important;
}
table tbody tr:hover{
  background:rgba(245,239,235,.58)!important;
}

/* ---------- Default/secondary action buttons ---------- */




/* ---------- Primary actions: one consistent navy-glass treatment ---------- */




/* Primary icons stay readable. */


/* ---------- Destructive actions: soft red, never flat bright red ---------- */



/* ---------- Remove random action colours ---------- */


/* Keep semantic colour only as a small icon/dot cue. */


/* ---------- Form surfaces and placeholders ---------- */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  background:rgba(255,255,255,.86)!important;
  border-color:rgba(200,217,230,.86)!important;
  box-shadow:none!important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus{
  background:#FCFBFA!important;
  border-color:rgba(200,217,230,.72)!important;
  box-shadow:none!important;
}

/* ---------- Modal and drawer depth ---------- */


/* ---------- Selection controls stay subtle, not primary-looking ---------- */


/* Status pills retain colour; they communicate state, not action priority. */


/* ---------- Consistent section separators ---------- */


/* Disabled buttons remain quiet. */



/* ===== tender-outer-wrapper-surface-fix ===== */

/* Tender views are layout containers, not visual cards. */


/* Keep depth only on the actual toolbar and data card. */




/* Prevent any inherited full-section hover depth. */



/* ===== remove-redundant-wrappers-and-selection-trays ===== */

/* =========================================================
   Remove redundant card-behind-card wrappers
   ========================================================= */

/* Fleet page sections are layout containers, not cards. */


/* Fleet depth remains only on real content cards. */


/* Work Journal outer card no longer surrounds both toolbar and table. */


/* Work Journal toolbar is a clean row, not a card surface. */


/* The table itself keeps the visual depth. */


/* Work Journal editor remains a proper card when editing/creating. */


/* =========================================================
   Remove trays behind selection buttons
   ========================================================= */


/* Tender navigation wrapper should not create another tray. */


/* Fleet top navigation area also stays transparent. */


/* Director Claim tabs should not sit inside a coloured rounded strip. */


/* Admin status filter tray removal, including inline background styles. */


/* Keep each selection button individually defined and readable. */


/* Active buttons remain subtle and distinct without a group tray. */


/* Vehicle category filters are already individual controls; ensure no tray appears. */


/* Prevent hover rules from reviving wrapper cards. */





/* ===== tender-simple-code-list-and-modal-polish ===== */

/* =========================================================
   Tender code dropdown: simple alphabetical list
   ========================================================= */
























/* Remove old chip/category layout entirely inside code dropdowns. */


/* =========================================================
   New Project modal: stronger hierarchy and visual weight
   ========================================================= */
body > #tn-new-modal{
  background:rgba(47,65,86,.46)!important;
  backdrop-filter:none!important;
  backdrop-filter:none!important;
}







body > #tn-new-modal input::placeholder{
  color:#2F4156!important;
  font-weight:450!important;
}



/* Code picker has a clearer dropdown affordance. */
body > #tn-new-modal #tn-n-cidb-picker,
body > #tn-new-modal #tn-n-mof-picker{
  position:relative!important;
  padding-right:36px!important;
}
body > #tn-new-modal #tn-n-cidb-picker::after,
body > #tn-new-modal #tn-n-mof-picker::after{
  content:"⌄"!important;
  position:absolute!important;
  right:13px!important;
  top:50%!important;
  transform:translateY(-54%)!important;
  color:#2F4156!important;
  font-size:16px!important;
  line-height:1!important;
  pointer-events:none!important;
}

/* Site visit row is visually aligned with adjacent controls. */


body > #tn-new-modal #tn-n-sv-toggle{
  width:17px!important;
  min-width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
}

/* Footer is distinct, balanced, and visually anchored. */


body > #tn-new-modal #tn-create-btn{
  background:#2F4156!important;
  color:#fff!important;
  border-color:#2F4156!important;
  box-shadow:none!important;
}




/* ===== tender-larger-stable-modal-footer-fix ===== */

/* Larger, more stable New Project dialog. */
body > #tn-new-modal{
  padding:22px!important;
}


/* Give the form more breathing room without becoming oversized. */




/* Code selector fields become dropdown anchors instead of expanding the modal. */


body > #tn-new-modal #tn-n-cidb-menu,
body > #tn-new-modal #tn-n-mof-menu{
  position:absolute!important;
  top:calc(100% - 10px)!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  min-width:320px!important;
  max-height:none!important;
  margin:0!important;
  z-index:60!important;
}

/* Selected codes stay on one stable line and never increase card height. */
body > #tn-new-modal #tn-n-cidb-picker,
body > #tn-new-modal #tn-n-mof-picker{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}





/* Dropdown list has one clean scroll area and a useful width. */



/* Footer stays inside the rounded card; no negative full-bleed margins. */




body > #tn-new-modal #tn-create-btn{
  min-width:240px!important;
}

/* Keep the dropdown visible above the sticky footer. */


/* Medium screens remain comfortable. */

@media(max-width:620px){
  body > #tn-new-modal{
    padding:10px!important;
  }
  
  body > #tn-new-modal #tn-n-cidb-menu,
  body > #tn-new-modal #tn-n-mof-menu{
    position:fixed!important;
    left:14px!important;
    right:14px!important;
    top:18vh!important;
    width:auto!important;
    min-width:0!important;
    max-height:64dvh!important;
  }
  
}


/* ===== selection-hover-border-visibility-fix ===== */

/* Selection buttons must never move outside their row on hover. */


/* Use colour and shadow—not vertical movement—for hover feedback. */


/* Active tabs retain a complete border during hover. */


/* Give tab rows enough breathing room around the full border. */



/* ===== tender-code-viewport-popover-fix ===== */

/* CIDB/MOF menus are true viewport popovers, never part of modal flow. */






/* Footer remains inside the form and below normal content. */


/* Remove old absolute positioning rules from modal descendants. */
body > #tn-new-modal #tn-n-cidb-menu,
body > #tn-new-modal #tn-n-mof-menu{
  position:fixed!important;
  inset:auto!important;
  min-width:0!important;
}

/* Selected picker remains stable and does not grow vertically. */
body > #tn-new-modal #tn-n-cidb-picker,
body > #tn-new-modal #tn-n-mof-picker{
  min-height:46px!important;
  height:46px!important;
  overflow:hidden!important;
  flex-wrap:nowrap!important;
}


/* ===== tender-code-popover-clean-list-fix ===== */

/* Fully self-contained CIDB/MOF popover styles after moving under body */

























/* Remove any legacy chip styles from body-level menu */


/* Better scrollbar */





/* ===== tender-code-popover-scroll-containment ===== */





/* ===== tender-system-font-live-countdown ===== */

/* Tender IDs use the same system font as every other UI element. */



/* Remove remaining inline monospace treatment from Tender identifiers. */


/* Countdown and Status are centered in their columns. */



/* Live countdown hierarchy. */







/* ===== tender-detail-edit-action-alignment ===== */








/* ===== tender-war-room-independent-column-scroll ===== */

/* =========================================================
   War Room: each status column scrolls independently
   ========================================================= */





















/* Smaller screens retain independent scrolling with horizontal column navigation. */





/* ===== tender-war-room-wrapper-removed ===== */

/* War Room columns are layout lanes, not visual cards. */


/* Keep the status header fixed and visually distinct. */


/* Scrolling lane itself is transparent. */


/* Cards provide all the depth. */


/* Empty lanes stay clean without a large blank panel. */


/* Keep scrollbars close to cards without creating a visible lane surface. */



/* ===== documents-compact-table-action-buttons ===== */

/* Documents table actions use the compact table-control scale. */


/* Keep action icons proportionate to the compact button. */


/* Tight, consistent spacing between actions. */



/* Hover remains subtle and does not enlarge or shift the control. */



/* ===== library-digital-shelf-redesign ===== */






















.doc{--lib-accent:#567C8D}.sheet{--lib-accent:#2F4156}.slides{--lib-accent:#567C8D}.image{--lib-accent:#567C8D}.file{--lib-accent:#2F4156}

























/* ===== library-upload-button-icon-fix ===== */






/* ===== library-table-column-balance-fix ===== */

/* Balance Library list columns */


/* Center all headers, including Document Name */



/* Keep document cell content left aligned */


/* Give uploader more room and prevent awkward wrapping */




/* Limit document title to two lines so the column stays compact */



/* Maintain compact Category and Type columns */





/* ===== session-refresh-persistence-ui ===== */

#authScreen.session-restoring .authCard{
  pointer-events:none!important;
  opacity:.76!important;
}
#authScreen.session-restoring .authCard::before{
  content:"Restoring your session…"!important;
  position:absolute!important;
  left:50%!important;
  top:12px!important;
  transform:translateX(-50%)!important;
  z-index:5!important;
  padding:6px 11px!important;
  border:1px solid rgba(200,217,230,.9)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.9)!important;
  color:#2F4156!important;
  box-shadow:none!important;
  font-size:11px!important;
  font-weight:750!important;
  white-space:nowrap!important;
}


/* ===== restore-current-module-session-ui ===== */

html.suite-session-checking #authScreen{
  visibility:hidden!important;
}
html.suite-session-checking::before{
  content:"Restoring workspace…"!important;
  position:fixed!important;
  inset:0!important;
  z-index:30000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#FCFBFA!important;
  color:#2F4156!important;
  font-family:"Google Sans"!important;
  font-size:13px!important;
  font-weight:750!important;
}


/* ===== documents-payment-toggle-fix ===== */









/* ===== documents-attachment-remove-button-fix ===== */

/* Uploaded attachment row */






/* Dedicated compact remove control */







/* ===== fleet-records-filter-panel-fix ===== */

/* =========================================================
   Fleet Records: compact filters + proper table card
   ========================================================= */


/* The filters are a toolbar, not a large content card. */












/* Only the bookings list is a card. */






/* Prevent generic hover rules from enlarging the toolbar or table card. */







/* ===== tender-apache-echarts-theme ===== */













/* ===== documents-neat-attachment-list ===== */






































/* ===== director-claim-transaction-rounded-wrapper-fix ===== */

/* Transaction Record is one continuous rounded surface. */


/* Prevent inner tool areas from drawing their own sharp container edge. */


/* Clip table rows, sticky header and scrollbar to the card's bottom radius. */


/* Ensure the table itself does not create a second square surface. */


/* The final row should finish cleanly at the rounded bottom edge. */


/* Keep the right scrollbar inset visually inside the rounded card. */




/* Firefox scrollbar treatment. */



/* ===== director-claim-paid-settings-rounded-fix ===== */

/* =========================================================
   Director Claim — Paid Claims and Settings rounded surfaces
   ========================================================= */

/* Both sections should behave as one continuous rounded card. */


/* Remove inner square-wrapper treatment. */


/* Paid Claims table and scrollbar follow the outer card corners. */






/* Keep the Paid Claims scrollbar inside the rounded surface. */





/* Settings grid stays inside the card without producing a second rectangle. */






/* Ensure the bottom of Settings is clipped by the outer card. */



/* ===== library-table-consistent-system ===== */

/* =========================================================
   Library List View — shared module table design system
   ========================================================= */






/* Same header treatment used by Documents and Tender tables. */


/* Same row density and separators as other module tables. */








/* Document column stays left aligned; metadata columns stay centred. */




/* Document cell hierarchy matches other modules. */












/* Badges use the same compact metadata weight as other modules. */




/* Uploader presentation follows standard avatar + text rows. */








/* Same compact icon-button scale used in Documents and other tables. */
















/* Preserve the shared rounded card edge around the scrolling table. */









/* ===== work-journal-expandable-row-design ===== */































/* ===== director-claim-centered-animated-stats ===== */











@keyframes dclStatPulse{
  0%{
    opacity:.5;
    transform:translateY(4px) scale(.985);
  }
  45%{
    opacity:1;
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}




/* ===== library-tags-column-redesign ===== */

/* Four-column Library table: Document, Tags, Updated, Actions */


























/* Remove obsolete column-specific alignment from earlier Library styles. */





/* ===== library-table-spacing-alignment-fix ===== */

/* Remove the Library-only second layer of horizontal padding. */


/* Match the table card position used by other modules. */




/* Stable four-column geometry. */






/* Bring content closer to the card border, same as other system tables. */



/* Clean document cell alignment. */






/* Tags sit on one calm baseline and wrap predictably. */



/* Date and actions share the same visual centre line. */





/* Keep resource heading aligned with the table edge. */





/* ===== library-clean-rows-actions-fit ===== */

/* Final Library list refinement: clean document rows and contained actions. */




/* Let the title column absorb the remaining space. */








/* PDF tile removed; document copy now starts on one clean alignment line. */










/* Tags remain compact and aligned to the same visual baseline. */


/* Five controls fit safely inside the cell: 5×30 + 4×6 = 174px. */






/* Keep the final button clear of the outer rounded border. */





/* ===== documents-claim-attachment-preview-nav-fix ===== */







body > #dc-preview-ov #dc-preview-prev,
body > #dc-preview-ov #dc-preview-next{
  min-width:82px!important;
  cursor:pointer!important;
  pointer-events:auto!important;
}


















/* ===== fleet-terms-popup-style ===== */




























/* ===== fleet-responsive-mobile-card-layout ===== */

/* Fleet responsive layout: desktop table, mobile booking cards */









/* ===== fleet-filter-wrapper-hover-removal ===== */

/* The Records filter area is a toolbar, not a hoverable card. */




/* Keep hover/focus feedback only on the actual inputs and selects. */



/* ===== fleet-safe-confirm-dialog-style ===== */

#fl-confirm-ov{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(47,65,86,.48);backdrop-filter:none!important;backdrop-filter:none!important;}
#fl-confirm-ov.on{display:flex;animation:overlayFadeIn .16s ease}
#fl-confirm-box{width:min(430px,calc(100vw - 32px));overflow:hidden;border:1px solid rgba(200,217,230,.94);border-radius:18px;background:#FCFBFA;box-shadow:none!important;animation:modalPopIn .18s cubic-bezier(.22,1,.36,1)}
.fl-confirm-body{padding:24px 24px 18px;display:flex;align-items:flex-start;gap:15px}
.fl-confirm-icon{width:44px;height:44px;min-width:44px;border-radius:13px;display:grid;place-items:center}
.fl-confirm-icon.neutral{background:#FCFBFA;color:#2F4156}.fl-confirm-icon.success{background:#FCFBFA;color:#2F4156}.fl-confirm-icon.danger{background:#FCFBFA;color:#2F4156}.fl-confirm-icon.warning{background:#FCFBFA;color:#2F4156}
.fl-confirm-copy{min-width:0;flex:1}.fl-confirm-title{margin:1px 0 7px;font-size:18px;font-weight:800;letter-spacing:-.25px;color:#2F4156}.fl-confirm-message{margin:0;color:#2F4156;font-size:13px;line-height:1.55}
.fl-confirm-actions{display:flex;justify-content:flex-end;gap:9px;padding:15px 20px 20px;border-top:1px solid #F5EFEB;background:#FCFBFA}
.fl-confirm-actions button{min-height:40px;padding:0 16px;border-radius:10px;font-size:12.5px;font-weight:800;cursor:pointer}
#fl-confirm-cancel{border:1px solid #C8D9E6;background:#FCFBFA;color:#2F4156}#fl-confirm-cancel:hover{background:#FCFBFA;border-color:#C8D9E6}
#fl-confirm-ok{border:1px solid transparent;color:#fff;background:#2F4156}#fl-confirm-ok.success{background:#2F4156}#fl-confirm-ok.danger{background:#2F4156}#fl-confirm-ok.warning{background:#2F4156}
@media(max-width:560px){#fl-confirm-ov{align-items:flex-end;padding:12px}#fl-confirm-box{width:100%;border-radius:18px}.fl-confirm-body{padding:21px 18px 16px}.fl-confirm-actions{display:grid;grid-template-columns:1fr 1fr;padding:14px 16px 16px}.fl-confirm-actions button{width:100%}}


/* ===== manage-access-explicit-save-feedback ===== */















/* ===== manage-access-clean-balanced-table ===== */












































/* ===== manage-access-navigation-module-icons ===== */


























/* ===== manage-access-final-alignment ===== */

/* Balanced column geometry and consistent vertical rhythm */














/* Treat all permission controls as one centred unit. */
















/* Keep text baselines stable across all rows. */










/* ===== manage-access-consistent-module-design ===== */

/* =========================================================
   Manage Access — aligned with the shared Documents/Fleet/
   Tenders/Library visual system. Logic and data are unchanged.
   ========================================================= */



/* Header */






/* Status filter matches the segmented controls used by other modules */










/* Main table card */




/* Table geometry */


















/* Balanced column widths */












/* User identity */




/* Inputs match other modules */






/* Role/status badges */












/* App permission icons */


















/* Access group and save feedback */

















/* Action buttons now match the shared secondary/destructive system */












/* Pager matches Library/Documents/Fleet controls */














/* Mobile uses the same responsive card principle as Fleet */



/* ===== library-upload-title-textarea ===== */






/* ===== manage-access-admin-row-alignment-fix ===== */







/* ===== manage-access-pagination-wrapper-removal ===== */

/* Pagination is a control row, not a separate card/tray. */







/* ===== suite-responsive-screen-density ===== */

:root{
  --suite-page-x:clamp(16px,2.2vw,32px);
  --suite-page-y:clamp(18px,2vw,28px);
  --suite-title-size:clamp(21px,1.75vw,27px);
  --suite-subtitle-size:clamp(12px,.92vw,13.5px);
  --suite-body-size:clamp(12px,.88vw,13.5px);
  --suite-small-size:clamp(10px,.76vw,11.5px);
  --suite-control-h:clamp(34px,2.65vw,42px);
  --suite-card-radius:clamp(11px,.9vw,14px);
  --suite-row-pad-y:clamp(8px,.75vw,12px);
}









#app input:not([type="checkbox"]):not([type="radio"]),
#app select{
  min-height:var(--suite-control-h)!important;
}

#app textarea{
  font-size:var(--suite-body-size)!important;
  line-height:1.45!important;
}



#app table th{
  padding-top:clamp(9px,.72vw,11px)!important;
  padding-bottom:clamp(9px,.72vw,11px)!important;
  font-size:var(--suite-small-size)!important;
  line-height:1.2!important;
}

#app table td{
  padding-top:var(--suite-row-pad-y)!important;
  padding-bottom:var(--suite-row-pad-y)!important;
  font-size:var(--suite-body-size)!important;
  line-height:1.32!important;
}







@media (max-width:1440px), (max-height:850px){
  :root{
    --suite-page-x:22px;
    --suite-page-y:20px;
    --suite-title-size:23px;
    --suite-subtitle-size:12.5px;
    --suite-body-size:12px;
    --suite-small-size:10.25px;
    --suite-control-h:36px;
    --suite-row-pad-y:8px;
  }

  #sidebar{
    --sidebar-expanded:214px!important;
    --sidebar-collapsed:62px!important;
  }

  #sidebar.expanded{width:214px!important}
  #sidebar:not(.expanded){width:62px!important}
  #main{margin-left:62px!important}
  #app.sidebar-expanded #main{margin-left:214px!important}

  #sidebar .modItem{
    min-height:36px!important;
    font-size:12px!important;
  }

  #sidebar:not(.expanded) .modItem{
    width:36px!important;
    height:36px!important;
    min-height:36px!important;
  }

  #sidebar .brand{
    min-height:38px!important;
    padding-bottom:10px!important;
  }

  #sidebar #gsBtn{
    height:36px!important;
    font-size:11.5px!important;
  }

  

  

  #app table th,
  #app table td{
    padding-left:11px!important;
    padding-right:11px!important;
  }
}

@media (max-width:1280px), (max-height:720px){
  :root{
    --suite-page-x:18px;
    --suite-page-y:17px;
    --suite-title-size:21.5px;
    --suite-subtitle-size:12px;
    --suite-body-size:11.5px;
    --suite-small-size:10px;
    --suite-control-h:34px;
    --suite-row-pad-y:7px;
  }

  #sidebar{
    --sidebar-expanded:204px!important;
    --sidebar-collapsed:58px!important;
  }

  #sidebar.expanded{width:204px!important}
  #sidebar:not(.expanded){width:58px!important}
  #main{margin-left:58px!important}
  #app.sidebar-expanded #main{margin-left:204px!important}

  #sidebar:not(.expanded) .modItem{
    width:34px!important;
    height:34px!important;
    min-height:34px!important;
  }

  

  #app table th,
  #app table td{
    padding-left:9px!important;
    padding-right:9px!important;
  }

  
}

@media (max-width:1024px){
  :root{
    --suite-page-x:16px;
    --suite-title-size:21px;
    --suite-body-size:12px;
    --suite-small-size:10px;
    --suite-control-h:38px;
  }

  

  
}

@media (max-width:620px){
  :root{
    --suite-page-x:12px;
    --suite-page-y:14px;
    --suite-title-size:20px;
    --suite-subtitle-size:12px;
    --suite-body-size:12px;
    --suite-small-size:10px;
    --suite-control-h:42px;
  }

  #app input:not([type="checkbox"]):not([type="radio"]),
  #app select,
  #app textarea{
    font-size:16px!important;
  }

  

  
}




/* ===== fleet-action-loading-fix ===== */





/* ===== fleet-clean-module-header ===== */


























/* ===== fleet-nonredundant-header-fix ===== */










/* ===== fleet-inline-availability-layout ===== */




















/* ===== fleet-tabs-system-consistency-fix ===== */

/* Fleet section controls now use the same clean, neutral control language
   as the rest of the suite. No segmented wrapper, no floating tray. */














/* Remove any inherited visual tray around the header controls */







/* ===== suite-dark-frosted-primary-buttons ===== */

/* =========================================================
   Dark frosted primary control treatment
   Replaces solid navy controls with a quieter glass finish.
   Destructive, warning and success controls remain unchanged.
   ========================================================= */

:root{
  --frost-dark-bg:rgb(35,33,39);
  --frost-dark-bg-hover:rgb(35,33,39);
  --frost-dark-border:rgba(86,124,141,.30);
  --frost-dark-border-hover:rgba(200,217,230,.42);
  --frost-dark-shadow:
    0 8px 22px rgba(47,65,86,.14),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(47,65,86,.16);
}

/* Shared primary buttons */


/* Hover */


/* Pressed state */


/* Keep dark frosted controls visually quiet when disabled */


/* Fleet active tabs — explicitly remove the old solid navy */


/* Admin module toggles retain their green status dot/check */



/* ===== director-claim-single-line-filter-toolbar ===== */

/* Transaction Record controls: balanced one-line toolbar on desktop/laptop. */








/* Compact laptop density without creating a second line. */


/* Tablet: use two balanced rows rather than crushing controls. */


/* Mobile: comfortable full-width controls. */



/* ===== dashboard-and-approval-table-balance-final ===== */

/* Continue working card: keep title and subtitle as a deliberate vertical group. */








/* Approval table: clearer hierarchy, balanced columns, calmer density. */

































/* ===== document-approval-premium-refinement ===== */

/* Structured approval table: generous action gutter, calmer hierarchy, better scan rhythm. */































/* ===== documents-actions-gutter-final-fix ===== */






/* ===== documents-card-view-redesign ===== */









































/* ===== documents-requester-mapping-ui ===== */






/* ===== documents-scalable-compact-card-final ===== */

/* Scalable approval cards: dense, functional, and responsive. */


































/* ===== documents-balanced-eight-card-layout ===== */

/* Exactly eight cards per page on wide screens: 2 columns × 4 rows. */







/* Completed/approved cards remain visually balanced even with only two actions. */







/* ===== documents-frosted-glass-card-refine ===== */

















/* ===== documents-clickable-attachment-visibility-fix ===== */

/* The label is the first div; the first file row is therefore the second div. */






/* ===== tender-document-style-files ===== */












/* ===== dc-compact-saas-table-fix ===== */



































/* ===== tender-edit-visibility-fix ===== */






/* ===== tender-edit-button-size-fix ===== */






/* ===== vendor-management-style ===== */






















































/* ===== vendor-role-native-style ===== */





/* ===== vendor-full-page-layout ===== */

#vm-form-ov{
  position:fixed!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:var(--vm-sidebar-offset,58px)!important;
  z-index:36!important;
  padding:0!important;
  display:none!important;
  background:#FCFBFA!important;
  overflow:hidden!important;
}
#vm-form-ov.on{display:block!important}















#vm-form-ov #vm-form-msg{
  position:fixed!important;
  right:30px!important;
  bottom:72px!important;
  max-width:520px!important;
  z-index:2!important;
}


#vm-form-ov #vm-save-btn{margin-left:auto!important}


@media(max-width:760px){
  #vm-form-ov{left:0!important;z-index:90!important}
  
  
  
  
  
  
  
}


/* ===== auth-account-type-switch-style ===== */

.authAccountSwitch{
  display:flex;
  gap:4px;
  padding:4px;
  border:1px solid rgba(77,75,80,.13);
  border-radius:11px;
  background:rgba(77,75,80,.055);
  backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.authAccountSwitchScreen{
  position:fixed;
  top:22px;
  right:24px;
  z-index:20;
  box-shadow:none!important;
}
.authAccountSwitch button{
  min-width:74px;
  height:31px;
  padding:0 13px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#2F4156;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
}
.authAccountSwitch button:hover{color:#2F4156;background:rgba(255,255,255,.7)}
.authAccountSwitch button.on{
  color:#2F4156;
  background:#FCFBFA;
  box-shadow:none!important;
}
.authRoleNotice{
  margin:2px 0 12px;
  padding:10px 12px;
  border:1px solid rgba(77,75,80,.10);
  border-radius:9px;
  background:rgba(77,75,80,.045);
  color:#2F4156;
  font-size:11px;
  line-height:1.5;
}
@media(max-width:460px){
  .authAccountSwitchScreen{
    top:12px;
    right:12px;
  }
  .authAccountSwitch button{
    min-width:64px;
    padding:0 10px;
  }
}


/* ===== vendor-original-reference-style ===== */

/* Original Vendor Portal visual language, blended into the current workspace. */




















/* Full-page application */
#vm-form-ov{
  background:rgb(77,75,80)!important;
}


















/* ===== vendor-ui-access-cleanup ===== */

/* Remove leftover module artwork that created the half-screen background. */


#frame-vendors{
  background:#FCFBFA!important;
}


/* Vendor CTA stays blue on hover instead of becoming white. */



/* Clean, aligned Vendor search/filter toolbar. */










/* ===== manage-access-staff-vendor-style ===== */















/* ===== manage-access-clean-saas-redesign ===== */

/* Remove decorative module artwork and background blobs. */




/* Cleaner page spacing and hierarchy. */





/* Compact Staff / Vendor tabs. */








/* Cleaner status filter. */
#admStatusFilter{
  gap:18px!important;
  margin:0 0 14px!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
}
#admStatusFilter button{
  position:relative!important;
  min-height:30px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#2F4156!important;
  font-size:11.5px!important;
  font-weight:700!important;
  box-shadow:none!important;
}
#admStatusFilter button:hover{
  color:#2F4156!important;
  background:transparent!important;
}
#admStatusFilter button.on{
  color:#2F4156!important;
  background:transparent!important;
}
#admStatusFilter button.on::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-3px!important;
  height:2px!important;
  background:#2F4156!important;
  border-radius:999px!important;
}

/* Table styling. */




/* Buttons */
#admMigrateBtn{
  height:34px!important;
  padding:0 13px!important;
  border-radius:8px!important;
  background:#2F4156!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:750!important;
  box-shadow:none!important;
}
#admMigrateBtn:hover{
  background:#363438!important;
}

/* Vendor access chip */


/* Remove old tab icon styling. */


@media(max-width:700px){
  
  
  #admStatusFilter{gap:14px!important;overflow-x:auto!important}
}


/* ===== manage-access-table-item-cleanup ===== */

/* Clean, tighter table row layout */







/* Practical column balance */







/* User cell */




/* Form controls inside row */


/* Pills / chips */





/* Access column */







/* Action column */





/* Helper labels in access area */


/* Empty state */






/* ===== manage-access-badge-overlap-fix ===== */

/* Keep Registration and Status pills inside their own columns. */
















/* ===== manage-access-alignment-refine ===== */

/* Manage Access: cleaner, more aligned row composition */













































/* ===== document-secure-download-style ===== */





/* ===== document-table-visual-balance-fix ===== */

/* Improve content hierarchy so table information is as readable as controls. */




















/* ===== document-cancel-comments-ui ===== */

















/* ===== document-owner-cancel-visibility-fix ===== */








/* ===== document-professional-layout-final ===== */

/* Final Document module visual hierarchy and controlled sizing */














/* Compact action controls: maximum three per row, never bleed into adjacent columns */







/* Consistent cards with controlled height */














/* Notes become compact previews; details remain available on click */













/* ===== axicom-solid-surface-theme ===== */

/* Solid surface theme — removes glass/translucent UI treatments */
:root{
  --solid-page:#F5EFEB;
  --solid-panel:#ffffff;
  --solid-soft:#ffffff;
  --solid-muted:#F5EFEB;
  --solid-line:#C8D9E6;
}

html,body{
  background:var(--solid-page)!important;
}

/* Remove blur and glass effects globally without changing visibility/animation states. */
*,*::before,*::after{
  backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Main application surfaces */


/* Remove decorative translucent scenery. */
#moduleBackdrop,#moduleTransitionVeil,.portal-blur-layer{
  display:none!important;
  background:var(--solid-page)!important;
}

/* Navigation and shell */
#sidebar,.sidebar,.topbar,.appHeader,.header,.mainHeader{
  background:var(--solid-panel)!important;
  border-color:var(--solid-line)!important;
}

/* Authentication */
.authPage,.authShell,.authPanel,.authCard{
  background:var(--solid-panel)!important;
}
.authTabs{
  background:var(--solid-muted)!important;
  border-color:var(--solid-line)!important;
}
.authTabs button{
  background:var(--solid-soft)!important;
  border-color:var(--solid-line)!important;
}
.authTabs button.on{
  background:#2F4156!important;
  color:#ffffff!important;
  border-color:#2F4156!important;
}




/* Common cards, panels, tables and toolbars */


/* Form controls */
input,select,textarea,.input,.select,.textarea,.searchBox,.search-input{
  background:var(--solid-panel)!important;
  border-color:var(--solid-line)!important;
}
input:disabled,select:disabled,textarea:disabled{
  background:var(--solid-muted)!important;
}

/* Neutral controls that were previously transparent */

button:hover,.btn:hover,.iconBtn:hover,.action-btn:hover{
  background:var(--solid-muted)!important;
}

/* Table rows and attachment rows */
thead th{
  background:var(--solid-muted)!important;
}

tbody tr:nth-child(even) td{
  background:var(--solid-soft)!important;
}

/* Solid modal backdrops instead of translucent overlays. */


/* Keep coloured statuses solid. */





/* Ensure cards never inherit transparent inline module backgrounds. */



/* ===== buttons-flat-solid-shadow-universal-fix ===== */

:root{
  --btn-flat-bg:#ffffff;
  --btn-flat-text:#2F4156;
  --btn-flat-shadow:0 8px 18px rgba(47,65,86,.10);
  --btn-flat-shadow-hover:0 10px 22px rgba(47,65,86,.14);
  --btn-flat-active:#2F4156;
  --btn-flat-active-hover:#2F4156;
  --btn-flat-active-text:#ffffff;
  --btn-flat-radius:12px;
  --btn-flat-h:40px;
  --btn-flat-h-sm:34px;
  --btn-flat-h-icon:36px;
}

/* universal flat solid buttons */




/* dark primary buttons and selected tabs */




/* semantic action buttons */









/* icon-only buttons */


/* small buttons */


/* readable disabled state */


/* button contents inherit for visibility */


/* remove glass/outline look on common pseudo button toggles */




/* ===== buttons-black-white-final-override ===== */

:root{
  --bw-white:#ffffff;
  --bw-black:#2F4156;
  --bw-text:#363438;
  --bw-muted:#567C8D;
  --bw-shadow:0 8px 18px rgba(47,65,86,.12);
  --bw-shadow-strong:0 10px 22px rgba(47,65,86,.22);
}

/* All button-like controls: solid white, dark text */


/* Hover remains white, slightly stronger shadow */


/* Active / selected / primary buttons: solid black */


/* Active hover stays black */


/* Destructive actions are black too, as requested */


/* Disabled: light grey for visibility, not tinted */


/* Ensure icons and labels inherit button colour */


/* Keep Manage Access Staff/Vendor tabs text-only with underline */




/* ===== library-upload-button-visibility-final-fix ===== */

/* Final override: Library upload actions must always be visible and readable. */








/* ===== director-claim-primary-button-visibility-final ===== */

/* Director Claim: keep all primary action labels readable */






/* ===== work-journal-saas-redesign-final ===== */

/* Work Journal — clean table-first SaaS redesign. Existing data and actions unchanged. */







/* List shell: toolbar stays open; table is the only visible main surface. */
























/* Expanded detail becomes a compact nested information panel. */







/* Editor: one clean form surface with visible field grouping. */




















/* ===== google-drive-user-avatar-ui ===== */

.suite-user-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex:0 0 auto;color:#fff;font-weight:800}
.suite-user-avatar img{width:100%;height:100%;display:block;object-fit:cover}













/* ===== document-action-readability-and-preview-fix ===== */

/* Document workflow actions: force readable contrast in cards and modal portals. */






body > #dc-preview-ov #dc-preview-frame[aria-busy="true"] {
  background:#FCFBFA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Ccircle cx='21' cy='21' r='16' fill='none' stroke='%23d7d0dc' stroke-width='4'/%3E%3Cpath d='M21 5a16 16 0 0 1 16 16' fill='none' stroke='%234d4b50' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center center / 42px 42px no-repeat!important;
}


/* ===== dc-modal-action-contrast-final-fix ===== */

/* Final specificity fix for approval/rejection/revision modal actions.
   Prevents broad button theme rules from producing white text on a white surface. */



/* Keep textarea within its own box and stop resize handles from disturbing the action area. */
body > #dc-ap-modal textarea,
body > #dc-rj-modal textarea,
body > #dc-rv-modal textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  resize: vertical !important;
  position: relative !important;
  z-index: 1 !important;
}



/* ===== tender-key-data-font-size-fix ===== */

/* Improve readability of Tender ID, Status and Countdown in list/card views. */






/* ===== dcl-paid-claim-button-fix ===== */

/* Keep the Director Claim primary action readable inside cards and modals. */





/* ===== dcl-paidclaims-clean-table-fix ===== */

/* Clean, balanced Paid Claims table */
























/* ===== v180-admin-create-user-css ===== */




/* ===== v192-ui-button-visibility-fix ===== */

/* v1.9.2 UI visibility fix: prevent white text on white selected/hover buttons */
button, .btn, a.btn, [role="button"] {
  text-shadow:none!important;
}
/* preserve readable active states */
.kpi-tab.active, .kpi-tab.selected, .kpi-tab.on,
.kpi-tabs button.active, .kpi-tabs button.selected,
.kpi-tabs button.on {
  background:#567C8D!important;
  color:#ffffff!important;
  border-color:#567C8D!important;
}
.kpi-tab:hover, .kpi-tabs button:hover {
  color:#2F4156!important;
}
/* generic action buttons with dark theme */
.btn-primary, .primary-btn, button.primary,
button[data-action="submit"], button[data-action="approve"] {
  color:#ffffff!important;
}
/* remove accidental white-on-white disabled/selected states */
button.on span, button.active span, button.selected span {
  color:inherit!important;
}


/* ===== v181-search-everything-glass-card ===== */

/* Search Everything — glass-card command palette refresh */
#gsOverlay{
  position:fixed!important;
  inset:0!important;
  display:none!important;
  align-items:flex-start!important;
  justify-content:center!important;
  padding:clamp(22px,8vh,86px) 18px 28px!important;
  background:rgba(34,49,66,.30)!important;
  backdrop-filter:blur(12px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(12px) saturate(140%)!important;
  z-index:300!important;
}
#gsOverlay.on{display:flex!important}
#gsBox{
  width:min(760px, calc(100vw - 36px))!important;
  max-height:min(78vh, 820px)!important;
  overflow:hidden!important;
  border-radius:24px!important;
  border:1px solid rgba(255,255,255,.52)!important;
  background:rgba(255,255,255,.72)!important;
  backdrop-filter:blur(22px) saturate(165%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(165%)!important;
  box-shadow:0 24px 68px rgba(19,30,41,.22),0 8px 26px rgba(19,30,41,.14)!important;
}
#gsInputWrap{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  padding:18px 20px 14px!important;
  border-bottom:1px solid rgba(47,65,86,.10)!important;
  background:rgba(255,255,255,.16)!important;
}
#gsInputWrap input,
#gsInput{
  width:100%!important;
  border:none!important;
  outline:none!important;
  background:transparent!important;
  color:#2F4156!important;
  font-size:15px!important;
  font-weight:600!important;
  padding:0!important;
  box-shadow:none!important;
}
#gsInput::placeholder{color:#7b8794!important}
.gsSearchBadge{
  width:42px;height:42px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(47,65,86,.08)!important;
  border:1px solid rgba(47,65,86,.08)!important;
  color:#2F4156!important;flex-shrink:0;
}
.gsInputMeta{min-width:0}
.gsInputLabel{
  margin-bottom:4px;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#6b7b8c;
}
.gsTopActions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.gsShortcut{
  display:inline-flex;align-items:center;justify-content:center;
  height:32px;padding:0 10px;border-radius:999px;
  border:1px solid rgba(47,65,86,.10)!important;
  background:rgba(255,255,255,.58)!important;
  color:#5b6a79!important;font-size:11px;font-weight:800;letter-spacing:.04em;
}
.gsCloseBtn{
  width:34px;height:34px;border-radius:11px;border:1px solid rgba(47,65,86,.10)!important;
  background:rgba(255,255,255,.58)!important;color:#2F4156!important;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}
.gsCloseBtn:hover{background:rgba(255,255,255,.88)!important;border-color:rgba(47,65,86,.18)!important;transform:translateY(-1px)}
#gsResults{
  flex:1 1 auto!important;
  overflow-y:auto!important;
  padding:10px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  background:transparent!important;
}
.gsSection{
  padding:4px 0 2px;
}
.gsSectionHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:4px 10px 8px;
}
.gsGroup{
  padding:0!important;
  font-size:10.5px!important;font-weight:800!important;
  letter-spacing:.09em!important;text-transform:uppercase!important;
  color:#667686!important;
}
.gsGroupCount{
  min-width:24px;height:22px;padding:0 8px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(47,65,86,.06)!important;color:#5f7080!important;
  font-size:11px;font-weight:800;
}
.gsItem{
  display:flex!important;align-items:center!important;gap:12px!important;
  padding:12px 14px!important;margin:0 4px 6px!important;
  border-radius:16px!important;cursor:pointer!important;
  border:1px solid rgba(255,255,255,.34)!important;
  background:rgba(255,255,255,.56)!important;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.gsItem:hover{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(86,124,141,.22)!important;
  box-shadow:0 8px 22px rgba(47,65,86,.08)!important;
  transform:translateY(-1px);
}
.gsItemIcon{
  width:36px;height:36px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(47,65,86,.07)!important;color:#2F4156!important;
}
.gsItem .t{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13.5px!important;font-weight:700!important;color:#2F4156!important;
}
.gsItem .s{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  min-height:24px;padding:0 9px;border-radius:999px;
  background:rgba(47,65,86,.06)!important;color:#62707f!important;
  font-size:11px!important;font-weight:700!important;
}
.gsItem .s.s-ghost{background:rgba(86,124,141,.10)!important;color:#567C8D!important}
#gsHint{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
  padding:12px 18px!important;border-top:1px solid rgba(47,65,86,.10)!important;
  background:rgba(255,255,255,.20)!important;color:#607081!important;
  font-size:11.5px!important;font-weight:600!important;
}
#gsHint b{
  display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;padding:0 8px;
  border-radius:999px;border:1px solid rgba(47,65,86,.10)!important;background:rgba(255,255,255,.62)!important;
  color:#2F4156!important;font-size:11px!important;font-weight:800!important;
}
.gsState{
  min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:26px 20px;text-align:center;color:#64748b;
}
.gsStateIcon{
  width:56px;height:56px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(47,65,86,.07)!important;color:#2F4156!important;
}
.gsStateTitle{font-size:15px;font-weight:800;color:#2F4156}
.gsStateDesc{max-width:420px;font-size:12.5px;line-height:1.55;color:#6b7b8c}
.gsState-loading .gsStateIcon svg{animation:spin 1s linear infinite}
@media(max-width:640px){
  #gsOverlay{padding:16px!important;align-items:flex-start!important}
  #gsBox{width:min(100%, calc(100vw - 20px))!important;max-height:calc(100vh - 32px)!important;border-radius:20px!important}
  #gsInputWrap{grid-template-columns:auto minmax(0,1fr)!important;padding:16px!important}
  .gsTopActions{grid-column:1/-1!important;justify-content:flex-end!important}
  .gsShortcut{display:none!important}
  #gsHint{flex-direction:column!important;align-items:flex-start!important}
}


/* ===== tn-tabs-nonactive-white-fix ===== */

/* Tenders workspace top tabs: keep inactive tabs white */




/* ===== dcl-tabs-nonactive-white-fix ===== */

/* Director Claim top tabs: keep inactive tabs white */




/* ===== global-search-readable-titles-fix ===== */

/* Search Everything — make finding titles readable instead of truncated */
#gsResults .gsItem{
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:12px!important;
  row-gap:4px!important;
  align-items:start!important;
  padding:13px 14px!important;
}
#gsResults .gsItemIcon{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  align-self:start!important;
}
#gsResults .gsItem .t{
  grid-column:2!important;
  grid-row:1!important;
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:4!important;
  line-clamp:4!important;
  line-height:1.4!important;
  overflow:hidden!important;
  word-break:break-word!important;
  overflow-wrap:anywhere!important;
}
#gsResults .gsItem .s{
  grid-column:2!important;
  grid-row:2!important;
  justify-self:start!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
@media(max-width:640px){
  #gsResults .gsItem .t{
    -webkit-line-clamp:5!important;
    line-clamp:5!important;
  }
}


/* ===== lib-specific-share-modal-real-fix ===== */

/* Real target: Library upload/edit modal is portaled directly under body. */












/* Hide the functional native checkbox completely. Global form CSS cannot stretch it. */









/* ===== phase4-command-palette-css ===== */

/* Phase 4 — Search Everything becomes a keyboard-first command palette. */
body.gs-command-open{overflow:hidden!important}
#gsBox{display:flex!important;flex-direction:column!important}
#gsResults{scrollbar-gutter:stable}
#gsResults .gsItem{
  grid-template-columns:36px minmax(0,1fr) auto!important;
  grid-template-rows:auto!important;
  align-items:center!important;
  min-height:68px!important;
  padding:11px 12px!important;
  outline:none!important;
}
#gsResults .gsItemIcon{grid-column:1!important;grid-row:1!important;align-self:center!important}
#gsResults .gsItemMain{grid-column:2!important;grid-row:1!important;display:flex!important;flex-direction:column!important;gap:5px!important;min-width:0!important}
#gsResults .gsItem .t{grid-column:auto!important;grid-row:auto!important;display:block!important;-webkit-line-clamp:2!important;line-clamp:2!important;font-size:13.5px!important;line-height:1.35!important}
#gsResults .gsItemMeta{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;overflow:hidden!important}
#gsResults .gsItem .s{grid-column:auto!important;grid-row:auto!important;display:block!important;min-height:0!important;padding:0!important;border-radius:0!important;background:transparent!important;color:#71808f!important;-webkit-text-fill-color:#71808f!important;font-size:10.5px!important;font-weight:600!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.gsModuleChip,.gsRecentTag{display:inline-flex!important;align-items:center!important;height:20px!important;padding:0 7px!important;border-radius:999px!important;background:#edf2f5!important;color:#40566b!important;-webkit-text-fill-color:#40566b!important;font-size:9.5px!important;font-weight:800!important;letter-spacing:.02em!important;white-space:nowrap!important;flex-shrink:0!important}
.gsRecentTag{background:#f5efeb!important;color:#6b5a50!important;-webkit-text-fill-color:#6b5a50!important}
.gsQuickOpen{grid-column:3!important;grid-row:1!important;display:inline-flex!important;align-items:center!important;gap:5px!important;height:30px!important;min-height:30px!important;padding:0 9px!important;border:1px solid rgba(47,65,86,.12)!important;border-radius:9px!important;background:#FCFBFA!important;color:#2F4156!important;-webkit-text-fill-color:#2F4156!important;font-size:10.5px!important;font-weight:800!important;cursor:pointer!important;opacity:0!important;transform:translateX(4px)!important;transition:opacity .12s ease,transform .12s ease,background .12s ease!important}
.gsQuickOpen svg{stroke:currentColor!important}
#gsResults .gsItem:hover .gsQuickOpen,#gsResults .gsItem.is-active .gsQuickOpen{opacity:1!important;transform:none!important}
#gsResults .gsItem.is-active{background:#edf3f6!important;border-color:#9eb6c3!important;box-shadow:0 0 0 2px rgba(86,124,141,.10)!important;transform:none!important}
#gsResults .gsItem.is-active .gsItemIcon{background:#2F4156!important;color:#fff!important}
#gsResults .gsItem.is-active .gsItemIcon svg{stroke:#fff!important}
.gsClearRecent{height:26px!important;min-height:26px!important;padding:0 8px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:#607182!important;-webkit-text-fill-color:#607182!important;font-size:10.5px!important;font-weight:800!important;cursor:pointer!important}
.gsClearRecent:hover{background:rgba(47,65,86,.06)!important;color:#2F4156!important;-webkit-text-fill-color:#2F4156!important}
#gsHint{justify-content:flex-start!important;gap:18px!important;font-size:10.5px!important;color:#6b7785!important;-webkit-text-fill-color:#6b7785!important}
#gsHint span{display:inline-flex!important;align-items:center!important;gap:4px!important;white-space:nowrap!important}
#gsHint kbd{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:23px!important;height:22px!important;padding:0 5px!important;border:1px solid rgba(47,65,86,.13)!important;border-bottom-width:2px!important;border-radius:6px!important;background:rgba(255,255,255,.72)!important;color:#42576a!important;-webkit-text-fill-color:#42576a!important;font:700 10px/1 inherit!important;box-shadow:none!important}
@media(max-width:640px){
  #gsResults .gsItem{grid-template-columns:34px minmax(0,1fr)!important;min-height:64px!important}
  .gsQuickOpen{display:none!important}
  #gsHint{gap:10px!important;overflow-x:auto!important}
  .gsShortcut{display:none!important}
}


/* ===== v180-admin-profile-picture-css ===== */





















/* ===== suite-phase5-form-ux ===== */

/* Phase 5 — conservative form UX layer. Never applies generic sizing to checkboxes/radios/files. */
#app .suite-required-mark{color:#b42318;font-weight:800;margin-left:3px}
#app .suite-field-invalid{border-color:#b42318!important;box-shadow:0 0 0 3px rgba(180,35,24,.10)!important;outline:none!important}
#app .suite-field-validating{cursor:progress}
#app .suite-field-error{display:block;margin-top:5px;font-size:12px;line-height:1.35;color:#b42318;font-weight:650}
#app .suite-char-count{display:block;margin-top:4px;text-align:right;font-size:11px;color:#6b7280}
#app .suite-form-pending{pointer-events:none;opacity:.78}
#app :is(input,select,textarea):focus-visible{outline:2px solid rgba(47,65,86,.30);outline-offset:1px}
#app :is(input,select,textarea)[aria-invalid="true"]{border-color:#b42318!important}
#app .suite-unsaved-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55;margin-left:6px;vertical-align:middle}
@media (prefers-reduced-motion:reduce){#app *{scroll-behavior:auto!important}}


/* ===== suite-ui-consistency-pass-v1 ===== */

/* =========================================================
   UI Consistency Pass — tables, actions, states, forms, mobile
   Scoped and loaded last to avoid changing business logic.
   ========================================================= */
:root{
  --suite-line:#e7e2e8;
  --suite-line-soft:#f1edf2;
  --suite-ink:#2F4156;
  --suite-muted:#77717c;
  --suite-surface:#ffffff;
  --suite-soft:#f8f6f8;
  --suite-danger:#9b2c2c;
  --suite-row-h:52px;
}

/* 1) Shared operational table treatment */






/* Filter bars become one quiet surface rather than a collection of floating controls. */


/* 2) Predictable row actions: identical footprint, destructive actions stay distinct. */



:is(button.danger,button.delete,button[aria-label*="Delete" i],button[title*="Delete" i]){
  --suite-action-danger:var(--suite-danger);
}

/* 3) Sticky action/footer bars for long forms and settings. */

/* Keep keyboard focus obvious and consistent. */


/* 4) One visual language for empty/loading/error content. */


.suite-ui-loading-state{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-height:92px!important;
  color:var(--suite-muted)!important;
  font-size:12.5px!important;
}
.suite-ui-loading-state::before{
  content:"";
  width:15px;height:15px;border-radius:50%;
  border:2px solid #d8d3d9;border-top-color:#567C8D;
  animation:suiteUiSpin .7s linear infinite;
}
@keyframes suiteUiSpin{to{transform:rotate(360deg)}}

/* 5) Mobile operational tables collapse into readable record cards.
   Labels are injected from their real table headers by suiteEnhanceOperationalTables(). */
@media(max-width:720px){
  .suite-responsive-table{
    min-width:0!important;
    display:block!important;
    background:transparent!important;
  }
  .suite-responsive-table colgroup,
  .suite-responsive-table thead{
    display:none!important;
  }
  .suite-responsive-table tbody{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
  }
  .suite-responsive-table tbody tr{
    display:block!important;
    width:100%!important;
    padding:10px 12px!important;
    border:1px solid var(--suite-line)!important;
    border-radius:12px!important;
    background:#FCFBFA!important;
    box-shadow:none!important;
  }
  .suite-responsive-table tbody tr:hover{background:#FCFBFA!important}
  .suite-responsive-table tbody td{
    display:grid!important;
    grid-template-columns:minmax(92px,34%) minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    min-height:0!important;
    padding:7px 0!important;
    border:0!important;
    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
  }
  .suite-responsive-table tbody td + td{
    border-top:1px solid #f2eef2!important;
  }
  .suite-responsive-table tbody td::before{
    content:attr(data-label);
    color:var(--suite-muted)!important;
    font-size:9.5px!important;
    line-height:1.25!important;
    font-weight:800!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
  }
  .suite-responsive-table tbody td > :is(input,select,textarea){
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  
  
}


/* ===== tender-new-project-packages-v8 ===== */






































/* ===== ui-v3-save-footer-fix ===== */

/* UI V3 - explicit sticky access save footer */











/* ===== suite-v3-performance-pass ===== */

.modFrame.module-enter{animation:suiteModuleEnterFast .18s ease-out both;}
@keyframes suiteModuleEnterFast{from{opacity:.82;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modFrame.module-enter{animation:none!important}}


/* ===== ui-v3-sidebar-visual-fix-20260828 ===== */

/* UI V3 sidebar visual corrections */
#sidebar.expanded .brandText{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:2px!important;
  line-height:1.05!important;
  white-space:normal!important;
  overflow:visible!important;
}
#sidebar.expanded .brandText b{
  display:block!important;
  font-size:13px!important;
  line-height:1.05!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
}
#sidebar.expanded .brandText small{
  display:block!important;
  margin-top:2px!important;
  font-size:9.5px!important;
  line-height:1.1!important;
  font-weight:650!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  color:#7C8792!important;
}
/* Collapsed rail: selected module must remain unmistakably visible. */
#sidebar:not(.expanded) #navList .modItem.on,
#sidebar:not(.expanded) #navList .modItem-home.on{
  background:#2F4156!important;
  color:#FFFFFF!important;
  box-shadow:none!important;
}
#sidebar:not(.expanded) #navList .modItem.on svg,
#sidebar:not(.expanded) #navList .modItem-home.on svg{
  color:#FFFFFF!important;
  stroke:#FFFFFF!important;
  opacity:1!important;
}
#sidebar:not(.expanded) #navList .modItem.on:hover,
#sidebar:not(.expanded) #navList .modItem-home.on:hover{
  background:#26374A!important;
  color:#FFFFFF!important;
}


/* ===== ui-v3-standard-page-header-rhythm-20260828 ===== */

/* ================================================================
   UI V3 — STANDARD PAGE HEADER RHYTHM
   One vertical anchor for every top-level workspace module.
   ================================================================ */
:root{
  --r3-page-top-pad:32px;
  --r3-page-header-gap:20px;
  --r3-page-header-min:58px;
  --r3-page-title:28px;
  --r3-page-subtitle:12.5px;
}

/* Direct page shells: normalize only vertical padding so existing horizontal
   workspace widths remain intact. */


/* Keep the first-level heading zone on the same vertical grid. */


/* Shared title baseline. */


/* Shared subtitle baseline. */


/* Settings has no wrapper head; reserve the same header zone explicitly. */



/* Tender navigation belongs immediately after the common heading zone. */


/* Fleet has a module header plus operational availability header. Avoid
   accidentally adding a second page-sized top gap to the latter. */


/* Mobile keeps the same rhythm at a smaller scale. */
@media(max-width:760px){
  :root{
    --r3-page-top-pad:22px;
    --r3-page-header-gap:16px;
    --r3-page-header-min:52px;
    --r3-page-title:24px;
  }
}


/* ===== auth-v4-full-redesign-final ===== */

/* ============================================================
   AUTH V4 — Fresh Identity split-screen authentication
   Presentation only. Existing IDs/functions remain unchanged.
   ============================================================ */
#authScreen{
  position:fixed!important;inset:0!important;z-index:99999!important;
  display:flex!important;align-items:stretch!important;justify-content:stretch!important;
  min-height:100dvh!important;padding:0!important;overflow:auto!important;
  background:#F4F6F8!important;color:#203246!important;
}
/* Auth visibility must outrank the split-screen display:flex rule. */
#authScreen.auth-hidden,#authScreen[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important}
#authScreen.auth-visible{display:flex!important;visibility:visible!important;pointer-events:auto!important}
#authScreen::before,#authScreen::after{content:none!important;display:none!important}
#authScreen .authV4Shell{width:100%;min-height:100dvh;display:grid;grid-template-columns:minmax(420px,46%) minmax(520px,54%);background:#F4F6F8}
#authScreen .authV4Brand{
  position:relative;min-height:100dvh;padding:48px 56px 42px;display:flex;flex-direction:column;overflow:hidden;
  color:#fff;background:#293B50!important;
}
#authScreen .authV4Brand::before{
  content:"";position:absolute;inset:auto -120px -170px auto;width:520px;height:520px;border-radius:50%;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.018);pointer-events:none
}
#authScreen .authV4Brand::after{
  content:"";position:absolute;top:18%;left:-90px;width:310px;height:310px;border-radius:50%;
  background:rgba(140,186,210,.07);filter:blur(2px);pointer-events:none
}
#authScreen .authV4BrandTop{position:relative;z-index:1;display:flex;align-items:center;gap:13px}
#authScreen .authV4BrandMark{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#fff;color:#293B50;font-size:21px;font-weight:850;box-shadow:0 8px 24px rgba(0,0,0,.12)}
#authScreen .authV4BrandName{display:flex;flex-direction:column;line-height:1.05}
#authScreen .authV4BrandName strong{font-size:15px;letter-spacing:-.15px;color:inherit}
#authScreen .authV4BrandName span{margin-top:4px;font-size:9px;font-weight:800;letter-spacing:1.7px;color:rgba(255,255,255,.62)}
#authScreen .authV4Hero{position:relative;z-index:1;margin:auto 0 32px;max-width:520px}
#authScreen .authV4Eyebrow,#authScreen .authV4Kicker{display:block;margin-bottom:15px;font-size:10px;font-weight:850;letter-spacing:1.8px}
#authScreen .authV4Eyebrow{color:#BFD7E4}
#authScreen .authV4Hero h2{margin:0;max-width:490px;font-size:clamp(38px,4vw,58px);line-height:1.02;letter-spacing:-2.1px;color:#fff;font-weight:760}
#authScreen .authV4Hero p{margin:20px 0 0;max-width:500px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.70)}
#authScreen .authV4Signals{position:relative;z-index:1;display:grid;gap:3px;margin-bottom:38px;max-width:510px}
#authScreen .authV4Signal{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:center;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
#authScreen .authV4SignalIcon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#D7E7EF;font-size:13px}
#authScreen .authV4Signal div{display:flex;flex-direction:column;gap:2px}
#authScreen .authV4Signal strong{font-size:12px;color:#fff;font-weight:720}
#authScreen .authV4Signal small{font-size:11px;color:rgba(255,255,255,.54);line-height:1.35}
#authScreen .authV4BrandFoot{position:relative;z-index:1;margin-top:auto;font-size:10px;font-weight:700;letter-spacing:.35px;color:rgba(255,255,255,.46)}
#authScreen .authV4Auth{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:48px 6vw;background:#F4F6F8!important}
#authScreen .authV4AuthInner{width:min(100%,470px)}
#authScreen .authV4MobileBrand{display:none}
#authScreen .authV4AccountHead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
#authScreen .authV4Kicker{margin:0 0 8px;color:#7890A2}
#authScreen .authV4AccountHead h3{margin:0;font-size:28px;line-height:1.05;letter-spacing:-.8px;color:#1F2E3D}
#authScreen .authV4AccountHead p{margin:8px 0 0;font-size:12.5px;color:#778493;line-height:1.5}
#authScreen .authAccountSwitchScreen{
  position:static!important;inset:auto!important;transform:none!important;margin:0!important;padding:3px!important;min-width:144px!important;
  display:flex!important;gap:2px!important;border:1px solid #DCE3E9!important;border-radius:10px!important;background:#EBF0F4!important;box-shadow:none!important
}
#authScreen .authAccountSwitchScreen button{height:32px!important;min-width:66px!important;padding:0 12px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:#667687!important;-webkit-text-fill-color:#667687!important;font-size:11.5px!important;font-weight:750!important;box-shadow:none!important}
#authScreen .authAccountSwitchScreen button.on{background:#fff!important;color:#26394D!important;-webkit-text-fill-color:#26394D!important;box-shadow:0 1px 3px rgba(35,50,65,.08)!important}
#authScreen .authCard{
  width:100%!important;max-width:none!important;margin:0!important;padding:28px!important;overflow:visible!important;
  background:#FFFFFF!important;background-image:none!important;border:1px solid #E0E6EB!important;border-radius:18px!important;
  box-shadow:0 20px 50px rgba(31,46,61,.07)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
#authScreen .authCard::before,#authScreen .authCard::after{content:none!important;display:none!important}
#authScreen .authCard>h1{margin:0!important;text-align:left!important;font-size:18px!important;line-height:1.2!important;letter-spacing:-.35px!important;color:#243648!important;text-shadow:none!important}
#authScreen .authCard>p.sub{margin:5px 0 22px!important;text-align:left!important;font-size:11.5px!important;color:#84909C!important}
#authScreen .authTabs{height:42px!important;display:flex!important;gap:3px!important;margin:0 0 24px!important;padding:3px!important;border:1px solid #E1E6EA!important;border-radius:11px!important;background:#F3F5F7!important;box-shadow:none!important}
#authScreen .authTabs button{height:34px!important;padding:0 15px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:#6B7886!important;-webkit-text-fill-color:#6B7886!important;font-size:11.5px!important;font-weight:760!important;box-shadow:none!important}
#authScreen .authTabs button:hover{background:#E9EDF1!important;color:#2F4156!important;-webkit-text-fill-color:#2F4156!important}
#authScreen .authTabs button.on{background:#FFFFFF!important;color:#23364A!important;-webkit-text-fill-color:#23364A!important;box-shadow:0 1px 4px rgba(31,46,61,.09)!important}
#authScreen .fld{margin-bottom:15px!important}
#authScreen .fld label{margin-bottom:7px!important;color:#526273!important;font-size:10.5px!important;font-weight:800!important;letter-spacing:.65px!important;text-transform:uppercase!important}
#authScreen .fld input,#authScreen .fld select,#authScreen .fld textarea{
  width:100%!important;min-height:44px!important;padding:0 13px!important;background:#FFFFFF!important;color:#223548!important;-webkit-text-fill-color:#223548!important;
  border:1px solid #D6DEE5!important;border-radius:10px!important;font-size:13px!important;box-shadow:0 1px 1px rgba(27,42,56,.02)!important;transition:border-color .16s ease,box-shadow .16s ease!important
}
#authScreen .fld input::placeholder{color:#A2ABB4!important;-webkit-text-fill-color:#A2ABB4!important}
#authScreen .fld input:focus,#authScreen .fld select:focus,#authScreen .fld textarea:focus{border-color:#7E98AB!important;box-shadow:0 0 0 3px rgba(86,124,141,.10)!important;outline:none!important;transform:none!important}
#authScreen :is(#loginBtn,#registerBtn,#resetBtn,#regBtn){
  width:100%!important;min-height:44px!important;margin-top:3px!important;border:1px solid #2F4156!important;border-radius:10px!important;
  background:#2F4156!important;background-image:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:12.5px!important;font-weight:790!important;box-shadow:0 8px 18px rgba(47,65,86,.13)!important
}
#authScreen :is(#loginBtn,#registerBtn,#resetBtn,#regBtn):hover{background:#243648!important;border-color:#243648!important;transform:translateY(-1px)!important}
#authScreen :is(#loginBtn,#registerBtn,#resetBtn,#regBtn):disabled{background:#7B8794!important;border-color:#7B8794!important;color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:.72!important;transform:none!important}
#authScreen .authRoleNotice,#authScreen .authV4ResetNote{margin:0 0 15px;padding:11px 12px;border:1px solid #E1E6EA;border-radius:9px;background:#F7F9FA;color:#6D7884;font-size:11px;line-height:1.5}
#authScreen #authMsg{margin-top:14px!important;font-size:11.5px!important;line-height:1.45!important}
#authScreen .authV4Legal{width:100%;margin-top:18px;text-align:left;color:#9AA4AD;font-size:10px;line-height:1.45}
@media(max-width:980px){
  #authScreen .authV4Shell{grid-template-columns:1fr}
  #authScreen .authV4Brand{display:none}
  #authScreen .authV4Auth{padding:34px 24px}
  #authScreen .authV4MobileBrand{display:flex;align-items:center;gap:11px;margin-bottom:38px}
  #authScreen .authV4MobileBrand .authV4BrandMark{background:#2F4156;color:#fff;box-shadow:none}
  #authScreen .authV4MobileBrand .authV4BrandName{color:#243648}
  #authScreen .authV4MobileBrand .authV4BrandName span{color:#82909E}
}
@media(max-width:560px){
  #authScreen .authV4Auth{align-items:flex-start;padding:24px 16px 30px}
  #authScreen .authV4MobileBrand{margin-bottom:28px}
  #authScreen .authV4AccountHead{align-items:flex-start;flex-direction:column;gap:16px;margin-bottom:20px}
  #authScreen .authV4AccountHead h3{font-size:25px}
  #authScreen .authAccountSwitchScreen{width:100%!important}
  #authScreen .authAccountSwitchScreen button{flex:1!important}
  #authScreen .authCard{padding:22px 18px!important;border-radius:14px!important}
  #authScreen .authTabs button{padding:0 8px!important}
}
@media(prefers-reduced-motion:reduce){#authScreen *{transition:none!important;animation:none!important}}


/* ===== auth-v5-image-brand-panel ===== */

#authScreen .authV4Brand{
  background-image:url("/assets/malaysian_watercolor_skyline_and_florals.webp")!important;
  background-size:cover!important;
  background-position:center center!important;
  isolation:isolate!important;
}
#authScreen .authV4Brand::before{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;
  width:auto!important;height:auto!important;border:0!important;border-radius:0!important;
  background:linear-gradient(145deg,rgba(18,34,52,.80),rgba(34,55,73,.66) 52%,rgba(25,43,61,.76))!important;
  box-shadow:none!important;backdrop-filter:blur(5px) saturate(.9)!important;-webkit-backdrop-filter:blur(5px) saturate(.9)!important;
  pointer-events:none!important;z-index:0!important;
}
#authScreen .authV4Brand::after{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;border-radius:0!important;
  background:linear-gradient(180deg,rgba(10,22,34,.05),rgba(10,22,34,.18) 65%,rgba(10,22,34,.38))!important;
  filter:none!important;pointer-events:none!important;z-index:0!important;
}
#authScreen .authV4BrandTop,#authScreen .authV4Hero,#authScreen .authV4Signals,#authScreen .authV4BrandFoot{position:relative!important;z-index:2!important}
#authScreen .authV4BrandFoot{display:flex!important;flex-direction:column!important;gap:4px!important;color:rgba(255,255,255,.72)!important;letter-spacing:.15px!important}
#authScreen .authV4BrandFoot strong{font-size:11px!important;color:#fff!important;font-weight:760!important}
#authScreen .authV4BrandFoot span{font-size:9.5px!important;color:rgba(255,255,255,.56)!important}
#authScreen #loginBtn{pointer-events:auto!important;cursor:pointer!important;position:relative!important;z-index:3!important}


/* ===== fredoka-user-input-system ===== */

/* User-entered text treatment — UI remains Google Sans. */
input:not([type]),
input[type="text"]:not([readonly]):not([disabled]),
input[type="email"]:not([readonly]):not([disabled]),
input[type="number"]:not([readonly]):not([disabled]),
input[type="tel"]:not([readonly]):not([disabled]),
input[type="url"]:not([readonly]):not([disabled]),
input[type="search"]:not([readonly]):not([disabled]),
input[type="password"]:not([readonly]):not([disabled]),
textarea:not([readonly]):not([disabled]),
[contenteditable="true"] {
  font-family:"Fredoka"!important;
  color:#2F6FED!important;
  -webkit-text-fill-color:#2F6FED!important;
  font-weight:500!important;
}

input:not([type])::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
input[type="search"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
  font-family:"Google Sans"!important;
  color:#94A3B8!important;
  -webkit-text-fill-color:#94A3B8!important;
  font-weight:400!important;
  opacity:1!important;
}

/* Keep browser-filled editable values consistent with manually typed values. */
input:-webkit-autofill:not([readonly]):not([disabled]),
input:-webkit-autofill:hover:not([readonly]):not([disabled]),
input:-webkit-autofill:focus:not([readonly]):not([disabled]) {
  -webkit-text-fill-color:#2F6FED!important;
  caret-color:#2F6FED!important;
}

input:not([type]):not([readonly]):not([disabled]),
input[type="text"]:not([readonly]):not([disabled]),
input[type="email"]:not([readonly]):not([disabled]),
input[type="number"]:not([readonly]):not([disabled]),
input[type="tel"]:not([readonly]):not([disabled]),
input[type="url"]:not([readonly]):not([disabled]),
input[type="search"]:not([readonly]):not([disabled]),
input[type="password"]:not([readonly]):not([disabled]),
textarea:not([readonly]):not([disabled]),
[contenteditable="true"] {
  caret-color:#2F6FED!important;
}


/* ===== welcome-launchpad-shell ===== */

#workspaceLauncherExact{display:none;position:fixed;inset:0;width:100%;height:100%;border:0;z-index:5000;background:#FCFBFA}
#workspaceLauncherExact.on{display:block}
#app.launcher-open #sidebar,#app.launcher-open #main{opacity:0!important;visibility:hidden!important;pointer-events:none!important}


/* ===== inline-style ===== */

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  


/* ===== inline-style ===== */























































































.fl-toast{position:fixed;top:20px;right:20px;z-index:500}
.fl-toast-item{background:#FCFBFA;border-left:4px solid #2F4156;border-radius:8px;padding:12px 16px;margin-bottom:8px;box-shadow:none!important;font-size:13px;font-weight:600;animation:toastSlideIn .2s ease}
#fl-records-content{overflow-x:auto}





/* ===== inline-style ===== */

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  #tn-fab{position:fixed;bottom:24px;right:24px;width:50px;height:50px;border-radius:50%;background:#2F4156;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none!important;z-index:120}
  #tn-fab:hover{background:#2F4156}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* Phase 1 — scan-first tables + quick detail drawer */
  
  
  
  
  
  
  
  
  
  
  

  #tn-quick-detail-backdrop{position:fixed;inset:0;background:rgba(22,31,40,.18);z-index:420;opacity:0;pointer-events:none;transition:opacity .18s ease}
  #tn-quick-detail-backdrop.on{opacity:1;pointer-events:auto}
  #tn-quick-detail-drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,94vw);z-index:421;background:#FCFBFA;border-left:1px solid #E7E3E0;box-shadow:-24px 0 60px rgba(31,41,55,.13);transform:translateX(102%);transition:transform .22s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column}
  #tn-quick-detail-drawer.on{transform:translateX(0)}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  @media(max-width:640px){
    #tn-quick-detail-drawer{width:100vw}
    
    
    
  }


/* ===== tender-quick-actions-styles ===== */

  /* Sticky Tender Quick Actions launcher */
  body > #tn-quick-actions-wrap{position:fixed!important;right:24px!important;bottom:24px!important;z-index:2147483000;display:none;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
  body > #tn-quick-actions-wrap.is-tender-active{display:flex!important}
  body > #tn-quick-actions-wrap #tn-fab{position:relative!important;right:auto!important;bottom:auto!important;pointer-events:auto;width:54px!important;height:54px!important;border-radius:17px!important;background:#2F4156!important;color:#FCFBFA!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 14px 30px rgba(47,65,86,.22)!important;transition:transform .16s ease,box-shadow .16s ease,background .16s ease!important}
  body > #tn-quick-actions-wrap #tn-fab:hover{transform:translateY(-2px);background:#263748!important;box-shadow:0 18px 36px rgba(47,65,86,.28)!important}
  body > #tn-quick-actions-wrap #tn-fab.is-open{transform:rotate(45deg);background:#263748!important}
  #tn-quick-actions-menu{pointer-events:auto;width:260px;padding:9px;background:#FCFBFA;border:1px solid #DCE5EA;border-radius:16px;box-shadow:0 20px 52px rgba(31,47,60,.20);opacity:0;transform:translateY(8px) scale(.98);visibility:hidden;transition:.16s ease;transform-origin:bottom right}
  #tn-quick-actions-menu.on{opacity:1;transform:translateY(0) scale(1);visibility:visible}
  
  
  
  
  
  
  
  
  
  
  
  @media(max-width:640px){body > #tn-quick-actions-wrap{right:16px!important;bottom:16px!important}#tn-quick-actions-menu{width:min(260px,calc(100vw - 32px))}}


/* ===== tender-report-builder-styles ===== */

  /* Report Builder is portaled directly under <body>, so selectors must not depend on #tenders-root. */
  body > #tn-report-ov{padding:24px!important;background:rgba(29,42,53,.55)!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  body > #tn-report-ov #tn-report-pdf-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:132px!important;min-height:38px!important;padding:9px 17px!important;background:#2F4156!important;border:1px solid #2F4156!important;border-radius:9px!important;color:#FCFBFA!important;font-size:12.5px!important;font-weight:800!important;line-height:1!important;opacity:1!important;visibility:visible!important;box-shadow:none!important}
  body > #tn-report-ov #tn-report-pdf-btn:hover{background:#3B5268!important;border-color:#3B5268!important;color:#FCFBFA!important}
  body > #tn-report-ov #tn-report-pdf-btn:disabled{background:#71808D!important;border-color:#71808D!important;color:#FCFBFA!important;cursor:not-allowed!important;opacity:.78!important}
  
  
  @media(max-width:800px){body > #tn-report-ov{padding:10px!important}}


/* ===== inline-style ===== */

      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    

/* ===== inline-style ===== */

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  











  
  


/* ===== library-specific-sharing-ui ===== */















/* ===== work-journal-inline-todo-v1 ===== */



























































/* ===== inline-style ===== */








/* Compact Director Claim create table */






















/* ===== dcl-original-spend-v1 ===== */









/* ===== fleet-records-premium-table ===== */

/* Fleet Records — richer operational table, data logic unchanged */













































/* ===== ceo-office-accessible-type-system ===== */

:root{
  --text-primary:#2F4156;
  --text-secondary:#363438;
  --text-muted:#2F4156;
  --text-subtle:#2F4156;
  --text-link:#2F4156;
  --text-success:#2F4156;
  --text-warning:#2F4156;
  --text-danger:#2F4156;
  --focus-ring:rgba(107,104,112,.22);
}

/* Default reading colours */
body{color:var(--text-primary)}
input,select,textarea,button{color:inherit}
::placeholder{color:#2F4156!important;opacity:1}

/* Shared secondary and microcopy text */


/* Small literal greys used throughout older module styles.  Restrict this
   correction to text-bearing elements, leaving borders and decorative icons intact. */
small,[class*="sub"],[class*="hint"],[class*="meta"],[class*="caption"],[class*="helper"],[class*="empty"],[class*="note"],#sidebar [style*="color:#2F4156"],#main [style*="color:#2F4156"]{
  --ax-subtle-text:var(--text-muted);
}

/* Explicit high-value fixes for known tiny text locations */


/* Keep semantic messages readable while preserving their visual meaning */
.msg.ok{color:#2F4156!important}
.msg.err{color:var(--text-danger)!important}




/* Gold remains an accent; never rely on it as small body copy */
p[style*="color:#C8D9E6"],span[style*="color:#C8D9E6"],div[style*="color:#C8D9E6"]{color:#2F4156!important}

/* Links need a clear non-decorative colour and visible keyboard state */
a:not(.btn):not([class*="btn"]){text-decoration-color:rgba(107,104,112,.35)}
a:not(.btn):not([class*="btn"]):hover{color:var(--text-link)}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible,.modItem:focus-visible{
  outline:2px solid #2F4156!important;
  outline-offset:2px!important;
  box-shadow:none!important;
}

/* Disabled controls remain visibly disabled but their labels stay legible */
button:disabled,.btn:disabled,input:disabled,select:disabled,textarea:disabled{
  opacity:.62;
}

/* Improve legibility of very small interface text without changing layout */


/* Selection remains visible against the light product theme */
::selection{background:#FCFBFA;color:#2F4156}

@media (forced-colors:active){
  button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible{outline:2px solid CanvasText!important}
}


/* ===== document-approver-v18-style ===== */












/* ===== admin-module-access-red-disabled-dot ===== */

/* Manage Access permission status: enabled = green, disabled = red. */




/* ===== fleet-admin-edit-style ===== */

#fl-admin-edit-ov{position:fixed;inset:0;z-index:620;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(47,65,86,.46)}
#fl-admin-edit-ov.on{display:flex}
#fl-admin-edit-box{width:min(94vw,620px);background:#FCFBFA;border:1px solid #C8D9E6;border-radius:16px;box-shadow:none!important;padding:22px}
#fl-admin-edit-box h3{margin:0;font-size:18px;color:#2F4156}
#fl-admin-edit-box .sub{margin:5px 0 18px;color:#2F4156;font-size:12px}









/* ===== vendor-control-centre-overhaul-style ===== */


























/* ===== vendor-performance-phase-two-style ===== */

#vm-add-review-btn{display:none}




/* ===== dc-cancel-dialog-style ===== */

#dc-cancel-ov{position:fixed;inset:0;z-index:10090;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(47,65,86,.48);backdrop-filter:none!important;}
#dc-cancel-ov.on{display:flex}
#dc-cancel-box{width:min(460px,calc(100vw - 32px));overflow:hidden;border:1px solid rgba(200,217,230,.9);border-radius:18px;background:#FCFBFA;box-shadow:none!important;animation:dcCancelIn .16s ease-out}
@keyframes dcCancelIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}







/* ===== axicom-remove-visible-wrapper-surfaces ===== */

/* Structural wrappers must remain layout-only, never visible as large boxes. */
:root{--wrapper-clear:transparent}

/* Global application/frame wrappers */


/* Module-level structural wrappers and shells */


/* Home launcher wrappers: keep module tiles, remove enclosing white panels. */



/* Document outer queue/detail wrappers only; retain request cards and tables. */


/* Fleet outer containers; retain individual vehicle/stat/table cards. */


/* Tender outer containers; retain tender cards and tables. */


/* Library section wrappers; retain resource cards/list rows. */


/* Work Journal and Director Claim outer cards are layout wrappers. */


/* Keep actual data surfaces clearly visible after wrapper removal. */


/* Remove any decorative pseudo-surface on structural wrappers. */



/* ===== axicom-final-wrapper-and-rounded-cleanup ===== */

:root{
  --ui-radius-card:12px;
  --ui-radius-control:8px;
  --ui-radius-small:6px;
}

/* Structural layout containers must never render as visible surfaces. */


/* Authentication: one visible card only, with soft corners. */
#authScreen{
  background-color:#F5EFEB!important;
}
#authScreen .authCard{
  background:#FCFBFA!important;
  border:1px solid #F5EFEB!important;
  border-radius:16px!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
#authScreen .authTabs{
  border-radius:14px!important;
  padding:4px!important;
  overflow:hidden!important;
}
#authScreen .authTabs button{
  border-radius:10px!important;
}
#authScreen .fld input,#authScreen .fld select,#authScreen .fld textarea,#authScreen .btn,#authScreen .authRoleNotice{
  border-radius:12px!important;
}

/* Settings: remove large section boxes; keep only content and controls. */





/* Manage Access tabs: remove square tab wrapper and soften every edge. */



/* Document list: no column/background wrapper; only request cards are visible. */






/* Consistent soft corners for real UI surfaces across modules. */


button,.btn,[class*="-btn"],input,select,textarea,.badge,.pill,.chip,[class*="badge"],[class*="pill"],[class*="chip"]{
  border-radius:var(--ui-radius-control)!important;
}

/* Do not round internal table cells; round the containing table only. */
table,thead,tbody,tr,th,td{
  border-radius:0!important;
}

@media(max-width:700px){
  
  #authScreen .authCard{border-radius:20px!important}
}


/* ===== axicom-global-button-system-final ===== */

:root{
  --btn-h:36px;
  --btn-h-sm:32px;
  --btn-radius:8px;
  --btn-pad:14px;
  --btn-font:12.5px;
  --btn-text:#363438;
  --btn-border:#F5EFEB;
  --btn-bg:#ffffff;
  --btn-primary:#2F4156;
  --btn-primary-hover:#363438;
  --btn-disabled-bg:#F5EFEB;
  --btn-disabled-border:#F5EFEB;
  --btn-disabled-text:#567C8D;
}

/* Standard text buttons throughout every module. */


/* Primary actions retain one strong, consistent treatment. */



/* Danger actions. */


/* Small buttons are compact but still readable. */


/* Icon-only controls stay square instead of inheriting text-button width. */


/* View toggles match the normal control height. */


/* Disabled buttons must remain clearly readable. */

button:disabled svg,button[disabled] svg,
button:disabled i,button[disabled] i{
  opacity:.72!important;
  color:currentColor!important;
  stroke:currentColor!important;
}

/* Keep toolbar button groups aligned and prevent random stretching. */



/* Explicit fixes for Add/Post controls paired with fields. */


/* Avoid tiny text caused by inherited module typography. */





/* ===== axicom-modern-saas-refresh ===== */

/* ===================================================================
   Modern SaaS visual refresh — Linear/Notion-inspired.
   Sits last in the cascade so its !important rules win over every
   earlier module stylesheet without touching markup or JS logic.
   =================================================================== */

/* ---- Global type & rendering ---- */
html,body,*{font-family:"Google Sans"!important}
body{background:#F5EFEB!important}


/* ---- Sidebar: quieter chrome, precise active state ---- */
#sidebar{
  background:#FCFBFA!important;
  border-right:1px solid #C8D9E6!important;
}
#sidebar .brand{color:#2F4156!important;font-weight:800!important}
.navSection{color:#2F4156!important;font-weight:700!important;letter-spacing:.06em!important}
.modItem{
  color:#2F4156!important;
  font-weight:550!important;
  border-radius:8px!important;
  transition:background .12s ease,color .12s ease!important;
}
.modItem:hover{background:#FCFBFA!important;color:#2F4156!important}
.modItem.on{
  background:#FCFBFA!important;
  color:#2F4156!important;
  border:1px solid transparent!important;
  font-weight:650!important;
}
#gsBtn{border-radius:8px!important;border-color:#F5EFEB!important}
.gsKbd{border-color:#F5EFEB!important}
.sbLogoutBtn{border-radius:8px!important}
.sbUser{border-top-color:#F5EFEB!important}

/* ---- Topbar / hamburger ---- */
#topbar{background:#FCFBFA!important;border-bottom:1px solid #C8D9E6!important}
#hamburger,#sidebarClose{border-radius:8px!important;border-color:#F5EFEB!important}

/* ---- Cards & surfaces: softer, tighter radius, quieter shadows ---- */





/* ---- Tables: minimal header line instead of heavy accent border ---- */

table tbody tr:hover{background:#FCFBFA!important}

/* ---- Buttons: refined neutral + single accent ---- */




.authTabs button.on{color:#ffffff!important}

/* ---- Inputs & focus states: consistent indigo ring ---- */
input,select,textarea{border-radius:8px!important}


/* ---- Badges / pills / status chips ---- */



/* ---- Scrollbars: slim, unobtrusive ---- */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#FCFBFA;border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#567C8D;background-clip:content-box}

@media(max-width:700px){
  #authScreen .authCard{border-radius:14px!important}
}


/* ===== axicom-flat-design-final ===== */

/* ===================================================================
   FLAT DESIGN PASS — strips glassmorphism, gradients, blur and
   elevation shadows app-wide. Last in the cascade so it wins over
   every earlier module stylesheet without touching markup or JS.
   =================================================================== */

/* Kill all blur/glass effects everywhere */
*{
  backdrop-filter:none!important;
  backdrop-filter:none!important;
  filter:none!important;
}

/* Kill all gradients everywhere — flat solid fills only */
*{
  background-image:none!important;
}

/* Kill elevation shadows everywhere (drop shadows = 3D depth cue) */
*{
  box-shadow:none!important;
  text-shadow:none!important;
}

/* Remove hover/press "lift" affordances on interactive controls only
   (spinners, modal pop-in, and toast animations are left untouched
   so loading indicators and transitions keep working) */


/* Re-establish separation with a crisp border plus a soft, tasteful
   elevation shadow — enough to feel alive without turning glossy/3D. */



/* Floating surfaces sit above content, so they get a stronger, clearly
   separated shadow — modals, dropdowns, popovers, toasts. */




/* Workspace launcher (home screen): stat cards, side panels, and the
   clickable application tiles all get the same soft resting shadow,
   with a livelier lift on hover for the tiles you actually click. */





/* Sidebar and topbar lift very slightly off the page background */
#sidebar,#sidebar.open,#sidebar.expanded{box-shadow:1px 0 0 rgba(47,65,86,.04),2px 0 10px rgba(47,65,86,.03)!important}
#topbar{box-shadow:0 1px 0 rgba(47,65,86,.04),0 2px 8px rgba(47,65,86,.03)!important}

/* Buttons: a whisper of lift on primary actions, a touch more on hover */



/* Flat solid backgrounds where glass/gradient panels used to sit */
#authScreen{background:#F5EFEB!important}
.authTabs{background:#FCFBFA!important;border:1px solid #F5EFEB!important}
.authTabs button.on{background:#2F4156!important;border-color:#2F4156!important;color:#ffffff!important}
#gsBtn{background:#FCFBFA!important}
.modItem.on{background:#C8D9E6!important;color:#2F4156!important}



/* Flat focus indicator: solid 2px outline instead of soft glow ring */
.fld input:focus,.fld select:focus,input:focus,select:focus,textarea:focus{
  outline:2px solid #567C8D!important;
  outline-offset:-1px!important;
  border-color:#567C8D!important;
}

/* Flat progress/spinner bars: remove any radial/linear paint left on canvas-like elements */



/* Remove decorative blurred blob backgrounds used behind auth/launcher screens */
#authScreen::before,#authScreen::after{
  display:none!important;
  content:none!important;
}
.fx-ripple{display:none!important}

/* Disable the glass "portal" page-transition blur effect entirely */
#portalFx,.portal-blur-layer{display:none!important}

/* Flatten the module-switch ambient backdrop: no colored blobs, no gradient scenes */
#moduleBackdrop{background:#F5EFEB!important}
#moduleBackdrop .mb-orb{display:none!important}
#mbSceneA,#mbSceneB{background:#F5EFEB!important;background-image:none!important}

/* Remove the perspective/rotateX 3D grid-drift and glow-orb animations */
.fx-ripple,.fx-flash{animation:none!important}/* Restore functional indicators that previously relied on inset box-shadow */



/* ===== axicom-button-text-visibility-fix ===== */

/* ===================================================================
   Guaranteed-legible button states — several segmented toggles and
   secondary/primary buttons had drifted to white-text-on-white-
   background through many earlier overrides. This is the final,
   authoritative pass: every state below explicitly sets both text
   color and background so nothing is left to variable indirection.
   =================================================================== */

/* Segmented view/tab toggles: idle vs. selected are always both legible */



.authAccountSwitch button,#authStaffTypeBtn,#authVendorTypeBtn{
  color:#2F4156!important;background:transparent!important;
  height:31px!important;min-height:31px!important;max-height:31px!important;
  padding:0 13px!important;
  line-height:31px!important;
  box-sizing:border-box!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  vertical-align:middle!important;
  border:0!important;
}
.authAccountSwitch button.on,#authStaffTypeBtn.on,#authVendorTypeBtn.on{
  color:#ffffff!important;background:#2F4156!important;font-weight:800!important;
  height:31px!important;min-height:31px!important;max-height:31px!important;
  padding:0 13px!important;
  line-height:31px!important;
  box-sizing:border-box!important;
}







/* Ghost/secondary buttons across every module: dark text, visible border */



/* Primary/filled buttons: reinforced white text on solid indigo */



/* Director Claim "Create Record": more breathing room between the
   director-select row and the table header (they were nearly touching) */




/* Row toolbar: plain text-style actions, no boxed button background */







/* Workspace launcher tile badge: inline next to the title instead of a
   floating corner element that collided with the arrow. Small, refined
   red pill, vertically centered with the label text. */



/* ===== axicom-global-reference-buttons-and-tables ===== */

/* ===================================================================
   GLOBAL REFERENCE — SINGLE SOURCE OF TRUTH
   ===================================================================
   This is the one place that defines what every button and every
   table header looks like across the whole suite. It is intentionally
   the very last stylesheet in the document so it always wins, and it
   uses three CSS variables so the entire app's button color can be
   changed by editing three lines here — nothing else.

   BUTTON STANDARD:  fill = --ref-btn-bg, hover = --ref-btn-hover,
                     text = --ref-btn-text.
   TABLE HEADER STANDARD:  fill = --ref-th-bg (Wisteria),
                     text = --ref-th-text (Whisper White).
   =================================================================== */
:root{
  --ref-btn-bg:#2F4156;
  --ref-btn-hover:#2F4156;
  --ref-btn-text:#ffffff;
  --ref-th-bg:#2F4156;
  --ref-th-text:#F5EFEB;
}

/* ---- BUTTONS: every primary/filled action button across every module,
   addressed by class, by the bare .btn class, and by the specific
   one-off IDs that don't follow any shared class convention. ---- */



/* ---- TABS / TOGGLES / SEGMENTED CONTROLS: every "selected" state
   across every module, including plain unclassed <button class="on">
   nav items (e.g. Fleet's Book/Records/Calendar) via their container. ---- */


/* ---- TABLE HEADERS: Wisteria fill, Whisper White text — every module ---- */



/* ===== axicom-documents-rowcard-layout ===== */

/* ===================================================================
   Documents "Approval queue" — single unified row-card layout
   (replaces the old Cards/Table toggle entirely, per direction #2
   of the 5 previews). One record = one full-width row-card with six
   clear columns: ID, Document, Requester, Status, Submitted, Actions.
   =================================================================== */

/* Force single-column, full-width list (was a 2-col masonry grid) */


/* Column header row above the list, matches the row-card's own grid */



/* The row-card itself */




/* ID column */




/* Document column */











/* Requester column */





/* Status / Submitted / Actions columns */







/* Expiry / revision-comment notes sit as direct children of the card
   (siblings of the grid), so they need their own inset — otherwise
   they render flush against the card's edges and spill past its
   rounded corners instead of sitting inside it. */




/* ===== document-remark-card-layout-final-fix ===== */

/* Document remarks are informational content, not action buttons. */











/* ===== manage-access-redesign-20260805 ===== */

/* Manage Access — clean SaaS redesign. Existing data and actions remain unchanged. */












































/* ===== library-saas-redesign-final ===== */

/* Library — compact table-first SaaS redesign. Functional behaviour is unchanged. */




















































/* ===== fleet-spacing-balance-final ===== */

/* Fleet spacing correction: balanced density without cramped cards or oversized padding. */

































/* ===== fleet-main-tabs-5c5265-final ===== */

/* Fleet primary navigation: selected Book / Records / Calendar tab. */





/* ===== axicom-standard-visual-hierarchy-final ===== */

/* ================================================================
   AXICOM workspace visual hierarchy
   One consistent canvas, spacing rhythm and heading scale across all
   application modules. Functional module internals remain unchanged.
   ================================================================ */
:root{
  --ax-page-max:1480px;
  --ax-page-pad-x:32px;
  --ax-page-pad-y:28px;
  --ax-section-gap:20px;
  --ax-control-gap:10px;
  --ax-title-size:24px;
  --ax-subtitle-size:13px;
}

/* Every application occupies the same centred working canvas. */


/* Stop individual module shells from stretching beyond the shared canvas. */


/* Unified top-level module header hierarchy. */






/* Consistent vertical rhythm between navigation, filters and content. */




/* Sections fill the shared canvas, while tables scroll internally. */




/* Shared section-heading scale below the module title. */


/* Keep controls visually aligned across screens. */


@media(max-width:1100px){
  :root{--ax-page-pad-x:24px;--ax-page-pad-y:24px;--ax-title-size:24px}
}
@media(max-width:700px){
  :root{--ax-page-pad-x:14px;--ax-page-pad-y:18px;--ax-title-size:24px;--ax-section-gap:16px}
  
}


/* ===== document-timeline-repair-final ===== */


#dc-versions-list{padding:2px 3px 2px 1px!important}

















/* ===== sidebar-navigation-clarity-final ===== */

/* Make Home unmistakable and physically separate it from application modules. */
#sidebar #navList .modItem-home{
  margin-top:2px!important;
  margin-bottom:0!important;
  min-height:42px!important;
  background:#f7f4f8!important;
  border:1px solid #ebe5ee!important;
  color:#2F4156!important;
  font-weight:750!important;
}
#sidebar #navList .modItem-home:hover,
#sidebar #navList .modItem-home:focus-visible{
  background:#f7f4f8!important;
  color:#2F4156!important;
  transform:none!important;
}
#sidebar #navList .modItem-home.on{
  background:#2F4156!important;
  border-color:#2F4156!important;
  color:#ffffff!important;
}
#sidebar #navList .modItem-home svg{
  width:19px!important;
  height:19px!important;
  flex-basis:19px!important;
  stroke-width:2!important;
}
#sidebar #navList .navHomeDivider{
  height:1px!important;
  margin:13px 8px 12px!important;
  background:#e7e1e9!important;
  border:0!important;
}
#sidebar:not(.expanded) #navList .modItem-home{
  width:42px!important;
  height:42px!important;
  min-height:42px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:0!important;
  justify-content:center!important;
}
#sidebar:not(.expanded) #navList .navHomeDivider{
  margin:12px 5px 11px!important;
}
/* Keep each module icon visually crisp and centered. */
#sidebar #navList .modItem:not(.modItem-home) svg{
  stroke-width:1.9!important;
}


/* ===== document-rowcard-status-submitted-center-fix ===== */

/* Document cards: align Status and Submitted values with centered headers. */





/* ===== document-semantic-action-colors-final ===== */

/* Document Module semantic action colours approved by AXICOM. */










/* ===== document-approved-download-and-home-blur-final ===== */

/* Approved-only Download All action. */





/* Home: blur only the seasonal background image; content remains sharp. */







/* ===== dc-modal-action-match-new-request-fix ===== */

/* Match approval/rejection/revision confirmation buttons to the New request button. */





/* ===== dc-attachment-primary-buttons-fix ===== */

/* Keep attachment download actions readable and identical to + New request. */





/* ===== document-review-status-label-size-fix ===== */

/* Document Module: clearer status wording. */



/* ===== fleet-critical-layout-and-hover-fix ===== */

/* Fleet records: keep the full register accessible instead of clipping the right columns. */











/* Fleet module must not jump, lift, resize or reflow on hover. */






/* ===== fleet-simple-requester-style ===== */






/* ===== fleet-unnecessary-page-scroll-fix ===== */

/* Prevent the Fleet module from forcing a vertical scrollbar when its content fits. */
#frame-fleet{
  min-height:0!important;
}



/* ===== manage-access-clean-authoritative-layout ===== */

/*
  Authoritative Manage Access layout.
  This block intentionally comes last so obsolete card/table experiments
  cannot reposition Apps, Save Access or row Actions.
*/



























/* ===== comfortable-font-size-fix ===== */

/* Slightly larger, more comfortable typography without changing the layout structure. */
body{font-size:15px!important}

/* App navigation and account area */
#sidebar .brand{font-size:16.5px!important}
.navSection{font-size:11.5px!important}
#gsBtn{font-size:13.5px!important}
.gsKbd{font-size:11px!important}
.gsGroup{font-size:11px!important}
.gsItem .t{font-size:14px!important}
.gsItem .s{font-size:12px!important}
.modItem{font-size:14.5px!important}
.sbUser .nm{font-size:13px!important}
.sbUser .role{font-size:10.5px!important}
.sbCredit{font-size:10px!important}

/* Forms and common controls */
.fld label{font-size:12.5px!important}
.fld input,.fld select,input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:14px}
.btn,.authTabs button{font-size:14px!important}
.msg,.link{font-size:13.5px!important}

/* Tables, cards, labels and action buttons throughout modules */





/* Preserve compact status badges while making them readable. */


/* Launcher cards and supporting copy */







@media(max-width:700px){
  body{font-size:14.5px!important}
  .modItem{font-size:14px!important}
}

/* Director Claim: DD/MM/YYYY field with clickable native calendar picker */










/* ===== fleet-critical-final-override ===== */















/* ===== dcl-open-pdf-button-visibility-fix ===== */

/* Paid Claim details modal: keep Open PDF button readable regardless of global button styles. */


#dcl-batch-ov #dcl-batch-pdf:disabled {
  background: #8793a1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #8793a1 !important;
}


/* ===== fleet-no-hover-motion-final ===== */

/* Fleet: remove all hover movement that can make filters and tables jump. */





/* ===== fleet-table-clean-redesign-final ===== */

/* Fleet booking register — clean, compact and balanced */











































/* ===== fleet-record-filter-zero-motion-absolute-final ===== */

/* Fleet Records filter: absolute zero-motion lock. Hovering Search, Status or Vehicle must never resize/reflow the page. */






/* ===== inline-style ===== */

/* Fleet booking primary actions: keep text visible and prevent white-button overrides */


#fl-terms-ov {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100vh !important;
  z-index:999999 !important;
}


/* ===== v173-tender-new-project-button-visibility-fix ===== */





/* ===== v180-manage-access-seven-column-layout-fix-final ===== */

/* Final seven-column layout: Apps and Actions each have their own space. */




















/* ===== v182-manage-access-card-layout-last-word ===== */

/* Manage Access is cards now: no table columns, no Apps/Actions overlap. */




















/* ===== v181-manage-access-table-final-override ===== */

/* Keep the new semantic table authoritative over legacy table/card rules. */














/* ===== v181-manage-access-action-column-fix ===== */

/* Contain access controls and keep destructive actions centred in their own cell. */












/* ===== v182-manage-access-structural-column-fix ===== */

/* Fixed columns are structural: Apps and Actions cannot occupy the same area. */



















/* ===== manage-access-final-responsive-guard ===== */

/* Final guard: one responsive breakpoint overrides every legacy 760/860 rule. */








/* ===== manage-access-account-cards-authoritative ===== */

/* True card layout for both Staff Accounts and Vendor Accounts. */


































/* ===== manage-access-compact-table-and-selection-modal ===== */

/* Compact, scan-first desktop table. This is the final Manage Access layout. */



































/* Manage Selections is a viewport modal, not content after the account list. */











/* ===== manage-access-default-all-and-pending-count ===== */






/* ===== director-claim-verifier-field ===== */

#dcl-payment-ov #dcl-pay-verifier{width:100%;min-height:42px;border:1px solid #c8d9e6;border-radius:9px;padding:0 11px;background:#FCFBFA;color:#2F4156;font:inherit;font-size:13px;outline:none}
#dcl-payment-ov #dcl-pay-verifier:focus{border-color:#567C8D;box-shadow:0 0 0 3px rgba(86,124,141,.12)}


/* ===== fleet-transparent-watercolor-presentation ===== */

/* Wide, transparent vehicle stage: keep only the watercolor fleet and its painted shadow. */







/* ===== vendor-selected-state-contrast-fix ===== */

/* Final Vendor override: keep selected controls readable despite global button.on rules. */







/* ===== vendor-dedicated-portal-mode ===== */

/* Vendor accounts use Vendor Control Centre as their complete application shell. */

#vm-vendor-logout{display:none}
body.vendor-portal-mode{overflow:hidden!important;background:#F5F8FA!important}
body.vendor-portal-mode #sidebar,body.vendor-portal-mode #sidebarOverlay,body.vendor-portal-mode #topbar,body.vendor-portal-mode #moduleBackdrop,body.vendor-portal-mode #moduleTransitionVeil,body.vendor-portal-mode #gsOverlay{display:none!important}
#app.vendor-portal{
  display:block!important;
  width:100%!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  background:#F5F8FA!important;
}
#app.vendor-portal #main,#app.vendor-portal.sidebar-expanded #main{
  width:100%!important;
  height:100dvh!important;
  margin-left:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  background:#F5F8FA!important;
  transform:none!important;
  opacity:1!important;
}
#app.vendor-portal .modFrame:not(#frame-vendors){display:none!important}
#app.vendor-portal #frame-vendors{
  display:block!important;
  width:100%!important;
  min-height:100dvh!important;
  margin:0!important;
  background:#F5F8FA!important;
}




/* ===== vendor-registration-structured-form-style ===== */





/* ===== vendor-compliance-search-width-fix ===== */






/* ===== vendor-directory-search-width-fix ===== */

/* Vendor Directory: keep the search field prominent and prevent it collapsing to an icon-sized control. */










/* ===== vendor-application-search-width-fix ===== */

/* Application Review: keep the search field prominent and prevent it collapsing to an icon-sized control. */







/* ===== tender-edit-button-contrast-fix ===== */

/* Tender detail primary actions: preserve readable contrast against global white-button overrides. */





/* ===== suite-internal-pdf-viewer-style ===== */

#suite-pdf-ov{position:fixed;inset:0;z-index:980;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(15,23,42,.48);backdrop-filter:blur(5px)}
#suite-pdf-ov.on{display:flex}
#suite-pdf-panel{width:min(1180px,96vw);height:min(900px,94vh);display:flex;flex-direction:column;overflow:hidden;background:#FCFBFA;border:1px solid #dbe3ed;border-radius:14px;box-shadow:0 28px 80px rgba(15,23,42,.22)}
#suite-pdf-head{height:54px;flex:0 0 54px;display:flex;align-items:center;gap:12px;padding:0 13px;border-bottom:1px solid #e5e7eb;background:#FCFBFA}
#suite-pdf-title{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:800;color:#111827}
#suite-pdf-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.suite-pdf-btn{height:32px;min-width:32px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid #d7dee8;border-radius:8px;background:#FCFBFA;color:#243447;font:inherit;font-size:11.5px;font-weight:750;cursor:pointer;text-decoration:none;white-space:nowrap}
.suite-pdf-btn:hover:not(:disabled){background:#f8fafc;border-color:#94a3b8}
.suite-pdf-btn:disabled{opacity:.42;cursor:not-allowed}
#suite-pdf-page-label{min-width:76px;text-align:center;font-size:11.5px;font-weight:700;color:#475569}
#suite-pdf-body{position:relative;flex:1;min-height:0;overflow:auto;background:#e9edf2;padding:24px 24px 48px;scroll-behavior:smooth;overscroll-behavior:contain}
#suite-pdf-pages{display:flex;flex-direction:column;align-items:center;gap:18px;min-height:100%;width:100%}
.suite-pdf-page{position:relative;flex:none;background:#FCFBFA;box-shadow:0 3px 16px rgba(15,23,42,.16);border-radius:2px;overflow:hidden}
.suite-pdf-page canvas{display:block;width:100%;height:100%;background:#FCFBFA}
.suite-pdf-page-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#FCFBFA;color:#64748b;font-size:11.5px;font-weight:650}
.suite-pdf-page.rendered .suite-pdf-page-loading{display:none}
#suite-pdf-status{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:30px;color:#475569;font-size:13px;font-weight:650;background:#f8fafc}
#suite-pdf-status[hidden]{display:none}
#suite-pdf-fallback{position:absolute;inset:0;width:100%;height:100%;border:0;background:#FCFBFA;display:none;z-index:4}
body.suite-pdf-open{overflow:hidden}
@media(max-width:760px){#suite-pdf-ov{padding:0}#suite-pdf-panel{width:100vw;height:100vh;max-height:none;border-radius:0;border:0}#suite-pdf-head{height:auto;min-height:54px;flex-wrap:wrap;padding:9px 10px}#suite-pdf-title{width:100%;flex-basis:100%}#suite-pdf-toolbar{width:100%;overflow-x:auto;padding-bottom:2px}#suite-pdf-body{padding:10px 8px 36px}.suite-pdf-page{box-shadow:0 2px 10px rgba(15,23,42,.14)}}


/* ===== suite-final-button-contrast-guard ===== */

/* Final global contrast contract — intentionally loaded last. */
:root{
  --suite-btn-light-bg:#ffffff;
  --suite-btn-light-text:#243447;
  --suite-btn-light-border:#d7dee8;
  --suite-btn-soft-bg:#f5f1ee;
  --suite-btn-dark-bg:#232127;
  --suite-btn-dark-text:#f8fafc;
  --suite-btn-danger-bg:#b42318;
  --suite-btn-danger-text:#ffffff;
}

/* Default/light controls: never allow white-on-white. */


/* Explicitly light / ghost / secondary families. */


/* Primary / dark / affirmative families. */


/* Destructive families. */


/* Any explicitly white background utility/button still gets dark wording. */
button[style*="background:#FCFBFA"],button[style*="background: #FCFBFA"],
button[style*="background:#FCFBFA"],button[style*="background: #FCFBFA"],
a[role="button"][style*="background:#FCFBFA"],a[role="button"][style*="background:#FCFBFA"]{
  color:var(--suite-btn-light-text)!important;
}

/* Icons follow the final readable label colour. */


/* Disabled must remain readable, not disappear. */


/* Preserve selected/active tabs with guaranteed contrast. */



/* ===== suite-button-contrast-hard-fix-v2 ===== */

/* Hard contrast fix v2: control both CSS color and WebKit text fill. */








/* Tender Phase 1 drawer lives outside #tenders-root, so give it an explicit high-specificity contract. */





/* ===== tender-action-button-contrast-final ===== */

/* Tender action controls: final contrast guarantee after all legacy/global themes. */





/* ===== auth-no-visible-card-final ===== */

/* Login/Auth — remove the visible container card, keep wrapper for layout only. */
#authScreen .authCard{
  width:100%!important;
  max-width:380px!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-radius:0!important;
  overflow:visible!important;
  padding:18px 8px!important;
}
#authScreen .authCard::before,
#authScreen .authCard::after{
  content:none!important;
  display:none!important;
}
/* Keep controls as the only visible surfaces. */
#authScreen .fld input,
#authScreen .fld select,
#authScreen .fld textarea{
  background:#FCFBFA!important;
}
/* Tabs remain a compact navigation control, not a card. */
#authScreen .authTabs{
  background:rgba(255,255,255,.42)!important;
  border:1px solid rgba(200,217,230,.78)!important;
  box-shadow:none!important;
}
@media(max-width:700px){
  #authScreen .authCard{
    max-width:400px!important;
    padding:16px 4px!important;
    border-radius:0!important;
  }
}


/* ===== phase2-sidebar-navigation-cleanup ===== */

/* ================================================================
   Phase 2 — Sidebar / navigation cleanup
   Scoped to the shell only. No module routing or permission changes.
   ================================================================ */
:root{
  --p2-sidebar-bg:#ffffff;
  --p2-nav-text:#2F4156;
  --p2-nav-muted:#6f7884;
  --p2-nav-line:#e6e1dd;
  --p2-nav-hover:#f7f4f1;
  --p2-nav-active:#F5EFEB;
  --p2-nav-active-ink:#2F4156;
}
#sidebar{
  background:var(--p2-sidebar-bg)!important;
  border-right:1px solid var(--p2-nav-line)!important;
  padding-left:10px!important;
  padding-right:10px!important;
}
#sidebar .brand{
  border-bottom:0!important;
  padding:2px 4px 13px!important;
  min-width:0!important;
}
#sidebar .brandMark{
  width:26px!important;height:26px!important;min-width:26px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:7px!important;background:#2F4156!important;color:#fff!important;
  font-size:15px!important;font-weight:800!important;
}
#sidebar .brandText{
  display:none!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;
  white-space:nowrap!important;color:var(--p2-nav-text)!important;font-size:13px!important;font-weight:750!important;
  letter-spacing:-.01em!important;
}
#sidebar.expanded .brandText{display:block!important}
#sidebar:not(.expanded) .brandMark{display:none!important}
#sidebarToggle{
  border:0!important;background:transparent!important;color:#687482!important;
  border-radius:8px!important;box-shadow:none!important;
}
#sidebarToggle:hover{background:var(--p2-nav-hover)!important;color:var(--p2-nav-text)!important}
#navList{
  padding:3px 0 8px!important;
  scrollbar-width:thin!important;
  scrollbar-color:#d8d2ce transparent!important;
}
#navList .navPrimary{margin-bottom:8px!important}
#navList .navGroup{
  position:relative!important;
  margin:0 0 8px!important;
  padding-top:4px!important;
}
#navList .navGroup + .navGroup{border-top:1px solid transparent!important}
#navList .navSection{
  display:none!important;
  padding:8px 10px 5px!important;
  margin:0!important;
  color:var(--p2-nav-muted)!important;
  font-size:9.5px!important;
  line-height:1.2!important;
  font-weight:750!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}
#sidebar.expanded #navList .navSection{display:block!important}
#navList .navGroupItems{display:flex!important;flex-direction:column!important;gap:2px!important}
#navList .modItem{
  position:relative!important;
  border:0!important;
  background:transparent!important;
  color:var(--p2-nav-text)!important;
  border-radius:8px!important;
  min-height:38px!important;
  margin:0!important;
  padding:8px 10px!important;
  font-size:13px!important;
  font-weight:560!important;
  line-height:1.15!important;
  cursor:pointer!important;
  transform:none!important;
  box-shadow:none!important;
  transition:background .12s ease,color .12s ease!important;
}
#navList .modItem svg{color:#697887!important;stroke:currentColor!important;opacity:1!important}
#navList .modItem:hover,
#navList .modItem:focus-visible{
  background:var(--p2-nav-hover)!important;
  color:var(--p2-nav-text)!important;
  border:0!important;
  transform:none!important;
}
#navList .modItem.on,
#navList .modItem-home.on{
  background:var(--p2-nav-active)!important;
  color:var(--p2-nav-active-ink)!important;
  border:0!important;
  font-weight:700!important;
  box-shadow:none!important;
}
#navList .modItem.on svg,
#navList .modItem-home.on svg{color:#2F4156!important;stroke:currentColor!important}
#sidebar.expanded #navList .modItem.on::before{
  content:""!important;position:absolute!important;left:2px!important;top:10px!important;bottom:10px!important;
  width:2px!important;border-radius:3px!important;background:#2F4156!important;
}
#navList .modItem-home{
  min-height:40px!important;
  font-weight:650!important;
}
#sidebar #navList .navHomeDivider{display:none!important}
#sidebar.expanded .modItem{gap:10px!important}
#sidebar.expanded .modItem .modLabel{
  display:block!important;opacity:1!important;visibility:visible!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
#sidebar:not(.expanded) #navList .navGroup{
  margin:0!important;padding:7px 0!important;
  border-top:1px solid var(--p2-nav-line)!important;
}
#sidebar:not(.expanded) #navList .navPrimary + .navGroup{border-top:1px solid var(--p2-nav-line)!important}
#sidebar:not(.expanded) #navList .navGroupItems{gap:4px!important}
#sidebar:not(.expanded) #navList .modItem{
  width:38px!important;height:38px!important;min-height:38px!important;
  margin:0 auto!important;padding:0!important;justify-content:center!important;gap:0!important;
  border-radius:9px!important;
}
#sidebar:not(.expanded) #navList .modItem.on::before{display:none!important}
#sidebar:not(.expanded) #navList .modItem svg{width:18px!important;height:18px!important;flex-basis:18px!important}
#navList .navEmpty{
  margin:8px!important;padding:10px!important;border-radius:8px!important;background:#f8f6f4!important;
  color:var(--p2-nav-muted)!important;font-size:11.5px!important;line-height:1.45!important;
}
#sidebar:not(.expanded) #navList .navEmpty{display:none!important}
#sidebar .sbBottom{
  gap:7px!important;
  padding-top:8px!important;
  border-top:1px solid var(--p2-nav-line)!important;
}
#sidebar #gsBtn{
  border:0!important;background:transparent!important;color:var(--p2-nav-text)!important;
  border-radius:8px!important;box-shadow:none!important;
}
#sidebar #gsBtn:hover{background:var(--p2-nav-hover)!important}
#sidebar .gsKbd{
  background:#f7f4f1!important;border:1px solid #e4ded9!important;color:#737c86!important;
  border-radius:5px!important;padding:2px 5px!important;font-size:9px!important;
}
#sidebar .sbUser{
  border-top:0!important;padding:4px 0 0!important;gap:7px!important;
}
#sidebar .sbUserInfo{min-width:0!important}
#sidebar.expanded .sbUserText{max-width:128px!important}
#sidebar .sbUser .nm{font-size:11.5px!important;font-weight:700!important;color:var(--p2-nav-text)!important}
#sidebar .sbUser .role{display:block!important;color:var(--p2-nav-muted)!important;font-size:9.5px!important}
#sidebar:not(.expanded) .sbUser .role{display:none!important}
#sidebar .sbLogoutBtn{
  border:0!important;background:transparent!important;color:#707a85!important;border-radius:8px!important;box-shadow:none!important;
}
#sidebar .sbLogoutBtn:hover{background:var(--p2-nav-hover)!important;color:#2F4156!important}
@media(max-width:860px){
  #sidebar.expanded{box-shadow:8px 0 24px rgba(47,65,86,.10)!important}
}


/* ===== library-specific-sharing-picker-ui-fix-v2 ===== */

/* ============================================================
   LIBRARY SPECIFIC SHARING PICKER — FINAL ISOLATED LAYOUT
   Prevent global .lib-fld/input control sizing from stretching
   native checkboxes or expanding each user row.
   ============================================================ */














/* ===== library-specific-sharing-picker-ui-fix-v3 ===== */

/* Library specific sharing picker: fully isolated from global form-control rules. */






















/* ===== admin-add-user-button-contrast-final ===== */

/* Final scoped contrast guard for Admin > Add User actions. */
#admCreateUserBtn,
#admCreateUserBtn:hover,
#admCreateUserBtn:focus,
#admCreateUserBtn:active {
  background:#232127!important;
  background-color:#232127!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:#232127!important;
  opacity:1!important;
}
#admCreateUserBtn:disabled {
  background:#475569!important;
  background-color:#475569!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:#475569!important;
  opacity:.62!important;
}




/* ===== suite-google-preview-final-css ===== */

#suite-pdf-ov .suite-pdf-title-wrap{min-width:0;display:flex;align-items:center;gap:10px;flex:1}
#suite-pdf-ov .suite-pdf-mode{font-size:11px;font-weight:700;color:#6b7280;background:#f5f6f8;border:1px solid #e2e6eb;border-radius:999px;padding:4px 8px;white-space:nowrap}
#suite-pdf-ov .suite-pdf-body{padding:0!important;background:#eef1f5!important;overflow:hidden!important}
#suite-pdf-ov #suite-pdf-google-frame{display:block!important;width:100%!important;height:100%!important;min-height:0!important;border:0!important;background:#FCFBFA!important}
#suite-pdf-ov .suite-pdf-status{position:absolute;z-index:3;left:50%;top:74px;transform:translateX(-50%);background:rgba(255,255,255,.96);border:1px solid #e0e4e9;border-radius:9px;padding:8px 12px;box-shadow:0 6px 22px rgba(0,0,0,.08);font-size:12px;color:#334155}
#suite-pdf-ov .suite-pdf-panel{overflow:hidden}
@media(max-width:760px){#suite-pdf-ov .suite-pdf-mode{display:none}#suite-pdf-ov .suite-pdf-head{gap:8px}.suite-pdf-actions{gap:4px}}


/* ===== tender-search-polish-v1 ===== */

body > #tn-search-ov{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(24,32,43,.28)!important}








body > #tn-search-ov #tn-search-modal-inp{min-width:0;flex:1!important;height:42px!important;border:0!important;outline:0!important;background:transparent!important;padding:0!important;color:#243447!important;-webkit-text-fill-color:#243447!important;font-size:14px!important;font-weight:550}
body > #tn-search-ov #tn-search-modal-inp:focus,body > #tn-search-ov #tn-search-modal-inp:focus-visible{outline:none!important;outline-offset:0!important;border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important;}
body > #tn-search-ov #tn-search-modal-inp::placeholder{color:#8994A3;-webkit-text-fill-color:#8994A3}






















/* ===== manage-access-v20-clean-directory ===== */

/* V20 Manage Access: scan-first directory + one-user management drawer. */






































@keyframes admManagerIn{from{transform:translateX(28px);opacity:.75}to{transform:translateX(0);opacity:1}}








































/* ===== ui-v3-director-claim-transaction-table-density-fix ===== */

/* ============================================================
   UI V3 — Director Claim Transaction Record readability pass
   Keep the editable register powerful without making every cell
   feel like a separate card.  Stable columns + integrated date UI.
   ============================================================ */

















/* Editable cells are controls, not mini-cards. */




/* Description has the strongest hierarchy, metadata stays quiet. */



/* Number / selection cell uses one compact horizontal line. */



/* Receipt number + preview icon are one compact group. */



/* Date is a single integrated field; calendar never floats below it. */







/* Currency + original amount should read as one logical value. */



/* Monetary result columns are visual outputs, not another set of controls. */


/* Calm zebra contrast so a row is easy to follow horizontally. */




/* Narrow screens deliberately scroll instead of crushing inputs. */



/* ===== manage-access-v4-redesign ===== */

/* ============================================================
   MANAGE ACCESS V4 — People & Permissions workspace
   ============================================================ */
#frame-admin{background:#f6f2ee!important}





































































/* Access drawer becomes a profile workspace rather than a form modal. */

































/* Bring create-user workflow into the same side-panel language. */













/* ===== vendor-portal-v14-style ===== */





#vm-share-ov{position:fixed;inset:0;z-index:10150;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(28,39,51,.42)}#vm-share-ov.on{display:flex}



/* ===== premium-modules-v20 ===== */

/* ======================================================================
   PREMIUM MODULES V20 — carry the login screen visual language into
   Manage Access and Vendor Control Centre without changing app logic.
   ====================================================================== */
:root{
  --pm-canvas:#F4F6F8;
  --pm-surface:#FFFFFF;
  --pm-surface-soft:#F7F9FA;
  --pm-line:#E1E6EA;
  --pm-line-strong:#D3DCE3;
  --pm-text:#1F2E3D;
  --pm-text-2:#526273;
  --pm-muted:#84909C;
  --pm-primary:#2F4156;
  --pm-primary-hover:#243648;
  --pm-accent:#7890A2;
  --pm-focus:#7E98AB;
  --pm-radius:14px;
  --pm-control:44px;
  --pm-shadow:0 10px 30px rgba(31,46,61,.055);
}

/* ---------- shared module canvas ---------- */
#frame-admin,#frame-vendors{background:var(--pm-canvas)!important}




/* ---------- premium page headers ---------- */







/* ======================================================================
   MANAGE ACCESS
   ====================================================================== */
























/* directory becomes individual premium records */



















/* access drawer mirrors login form controls */















/* ======================================================================
   VENDOR CONTROL CENTRE
   ====================================================================== */






















/* premium search/filter controls */











/* premium operational tables */












/* vendor record becomes premium full-height detail workspace */























/* review / options dialogs use login-style form language */





/* Explicit readable primary actions throughout these modules. */








/* ===== premium-library-v21 ===== */

/* ================================================================
   Premium module continuation — Manage Access state contrast +
   Resource Library redesign. Visual layer only; existing handlers,
   permissions and Drive-backed Library logic remain unchanged.
   ================================================================ */
:root{
  --lib-p-canvas:#F4F6F7;
  --lib-p-surface:#FFFFFF;
  --lib-p-soft:#F8FAFB;
  --lib-p-line:#DCE4E9;
  --lib-p-line-strong:#C9D5DE;
  --lib-p-ink:#213448;
  --lib-p-muted:#728193;
  --lib-p-primary:#2F4156;
  --lib-p-primary-hover:#25374A;
}

/* Manage Access segmented filter contrast repair */




/* ----- Library canvas / page rhythm ----- */







/* disclaimer becomes quiet information strip */



/* premium command bar */











/* Category filters become quiet segmented chips */






/* Expiry alert */




/* ----- Shelf / recommendation surfaces ----- */


















/* ----- Main resource list ----- */



























/* pagination */





/* ----- Upload/edit modal ----- */












/* preview window */






/* ===== library-performance-v23 ===== */

/* Lightweight rendering: preserve visual design while reducing off-screen paint/layout work. */






/* ===== fleet-premium-v24 ===== */

/* Fleet V24 — premium showroom UI, lightweight motion */
#frame-fleet{background:#F4F6F8!important;}












/* section transition */



@keyframes flPageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Fleet filters + availability */











/* showroom vehicle cards */



























@keyframes flCardRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* upcoming */










/* booking focus transition */



@keyframes flBookIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@keyframes flBookBack{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}













/* records */













/* calendar */









/* modal/terms polish */


@keyframes flModalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}






/* ===== fleet-premium-booking-v29 ===== */

/* Fleet V29 — production implementation of the approved premium booking mockup. */


































































/* ===== fleet-v26-top-spacing-fix ===== */

/* Fleet V26 — restore premium header breathing room without false overflow. */






/* ===== fleet-ios-tap-style-v28 ===== */






/* ===== documents-premium-v30 ===== */

/* Documents V30 — premium product surface */
#frame-documents{background:#f5f7f9!important;}













/* live summary */








/* command bar */















/* list */
































/* pager */




/* new request side panel */
#dc-new-drawer-ov{background:rgba(18,34,50,.34)!important;backdrop-filter:saturate(110%) blur(2px)!important;}
















/* decision panels / timeline */
body>#dc-ap-modal,body>#dc-rj-modal,body>#dc-rv-modal,body>#dc-subrv-modal,body>#dc-versions-modal{background:rgba(18,34,50,.36)!important;backdrop-filter:blur(2px)!important;}



/* preview */



@keyframes dcPremiumEnter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes dcPremiumDrawer{from{transform:translateX(24px);opacity:.65}to{transform:translateX(0);opacity:1}}
@keyframes dcPremiumModal{from{transform:translateY(8px) scale(.99);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
































#dc-new-drawer-ov #dc-new-close-btn{width:40px!important;height:40px!important;border-radius:12px!important;}







/* ===== documents-v31-search-action-contrast-fix ===== */

/* Documents V31 — search field + action contrast hotfix */
/* One visual search control only: the shell owns the border; the input stays borderless. */






/* Keep the review actions unmistakable and readable against white cards. */








/* Matching high-contrast confirmation buttons in the review modals. */








/* ===== documents-v33-search-and-card-redesign ===== */

/* V33 — structural search fix. The search is now ONE native input; no visual wrapper exists. */





/* V33 request rows — denser information architecture, less dead space. */
























/* Tablet/compact desktop: turn every request into a deliberate two-row card rather than a tall stack. */


/* Small screens: compact premium card, with date/status in the header and actions on one line. */





/* ===== dcl-payment-modal-ui-fix-final ===== */

/* Director Claim > Create Paid Claim: final isolated date + action-button UI fix. */






/* Keep the native picker callable by showPicker(), but prevent its browser icon from leaking into the layout. */



/* Modal action buttons: deterministic colours regardless of global button rules. */







/* ===== manage-access-v5-approved-design ===== */

/* Approved People & Access redesign — final visual layer */




























































/* Right-side manager: visually align with approved preview while preserving logic. */



















/* ===== fleet-booking-flat-wrapper-fix-absolute-final ===== */

/* Fleet booking page: flatten oversized Booking Request wrapper while preserving inner controls. */















/* ===== manage-access-selections-layout-v2 ===== */

/* Manage Access Selections — balanced editor layout */






















/* ===== avatar-upload-button-contrast-absolute-final ===== */

/* Absolute-final contrast repair for profile-picture upload actions. */






/* ===== suite-top-create-action-size-standard-v1 ===== */

/* Top-level creation actions share the same dimensions as Documents + New request. */





/* ===== manage-access-selections-viewport-drawer-repair ===== */

/* Final repair: panel is portalled to BODY on open so it is always viewport anchored. */








body > #adm-options-panel #adm-department-options,
body > #adm-options-panel #adm-position-options{
  min-height:0!important;
  max-height:none!important;
  height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  padding-right:4px!important;
}


@media(max-width:760px){
  
  
  
  body > #adm-options-panel #adm-department-options,
  body > #adm-options-panel #adm-position-options{
    height:auto!important;
    max-height:300px!important;
  }
}



/* ===== work-journal-professional-overhaul-v2 ===== */

/* Work Journal — professional compact task workspace */






















































/* ===== workjournal-completed-panel-refine-v1 ===== */

























/* ===== workjournal-summary-dashboard-v1 ===== */

























/* ===== tender-topnav-cleanup-v1 ===== */

/* Tender module top navigation cleanup */

















/* ===== tender-topnav-flat-lane-v2 ===== */

/* Absolute-final Tender top navigation: no enclosing wrapper, one aligned lane. */

















/* ===== director-claim-create-date-icon-final-v1 ===== */

/* Director Claim > Create Record: keep the calendar action inside the date field. */









/* ===== tender-task-assignee-overlay-fix ===== */

/* Tender task assignee: overlay dropdown, never expand the checklist card */











/* ===== tender-task-field-height-alignment-fix ===== */

/* Tender task row: keep Add task and Assign to controls exactly the same height */






/* ===== global-form-control-height-standard-v1 ===== */

/* ============================================================
   GLOBAL FORM CONTROL HEIGHT STANDARD
   Purpose: native inputs, selects and custom selection triggers
   in normal forms share one predictable visual height.
   Dense spreadsheet/table cells and textareas are intentionally
   excluded so operational tables keep their compact density.
   ============================================================ */
:root{--ax-form-control-h:40px;}

/* Standard form inputs/selects across modules */


/* Native select rendering: reserve arrow space without increasing height */


/* Custom pickers used as select replacements */


/* Composite date controls: wrapper and visible input align to the same standard. */



/* Search fields should follow the same rhythm without changing their layout. */


/* Textareas intentionally remain content-driven. */
textarea{max-height:none;}


/* ===== suite-specific-button-state-contrast-v3 ===== */

/* ============================================================
   FINAL STATE-SPECIFIC BUTTON CONTRAST
   Exact selectors intentionally override generic legacy guards.
   Controls both normal color and WebKit text fill.
   ============================================================ */

/* Tender destructive action — never white-on-white. */


/* Fleet segmented filters: selected = dark surface / light text,
   idle = white surface / dark text. */




/* Vendor primary create action. */



/* Work Journal Add Task primary action. */


/* Tender Add Task remains primary as well. */


/* Director Claim Create Record save action. */


/* Documents Card/Table switch. */




/* Safety: known primary families that the older generic hard-guard
   accidentally recoloured dark-on-dark. */



/* ===== settings-button-contrast-scope-v1 ===== */

/* ============================================================
   ACCOUNT SETTINGS — SCOPED BUTTON CONTRAST
   Settings must not inherit the legacy global .btn text-fill
   rules. Every actionable button has an explicit semantic state.
   ============================================================ */


/* Primary actions */



/* Secondary actions */



/* Destructive-but-safe unlink action */



/* Busy/disabled states stay readable rather than fading into button bg. */



/* Child labels/icons must inherit the semantic text colour. */



/* ===== auth-button-contrast-scope-v1 ===== */

/* ============================================================
   AUTH SCREEN — FINAL SCOPED BUTTON CONTRAST
   Loaded after legacy/global button guards so auth actions cannot
   become dark-on-dark or white-on-white again.
   ============================================================ */
#authScreen :is(#loginBtn,#regBtn,#resetBtn){
  background:#232127!important;
  background-color:#232127!important;
  background-image:none!important;
  border:1px solid #232127!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  opacity:1!important;
  text-shadow:none!important;
  box-shadow:none!important;
}
#authScreen :is(#loginBtn,#regBtn,#resetBtn):hover,
#authScreen :is(#loginBtn,#regBtn,#resetBtn):focus,
#authScreen :is(#loginBtn,#regBtn,#resetBtn):focus-visible,
#authScreen :is(#loginBtn,#regBtn,#resetBtn):active{
  background:#2F4156!important;
  background-color:#2F4156!important;
  background-image:none!important;
  border-color:#2F4156!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}
#authScreen :is(#loginBtn,#regBtn,#resetBtn):disabled{
  background:#5A6675!important;
  background-color:#5A6675!important;
  border-color:#5A6675!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  opacity:.72!important;
}
#authScreen :is(#loginBtn,#regBtn,#resetBtn) *{
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
  fill:currentColor!important;
  stroke:currentColor!important;
}


/* ===== library-final-button-state-contrast-v4 ===== */

/* Library-only final contrast layer. Must remain after all global button guards. */








/* ===== suite-row-action-menu-v2 ===== */

.suite-row-menu-wrap{position:relative;display:inline-flex;vertical-align:middle}
.suite-row-menu-trigger{position:relative;z-index:1}
.suite-row-menu{display:none!important}
#suite-row-menu-portal{position:fixed;z-index:2147483000;display:none;min-width:188px;max-width:min(280px,calc(100vw - 20px));padding:6px;background:#FCFBFA;border:1px solid #dbe3ea;border-radius:11px;box-shadow:0 14px 32px rgba(36,52,71,.18);text-align:left;box-sizing:border-box}
#suite-row-menu-portal.open{display:block}
#suite-row-menu-portal .suite-row-menu-item{width:100%;min-height:34px;display:flex;align-items:center;gap:9px;padding:7px 9px;border:0;border-radius:8px;background:transparent;color:#2F4156!important;-webkit-text-fill-color:#2F4156!important;text-decoration:none;font:inherit;font-size:12px;font-weight:650;cursor:pointer;white-space:nowrap;box-sizing:border-box}
#suite-row-menu-portal .suite-row-menu-item:hover,#suite-row-menu-portal .suite-row-menu-item:focus{background:#f4f6f8!important;color:#243447!important;-webkit-text-fill-color:#243447!important;outline:none}
#suite-row-menu-portal .suite-row-menu-item svg{width:14px;height:14px;flex:0 0 14px;color:currentColor;stroke:currentColor;fill:none}
#suite-row-menu-portal .suite-row-menu-item.suite-row-menu-danger{color:#9b3f49!important;-webkit-text-fill-color:#9b3f49!important}
#suite-row-menu-portal .suite-row-menu-item.suite-row-menu-danger:hover{background:#fff2f3!important;color:#8b303b!important;-webkit-text-fill-color:#8b303b!important}
@media(max-width:760px){#suite-row-menu-portal{min-width:176px}#suite-row-menu-portal .suite-row-menu-item{min-height:38px;font-size:12.5px}}


/* ===== manage-access-v21-visual-scale ===== */

/* V21: rebalance typography and control sizing for a calmer, more readable directory. */



























/* Drawer: slightly larger text, slightly tighter controls. */

















/* ===== ui-v3-director-claim-fullwidth-workspace ===== */

/* ============================================================
   UI V3 — Director Claim full-width operational workspace
   Transaction Record is the working canvas, not a nested card.
   ============================================================ */

/* Keep the shared vertical header rhythm, but reclaim horizontal space. */



/* Transaction Record: flat, edge-to-edge working surface. */






/* The register owns the available width and normally scrolls vertically only. */



/* Proportional columns: exactly one viewport-wide operational register. */














/* Every editable field must shrink with its cell instead of widening the table. */




/* Receipt field + preview share the cell without pushing other columns. */



/* Original spend remains one compact composite value. */


/* Description wraps rather than forcing the table wider. */



/* Output money columns stay legible in their compact footprint. */


/* Reduce toolbar pressure progressively before the table itself needs to scroll. */


/* Below laptop width, usability wins over over-compression. */


/* UI V3 — Director Claim KPI visibility
   Summary counters belong to Create Record only. */



/* ===== library-document-list-v3-rework ===== */

/* Library responsive document list — no horizontal scrolling on normal desktop */




/* Responsive column allocation: document receives the flexible space */












/* Document hierarchy */




/* Compact tag column that wraps within its own width */



/* Expiry and updated */



/* Quiet actions */



/* Pagination */








/* Smaller desktop: keep all columns on screen by reallocating space, never by widening the table. */

/* Mobile/tablet uses a compact stacked document list instead of a sideways table. */



/* ===== manage-access-v4-readability-fix ===== */

/* ============================================================
   Manage Access V4 — readability + control alignment correction
   Authoritative final override for the redesigned module.
   ============================================================ */

/* 1) Search is ONE control, not a wrapper plus a legacy input box. */







/* 2) Header actions use one visual size system. */





/* 3) People directory readability. */

















/* Slightly increase command/filter text to match the directory. */







/* ===== auth-v8-account-switch-header-alignment ===== */

/* Align Staff / Vendor with the top workspace identity line on desktop. */
@media (min-width:981px){
  #authScreen .authV4Auth{position:relative!important;}
  #authScreen .authAccountSwitchScreen{
    position:absolute!important;
    top:48px!important;
    right:56px!important;
    left:auto!important;
    bottom:auto!important;
    z-index:8!important;
    margin:0!important;
    transform:none!important;
  }
  #authScreen .authV4AccountHead{
    display:block!important;
  }
}
@media (min-width:981px) and (max-width:1250px){
  #authScreen .authAccountSwitchScreen{right:32px!important;}
}
@media (max-width:980px){
  #authScreen .authAccountSwitchScreen{
    position:static!important;
    inset:auto!important;
  }
}


/* ===== ui-bugfix-v12-three-polish-fixes ===== */

/* =========================================================
   V12 — command palette, Manage Access typography, and
   Documents filter workspace polish.
   ========================================================= */

/* 1) Search Anything: use a compact icon-only Open action. */
#gsResults .gsItem{
  grid-template-columns:36px minmax(0,1fr) 34px!important;
}
#gsResults .gsQuickOpen{
  width:32px!important;
  min-width:32px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0!important;
  border-radius:9px!important;
  justify-content:center!important;
  gap:0!important;
  font-size:0!important;
  color:#42576a!important;
  -webkit-text-fill-color:#42576a!important;
  background:#fff!important;
  border:1px solid #d7e1e7!important;
}
#gsResults .gsQuickOpen svg{
  width:15px!important;
  height:15px!important;
  stroke:currentColor!important;
}
#gsResults .gsItem:hover .gsQuickOpen,
#gsResults .gsItem.is-active .gsQuickOpen{
  opacity:1!important;
  transform:none!important;
}
#gsResults .gsQuickOpen:hover{
  background:#2F4156!important;
  border-color:#2F4156!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* 2) Manage Access: one deliberate type scale across every directory row. */













/* 3) Documents: remove the large empty toolbar card and nested wrappers. */
















/* ===== vendor-portal-v15-interaction-style ===== */

/* Vendor Portal V15 — make the external portal visibly actionable. */























#vm-vp-registration-ov{position:fixed;inset:0;z-index:10250;display:none;background:rgba(31,43,56,.34)}
#vm-vp-registration-ov.on{display:block}























/* V16 vendor portal interaction/contrast repair */
#vm-vendor-portal{padding-bottom:72px!important}






/* ===== vendor-control-centre-admin-actions-v17 ===== */


#vm-record-loa{border-color:#A9C4D3!important;background:#EEF5F8!important;color:#29475B!important;-webkit-text-fill-color:#29475B!important}
#vm-record-cancel{border-color:#D7AEB1!important;background:#FFF7F7!important;color:#8A3941!important;-webkit-text-fill-color:#8A3941!important}
#vm-record-restore{background:#2F4156!important;border-color:#2F4156!important;color:#fff!important;-webkit-text-fill-color:#fff!important}




/* ===== vendor-registration-form-redesign-v19 ===== */

/* Vendor registration — authoritative clean workflow layer */
#vm-form-ov{
  background:#F5F7F8!important;
}





































#vm-form-ov #vm-save-draft-btn{margin-left:auto!important}
#vm-form-ov #vm-submit-btn,
#vm-form-ov #vm-save-btn{
  background:#2F4156!important;border-color:#2F4156!important;
  color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important;
  font-weight:800!important;
}
#vm-form-ov #vm-submit-btn:hover:not(:disabled),
#vm-form-ov #vm-save-btn:hover:not(:disabled){background:#26384B!important;border-color:#26384B!important;color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important}

#vm-form-ov #vm-form-msg{bottom:78px!important}

/* Vendor portal CTA label protection */





@media(max-width:760px){
  
  
  
  
  
  
  
  
  
  #vm-form-ov #vm-save-draft-btn{margin-left:0!important}
}


/* ===== premium-library-v22-continuous-canvas ===== */

/* Library uses one continuous workspace canvas across the full module frame. */
#frame-library{
  background:#F4F6F7!important;
  min-height:100%!important;
}




/* ===== fleet-v25-scroll-upcoming-fix ===== */

/* Fleet V25 — eliminate inherited double canvas spacing and false vertical overflow. */
#frame-fleet{
  min-height:100%!important;
  height:auto!important;
  overflow:visible!important;
  background:#F4F6F8!important;
}





/* Upcoming bookings should be one clean card, not a card containing another dashed card. */




/* Keep the module's primary scroller predictable and avoid scroll chaining. */
#main:has(#frame-fleet.on){
  overscroll-behavior-y:contain!important;
}




/* ===== v27-unified-module-top-spacing ===== */

/* V27 — one authoritative top inset for every internal module.
   Documents is the reference: module root owns the top breathing room;
   nested legacy wrappers must not add a second top inset. */
:root{--ax-unified-module-top:28px;}



/* Remove legacy second-layer top spacing only; preserve each module's
   existing horizontal and bottom spacing. */



/* Vendor root is itself the main shell in several layouts. Only neutralise
   a nested vm-wrap when one exists, never the root's shared inset. */


@media(max-width:1100px){
  :root{--ax-unified-module-top:24px;}
}
@media(max-width:700px){
  :root{--ax-unified-module-top:18px;}
}


/* ===== documents-v32-search-fix ===== */

/* Documents V32 — definitive single search field + expiry icon fix */







/* V37 — New request drawer: remove nested/internal scrolling. */
#dc-new-drawer-ov{
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}







/* V38 — compact, simple new-request drawer. Keep the form elegant without nested cards or internal scrolling. */
#dc-new-drawer-ov{
  overflow:hidden!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:stretch!important;
}




#dc-new-drawer-ov #dc-new-close-btn{width:36px!important;height:36px!important;border-radius:11px!important;}


























/* ===== v39-drawer-followup-fix ===== */

/* V39 follow-up: these overrides are intentionally placed after the compact drawer block. */
#dc-new-drawer-ov{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:stretch!important;
  -webkit-overflow-scrolling:touch!important;
}













/* ===== v40-drawer-close-regression-fix ===== */

/* V40 — restore correct drawer open/close state after V39. */
#dc-new-drawer-ov:not(.on){
  display:none!important;
}
#dc-new-drawer-ov.on{
  display:flex!important;
}


/* ===== v41-single-scroll-drawer-fix ===== */

/* V41 — one scroll surface only: the drawer/overlay scrolls; attachment lists never scroll internally. */
#dc-new-drawer-ov{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  display:block!important;
  -webkit-overflow-scrolling:touch!important;
}
#dc-new-drawer-ov:not(.on){display:none!important;}
#dc-new-drawer-ov.on{display:block!important;}


#dc-new-drawer-ov #dc-nr-flist.has-files{
  overflow:visible!important;
}






/* ===== v42-upload-width-balance-fix ===== */

/* V42 — align upload control width with the rest of the form while keeping it compact. */



/* ===== v43-action-panels-redesign ===== */

/* V43 — Approve, Reject and Revision use the same compact side-panel language as New Request. */














body > :is(#dc-ap-modal,#dc-rj-modal,#dc-rv-modal,#dc-subrv-modal) textarea{min-height:96px!important;padding:11px 12px!important;border:1px solid #d3dfe7!important;border-radius:10px!important;background:#fff!important;color:#20384f!important;-webkit-text-fill-color:#20384f!important;font-size:12px!important;line-height:1.45!important;resize:vertical!important;}
body > :is(#dc-rj-modal,#dc-rv-modal) textarea{min-height:130px!important;}





















/* ===== v44-document-timeline-rebuild ===== */











/* ===== v45-login-70-30-split ===== */

/* V45 — desktop login split: 70% welcome / 30% login. */
@media(min-width:981px){
  #authScreen .authV4Shell{
    grid-template-columns:70% 30%!important;
  }
  #authScreen .authV4Brand{
    padding-left:64px!important;
    padding-right:64px!important;
  }
  #authScreen .authV4Auth{
    padding-left:28px!important;
    padding-right:28px!important;
  }
  #authScreen .authV4AuthInner{
    max-width:420px!important;
    width:100%!important;
  }
}


/* ===== v47-timeline-overflow-fix ===== */

/* V47 — keep every timeline element fully inside the history panel. */












/* ===== v48-side-panel-motion ===== */

/* V48 — unified smooth open/close motion for right-side panels. */
:root{
  --suite-panel-ease:cubic-bezier(.22,1,.36,1);
  --suite-panel-duration:260ms;
  --suite-overlay-duration:200ms;
}

/* Backdrop fades without blocking close-state transition. */
body > :is(
  #dc-new-drawer-ov,
  #dc-versions-modal,
  #dc-ap-modal,
  #dc-rj-modal,
  #dc-rv-modal,
  #dc-subrv-modal
){
  display:flex!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:
    opacity var(--suite-overlay-duration) ease,
    visibility 0s linear var(--suite-panel-duration)!important;
}

/* New request drawer. */


/* Timeline drawer. */


/* V43 action panels use the modal/drawer content directly. */


/* Open state. */
body > :is(
  #dc-new-drawer-ov,
  #dc-versions-modal,
  #dc-ap-modal,
  #dc-rj-modal,
  #dc-rv-modal,
  #dc-subrv-modal
).on{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition-delay:0s!important;
}


/* Keep existing explicit hidden rules from forcing display:none before animation can finish. */
body > #dc-new-drawer-ov:not(.on),
body > #dc-versions-modal:not(.on){
  display:flex!important;
}

/* Slightly quicker on narrow screens. */
@media(max-width:640px){
  :root{
    --suite-panel-duration:230ms;
    --suite-overlay-duration:180ms;
  }
}

/* Accessibility: no animation when reduced motion is requested. */



/* ===== v49-action-panel-wrapper-flatten-fix ===== */

/* V49 — flatten action panels so no inner wrapper/card is visible behind the header. */













/* ===== v50-special-elite-login-accent ===== */

/* V50 — Special Elite is used only as a restrained accent in the 70% welcome panel. */
#authScreen .authV4Hero h2{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:8px!important;
}
#authScreen .authV4HeroLead{
  display:block!important;
  font-family:"Google Sans"!important;
}
#authScreen .authV4HeroAccent{
  display:block!important;
  font-family:"Google Sans"!important;
  font-weight:400!important;
  font-style:normal!important;
  font-size:.88em!important;
  line-height:1.08!important;
  letter-spacing:-.02em!important;
  color:#fff!important;
  text-wrap:balance!important;
}
@media(max-width:980px){
  #authScreen .authV4HeroAccent{
    font-family:"Google Sans"!important;
  }
}


/* ===== v51-special-elite-login-heading ===== */

/* V51 — Special Elite belongs only to the login-side heading. */
#authScreen .authV4HeroLead,
#authScreen .authV4HeroAccent{
  all:unset!important;
}
#authScreen .authV4LoginAccent{
  font-family:"Google Sans"!important;
  font-weight:400!important;
  font-style:normal!important;
  letter-spacing:.01em!important;
  line-height:1.08!important;
}


/* ===== v52-special-elite-entire-login ===== */

/* V52 — use Special Elite across the entire authentication screen only. */
#authScreen,
#authScreen *{
  font-family:"Google Sans"!important;
  font-weight:400!important;
  font-style:normal!important;
}
#authScreen input,
#authScreen button,
#authScreen select,
#authScreen textarea{
  font-family:"Google Sans"!important;
  font-weight:400!important;
  font-style:normal!important;
}


/* ===== v54-google-sans-flex-login ===== */

/* V54 — Google Sans Flex across the entire authentication screen only. */
#authScreen,
#authScreen *{
  font-family:"Google Sans"!important;
  font-optical-sizing:auto!important;
  font-style:normal!important;
  font-variation-settings:"slnt" 0,"wdth" 100,"GRAD" 0,"ROND" 0!important;
}
#authScreen input,
#authScreen button,
#authScreen select,
#authScreen textarea{
  font-family:"Google Sans"!important;
  font-optical-sizing:auto!important;
  font-style:normal!important;
  font-variation-settings:"slnt" 0,"wdth" 100,"GRAD" 0,"ROND" 0!important;
}
#authScreen .authV4LoginAccent{
  font-family:"Google Sans"!important;
  font-weight:720!important;
  letter-spacing:-.02em!important;
}


/* ===== v55-google-sans-flex-global ===== */

/* V55 — Google Sans Flex across the entire workspace, with no UI element excluded. */
html,
body,
body *,
body *::before,
body *::after,
input,
button,
select,
textarea,
option,
optgroup,
table,
thead,
tbody,
tfoot,
tr,
th,
td,
label,
legend,
fieldset,
summary,
details,
dialog,
menu,
nav,
header,
footer,
main,
section,
article,
aside,
div,
span,
p,
a,
strong,
b,
em,
i,
small,
mark,
code,
pre,
kbd,
samp,
time,
abbr,
blockquote,
q,
ul,
ol,
li,
dl,
dt,
dd,
h1,h2,h3,h4,h5,h6,
svg text,
foreignObject,
canvas {
  font-family:"Google Sans"!important;
  font-optical-sizing:auto!important;
  font-style:normal!important;
  font-variation-settings:"slnt" 0,"wdth" 100,"GRAD" 0,"ROND" 0!important;
}

/* Keep icon glyphs/icons that are intentionally SVG or pseudo-content unaffected in layout,
   while all visible textual content still inherits Google Sans Flex. */
input::placeholder,
textarea::placeholder,
button,
select,
option,
optgroup {
  font-family:"Google Sans"!important;
  font-optical-sizing:auto!important;
  font-style:normal!important;
  font-variation-settings:"slnt" 0,"wdth" 100,"GRAD" 0,"ROND" 0!important;
}


/* ===== dcl-paid-claim-primary-button-final-fix ===== */

/* FINAL isolation: Director Claim Create Paid Claim primary buttons.
   Intentionally placed at the absolute end of the document so global themes cannot override it. */


#dcl-payment-ov #dcl-create-paid-claim-btn:active:not(:disabled){
  background:#1F3144!important;
  background-color:#1F3144!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  border-color:#1F3144!important;
}
#dcl-payment-ov #dcl-create-paid-claim-btn:disabled{
  background:#E5EAEE!important;
  background-color:#E5EAEE!important;
  color:#7B8994!important;
  -webkit-text-fill-color:#7B8994!important;
  border:1px solid #D6DEE4!important;
  opacity:1!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
}
/* Busy helper may inject a spinner/markup; keep all text/icons visible on the primary surface. */

#dcl-payment-ov #dcl-create-paid-claim-btn .spinner-sm{
  border-color:rgba(255,255,255,.35)!important;
  border-top-color:#FFFFFF!important;
}


/* ===== documents-request-card-lightweight-v34 ===== */

/* Documents approval queue — lighter card typography and cleaner hierarchy. */



















/* ===== documents-timeline-journal-production-v1 ===== */

/* Documents — compact Timeline Journal production layout. Google Sans only. */
html,body,body *,body *::before,body *::after,input,button,select,textarea,option,optgroup,svg text{font-family:"Google Sans"!important;}































































/* Retire every old row-card treatment in Timeline mode. */





/* ===== documents-timeline-journal-visual-repair-v2 ===== */

/* Timeline Journal visual repair — intentionally last so legacy global rules cannot override it. */


























/* ===== manage-access-v6-four-card-directory-final ===== */

/* =========================================================
   Manage Access V6 — unified 4-card people directory
   Same product language: flat white, quiet borders, navy,
   Google Sans only. No glass / frosted styling.
   ========================================================= */


/* Directory container becomes a clean card grid. */


/* Each existing person record is re-composed as one card. */




/* Identity */






/* Role + department: deliberately quiet, not another card inside the card. */







/* Access summary: one simple line, no module-chip clutter. */





/* Footer */





/* Keep directory heading light and aligned with the rest of the system. */









/* ===== global-system-design-normalization-v2-absolute-final ===== */

/* ABSOLUTE FINAL NORMALIZATION — must remain the last stylesheet in this file. */
:root{
  --sys-page-bg:#F6F7F9;
  --sys-surface:#FFFFFF;
  --sys-surface-soft:#F9FAFB;
  --sys-border:#E1E7EB;
  --sys-border-soft:#EDF1F3;
  --sys-ink:#172033;
  --sys-text:#2F4156;
  --sys-muted:#748092;
  --sys-accent:#2F4156;
  --sys-title-size:30px;
  --sys-title-weight:600;
  --sys-title-letter:-.035em;
  --sys-subtitle-size:13px;
  --sys-section-size:15px;
}
html,body,body *,body *::before,body *::after,input,button,select,textarea,option,optgroup,svg text{font-family:"Google Sans"!important}
html,body,#moduleBackdrop,#content,#mainContent,.main-content,
#frame-documents,#frame-fleet,#frame-tenders,#frame-library,#frame-workjournal,#frame-directorclaim,#frame-admin,#frame-vendors,#frame-settings{
  background:var(--sys-page-bg)!important;background-image:none!important;
}

/* Main titles */

/* Main subtitles */

/* Section headings */

/* White content surfaces — cards, panels, drawers and modal bodies. */

/* Cool soft neutral shells instead of old cream/beige. */

/* Inactive segmented/tab containers */

/* Inputs */

/* Neutral secondary buttons should not inherit historic cream fills. Primary/status colors remain untouched. */

/* Account Settings — flat unified layout.
   Do not render each settings group as a giant white adm-card slab. */










@media(max-width:1100px){:root{--sys-title-size:28px}}
@media(max-width:700px){:root{--sys-title-size:26px;--sys-section-size:14px}}


/* ===== manage-access-account-tabs-final-repair ===== */

/* Final repair: Staff / Vendors segmented control */








/* ===== manage-access-selections-right-drawer-final ===== */

/* Manage Access Selections — use the same right-side panel pattern as user management. */













/* ===== manage-access-selections-self-contained-absolute-final ===== */

/* Self-contained Manage Access Selections drawer.
   This panel is portalled to BODY, so no selector here depends on #admin-root. */




body > #adm-options-panel *{box-sizing:border-box!important}










body > #adm-options-panel #adm-department-options,
body > #adm-options-panel #adm-position-options{
  min-width:0!important;min-height:0!important;height:100%!important;max-height:none!important;overflow-y:auto!important;
  overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-gutter:stable!important;padding:1px 5px 1px 1px!important;
}










@media(max-width:820px){
  
  
  
  body > #adm-options-panel #adm-department-options,
  body > #adm-options-panel #adm-position-options{height:auto!important;max-height:280px!important}
}



/* ===== work-journal-inline-final-guard-v1 ===== */

/* Work Journal inline editor — final guard after all legacy/global layers. */




/* ===== documents-attachment-preview-download-actions-v57-2 ===== */
/* Main Approval/Request Journal attachment row: explicit Preview + Download actions. */











/* Version-history attachment rows use the same two explicit actions. */









/* V57.3 — Documents attachment actions: compact icon-only controls. */









