/* =====================================================================
   Paytime Daylight — premium light skin (drop-in)
   Load LAST (after AdminLTE + _all-skins + the inline theme) so it wins.
   Palette: canvas #F4F6FB · surface #FFFFFF · ink #0E1A2B · accent #2B5FE3
   Deep-ink sidebar · azure accent · fixed semantic attendance colors.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --dl-canvas:#F4F6FB; --dl-surface:#FFFFFF; --dl-raised:#FBFCFE; --dl-inset:#EEF2F8;
  --dl-line:#E4E9F1; --dl-line2:#D4DBE7;
  --dl-ink:#0E1A2B; --dl-ink2:#52627A; --dl-ink3:#8593A8;
  --dl-accent:#2B5FE3; --dl-accent-strong:#1E4BC4; --dl-accent-soft:#E8EEFD; --dl-accent-ink:#1B3E9E;
  --dl-gold:#9C7220;
  --dl-nav:#0E1A2B; --dl-nav2:#182A41; --dl-navink:#AEBBCE; --dl-navdim:#6C7C93;
  --dl-ok:#0F8A56; --dl-ok-bg:#E1F2E9; --dl-ok-line:#BFE4CE;
  --dl-late:#CE382F; --dl-late-bg:#FBE7E4; --dl-late-line:#F1C7C2;
  --dl-absent:#2C3A4B;
  --dl-holiday:#0B8FA3; --dl-holiday-bg:#DDF1F4; --dl-holiday-line:#B6E1E7;
  --dl-warn:#A9720F; --dl-warn-bg:#FAEFD6; --dl-warn-line:#EDD9AC;
  --dl-info:#3A6698; --dl-info-bg:#E7EFF7;
  --dl-sh-sm:0 1px 2px rgba(16,34,64,.06),0 1px 3px rgba(16,34,64,.04);
  --dl-sh-md:0 2px 6px rgba(16,34,64,.06),0 8px 24px rgba(16,34,64,.06);
  --dl-sans:"Public Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --dl-display:"Sora","Public Sans",sans-serif;
  --dl-mono:"IBM Plex Mono",ui-monospace,monospace;
}

/* ---------- base ---------- */
body,.wrapper{ background:var(--dl-canvas) !important; color:var(--dl-ink) !important; font-family:var(--dl-sans) !important; }
.content-wrapper,.right-side{ background:var(--dl-canvas) !important; }
h1,h2,h3,h4,h5,.content-header>h1{ font-family:var(--dl-display) !important; color:var(--dl-ink) !important; }
.content-header>h1{ font-weight:700 !important; letter-spacing:-.01em; }
a{ color:var(--dl-accent-ink) !important; }
a:hover{ color:var(--dl-accent-strong) !important; }


/* ---------- content + calendar, carried over verbatim ---------- */
/* ---------- boxes / cards ---------- */
.box{ background:var(--dl-surface) !important; border:1px solid var(--dl-line) !important; border-top:1px solid var(--dl-line) !important;
      border-radius:14px !important; box-shadow:var(--dl-sh-sm) !important; }
.box.box-primary{ border-top:3px solid var(--dl-accent) !important; }
.box.box-success{ border-top:3px solid var(--dl-ok) !important; }
.box.box-danger{ border-top:3px solid var(--dl-late) !important; }
.box.box-warning{ border-top:3px solid var(--dl-warn) !important; }
.box-header{ border-bottom:1px solid var(--dl-line) !important; color:var(--dl-ink) !important; }
.box-header .box-title{ color:var(--dl-ink) !important; font-family:var(--dl-display) !important; font-weight:700 !important; font-size:15px; }
.box.box-solid.box-primary>.box-header{ background:var(--dl-nav) !important; color:#fff !important; }
.box.box-solid.box-primary>.box-header .box-title{ color:#fff !important; }
.box-footer{ background:var(--dl-raised) !important; border-top:1px solid var(--dl-line) !important; }

/* ---------- tables ---------- */
.table{ color:var(--dl-ink) !important; }
.table>thead>tr>th{ color:var(--dl-ink2) !important; border-bottom:2px solid var(--dl-line2) !important; font-size:11px;
                    letter-spacing:.05em; text-transform:uppercase; font-weight:700; }
.table>tbody>tr>td,.table>tbody>tr>th{ border-top:1px solid var(--dl-line) !important; }
.table-bordered,.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,
.table-bordered>thead>tr>th{ border:1px solid var(--dl-line) !important; }
.table-bordered>thead>tr>th{ background:var(--dl-inset) !important; }
.table-hover>tbody>tr:hover,.table-hover>tbody>tr:hover>td{ background:var(--dl-inset) !important; }
.table-striped>tbody>tr:nth-of-type(odd){ background:var(--dl-raised) !important; }
.company_details{ color:var(--dl-ink) !important; }

/* ---------- buttons ---------- */
.btn{ font-family:var(--dl-sans) !important; font-weight:600 !important; }
.btn-flat{ border-radius:9px !important; }
.btn-primary{ background:var(--dl-accent) !important; border-color:var(--dl-accent) !important; color:#fff !important; box-shadow:0 2px 8px rgba(43,95,227,.25) !important; }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{ background:var(--dl-accent-strong) !important; border-color:var(--dl-accent-strong) !important; }
.btn-default{ background:var(--dl-surface) !important; border-color:var(--dl-line2) !important; color:var(--dl-ink) !important; }
.btn-default:hover,.btn-default:focus{ background:var(--dl-inset) !important; color:var(--dl-ink) !important; }
.btn-success{ background:var(--dl-ok) !important; border-color:var(--dl-ok) !important; color:#fff !important; }
.btn-danger{ background:var(--dl-late) !important; border-color:var(--dl-late) !important; color:#fff !important; }
.btn-warning{ background:var(--dl-warn) !important; border-color:var(--dl-warn) !important; color:#fff !important; }
.btn-info{ background:var(--dl-info) !important; border-color:var(--dl-info) !important; color:#fff !important; }
.text-blue,.text-primary{ color:var(--dl-accent-ink) !important; }
.text-green{ color:var(--dl-ok) !important; } .text-red{ color:var(--dl-late) !important; } .text-yellow{ color:var(--dl-warn) !important; }

/* ---------- forms ---------- */
.form-control,.select2-container .select2-choice,input[type="text"],input[type="password"],
input[type="email"],input[type="number"],input[type="date"],input[type="time"],select,textarea{
  background:var(--dl-surface) !important; border:1px solid var(--dl-line2) !important; color:var(--dl-ink) !important; border-radius:9px !important; }
.form-control:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--dl-accent) !important; box-shadow:0 0 0 3px var(--dl-accent-soft) !important; outline:none !important; }
.form-control::placeholder{ color:var(--dl-ink3) !important; }
label,.control-label{ color:var(--dl-ink2) !important; }
.input-group-addon{ background:var(--dl-inset) !important; border:1px solid var(--dl-line2) !important; color:var(--dl-ink2) !important; }

/* ---------- tabs / pills ---------- */
.nav-tabs{ border-bottom:1px solid var(--dl-line) !important; }
.nav-tabs>li>a{ color:var(--dl-ink2) !important; border-radius:9px 9px 0 0 !important; }
.nav-tabs>li>a:hover{ background:var(--dl-inset) !important; border-color:transparent !important; }
.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{
  color:var(--dl-accent-ink) !important; background:var(--dl-surface) !important; border-color:var(--dl-line) var(--dl-line) transparent !important; }
.nav-tabs>li.active>a{ box-shadow:inset 0 2px 0 var(--dl-accent) !important; }
.nav-pills>li.active>a,.nav-pills>li.active>a:hover{ background:var(--dl-accent) !important; color:#fff !important; }
.nav-tabs-custom>.nav-tabs>li.active{ border-top-color:var(--dl-accent) !important; }

/* ---------- info-box / small-box ---------- */
.info-box,.small-box{ background:var(--dl-surface) !important; border:1px solid var(--dl-line) !important; border-radius:14px !important;
                      box-shadow:var(--dl-sh-sm) !important; color:var(--dl-ink) !important; }
.info-box .info-box-text,.info-box .info-box-number{ color:var(--dl-ink) !important; }
.info-box-icon{ border-radius:12px 0 0 12px !important; }
.info-box-icon.bg-blue,.small-box.bg-blue{ background:var(--dl-accent) !important; color:#fff !important; }
.small-box>.inner h3,.small-box>.inner p{ color:#fff !important; }
.small-box.bg-green{ background:var(--dl-ok) !important; } .small-box.bg-red{ background:var(--dl-late) !important; }
.small-box.bg-aqua{ background:var(--dl-holiday) !important; } .small-box.bg-yellow{ background:var(--dl-warn) !important; }

/* ---------- callouts / alerts ---------- */
.callout{ border-radius:12px !important; box-shadow:var(--dl-sh-sm) !important; }
.callout.callout-info{ background:var(--dl-info-bg) !important; border-color:var(--dl-info) !important; color:var(--dl-ink) !important; }
.callout.callout-warning{ background:var(--dl-warn-bg) !important; border-color:var(--dl-warn) !important; color:var(--dl-ink) !important; }
.callout.callout-danger{ background:var(--dl-late-bg) !important; border-color:var(--dl-late) !important; color:var(--dl-ink) !important; }
.callout.callout-success{ background:var(--dl-ok-bg) !important; border-color:var(--dl-ok) !important; color:var(--dl-ink) !important; }
.alert{ border-radius:12px !important; }
.alert-success{ background:var(--dl-ok-bg) !important; border-color:var(--dl-ok-line) !important; color:#0c5c3a !important; }
.alert-danger{ background:var(--dl-late-bg) !important; border-color:var(--dl-late-line) !important; color:#8f231c !important; }
.alert-warning{ background:var(--dl-warn-bg) !important; border-color:var(--dl-warn-line) !important; color:#6f4c0c !important; }
.alert-info{ background:var(--dl-info-bg) !important; border-color:#c9dbec !important; color:#274864 !important; }

/* ---------- labels / badges (semantic attendance) ---------- */
.label,.badge{ font-weight:600 !important; border-radius:8px !important; font-family:var(--dl-sans) !important; }
.label-success,.badge.bg-green,.bg-green{ background-color:var(--dl-ok) !important; color:#fff !important; }
.label-danger,.badge.bg-red,.bg-red{ background-color:var(--dl-late) !important; color:#fff !important; }
.label-warning,.badge.bg-yellow{ background-color:var(--dl-warn) !important; color:#fff !important; }
.label-primary,.badge.bg-blue{ background-color:var(--dl-accent) !important; color:#fff !important; }
.label-info,.badge.bg-aqua{ background-color:var(--dl-holiday) !important; color:#fff !important; }
.label-default{ background-color:var(--dl-absent) !important; color:#fff !important; }

/* ---------- modals / dropdowns / pagination ---------- */
.modal-content{ background:var(--dl-surface) !important; border:1px solid var(--dl-line) !important; border-radius:16px !important; box-shadow:0 20px 60px rgba(16,34,64,.22) !important; }
.modal-header,.modal-footer{ border-color:var(--dl-line) !important; }
.modal-title{ color:var(--dl-ink) !important; font-family:var(--dl-display) !important; font-weight:700 !important; }
.modal-backdrop.in{ opacity:.4 !important; background:#0E1A2B !important; }
.dropdown-menu{ background:var(--dl-surface) !important; border:1px solid var(--dl-line) !important; border-radius:12px !important; box-shadow:var(--dl-sh-md) !important; }
.dropdown-menu>li>a{ color:var(--dl-ink2) !important; }
.dropdown-menu>li>a:hover{ background:var(--dl-inset) !important; color:var(--dl-ink) !important; }
.pagination>li>a,.pagination>li>span{ color:var(--dl-accent-ink) !important; background:var(--dl-surface) !important; border-color:var(--dl-line) !important; }
.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover{ background:var(--dl-accent) !important; border-color:var(--dl-accent) !important; color:#fff !important; }

/* ---------- DataTables ---------- */
.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{ color:var(--dl-ink2) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button{ color:var(--dl-accent-ink) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current{ background:var(--dl-accent) !important; border-color:var(--dl-accent) !important; color:#fff !important; }

/* ---------- custom app classes (settings panes, rate tables) ---------- */
.ps-side,.ps-card,.ps-inner{ background:var(--dl-surface) !important; border-color:var(--dl-line) !important; box-shadow:var(--dl-sh-sm) !important; }
.ps-side a.item{ color:var(--dl-ink2) !important; }
.ps-side a.item:hover{ background:var(--dl-inset) !important; }
.ps-side a.item.on{ background:var(--dl-accent-soft) !important; color:var(--dl-accent-ink) !important; border-left-color:var(--dl-accent) !important; }
.ps-side .hd{ color:var(--dl-ink3) !important; }

/* ---------- schedule / attendance calendar ---------- */
table.cal td,.calendar td,.fc td,.fc th{ background:var(--dl-surface) !important; border-color:var(--dl-line) !important; }
table.cal td .dn,.calendar .dn,.fc .fc-daygrid-day-number,.fc .fc-day-number{ color:var(--dl-ink2) !important; }
.fc .fc-col-header-cell-cushion,.fc .fc-day-header,.fc .fc-widget-header{ color:var(--dl-ink3) !important; background:var(--dl-inset) !important; }
.fc-day-today,.fc .fc-today{ background:var(--dl-accent-soft) !important; }
.fc-toolbar h2,.fc .fc-toolbar-title{ font-family:var(--dl-display) !important; color:var(--dl-ink) !important; }

/* FullCalendar attendance chips — keep text WHITE on the colored backgrounds (beats the global <a> color) */
.fc-event,.fc-event *,a.fc-event,a.fc-day-grid-event,.fc-day-grid-event,
.fc-event .fc-title,.fc-event .fc-content,.fc-event:hover,.fc-event:focus{ color:#fff !important; }
.fc-event,.fc-day-grid-event{ border:none !important; border-radius:5px !important; padding:1px 5px !important;
  font-weight:600 !important; font-size:11px !important; box-shadow:0 1px 1px rgba(16,34,64,.12) !important; }
.fc-event .fc-title{ font-weight:600 !important; }

/* attendance label chips (non-calendar contexts) — fixed semantic meaning */
.label-success.pull-right,.ontime,[class*="ontime"]{ background:var(--dl-ok) !important; color:#fff !important; }
.label-danger.pull-right{ background:var(--dl-late) !important; color:#fff !important; }

/* ---------- login page ---------- */
.login-page,.register-page{ background:var(--dl-canvas) !important; }
.login-box-body,.register-box-body{ background:var(--dl-surface) !important; border-radius:16px !important; border:1px solid var(--dl-line) !important; box-shadow:var(--dl-sh-md) !important; color:var(--dl-ink) !important; }
.login-box-msg{ color:var(--dl-ink) !important; }

/* ---------- misc ---------- */
.breadcrumb{ background:transparent !important; }
.breadcrumb>li,.breadcrumb>li>a{ color:var(--dl-ink3) !important; }
.breadcrumb>.active{ color:var(--dl-accent-ink) !important; }
hr{ border-color:var(--dl-line) !important; }
.text-muted{ color:var(--dl-ink3) !important; }
.progress{ background:var(--dl-inset) !important; border-radius:6px !important; }
.progress-bar{ background:var(--dl-accent) !important; }
::selection{ background:var(--dl-accent-soft); color:var(--dl-accent-ink); }

/* --- anchor button hover: keep label colour --- */
html body a.btn-primary, html body a.btn-primary:hover, html body a.btn-primary:focus, html body a.btn-primary:active,
html body a.btn-success, html body a.btn-success:hover, html body a.btn-success:focus, html body a.btn-success:active,
html body a.btn-danger, html body a.btn-danger:hover, html body a.btn-danger:focus, html body a.btn-danger:active,
html body a.btn-info, html body a.btn-info:hover, html body a.btn-info:focus, html body a.btn-info:active,
html body a.btn-warning, html body a.btn-warning:hover, html body a.btn-warning:focus, html body a.btn-warning:active{ color:#ffffff !important; }
html body a.btn-default, html body a.btn-default:hover, html body a.btn-default:focus{ color:#2b3a4a !important; }

/* --- daterangepicker legibility fix --- */
.daterangepicker td.available, .daterangepicker th.available, .daterangepicker th.month{ color:#243b53 !important; }
.daterangepicker td.off, .daterangepicker td.off.available{ color:#b6c2cf !important; }
.daterangepicker td.in-range{ background-color:#e6edf7 !important; color:#243b53 !important; }
.daterangepicker td.active, .daterangepicker td.active:hover, .daterangepicker td.start-date, .daterangepicker td.end-date, .daterangepicker td.in-range.active{ background-color:#1b3a6b !important; color:#ffffff !important; }
.daterangepicker td.today{ font-weight:700 !important; box-shadow:inset 0 0 0 2px #8a5c0f !important; }
.daterangepicker td.today.active{ color:#ffffff !important; }

/* --- leave credit chips --- */
.box-header.with-border:has(.lv-credits){ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.lv-credits{ display:flex; flex-wrap:wrap; gap:10px; margin-left:auto; }
.lv-chip{ display:flex; flex-direction:column; min-width:108px; padding:8px 12px; background:#f6f9fc; border:1px solid #e3eaf2; border-radius:8px; }
.lv-lbl{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#64748b; }
.lv-val{ font-size:16px; font-weight:700; color:#12294f; font-variant-numeric:tabular-nums; }
.lv-zero{ background:#fafbfc; }
.lv-zero .lv-val{ color:#9aa7b8; font-weight:600; }

/* =================== chrome: new top bar + rail (ui=2) =================== */
:root{ --rb-rail:260px; --rb-rail-min:64px; --rb-bar:60px; }
.rb-top{ position:relative; z-index:1030; display:flex; height:var(--rb-bar); }
.rb-brand{ flex:0 0 var(--rb-rail); width:var(--rb-rail); display:flex; align-items:center; gap:10px; padding:0 14px; background:var(--dl-nav); color:#fff !important; text-decoration:none !important; overflow:hidden; transition:flex-basis .3s ease,width .3s ease; }
.rb-brand img{}
.rb-brand .rb-mark{ display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.rb-brand b{ font-size:12.5px; font-weight:700; line-height:1.15; max-height:30px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.rb-bar{ flex:1 1 auto; display:flex; align-items:center; justify-content:flex-end; padding:0 16px; min-width:0; }
.rb-userbtn{ display:flex; align-items:center; gap:9px; padding:5px 10px 5px 5px; border-radius:999px; text-decoration:none !important; font-weight:600; font-size:13.5px; }
.rb-userbtn:hover,.open>.rb-userbtn{}
.rb-userbtn img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
.rb-chev{ width:7px; height:7px; border:solid var(--dl-ink3); border-width:0 2px 2px 0; transform:rotate(45deg) translate(-2px,-2px); }
.rb-usermenu{ border:1px solid var(--dl-line) !important; border-radius:12px !important; padding:6px !important; box-shadow:var(--dl-sh-md) !important; min-width:215px !important; }
.rb-usermenu .rb-who{ padding:9px 10px 11px; border-bottom:1px solid var(--dl-line); margin-bottom:5px; }
.rb-usermenu .rb-who b{ display:block; color:var(--dl-ink); font-size:13.5px; }
.rb-usermenu .rb-who small{ color:var(--dl-ink3); }
.rb-usermenu a{ display:block; padding:9px 10px; border-radius:8px; color:var(--dl-ink2) !important; text-decoration:none !important; font-size:13.5px; }
.rb-usermenu a:hover{ background:var(--dl-inset); color:var(--dl-ink) !important; }
.main-sidebar.rb-side{ position:fixed; top:0; left:0; bottom:0; width:var(--rb-rail); background:var(--dl-nav); display:flex; flex-direction:column; z-index:1000; transform:none !important; transition:width .3s ease; }
.rb-side .rb-nav{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:10px 0 6px; }
.rb-side .rb-nav::-webkit-scrollbar{ width:8px; }
.rb-side .rb-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:8px; }
.rb-item{ display:flex; align-items:center; gap:11px; margin:2px 10px; padding:10px 12px; border-radius:10px; color:var(--dl-navink) !important; text-decoration:none !important; font-size:13.5px; font-weight:500; line-height:1.3; transition:background .15s,color .15s; cursor:pointer; }
.rb-item>i{ flex:0 0 20px; width:20px; text-align:center; font-size:15px; color:var(--dl-navdim); }
.rb-item>span{ flex:1 1 auto; min-width:0; }
.rb-item:hover{ background:rgba(255,255,255,.07); color:#fff !important; }
.rb-item:hover>i{ color:#fff; }
.rb-item.rb-on{ background:var(--dl-accent); color:#fff !important; box-shadow:0 2px 10px rgba(43,95,227,.35); }
.rb-item.rb-on>i{ color:#fff; }
.rb-count{ flex:0 0 auto; margin-left:auto; background:var(--dl-late); color:#fff; font-style:normal; font-size:11px; font-weight:700; line-height:1; padding:3px 8px; border-radius:999px; }
.rb-sub>summary{ list-style:none; }
.rb-sub>summary::-webkit-details-marker{ display:none; }
.rb-caret{ margin-left:auto; width:6px; height:6px; border:solid var(--dl-navdim); border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .15s; }
.rb-sub[open] .rb-caret{ transform:rotate(-135deg); }
.rb-item.rb-child{ margin-left:34px; padding:7px 12px; font-size:13px; }
.rb-collapse{ flex:0 0 auto; justify-content:center; border:1px solid rgba(255,255,255,.20); cursor:pointer; }
.rb-collapse:hover{}
.rb-collapse i{ border:solid #fff; }
.content-wrapper,.main-footer{ margin-left:var(--rb-rail); transition:margin-left .3s ease; }
body.sidebar-collapse .rb-brand,html.sb-collapsed .rb-brand{ flex-basis:var(--rb-rail-min); width:var(--rb-rail-min); justify-content:center; padding:0; }
body.sidebar-collapse .rb-brand b,html.sb-collapsed .rb-brand b{ display:none; }
body.sidebar-collapse .main-sidebar.rb-side,html.sb-collapsed .main-sidebar.rb-side{}
body.sidebar-collapse .rb-item>span,body.sidebar-collapse .rb-count,body.sidebar-collapse .rb-caret{ display:none; }
body.sidebar-collapse .rb-item{ justify-content:center; margin:2px 8px; padding:11px 0; }
body.sidebar-collapse .rb-item.rb-child{ margin-left:8px; }
body.sidebar-collapse .rb-collapse{ margin:6px auto 14px; }
body.sidebar-collapse .rb-collapse i{ transform:rotate(135deg) translate(2px,2px); }
body.sidebar-collapse .content-wrapper,body.sidebar-collapse .main-footer,
html.sb-collapsed .content-wrapper,html.sb-collapsed .main-footer{}
@media (max-width:767px){
  .main-sidebar.rb-side{ transform:translateX(-100%) !important; }
  body.sidebar-open .main-sidebar.rb-side{ transform:none !important; }
  .content-wrapper,.main-footer{ margin-left:0 !important; }
  .rb-brand{ flex-basis:auto; width:auto; }
}

/* the hairline belongs to the white part of the bar only - the brand must meet the rail seamlessly */
.rb-top{}
.rb-bar{}

/* ---- collapse button: round, on the rail edge, vertically centred ---- */
.main-sidebar.rb-side{ overflow:visible; }
.rb-collapse{ border:1px solid var(--dl-line); }
.rb-collapse:hover{}
.rb-collapse i{}
body.sidebar-collapse .rb-collapse,html.sb-collapsed .rb-collapse{}

/* collapsed: no scrollbar, so the icons stay centred under the logo */
body.sidebar-collapse .rb-nav,html.sb-collapsed .rb-nav{ scrollbar-width:none; }
body.sidebar-collapse .rb-nav::-webkit-scrollbar,html.sb-collapsed .rb-nav::-webkit-scrollbar{ width:0; }
body.sidebar-collapse .rb-item,html.sb-collapsed .rb-item{ margin:2px 8px; padding:11px 0; justify-content:center; }

/* ---- brand lives in the rail: one continuous navy column, no seam to misalign ---- */
.main-sidebar.rb-side{ padding-top:0; }
.rb-side .rb-brand{ display:flex; align-items:center; flex:0 0 var(--rb-bar); height:var(--rb-bar);
  width:100%; }
.rb-top{ margin-left:var(--rb-rail); transition:margin-left .3s ease; }
.rb-bar{}
body.sidebar-collapse .rb-top,html.sb-collapsed .rb-top{}
body.sidebar-collapse .rb-side .rb-brand,html.sb-collapsed .rb-side .rb-brand{ justify-content:center; }

/* ---- AdminLTE's sidebar-mini rules win on specificity; match them and go one higher ---- */
body.sidebar-mini.sidebar-collapse .main-sidebar.rb-side,
body.sidebar-collapse .main-sidebar.rb-side,
html.sb-collapsed .main-sidebar.rb-side{ width:var(--rb-rail-min) !important; }
body.sidebar-mini.sidebar-collapse .content-wrapper,
body.sidebar-mini.sidebar-collapse .main-footer,
body.sidebar-collapse .content-wrapper, body.sidebar-collapse .main-footer,
html.sb-collapsed .content-wrapper, html.sb-collapsed .main-footer{ margin-left:var(--rb-rail-min) !important; }
body.sidebar-mini.sidebar-collapse .rb-top,
body.sidebar-collapse .rb-top, html.sb-collapsed .rb-top{ margin-left:var(--rb-rail-min) !important; }
/* the logo block is simply the full width of whatever the rail is */
.rb-side .rb-brand,
body.sidebar-collapse .rb-side .rb-brand,
html.sb-collapsed .rb-side .rb-brand{ width:100% !important; flex:0 0 var(--rb-bar) !important; }
/* expanded side, same treatment */
body:not(.sidebar-collapse) .main-sidebar.rb-side{ width:var(--rb-rail) !important; }
body:not(.sidebar-collapse) .content-wrapper,
body:not(.sidebar-collapse) .main-footer,
body:not(.sidebar-collapse) .rb-top{ margin-left:var(--rb-rail) !important; }

/* ---- collapse button reads as part of the rail ---- */
.rb-collapse{ z-index:1001; border:1px solid rgba(255,255,255,.22); }
.rb-collapse:hover{ border-color:rgba(255,255,255,.40); }
.rb-collapse i{}
body.sidebar-collapse .rb-collapse,html.sb-collapsed .rb-collapse{}

/* ---- the bump IS the rail: no ring, no shadow, same navy ---- */
.rb-collapse{ border:0 !important; }
.rb-collapse:hover{}
.rb-collapse i{}
body.sidebar-collapse .rb-collapse,html.sb-collapsed .rb-collapse{}

/* ---- bigger bump ---- */
.rb-collapse{}
.rb-collapse i{}
body.sidebar-collapse .rb-collapse,html.sb-collapsed .rb-collapse{}

/* ---- bump sits fully outside the rail so it never covers a menu row ---- */
.rb-collapse{}
.rb-collapse i{ margin-left:0; }
body.sidebar-collapse .rb-collapse,html.sb-collapsed .rb-collapse{ right:-36px; }

/* ---- collapse control: a normal row at the bottom of the rail (no bump) ---- */
.rb-collapse{ position:static !important; right:auto !important; top:auto !important; transform:none !important;
  display:flex !important; align-items:center !important; gap:11px !important;
  width:auto !important; height:auto !important; margin:4px 10px 14px !important; padding:10px 12px !important;
  background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:10px !important;
  border-top:0 !important; }
.rb-collapse::after{ content:"Collapse menu"; color:var(--dl-navink); font-size:13.5px; font-weight:500; line-height:1.3; }
.rb-collapse:hover{ background:rgba(255,255,255,.07) !important; }
.rb-collapse:hover::after{ color:#fff; }
.rb-collapse i{ margin:0 0 0 6px; border-color:var(--dl-navdim); }
.rb-collapse:hover i{}
body.sidebar-collapse .rb-collapse::after,html.sb-collapsed .rb-collapse::after{ display:none; }
body.sidebar-collapse .rb-collapse,html.sb-collapsed .rb-collapse{ justify-content:center !important; margin:4px 8px 14px !important; padding:12px 0 !important; }
body.sidebar-collapse .rb-collapse i,html.sb-collapsed .rb-collapse i{ flex:0 0 auto; }

/* ---- chevron must stay square, not stretched by the flex row ---- */
.rb-collapse i{ flex:0 0 auto !important; box-sizing:border-box !important;
  width:9px !important; height:9px !important; margin:0 6px 0 6px !important;
  border:solid var(--dl-navdim) !important; border-width:2px 0 0 2px !important;
  transform:rotate(-45deg) !important; }
.rb-collapse:hover i{ border-color:#fff !important; }
body.sidebar-collapse .rb-collapse i,html.sb-collapsed .rb-collapse i{ transform:rotate(135deg) !important; margin:0 !important; }

/* ---- pre-paint collapsed state must match the real collapsed state exactly,
        or the rail renders open for one frame on every navigation ---- */
html.sb-collapsed .rb-item>span,
html.sb-collapsed .rb-count,
html.sb-collapsed .rb-caret{ display:none; }
html.sb-collapsed .rb-item{ justify-content:center; margin:2px 8px; padding:11px 0; }
html.sb-collapsed .rb-item.rb-child{ margin-left:8px; }
html.sb-collapsed .rb-collapse{ justify-content:center; margin:4px 8px 14px !important; padding:12px 0 !important; }
html.sb-collapsed .rb-collapse::after{ display:none; }
html.sb-collapsed .rb-collapse i{ transform:rotate(135deg) !important; margin:0 !important; }
html.sb-collapsed .rb-nav{ scrollbar-width:none; }
html.sb-collapsed .rb-nav::-webkit-scrollbar{ width:0; }
/* nothing animates until after the first paint */
html.sb-collapsed:not(.sb-ready) .main-sidebar.rb-side,
html.sb-collapsed:not(.sb-ready) .content-wrapper,
html.sb-collapsed:not(.sb-ready) .main-footer,
html.sb-collapsed:not(.sb-ready) .rb-top,
html.sb-collapsed:not(.sb-ready) .rb-brand{ transition:none !important; }

/* ---- pre-paint width must outrank the expanded rule (body has no
        sidebar-collapse class yet at that moment) ---- */
html.sb-collapsed body .main-sidebar.rb-side{ width:var(--rb-rail-min) !important; }
html.sb-collapsed body .content-wrapper,
html.sb-collapsed body .main-footer,
html.sb-collapsed body .rb-top{ margin-left:var(--rb-rail-min) !important; }
html.sb-collapsed body .rb-brand{ flex-basis:var(--rb-rail-min) !important; width:var(--rb-rail-min) !important; justify-content:center !important; padding:0 !important; }
html.sb-collapsed body .rb-brand b{ display:none !important; }

/* ---- top bar matches the rail: one dark chrome across the top ---- */
.rb-top{ background:var(--dl-nav); border-bottom:0 !important; }
.rb-bar{ background:var(--dl-nav); border-bottom:1px solid rgba(255,255,255,.08); }
.rb-side .rb-brand{ border-bottom:1px solid rgba(255,255,255,.08); }
.rb-userbtn{ color:#fff !important; }
.rb-userbtn:hover,.open>.rb-userbtn{ background:rgba(255,255,255,.12); }
.rb-userbtn img{ border:1px solid rgba(255,255,255,.28); }
.rb-chev{ border-color:rgba(255,255,255,.8); }

/* ---- brand mark in a light rounded tile, like the Client Vault app icon ---- */
.rb-brand img{ width:36px !important; height:36px !important; flex:0 0 36px !important;
  padding:4px; background:#FFFFFF; border-radius:10px; object-fit:contain;
  box-shadow:0 1px 3px rgba(2,12,27,.35); }
.rb-brand .rb-mark{ width:36px; height:36px; flex:0 0 36px; border-radius:10px;
  background:#FFFFFF; color:var(--dl-nav); box-shadow:0 1px 3px rgba(2,12,27,.35); }
.rb-brand b{ letter-spacing:.01em; }
body.sidebar-collapse .rb-brand img,html.sb-collapsed .rb-brand img,
body.sidebar-collapse .rb-brand .rb-mark,html.sb-collapsed .rb-brand .rb-mark{ width:34px !important; height:34px !important; flex-basis:34px !important; }

/* ---- supplied brand images: icon when collapsed, wordmark when expanded ---- */
.rb-brand img.rb-markimg{ background:transparent !important; padding:0 !important; box-shadow:none !important;
  width:36px !important; height:36px !important; flex:0 0 36px !important; border-radius:9px; }
.rb-brand img.rb-wordimg{ background:transparent !important; padding:0 !important; box-shadow:none !important;
  width:auto !important; height:26px !important; max-width:165px; flex:0 1 auto !important; border-radius:0; object-fit:contain; }
body.sidebar-collapse .rb-wordimg,html.sb-collapsed .rb-wordimg{ display:none !important; }

/* ---- one brand image at a time: wordmark expanded, icon collapsed ---- */
.rb-brand img.rb-markimg{ display:none !important; }
body.sidebar-collapse .rb-brand img.rb-markimg,
html.sb-collapsed .rb-brand img.rb-markimg{ display:block !important; }
.rb-brand img.rb-wordimg{}
body.sidebar-collapse .rb-brand img.rb-wordimg,
html.sb-collapsed .rb-brand img.rb-wordimg{ display:none !important; }
/* the supplied wordmark is dark; render it white on the navy rail */
.rb-brand img.rb-wordimg{ filter:brightness(0) invert(1); }

/* ---- wordmark centred in the expanded rail (final say) ---- */
.rb-side .rb-brand{ justify-content:center !important; padding:0 12px !important; gap:0 !important; }
.rb-brand img.rb-wordimg{ margin:0 auto !important; display:block !important; }
body.sidebar-collapse .rb-side .rb-brand,
html.sb-collapsed .rb-side .rb-brand{ padding:0 !important; }

/* ---------- announcements (ANN_CSS) ---------- */
.ann-card{ margin-bottom:16px; }
.ann-card .box-title .fa{ color:var(--dl-accent); margin-right:6px; }
.ann-list{ padding:2px 18px 10px !important; }
.ann-item{ border-top:1px solid var(--dl-line); }
.ann-item:first-of-type{ border-top:0; }
.ann-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:11px 0; cursor:pointer; list-style:none; user-select:none; }
.ann-head::-webkit-details-marker{ display:none; }
.ann-head::marker{ content:""; }
.ann-nobody .ann-head{ cursor:default; }
.ann-chev{ font-size:10px; color:var(--dl-ink3); width:10px; transition:transform .15s ease; }
.ann-item[open] .ann-chev{ transform:rotate(90deg); color:var(--dl-accent); }
.ann-head:hover .ann-title{ color:var(--dl-accent); }
.ann-title{ color:var(--dl-ink); font-family:var(--dl-display); font-size:14px; }
.ann-new{ background:var(--dl-accent-soft); color:var(--dl-accent-ink); font-size:11px; font-weight:600; padding:1px 8px; border-radius:999px; }
.ann-date{ margin-left:auto; color:var(--dl-ink3); font-family:var(--dl-mono); font-size:12px; white-space:nowrap; }
.ann-body{ margin:0 0 12px 18px; padding:10px 14px; background:var(--dl-raised); border:1px solid var(--dl-line); border-radius:10px; color:var(--dl-ink2); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.ann-older{ display:none; }
.ann-open .ann-older{ display:block; }
.ann-more{ margin-top:6px; background:none; border:0; padding:4px 0; color:var(--dl-accent); font-weight:600; font-size:13px; cursor:pointer; }

/* ---- MOBILE_RAIL_FIX: on phones the sidebar is off-canvas, so nothing may keep its 260px margin.
   These repeat the desktop selectors with an extra html/body so they outrank the !important rules above. ---- */
@media (max-width:767px){
  html body .content-wrapper, html body .main-footer, html body .rb-top,
  html body:not(.sidebar-collapse) .content-wrapper, html body:not(.sidebar-collapse) .main-footer, html body:not(.sidebar-collapse) .rb-top,
  html body.sidebar-collapse .content-wrapper, html body.sidebar-collapse .main-footer, html body.sidebar-collapse .rb-top,
  html body.sidebar-mini.sidebar-collapse .content-wrapper, html body.sidebar-mini.sidebar-collapse .main-footer, html body.sidebar-mini.sidebar-collapse .rb-top,
  html.sb-collapsed body .content-wrapper, html.sb-collapsed body .main-footer, html.sb-collapsed body .rb-top{
    margin-left:0 !important;
  }
  html body #calendar, html body .fc-view-container, html body .fc-view-container table{ max-width:100% !important; }
  html body .content-wrapper{ overflow-x:hidden; }
}

/* ---- MOB_MENU: phone-only menu button + drawer backdrop ---- */
.rb-menu{ display:none; }
.rb-backdrop{ display:none; }
@media (max-width:767px){
  html body .rb-bar{ justify-content:space-between; }
  html body .rb-menu{
    display:inline-flex; flex-direction:column; justify-content:space-between; flex:0 0 auto;
    width:40px; height:40px; padding:12px 11px; margin-right:8px; border-radius:11px;
    background:var(--dl-inset); text-decoration:none !important; -webkit-tap-highlight-color:transparent;
  }
  html body .rb-menu i{ display:block; height:2px; border-radius:2px; background:var(--dl-ink2); transition:width .2s ease, margin .2s ease; }
  html body .rb-menu i:nth-child(1){ width:18px; }
  html body .rb-menu i:nth-child(2){ width:12px; }
  html body .rb-menu i:nth-child(3){ width:15px; }
  html body.sidebar-open .rb-menu i:nth-child(1){ width:12px; margin-left:6px; }
  html body.sidebar-open .rb-menu i:nth-child(2){ width:18px; }
  html body.sidebar-open .rb-menu i:nth-child(3){ width:9px; margin-left:9px; }
  html body .rb-menu:active{ background:var(--dl-line); }
  html body .main-sidebar.rb-side{ z-index:1040; }
  html body.sidebar-open .rb-backdrop{ display:block; position:fixed; inset:0; z-index:1035; background:rgba(14,26,43,.45); }
  /* the in-sidebar collapse row is desktop-only; on phones the drawer closes by tapping outside */
  html body .rb-collapse{ display:none !important; }
}

/* ---- STACK_TABLES: on phones each table row becomes a card (body.rb-stacked, preview via ?stack=1) ---- */
@media (max-width:767px){
  html body.rb-stacked .dataTables_scrollHead{ display:none !important; }
  html body.rb-stacked .dataTables_scrollBody{ overflow:visible !important; width:auto !important; max-width:100% !important; }
  html body.rb-stacked .dataTables_wrapper table.table,
  html body.rb-stacked .dataTables_wrapper table.dataTable{ width:100% !important; border:0 !important; }
  html body.rb-stacked .dataTables_wrapper thead{ display:none !important; }
  html body.rb-stacked .dataTables_wrapper tbody{ display:block; }
  html body.rb-stacked .dataTables_wrapper tbody tr{
    display:block; margin:0 0 10px; padding:4px 14px; background:var(--dl-surface);
    border:1px solid var(--dl-line) !important; border-radius:12px; box-shadow:var(--dl-sh-sm);
  }
  html body.rb-stacked .dataTables_wrapper tbody tr:last-child{ margin-bottom:0; }
  html body.rb-stacked .dataTables_wrapper tbody td{
    display:flex !important; align-items:flex-start; justify-content:space-between; gap:14px;
    width:auto !important; max-width:none !important; white-space:normal !important;
    border:0 !important; padding:9px 0 !important; font-size:13.5px; text-align:right;
  }
  html body.rb-stacked .dataTables_wrapper tbody td + td{ border-top:1px solid var(--dl-inset) !important; }
  html body.rb-stacked .dataTables_wrapper tbody td::before{
    content:attr(data-label); flex:0 0 42%; text-align:left;
    color:var(--dl-ink3); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; line-height:1.5;
  }
  html body.rb-stacked .dataTables_wrapper tbody td:empty{ display:none !important; }
  html body.rb-stacked .dataTables_wrapper tbody td.dataTables_empty{ display:block !important; text-align:center; color:var(--dl-ink3); }
  html body.rb-stacked .dataTables_wrapper tbody td.dataTables_empty::before{ content:none; }
  html body.rb-stacked .dataTables_wrapper tbody td .btn{ white-space:normal; }
  html body.rb-stacked .dataTables_wrapper .dataTables_scroll{ overflow:visible !important; }
  html body.rb-stacked .dataTables_filter, html body.rb-stacked .dataTables_length{ float:none !important; text-align:left; width:100%; }
  html body.rb-stacked .dataTables_filter input{ width:100%; margin:4px 0 0; }
}

/* STACK_HIDE_ROW: the row-number column carries nothing useful on a phone card */
@media (max-width:767px){
  html body.rb-stacked .dataTables_wrapper tbody td[data-label="Row"],
  html body.rb-stacked .dataTables_wrapper tbody td[data-label="#"]{ display:none !important; }
  html body.rb-stacked .dataTables_wrapper tbody td[data-label="Row"] + td{ border-top:0 !important; }
}


/* ---- RB_COUNT_COLLAPSED: collapsed rail keeps the pending count as a small bubble on the icon
   (matches the admin sidebar). Written for BOTH collapsed states - the real one (body.sidebar-collapse)
   and the pre-paint one (html.sb-collapsed) - so the bubble never flickers between pages. Desktop only;
   on phones the rail opens as a full-width drawer where the count already shows beside the label. ---- */
@media (min-width:768px){
  html body.sidebar-collapse .rb-item,
  html.sb-collapsed body .rb-item{ position:relative; }
  html body.sidebar-collapse .rb-item>.rb-count,
  html.sb-collapsed body .rb-item>.rb-count{
    display:inline-flex !important; align-items:center; justify-content:center;
    position:absolute; top:4px; right:5px; margin:0;
    min-width:16px; height:16px; padding:0 4px; font-size:10px; line-height:16px;
    box-shadow:0 0 0 2px var(--dl-nav); pointer-events:none; z-index:2;
  }
}

/* ---- RB_TIP: collapsed-sidebar hover label (matches the admin sidebar tooltip; follows the theme colours) ---- */
.rb-tip{
  position:fixed; z-index:2000; top:0; left:0; opacity:0; pointer-events:none;
  transform:translateY(-50%) translateX(-4px); transition:opacity .12s ease, transform .12s ease;
  padding:8px 13px; border-radius:10px; white-space:nowrap;
  background:var(--dl-nav2); color:#fff; font:600 13px/1.25 var(--dl-sans);
  border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 26px rgba(2,12,27,.38);
}
.rb-tip::before{
  content:""; position:absolute; left:-5px; top:50%; width:10px; height:10px; transform:translateY(-50%) rotate(45deg);
  background:var(--dl-nav2); border-left:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); border-radius:0 0 0 3px;
}
.rb-tip.rb-tip-on{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:767px){ .rb-tip{ display:none !important; } }

/* ---- PORTAL_PERIOD: Show (period) dropdown on the request pages ---- */
.pf-period{ float:right; display:inline-flex; align-items:center; gap:8px; margin:0; }
.pf-period label{ margin:0; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#6b7890; white-space:nowrap; }
.pf-period label .fa{ color:var(--dl-accent); margin-right:3px; }
.pf-period select{ height:40px; min-width:150px; padding:0 34px 0 12px; border:1px solid #d4dbe7; border-radius:11px; background:#fff; font-weight:600; font-size:14px; color:#0e1a2b; box-shadow:0 1px 2px rgba(16,24,40,.05); cursor:pointer; }
.pf-period select:focus{ outline:none; border-color:var(--dl-accent); box-shadow:0 0 0 3px rgba(var(--dl-accent-rgb),.16); }
.pf-note{ margin:0 0 10px; font-size:12.5px; color:#6b7890; }
.pf-note a{ font-weight:700; }

/* ANN_MEDIA: links, video card and attachment chip inside an announcement */
.ann-body .ann-link{ font-weight:600; text-decoration:underline; word-break:break-word; }
.ann-extra{ margin-top:10px; }
.ann-video{ display:block; width:100%; max-width:420px; margin-top:12px; padding:0; border:1px solid #d4dbe7; border-radius:10px; background:#10243a; cursor:pointer; overflow:hidden; text-align:left; }
.ann-video-face{ display:flex; align-items:center; justify-content:center; height:186px; background:#16324f; }
.ann-video-play{ display:flex; align-items:center; justify-content:center; width:62px; height:44px; border-radius:10px; background:#c8201f; }
.ann-video-bar{ display:flex; align-items:center; gap:8px; padding:10px 12px; background:#fff; color:#5a6b82; }
.ann-video-label{ flex:1 1 auto; font-size:13.5px; font-weight:600; color:#0e1a2b; }
.ann-video-src{ font-size:12px; color:#6b7890; }
.ann-video-frame{ display:block; width:100%; max-width:420px; margin-top:12px; aspect-ratio:16/9; border:0; border-radius:10px; background:#000; } /* ANN_VIDEO_BLOCK */
.ann-file{ display:inline-flex; align-items:center; gap:9px; padding:9px 13px; border:1px solid #d4dbe7; border-radius:10px; background:#f8fafc; text-decoration:none; color:#5a6b82; min-height:44px; box-sizing:border-box; }
.ann-file:hover{ background:#eef3f9; text-decoration:none; }
.ann-file-txt{ display:flex; flex-direction:column; line-height:1.3; }
.ann-file-txt b{ font-size:13.5px; font-weight:600; color:#0e1a2b; }
.ann-file-txt span{ font-size:12px; color:#6b7890; }
.ann-file-dl{ margin-left:4px; color:var(--dl-accent,#1d6fd0); }
@media (max-width:767px){ .ann-video, .ann-video-frame{ max-width:100%; } .ann-video-face{ height:160px; } }
/* LV_HIDDEN_COUNT */
.pf-note-hidden{ display:flex; align-items:flex-start; gap:8px; margin:0 0 12px; padding:10px 13px; border:1px solid #efd9a4; border-radius:11px; background:#fdf7e8; color:#5f4c18; font-size:13.5px; line-height:1.5; }
.pf-note-hidden .fa{ color:#a9760a; margin-top:3px; flex:0 0 auto; }
.pf-note-hidden a{ color:#7a5400; text-decoration:underline; white-space:nowrap; }
@media (max-width:767px){ .pf-note-hidden a{ white-space:normal; } }
.box-header.pf-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.box-header.pf-head:before,.box-header.pf-head:after{ display:none; }
@media (max-width:767px){ .pf-period{ float:none; display:flex; width:100%; margin-top:10px; } .pf-period select{ flex:1 1 auto; } }

/* ---- PORTAL_TAP: phone-sized tap targets for the small buttons (Cancel, Print Payslip, sort, calendar arrows) ---- */
@media (max-width:767px){
  .content-wrapper .btn-sm, .content-wrapper .btn-xs{ min-height:38px; padding-top:8px; padding-bottom:8px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
  .content-wrapper .fc .fc-button{ height:38px; min-width:38px; }
}

/* ---- PORTAL_CAL_PHONE: Home calendar on phones (list view + Grid/List switch) ---- */
@media (max-width:767px){
  html body #calendar .fc-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
  html body #calendar .fc-toolbar .fc-left h2{ font-size:22px; margin:0; }
  html body #calendar .fc-toolbar .fc-right{ display:flex; gap:6px; }
  html body #calendar .fc-toolbar .fc-right .fc-button-group{ display:flex; }
  html body #calendar .fc-list-view{ border-radius:12px; overflow:hidden; }
  html body #calendar .fc-list-heading td{ background:var(--dl-inset, #f1f4f9) !important; font-weight:700; }
  html body #calendar .fc-list-item td{ padding:9px 12px !important; font-size:14px; }
  html body #calendar .fc-list-item-time{ display:none; }
}


/* ---- PORTAL_CAL_SHORT: phone Grid - labels wrap instead of being cut, Out in orange ---- */
@media (max-width:767px){
  html body #calendar .fc-day-grid-event{ border-radius:4px !important; }
  html body #calendar .fc-day-grid-event .fc-content{ white-space:normal !important; overflow:visible !important; font-weight:700; letter-spacing:-.01em; }
}

/* ---- PORTAL_CAL_DESKTOP_COLORS: the phone calendar keeps the desktop colours (Out orange removed); loading line ---- */
.rb-cal-loading{ margin:0 0 10px; font-size:13px; color:#6b7890; }
.rb-cal-loading .fa{ color:var(--dl-accent); margin-right:6px; }

/* ---- PORTAL_CAL_LIST_OUT: in the List view, Out stays orange (the Grid keeps the desktop colours) ---- */
html body #calendar .fc-list-item.att-out .fc-event-dot{ background-color:#C2410C !important; border-color:#C2410C !important; }
html body #calendar .fc-list-item.att-out .fc-list-item-title, html body #calendar .fc-list-item.att-out .fc-list-item-title a{ color:#C2410C !important; font-weight:600; }

/* ---- PORTAL_CAL_TWOLINE: phone Grid - small IN / OUT label over the full time ---- */
@media (max-width:767px){
  html body #calendar .fc-day-grid-event{ margin:2px 2px 0 !important; padding:2px 3px !important; }
  html body #calendar .fc-day-grid-event .fc-content{ font-size:9.5px; line-height:1.2; text-align:center; }
  html body #calendar .rb-ev-k{ display:block; font-size:7.5px; font-weight:800; letter-spacing:.08em; opacity:.8; }
  html body #calendar .rb-ev-v{ display:block; white-space:nowrap; font-weight:700; }
}

/* ---- PORTAL_CAL_TINY: very small phones (< 360 px, 39 px days): smaller time, AM/PM may wrap instead of being cut ---- */
@media (max-width:359px){
  html body #calendar .fc-day-grid-event{ margin:2px 1px 0 !important; padding:2px 1px !important; }
  html body #calendar .rb-ev-v{ white-space:normal; font-size:8.5px; letter-spacing:-.02em; line-height:1.15; }
  html body #calendar .fc-day-grid-event .fc-content{ font-size:8.5px; }
}

/* ---- PORTAL_CAL_TAP: day details sheet (bottom sheet on phones, centred card on desktop) ---- */
.rb-day-sheet{ position:fixed; inset:0; z-index:2000; background:rgba(14,26,43,.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.rb-day-card{ width:100%; max-width:380px; background:#fff; border-radius:16px; box-shadow:0 20px 50px rgba(15,23,42,.25); overflow:hidden; }
.rb-day-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid #eef1f6; font-size:15px; color:#0e1a2b; }
.rb-day-x{ width:36px; height:36px; border:0; border-radius:10px; background:#f1f4f9; font-size:22px; line-height:1; color:#475569; }
.rb-day-card ul{ list-style:none; margin:0; padding:8px 16px 14px; }
.rb-day-card li{ display:flex; align-items:center; gap:10px; padding:9px 0; font-size:14px; color:#0e1a2b; border-bottom:1px solid #f4f6fa; }
.rb-day-card li:last-child{ border-bottom:0; }
.rb-day-card li i{ flex:0 0 10px; width:10px; height:10px; border-radius:50%; }
.rb-day-card li.rb-day-none{ color:#8a96aa; }
#calendar .fc-day-grid-event, #calendar .fc-day{ cursor:pointer; }
@media (max-width:767px){ .rb-day-sheet{ align-items:flex-end; padding:0; } .rb-day-card{ max-width:none; border-radius:18px 18px 0 0; padding-bottom:env(safe-area-inset-bottom); } }

/* OVERSCROLL_NAV: with no background on the root element the browser paints the page
   canvas - including the rubber-band area above the page when you scroll past the top -
   with the BODY's colour, which showed a pale band above the dark bar. Use the same
   variable the top bar uses so this follows Company Structure > Color Navigation.
   body is held to the viewport height so the root colour cannot show through on a
   short page. The area past the BOTTOM of the page takes this colour too - a root
   background cannot be limited to one end. */
html{ background:var(--dl-nav) !important; }
body{ min-height:100vh !important; }

/* FOOTER_BOTTOM: on a short page the footer used to sit just under the content with empty
   canvas below it, while the fixed rail ran the full height of the window. AdminLTE normally
   prevents that in JavaScript - adminlte.js measures .main-header and sets a min-height on
   .content-wrapper - but this shell renames the header to .rb-top, so that measurement finds
   nothing and no height is ever set. This is the same result done in CSS, which does not
   depend on the script. The sidebar is position:fixed, so it is out of flow and unaffected.
   Remove this block to go back to the old behaviour. */
.wrapper{ display:flex; flex-direction:column; min-height:100vh; }
.wrapper > .rb-top{ flex:0 0 auto; }
.wrapper > .content-wrapper{ flex:1 0 auto; }
.wrapper > .main-footer{ flex:0 0 auto; }

/* ---------------------------------------------------------------
   PW_DEFAULT_NUDGE — shown on the portal home only to an employee
   whose password is still the shared default. It removes itself the
   moment they change it, so it needs no dismiss button and nobody
   who has already changed theirs ever sees it.
   --------------------------------------------------------------- */
.rb-pwnudge{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:#FFF7E6; border:1px solid #F0D9A6; border-left:4px solid #C7891B;
  border-radius:10px; padding:14px 16px; margin-bottom:16px;
}
.rb-pwnudge-icon{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:#F6E3BE; color:#8A5F10;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.rb-pwnudge-body{ flex:1 1 300px; min-width:0; line-height:1.5; color:#6B5320; font-size:13.5px; }
.rb-pwnudge-body b{ display:block; color:#4A3A12; font-size:14.5px; margin-bottom:2px; }
.rb-pwnudge-btn{
  flex:0 0 auto; background:#C7891B; color:#fff !important; text-decoration:none !important;
  font-weight:600; font-size:13.5px; padding:9px 18px; border-radius:8px; white-space:nowrap;
}
.rb-pwnudge-btn:hover,
.rb-pwnudge-btn:focus{ background:#A96F10; color:#fff !important; }

@media (max-width:600px){
  .rb-pwnudge{ gap:10px; padding:12px 13px; }
  .rb-pwnudge-icon{ display:none; }
  .rb-pwnudge-btn{ width:100%; text-align:center; }
}