:root{
  /* Shared platform spacing scale. Keep page and component rhythm on these
     increments so related screens remain aligned at every breakpoint. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --page-inline-space: clamp(1rem, 1.5vw, 1.5rem);
  --page-block-space: 1.25rem;
  --section-space: 1rem;
  --panel-space: 1.25rem;
  --compact-space: 0.75rem;
  --sidebar-width: 240px;
  --sidebar-mini-width: 84px;
  --admin-bg: #f5f7fb;
  --admin-surface: #ffffff;
  --admin-surface-soft: #f8fafc;
  --admin-border: #dbe4ef;
  --admin-text: #1f2937;
  --admin-muted: #6b7280;
  --admin-primary: #2563eb;
  --admin-primary-dark: #1d4ed8;
  --admin-success: #0f766e;
  --admin-warning: #d97706;
  --admin-danger: #dc2626;
  --admin-sidebar: #111827;
  --admin-sidebar-soft: #1f2937;
  --admin-shadow-sm: 0 10px 24px rgba(15, 23, 42, 0.06);
  --admin-shadow: 0 18px 46px rgba(15, 23, 42, 0.09);
  --admin-shadow-lg: 0 26px 70px rgba(15, 23, 42, 0.12);
  --admin-ring: 0 0 0 4px rgba(37, 99, 235, 0.12);
  --bg: var(--admin-bg);
  --primary: var(--admin-primary);
  --primaryT: rgba(37, 99, 235, 0.24);
  --transDur: 0.3s;
}

*{
  box-sizing: border-box;
}

html{
  min-height: 100%;
  background: #0f172a;
}

html.is-navigating, html.is-navigating body{
  background: #0f172a !important;
}

html.app-boot-pending body{
  opacity: 0 !important;
  pointer-events: none !important;
}

html[data-theme="light"].is-navigating, html[data-theme="light"].is-navigating body{
  background: #f5f7fb !important;
}

html.is-panel-loading .admin-main,
html.is-panel-loading .admin-navbar,
html.is-panel-loading .admin-sidebar,
html.is-panel-loading .dashboard-content,
html.is-navigating .admin-main,
html.is-navigating .admin-navbar,
html.is-navigating .admin-sidebar,
html.is-navigating .dashboard-content{
  transition: none !important;
}

body{
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(180deg, #111827 0%, var(--admin-bg) 48%, #0b1120 100%);
  color: var(--admin-text);
  font-family: "Segoe UI", Arial, sans-serif;
}

/* Global handover reminder. It is created by the single alarm controller so
   the visible prompt, sound and desktop notification share one occurrence. */
.global-handover-alarm-popup{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:1300;
  width:min(348px,calc(100vw - 2rem));
  padding:.82rem .86rem .78rem;
  border:1px solid color-mix(in srgb,var(--admin-warning) 42%,var(--admin-border));
  border-left:3px solid #f59e0b;
  border-radius:11px;
  background:var(--admin-surface);
  color:var(--admin-text);
  box-shadow:var(--admin-shadow-lg);
}
.global-handover-alarm-head{display:flex;align-items:center;gap:.62rem}
.global-handover-alarm-head>div{min-width:0}
.global-handover-alarm-head strong,.global-handover-alarm-head small{display:block}
.global-handover-alarm-head strong{font-size:.94rem;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.global-handover-alarm-head small{margin-top:.08rem;color:var(--admin-muted);font-size:.77rem;line-height:1.3}
.global-handover-alarm-icon{display:grid;flex:0 0 31px;width:31px;height:31px;place-items:center;border-radius:8px;background:rgba(245,158,11,.14);color:#f59e0b;font-size:.9rem;font-weight:900}
.global-handover-alarm-popup p{margin:.66rem 0 0;padding:.58rem .62rem;border-radius:7px;background:var(--admin-surface-soft);color:var(--admin-text);font-size:.82rem;line-height:1.4;overflow-wrap:anywhere}
.global-handover-alarm-actions{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-top:.68rem}
.global-handover-alarm-actions .btn{min-height:36px;padding:.42rem .65rem;font-size:.82rem;font-weight:750}
html[data-theme="dark"] .global-handover-alarm-popup{background:#182436;border-color:#6b5426;border-left-color:#f59e0b;color:#e5edf7}
html[data-theme="dark"] .global-handover-alarm-popup p{background:#121d2c;color:#e5edf7}
@media (max-width:575.98px){.global-handover-alarm-popup{right:1rem;bottom:1rem}}

a{
  text-decoration: none;
}


.admin-shell{
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.admin-sidebar{
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  background: var(--admin-sidebar);
  color: #ffffff;
  box-shadow: 18px 0 42px rgba(15, 23, 42, 0.18);
  transform: translateX(0);
  transition: width 0.2s ease, transform 0.2s ease;
}

.sidebar-header{
  flex: 0 0 auto;
  min-height: 78px;
  display: flex;
  align-items: center;
  padding: 0.7rem 1.25rem;
  margin-inline: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-mark{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: #ffffff;
}

.brand-mark:hover, .brand-mark:focus{
  color: #ffffff;
}

.brand-logo-link{
  position: relative;
  min-height: 0;
}

.brand-logo{
  display: block;
  width: 100%;
  max-width: 152px;
  max-height: 44px;
  height: auto;
  object-fit: contain;
}

.brand-icon, .metric-icon, .nav-icon{
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-weight: 800;
}

.brand-icon{
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #0f766e);
  color: #ffffff;
}

.nav-text, .sidebar-footer span{
  min-width: 0;
  transition: opacity 0.16s ease, width 0.16s ease;
}







.sidebar-nav{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.sidebar-nav .nav-link{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  color: #d1d5db;
  font-weight: 700;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
  white-space: nowrap;
}

.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link:focus, .sidebar-nav .nav-link.active{
  background: var(--admin-sidebar-soft);
  color: #ffffff;
}

.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link:focus{
  transform: translateX(2px);
}













html[data-dashboard-menu-open="true"] #dashboardMenu.collapse:not(.show){
  display: grid;
  height: auto;
  visibility: visible;
}

.nav-sublink{
  display: block;
  padding: 0.52rem 0.65rem;
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
}

.nav-sublink:hover, .nav-sublink:focus, .nav-sublink.active{
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.nav-icon{
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #bfdbfe;
  font-size: 0.76rem;
}



.sidebar-footer{
  flex: 0 0 auto;
  margin-top: auto;
  margin-inline: var(--space-5);
  padding: var(--space-3) 0 var(--space-4);
  color: var(--admin-sidebar-muted);
  border-top: 1px solid var(--admin-sidebar-border);
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}

.sidebar-footer span{
  display: block;
}

.sidebar-backdrop{
  position: fixed;
  inset: 0;
  z-index: 1030;
  display: none;
  background: rgba(15, 23, 42, 0.5);
}

.admin-main{
  width: auto;
  min-width: 0;
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-left: var(--sidebar-width);
  transition: margin-left 0.2s ease, opacity 0.14s ease;
}

.admin-navbar{
  position: sticky;
  top: 0;
  z-index: 1020;
  min-height: 78px;
  border-bottom: 1px solid var(--admin-border);
  box-shadow: var(--admin-shadow-sm);
}

.admin-navbar.bg-white{
  background-color: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(14px);
}

.admin-navbar .container-fluid{
  position: relative;
  padding-left: var(--page-inline-space) !important;
  padding-right: var(--page-inline-space) !important;
}

.navbar-title-block{
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  gap: var(--space-2);
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.navbar-title{
  margin: 0;
  color: var(--admin-text);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
  white-space: nowrap;
}

.navbar-subtitle{
  margin: 0;
  color: var(--admin-muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sidebar-toggle{
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.sidebar-toggle:hover, .sidebar-toggle:focus{
  border-color: #bfdbfe;
  background: #f8fbff;
  box-shadow: var(--admin-ring);
}

.sidebar-toggle span{
  width: 18px;
  height: 2px;
  display: block;
  background: var(--admin-text);
  border-radius: 999px;
}





.navbar-actions{
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-user-menu{
  position: relative;
  color: var(--admin-text);
}

.nav-user-trigger{
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
  padding: 0.25rem 0.4rem;
  border-radius: 8px;
  color: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.nav-user-trigger::-webkit-details-marker{ display: none; }
.nav-user-trigger:hover, .nav-user-trigger:focus-visible{
  background: rgba(96, 165, 250, 0.1);
  outline: none;
}
.nav-user-trigger:focus-visible{ box-shadow: var(--admin-ring); }

.nav-user-avatar{
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 2px solid #38d9a9;
  border-radius: 9px;
  color: var(--admin-text);
  font-size: 1.1rem;
}
.nav-user-avatar svg{ width: 23px; height: 23px; }

.nav-user-name{
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-chevron{
  margin-left: 0.15rem;
  color: var(--admin-muted);
  font-size: 0.78rem;
  transition: transform 0.15s ease;
}
.nav-user-menu[open] .nav-user-chevron{ transform: rotate(180deg); }

.nav-user-dropdown{
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 1050;
  min-width: 220px;
  padding: 0.35rem;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  background: var(--admin-surface);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}

.nav-user-menu-item{
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  color: var(--admin-text);
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;
}
.nav-user-menu-item:hover, .nav-user-menu-item:focus-visible{
  background: rgba(96, 165, 250, 0.12);
  color: var(--admin-text);
}
.nav-user-signout{
  border-top: 1px solid var(--admin-border);
  color: #f87171;
}

.nav-user-signout:hover,
.nav-user-signout:focus-visible{
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
}

@media (max-width: 575.98px){
  .nav-user-trigger{ gap: 0.4rem; min-height: 42px; font-size: 0.84rem; }
  .nav-user-name{ max-width: 115px; }
  .nav-user-avatar{ width: 35px; height: 35px; }
  .nav-user-avatar svg{ width: 20px; height: 20px; }
  .nav-user-dropdown{ min-width: min(220px, calc(100vw - 1rem)); }
}















.report-action-tooltip{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3200;
  padding: 0.42rem 0.52rem;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 2px;
  background: #13233a;
  color: #ffffff;
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-999px, -999px, 0);
  transition: opacity 0.08s ease;
  white-space: nowrap;
}

.report-action-tooltip::after{
  position: absolute;
  left: var(--tooltip-arrow-left, 50%);
  bottom: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid #13233a;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  content: "";
  transform: translateX(-50%);
}

.report-action-tooltip.tooltip-below::after{
  top: -7px;
  bottom: auto;
  border-top: 0;
  border-bottom: 7px solid #13233a;
}

.report-action-tooltip.is-visible{
  opacity: 1;
}

.btn-sign-out:hover, .btn-sign-out:focus{
  border-color: #dc2626 !important;
  background: #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.18) !important;
}



.profile-button{
  border: 1px solid var(--admin-border);
  background: #ffffff;
  color: var(--admin-text);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.profile-button:hover, .profile-button:focus{
  border-color: #bfdbfe;
  box-shadow: var(--admin-ring);
}













.profile-button{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 42px;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  font-weight: 700;
}



.avatar-img{
  display: block;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center;
}





.avatar-xl{
  width: 78px;
  height: 78px;
  border-radius: 50%;
}





.dashboard-content{
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.dashboard-content > .container-fluid{
  padding-left: var(--page-inline-space) !important;
  padding-right: var(--page-inline-space) !important;
  padding-top: var(--page-block-space) !important;
  padding-bottom: var(--page-block-space) !important;
}

.page-heading, .panel-header, .metric-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.page-heading{
  min-height: 54px;
  margin-bottom: var(--section-space);
}

.page-heading h1{
  font-weight: 800;
  letter-spacing: 0;
}

.eyebrow{
  color: var(--admin-primary);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.heading-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.btn{
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.btn:hover, .btn:focus{
  transform: translateY(-1px);
}

.btn-primary{
  border-color: var(--admin-primary);
  background: var(--admin-primary);
}

.btn-primary:hover, .btn-primary:focus{
  border-color: var(--admin-primary-dark);
  background: var(--admin-primary-dark);
}

.metric-card, .panel{
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow);
}

.metric-card{
  position: relative;
  min-height: 164px;
  padding: var(--panel-space);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.metric-card::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--metric-color, var(--admin-primary));
}

.metric-card:hover{
  border-color: #c6d5e8;
  box-shadow: var(--admin-shadow-lg);
  transform: translateY(-3px);
}

.metric-primary{
  --metric-color: var(--admin-primary);
}

.metric-success{
  --metric-color: var(--admin-success);
}

.metric-warning{
  --metric-color: var(--admin-warning);
}

.metric-danger{
  --metric-color: var(--admin-danger);
}

.review-score-card[data-review-score="above"]{
  --metric-color: var(--admin-success);
}

.review-score-card[data-review-score="average"]{
  --metric-color: var(--admin-warning);
}

.review-score-card[data-review-score="neutral"]{
  --metric-color: var(--admin-muted);
}

.review-score-card[data-review-score="below"]{
  --metric-color: var(--admin-danger);
}

.review-score-card[data-review-score="neutral"] .metric-icon{
  background: rgba(148, 163, 184, 0.16);
}

.review-score-card .metric-value{
  color: var(--metric-color);
}

.review-score-card .metric-meta{
  color: var(--admin-text);
}

.metric-label{
  color: var(--admin-muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

[data-performance-card] .metric-label{
  color: var(--admin-text);
  font-size: 1.04rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
}

[data-performance-card] .metric-value{
  margin-top: 0.9rem;
  font-size: 1.7rem;
  line-height: 1.12;
}

[data-performance-card] .metric-meta{
  gap: 0.28rem;
  margin-top: 0.45rem;
  line-height: 1.2;
}

[data-performance-card="most"] .metric-value{
  color: var(--admin-success);
}

[data-performance-card="least"] .metric-value{
  color: var(--admin-danger);
}

.metric-icon{
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #eaf2ff;
  color: var(--metric-color, var(--admin-primary));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.metric-success .metric-icon{
  background: #e7f6f3;
}

.metric-warning .metric-icon{
  background: #fff4df;
}

.metric-danger .metric-icon{
  background: #ffecec;
}

.metric-value{
  margin-top: 1rem;
  color: var(--admin-text);
  font-size: 2.18rem;
  font-weight: 800;
  line-height: 1;
}

.metric-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.9rem;
  color: var(--admin-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.panel{
  padding: var(--panel-space);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.panel:hover{
  border-color: #c6d5e8;
  box-shadow: var(--admin-shadow-lg);
}

.panel-header{
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--section-space);
}

.panel-header p{
  font-size: 0.92rem;
}

.chart-legend{
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: flex-end;
  align-items: flex-start;
  color: var(--admin-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.chart-legend span{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.legend-swatch{
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 3px;
  display: inline-block;
}

.legend-swatch-blue{
  background: linear-gradient(180deg, #93c5fd, #2563eb);
}

.legend-swatch-green{
  background: linear-gradient(180deg, #34d399, #0f766e);
}

.legend-swatch-red{
  background: linear-gradient(180deg, #fca5a5, #dc2626);
}



.record-chart{
  --chart-label-lane: 3.65rem;
  --chart-top-lane: 2.15rem;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 0.4rem;
  align-items: stretch;
  overflow-anchor: none;
}

.chart-total{
  flex: 0 0 auto;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  background: var(--admin-surface);
  color: var(--admin-text);
  box-shadow: var(--admin-shadow-sm);
  font-size: 0.78rem;
  font-weight: 800;
}

.record-axis{
  box-sizing: border-box;
  height: 292px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--chart-top-lane) 0 var(--chart-label-lane);
  color: var(--admin-muted);
  font-size: 0.64rem;
  font-weight: 400;
  text-align: right;
}

.record-axis span{
  line-height: 1;
  transform: translateY(-50%);
}

.charts-performance-panel .record-axis, .charts-performance-panel .chart-bars{
  height: 455px;
}

.chart-bars{
  position: relative;
  box-sizing: border-box;
  height: 292px;
  display: grid;
  grid-template-columns: repeat(var(--chart-columns, 6), minmax(var(--chart-column-min, 38px), var(--chart-column-max, 1fr)));
  align-items: end;
  justify-content: center;
  gap: 1rem;
  overflow-x: hidden;
  overflow-y: hidden;
  overflow-anchor: none;
  padding: var(--chart-top-lane) 0.4rem 0;
  border-radius: 8px;
  background:
    linear-gradient(to bottom, transparent 0 calc(100% - var(--chart-label-lane)), #ffffff calc(100% - var(--chart-label-lane))),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.chart-bars[data-charts-grid],
.chart-bars[data-operator-graph],
.chart-bars[data-dynamic-graph],
.graph-panel-red .chart-bars{
  transition: none;
}

.record-chart:has(> .chart-bars[data-charts-grid]:not(.chart-bars-ready)) > .record-axis,
.record-chart:has(> .chart-bars[data-operator-graph]:not(.chart-bars-ready)) > .record-axis,
.record-chart:has(> .chart-bars[data-dynamic-graph]:not(.chart-bars-ready)) > .record-axis,
.graph-panel-red .record-chart:has(> .chart-bars:not(.chart-bars-ready)) > .record-axis{
  opacity: 0;
}

.record-axis{
  transition: none;
}

.chart-bars[data-charts-grid]:not(.chart-bars-ready), .chart-bars[data-operator-graph]:not(.chart-bars-ready), .chart-bars[data-dynamic-graph]:not(.chart-bars-ready), .graph-panel-red .chart-bars:not(.chart-bars-ready){
  opacity: 0;
}

.chart-bars[data-charts-grid]:not(.chart-bars-ready) .chart-column, .chart-bars[data-operator-graph]:not(.chart-bars-ready) .chart-column, .chart-bars[data-dynamic-graph]:not(.chart-bars-ready) .chart-column, .graph-panel-red .chart-bars:not(.chart-bars-ready) .chart-column, .chart-bars[data-charts-grid]:not(.chart-bars-ready) .chart-average-line, .chart-bars[data-operator-graph]:not(.chart-bars-ready) .chart-average-line, .chart-bars[data-dynamic-graph]:not(.chart-bars-ready) .chart-average-line, .graph-panel-red .chart-bars:not(.chart-bars-ready) .chart-average-line{
  visibility: hidden;
}

.chart-bars::before{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: var(--chart-top-lane);
  background: linear-gradient(180deg, #f8fafc 0%, #f8fafc 100%);
  content: "";
  pointer-events: none;
}

.chart-bars::after{
  position: absolute;
  top: var(--chart-top-lane);
  left: 0;
  width: var(--chart-grid-width, 100%);
  bottom: var(--chart-label-lane);
  z-index: 1;
  background: repeating-linear-gradient(to bottom, rgba(107, 114, 128, 0.22) 0 1px, transparent 1px var(--axis-step-size, 38px));
  border-bottom: 1px solid var(--admin-border);
  content: "";
  pointer-events: none;
}

.chart-bars-wide{
  --chart-column-min: 24px;
  gap: 0.55rem;
}

.chart-bars-dense{
  --chart-column-min: 0px;
  gap: 0.24rem;
}

.chart-bars-dense .chart-column small{
  font-size: 0.56rem;
  line-height: 1.26;
  -webkit-line-clamp: 3;
}

.chart-bars-spacious{
  justify-content: space-evenly;
  gap: 0;
}

.chart-bars-scroll{
  justify-content: start;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--admin-primary) transparent;
}

.chart-bars[data-operator-graph].chart-bars-scroll{
  gap: 0.55rem;
}

.chart-bars-scroll::-webkit-scrollbar{
  height: 8px;
}

.chart-bars-scroll::-webkit-scrollbar-track{
  background: transparent;
}

.chart-bars-scroll::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.72);
}

.chart-column{
  position: relative;
  z-index: 2;
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--chart-label-lane);
  align-items: end;
  color: var(--admin-muted);
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
  cursor: default;
}

.record-chart[data-graph-href] .chart-column{
  cursor: pointer;
}

.record-chart[data-graph-href] .chart-column:focus-visible{
  outline: 3px solid var(--admin-primary);
  outline-offset: 4px;
  border-radius: 8px;
}

.chart-average-line{
  position: absolute;
  left: 0.4rem;
  width: calc(var(--chart-grid-width, 100%) - 0.8rem);
  z-index: 3;
  border-top: 2px dashed rgba(15, 23, 42, 0.42);
  pointer-events: none;
  transform: translateY(-1px);
}

.chart-column strong{
  position: absolute;
  left: 50%;
  top: 0.25rem;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--admin-text);
  font-size: 0.64rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-shadow: none;
  transition: color 0.16s ease;
}

.chart-column span{
  grid-row: 1;
  width: 100%;
  height: var(--bar-size);
  align-self: end;
  min-height: 0;
  display: block;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, var(--admin-primary), var(--admin-success));
  transform-origin: bottom;
  transition: filter 0.16s ease, transform 0.16s ease;
}

.chart-column small{
  position: absolute;
  top: calc(100% - var(--chart-label-lane) + 0.3rem);
  left: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 0.1rem 0.18rem;
  color: var(--admin-muted);
  font-size: 0.64rem;
  font-weight: 400;
  line-height: 1.28;
  text-align: center;
  text-overflow: clip;
  transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  transition: color 0.16s ease;
}

.chart-hover-tooltip{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;
  max-width: min(260px, calc(100vw - 1.5rem));
  padding: 0.48rem 0.58rem;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 2px;
  background: #13233a;
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.35);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-999px, -999px, 0);
  transition: opacity 0.08s ease;
}

.chart-hover-tooltip::after{
  position: absolute;
  left: var(--tooltip-arrow-left, 50%);
  bottom: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid #13233a;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  content: "";
  transform: translateX(-50%);
}

.chart-hover-tooltip.tooltip-below::after{
  top: -7px;
  bottom: auto;
  border-top: 0;
  border-bottom: 7px solid #13233a;
}

.chart-hover-tooltip.is-visible{
  opacity: 1;
}

.chart-hover-tooltip-title{
  margin-bottom: 0.18rem;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
}

.chart-hover-tooltip-row{
  color: #dbeafe;
  font-size: 0.69rem;
  font-weight: 700;
  white-space: nowrap;
}

.chart-bars-paired{
  --chart-column-min: 34px;
  gap: 0.7rem;
}

.chart-bars-paired .chart-column{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0.16rem;
}

.chart-bars-paired .chart-column span{
  width: 100%;
}

.chart-bars-paired .chart-column strong{
  font-size: 0.58rem;
}

.chart-bars-paired .chart-column strong:nth-of-type(1){
  left: 25%;
}

.chart-bars-paired .chart-column strong:nth-of-type(2){
  left: 75%;
}

.chart-bars-paired .chart-bar-blue{
  grid-column: 1;
  background: linear-gradient(180deg, #93c5fd, #2563eb);
}

.chart-bars-paired .chart-bar-green{
  grid-column: 2;
  background: linear-gradient(180deg, #34d399, #0f766e);
}



.chart-bars-values-sparse .chart-column:nth-of-type(even) strong{
  opacity: 0;
}

.chart-bars-show-third .chart-column small, .chart-bars-show-third .chart-column strong{
  opacity: 1;
}

.chart-bars-show-third .chart-column:nth-of-type(3n + 1) small, .chart-bars-show-third .chart-column:nth-of-type(3n + 1) strong{
  opacity: 1;
}

.chart-bars-dense .chart-column strong{
  color: #eff6ff;
  font-size: 0.58rem;
  font-weight: 400;
  text-shadow: none;
}

.chart-column:hover strong, .chart-column:focus-within strong{
  color: var(--admin-text);
}

.chart-column:hover span, .chart-column:focus-within span{
  filter: brightness(1.08);
  transform: scaleY(1.025);
}

.chart-column:hover small, .chart-column:focus-within small{
  color: var(--admin-text);
}

.graph-panel{
  display: block;
  overflow: hidden;
  overflow-anchor: none;
  cursor: default;
  transition: border-color 0.18s ease;
}

.dashboard-content [aria-label="Dashboard graph overview"], .dashboard-content [aria-label="Dashboard secondary graph overview"]{
  --bs-gutter-y: 0.75rem;
}

.dashboard-content .graph-panel{
  padding: 0.95rem 1.05rem;
}

.dashboard-content .graph-panel .panel-header{
  min-height: 38px;
  margin-bottom: 0.65rem;
}

.dashboard-content .graph-panel .panel-header p{
  font-size: 0.84rem;
}

.dashboard-content .graph-panel .section-title{
  gap: 0.45rem;
}

.dashboard-content .graph-panel .section-title i{
  width: 30px;
  height: 30px;
  font-size: 0.86rem;
}

.dashboard-content .graph-panel .section-title span{
  font-size: 0.94rem;
}

.dashboard-content .graph-panel .record-chart{
  --chart-label-lane: 2.72rem;
  --chart-top-lane: 1.8rem;
  --chart-scroll-drop: 16px;
}

.dashboard-content .graph-panel .record-axis, .dashboard-content .graph-panel .chart-bars{
  height: clamp(190px, 27vh, 270px);
}

.dashboard-content .graph-panel .record-chart:has(> .chart-bars-scroll){
  margin-bottom: calc(-1 * var(--chart-scroll-drop));
}

.dashboard-content .graph-panel .record-chart:has(> .chart-bars-scroll) > .record-axis,
.dashboard-content .graph-panel .record-chart > .chart-bars-scroll{
  height: calc(clamp(190px, 27vh, 270px) + var(--chart-scroll-drop));
}

.dashboard-content .graph-panel .chart-column small{
  top: calc(100% - var(--chart-label-lane) + 0.24rem);
  font-size: 0.56rem;
  line-height: 1.24;
}

.dashboard-content .graph-panel .chart-column strong{
  font-size: 0.58rem;
}

.review-chart-layout .charts-performance-panel{
  --review-chart-height: 410px;
}

.review-chart-layout .charts-performance-panel .record-chart{
  flex: 0 0 auto;
  height: var(--review-chart-height);
  min-height: var(--review-chart-height);
  max-height: var(--review-chart-height);
}

.review-chart-layout .charts-performance-panel .record-axis, .review-chart-layout .charts-performance-panel .chart-bars{
  height: var(--review-chart-height);
  min-height: var(--review-chart-height);
  max-height: var(--review-chart-height);
}

.review-chart-layout .reserved-record-chart,
.review-chart-layout .reserved-record-chart .record-axis,
.review-chart-layout .reserved-record-chart .chart-bars{
  height: 410px;
  min-height: 410px;
  max-height: 410px;
}

.review-chart-layout .charts-performance-panel .chart-column small{
  top: calc(100% - var(--chart-label-lane) + 0.28rem);
  font-size: 0.72rem;
  line-height: 1.28;
}

.graph-panel:hover, .graph-panel:focus-within{
  border-color: #c6d5e8;
  box-shadow: var(--admin-shadow) !important;
  transform: none;
}

.graph-panel:has(.record-chart[data-graph-href] .chart-column:hover), .graph-panel:has(.record-chart[data-graph-href] .chart-column:focus-visible){
  border-color: #c6d5e8;
  box-shadow: var(--admin-shadow) !important;
  transform: none;
}

.graph-panel-green:has(.record-chart[data-graph-href] .chart-column:hover), .graph-panel-orange:has(.record-chart[data-graph-href] .chart-column:hover), .graph-panel-red:has(.record-chart[data-graph-href] .chart-column:hover), .graph-panel-blue:has(.record-chart[data-graph-href] .chart-column:hover), .graph-panel-purple:has(.record-chart[data-graph-href] .chart-column:hover), .graph-panel-green:has(.record-chart[data-graph-href] .chart-column:focus-visible), .graph-panel-orange:has(.record-chart[data-graph-href] .chart-column:focus-visible), .graph-panel-red:has(.record-chart[data-graph-href] .chart-column:focus-visible), .graph-panel-blue:has(.record-chart[data-graph-href] .chart-column:focus-visible), .graph-panel-purple:has(.record-chart[data-graph-href] .chart-column:focus-visible){
  border-color: #c6d5e8;
  box-shadow: var(--admin-shadow) !important;
  transform: none;
}

.graph-panel-green, .graph-panel-orange, .graph-panel-red, .graph-panel-blue, .graph-panel-purple{
  border-color: var(--admin-border);
}

.graph-panel-green .chart-column span{
  background: linear-gradient(180deg, #34d399, #0f766e);
}

.graph-panel-green .chart-column:hover span, .graph-panel-green .chart-column:focus-within span{
  filter: brightness(1.18) saturate(1.12);
}

.graph-panel-orange .chart-column span{
  background: linear-gradient(180deg, #fbbf24, #d97706);
}

.graph-panel-orange .chart-column:hover span, .graph-panel-orange .chart-column:focus-within span{
  filter: brightness(1.16) saturate(1.14);
}

.graph-panel-purple .chart-column span{
  background: linear-gradient(180deg, #c4b5fd, #7c3aed);
}

.graph-panel-purple .chart-column:hover span, .graph-panel-purple .chart-column:focus-within span{
  filter: brightness(1.16) saturate(1.12);
}

.graph-panel-red .chart-column span{
  background: linear-gradient(180deg, #fca5a5, #dc2626);
}

/* Helpdesk installation certificates and Reload Borders PTC declamped use a dedicated purple graph colour. */
.chart-bars[data-operator-graph="helpdesk-installation-certificates"] .chart-column span,
.chart-bars[data-operator-graph="ptc-declamped"] .chart-column span{
  background: linear-gradient(180deg, #c4b5fd, #7c3aed);
}

.graph-panel-red .chart-column:hover span, .graph-panel-red .chart-column:focus-within span{
  filter: brightness(1.16) saturate(1.12);
}

.graph-panel-red .chart-column:hover strong, .graph-panel-red .chart-column:focus-within strong, .graph-panel-red .chart-column:hover small, .graph-panel-red .chart-column:focus-within small{
  color: inherit;
}

.graph-panel-red .chart-column:hover span, .graph-panel-red .chart-column:focus-within span{
  filter: none;
  transform: none;
}

.graph-panel-blue .chart-column span{
  background: linear-gradient(180deg, #93c5fd, #2563eb);
}

.graph-panel-blue .chart-column:hover span, .graph-panel-blue .chart-column:focus-within span{
  filter: brightness(1.16) saturate(1.12);
}

.chart-bars[data-charts-grid] .chart-column:hover strong, .chart-bars[data-charts-grid] .chart-column:focus-within strong, .chart-bars[data-charts-grid] .chart-column:hover small, .chart-bars[data-charts-grid] .chart-column:focus-within small{
  color: inherit;
}

.chart-bars[data-charts-grid] .chart-column:hover span, .chart-bars[data-charts-grid] .chart-column:focus-within span{
  filter: none;
  transform: none;
}

.graph-panel-blue .chart-bars-paired .chart-bar-blue{
  background: linear-gradient(180deg, #93c5fd, #2563eb);
}

.graph-panel-blue .chart-bars-paired .chart-bar-blue.chart-bar-operator-above{
  background: linear-gradient(180deg, #93c5fd, #2563eb);
}

.graph-panel-blue .chart-bars-paired .chart-bar-blue.chart-bar-operator-below{
  background: linear-gradient(180deg, #fca5a5, #dc2626);
}

.graph-panel-blue .chart-bars-paired .chart-bar-green{
  background: linear-gradient(180deg, #34d399, #0f766e);
}





.graph-panel-orange .chart-bars-paired .chart-bar-green, .graph-panel-green .chart-bars-paired .chart-bar-green{
  background: linear-gradient(180deg, #34d399, #0f766e);
}

.graph-panel-green .chart-bars-paired .chart-bar-blue{
  background: linear-gradient(180deg, #93c5fd, #2563eb);
}

.graph-panel-orange .chart-bars-paired .chart-bar-blue{
  background: linear-gradient(180deg, #93c5fd, #2563eb);
}

.graph-panel-orange .chart-bars-paired .chart-bar-blue.chart-bar-operator-above{
  background: linear-gradient(180deg, #93c5fd, #2563eb);
}

.graph-panel-orange .chart-bars-paired .chart-bar-blue.chart-bar-operator-below{
  background: linear-gradient(180deg, #fca5a5, #dc2626);
}

.bar-42{
  --bar-size: 42%;
}

.bar-58{
  --bar-size: 58%;
}

.bar-51{
  --bar-size: 51%;
}

.bar-72{
  --bar-size: 72%;
}

.bar-66{
  --bar-size: 66%;
}

.bar-83{
  --bar-size: 83%;
}









.quick-review-panel{
  display: grid;
  gap: 0;
}

.quick-review-panel .section-title{
  font-weight: 950;
}

.quick-review-panel [data-quick-review-average]{
  padding: 0.45rem 0.85rem;
  border-color: var(--admin-border);
  background: var(--admin-surface);
  color: #ffffff;
  box-shadow: none;
  font-size: 1rem;
  font-weight: 950;
}

.quick-review-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.quick-review-section{
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
}

.quick-review-heading, .quick-review-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.quick-review-heading h3{
  margin: 0;
  color: var(--admin-text);
  font-size: 1.18rem;
  font-weight: 900;
}

.quick-review-heading span{
  min-width: 1.55rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.16);
  color: #bfdbfe;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}

.quick-review-list{
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding-right: 0.15rem;
}

.quick-review-item{
  flex-wrap: wrap;
  padding: 0.62rem 0.75rem;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  font-size: 0.9rem;
  font-weight: 650;
  min-height: 44px;
}

.quick-review-item strong{
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
  font-weight: 650;
}

.quick-review-item span{
  flex: 0 0 auto;
  max-width: 100%;
  margin-left: auto;
  overflow-wrap: anywhere;
  text-align: right;
  color: var(--admin-muted);
  font-size: 0.88rem;
  font-weight: 650;
}

.quick-review-item-positive strong{
  color: #34d399;
}

.quick-review-item-negative strong{
  color: #f87171;
}

.quick-review-empty{
  margin: 0;
  min-height: 92px;
  padding: 1rem;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  color: var(--admin-muted);
  font-weight: 700;
  display: grid;
  place-items: center;
  text-align: center;
}

.quick-review-panel-pulscam{
  align-content: start;
}

.quick-review-panel-pulscam .quick-review-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  align-items: start;
}

.quick-review-panel-pulscam .quick-review-section{
  display: grid;
  grid-template-columns: minmax(8.5rem, 0.28fr) minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 0.85rem;
  min-height: 54px;
  padding: 0.65rem 0.8rem;
  background: var(--admin-surface);
}

.quick-review-panel-pulscam .quick-review-section[hidden], .quick-review-panel-pulscam .quick-review-section-empty{
  display: none !important;
}

.quick-review-panel-pulscam .quick-review-heading{
  justify-content: flex-start;
}

.quick-review-panel-pulscam .quick-review-heading h3{
  font-size: 0.95rem;
}

.quick-review-panel-pulscam .quick-review-list{
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-right: 0;
}

.quick-review-panel-pulscam .quick-review-item{
  flex: 1 1 12rem;
  min-height: 38px;
  padding: 0.5rem 0.65rem;
}

.dashboard-combined-review-hidden{
  display: none !important;
}

.dashboard-graph-stack-section{
  --bs-gutter-y: 0 !important;
  row-gap: 1rem;
}

.dashboard-graph-stack-section > .dashboard-graph-stack-item{
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin-top: 0 !important;
}

.dashboard-graph-stack-section + .dashboard-graph-stack-section{
  margin-top: 1rem !important;
}

.dashboard-graph-review-row{
  display: grid;
  grid-template-columns: minmax(0, 2.25fr) minmax(300px, 0.9fr);
  gap: 1rem;
  align-items: stretch;
}

.dashboard-graph-review-row > .graph-panel{
  min-width: 0;
}

.dashboard-graph-quick-review{
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 290px;
  max-height: 365px;
  padding: 0.95rem 1rem;
  overflow: hidden;
}

.dashboard-graph-quick-review-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.dashboard-graph-quick-review-header h3{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--admin-text);
  font-size: 0.94rem;
  font-weight: 950;
}

.dashboard-graph-quick-review-header h3 i{
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(96, 165, 250, 0.16);
  color: #93c5fd;
}

.dashboard-graph-quick-review-header p{
  margin: 0.3rem 0 0;
  color: var(--admin-muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.dashboard-graph-quick-review-average{
  flex: 0 0 auto;
  padding: 0.35rem 0.58rem;
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  background: var(--admin-surface-soft);
  color: var(--admin-text);
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.dashboard-graph-quick-review-list{
  display: grid;
  align-content: start;
  gap: 0.42rem;
  min-height: 0;
  margin: 0;
  padding: 0 0.15rem 0 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.dashboard-graph-quick-review-item{
  display: block;
  padding: 0.58rem 0.65rem;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface-soft);
  color: var(--admin-text);
  font-size: 0.82rem;
  line-height: 1.35;
}

.dashboard-graph-quick-review-operator{
  font-weight: 750;
}

.dashboard-graph-quick-review-item strong{
  font-weight: 900;
}

.dashboard-graph-quick-review-item.is-above strong{
  color: #34d399;
}

.dashboard-graph-quick-review-item.is-average strong{
  color: #fbbf24;
}

.dashboard-graph-quick-review-item.is-below strong{
  color: #f87171;
}

.dashboard-graph-quick-review-item.is-no-data,
.dashboard-graph-quick-review-item.is-no-data strong{
  color: var(--admin-muted);
}

.dashboard-graph-quick-review-value{
  color: var(--admin-muted);
  font-weight: 750;
  white-space: nowrap;
}

.dashboard-graph-quick-review-empty{
  padding: 1rem;
  border: 1px dashed var(--admin-border);
  border-radius: 8px;
  color: var(--admin-muted);
  font-size: 0.82rem;
  font-weight: 750;
  text-align: center;
}

@media (max-width: 1199.98px) {
  .dashboard-graph-review-row{
    grid-template-columns: 1fr;
  }

  .dashboard-graph-quick-review{
    max-height: none;
  }
}

@media (max-width: 991.98px) {
  .quick-review-grid{
    grid-template-columns: 1fr;
  }

  .profile-details-grid{
    grid-template-columns: 1fr;
  }

  .profile-info-grid{
    grid-template-columns: 1fr;
  }

  .settings-columns, .settings-field-grid{
    grid-template-columns: 1fr;
  }

  .settings-card-wide{
    grid-template-columns: 1fr;
  }

  .settings-actions{
    justify-content: flex-start;
  }
}

.table{
  --bs-table-bg: transparent;
}

.table thead th{
  color: var(--admin-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.table tbody td{
  min-width: 120px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.table tbody tr{
  transition: background 0.16s ease;
}

html.table-hover-enabled .table tbody tr:hover{
  background: #f8fbff;
}

html.table-hover-enabled .excel-sheet tbody tr:hover td{
  background: #f8fbff;
}

.badge{
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
}





.users-table{
  table-layout: fixed;
}

.users-col-name{
  width: 18%;
}

.users-col-email{
  width: 25%;
}

.users-col-role{
  width: 13%;
}

.users-col-department{
  width: 20%;
}

.users-col-password{
  width: 12%;
}

.users-col-action{
  width: 12%;
}

.users-table tbody td{
  vertical-align: middle;
}

.users-table th, .users-table td{
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.users-table th:first-child, .users-table td:first-child{
  padding-left: 0.25rem;
}

.users-table-action{
  padding-left: 1.5rem;
  text-align: right;
}

.user-action-buttons{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: nowrap;
}

.user-action-buttons .btn{
  flex: 0 0 auto;
  white-space: nowrap;
}





.profile-summary-panel{
  padding: var(--panel-space);
}

.profile-summary{
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
}

.profile-summary-avatar{
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 900;
}

.profile-summary-copy{
  min-width: 0;
}

.profile-summary-copy h2, .profile-summary-copy p{
  overflow-wrap: anywhere;
}

.profile-details-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--section-space);
}

.profile-detail-card{
  display: grid;
  gap: 0.35rem;
  padding: 1.15rem;
}

.profile-detail-label{
  color: var(--admin-muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-detail-card strong{
  color: var(--admin-text);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.profile-info-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section-space);
}

.profile-info-card{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1rem;
  padding: 1.25rem;
}

.profile-info-icon{
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(96, 165, 250, 0.16);
  color: #93c5fd;
  font-size: 1.15rem;
}

.profile-info-card h3{
  margin: 0 0 0.35rem;
  color: var(--admin-text);
  font-size: 1rem;
  font-weight: 850;
}

.profile-info-card p{
  margin: 0;
  color: var(--admin-muted);
  line-height: 1.55;
}

.profile-heading-actions{
  align-items: center;
  margin-left: auto;
}

.profile-security-action{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  border-radius: 8px;
  font-weight: 800;
}

.profile-security-action-top{
  min-height: 40px;
  margin-top: 0;
  padding: 0.54rem 0.88rem;
  border-radius: 9px;
  font-size: 0.9rem;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.2);
}

.profile-security-action-top i{
  font-size: 0.96rem;
}

.profile-security-action[hidden], .operator-password-modal[hidden]{
  display: none !important;
}

.operator-password-modal .modal-dialog{
  max-width: 560px;
}

.operator-password-modal .modal-content{
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 12px;
  background: var(--admin-surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.operator-password-modal-header{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  border-bottom: 1px solid var(--admin-border);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(20, 184, 166, 0.12));
}

.operator-password-modal-header p{
  color: var(--admin-muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.operator-password-modal-icon{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
  font-size: 1.2rem;
}

.operator-password-fields{
  display: grid;
  gap: 0.9rem;
}

.operator-password-fields .settings-field{
  gap: 0.4rem;
}

.operator-password-field{
  width: 100%;
}

.operator-password-field .form-control{
  min-height: 44px;
}

.operator-password-status{
  min-height: 1.25rem;
  margin: 0.85rem 0 0;
}











.settings-list{
  display: grid;
  gap: 0.85rem;
}

.settings-row{
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface-soft);
}



.settings-row small{
  color: var(--admin-muted);
  font-size: 0.84rem;
}







.settings-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  cursor: pointer;
}

.settings-row span{
  display: grid;
  gap: 0.2rem;
}

.settings-layout{
  display: grid;
  gap: 0.75rem;
}

.settings-columns{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.75rem;
}

.settings-column{
  display: grid;
  align-content: start;
  gap: 0.75rem;
}



.settings-card{
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
}

.settings-card[hidden]{
  display: none !important;
}

.settings-card .panel-header{
  margin-bottom: 0;
  gap: 0.75rem;
}

.settings-card .panel-header p{
  font-size: 0.76rem;
  line-height: 1.35;
}

.settings-card .section-title{
  margin-bottom: 0.35rem !important;
  font-size: 0.98rem;
}

.settings-card .section-title i{
  width: 28px;
  height: 28px;
  font-size: 0.82rem;
}

.settings-card-wide{
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.handover-alert-settings{grid-template-columns:1fr;scroll-margin-top:90px}
.handover-alert-setting-list{display:grid;gap:.6rem}
.handover-alert-setting-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px;padding:.75rem .85rem;border:2px solid var(--admin-border);border-radius:9px;background:var(--admin-surface-soft)}
.handover-alert-setting-row>span{display:grid;gap:.2rem;min-width:0}
.handover-alert-setting-row strong{color:var(--admin-text);font-size:.9rem}
.handover-alert-setting-row small{color:var(--admin-muted);font-size:.78rem;line-height:1.35}
.handover-alert-setting-row.needs-enable{border-color:#ef4444;box-shadow:0 0 0 1px rgba(239,68,68,.3);background:rgba(220,38,38,.08)}
.handover-alert-setting-row .btn{min-height:36px;white-space:nowrap;border:1px solid var(--admin-border);color:var(--admin-text)}
.handover-alert-setting-row.needs-enable .btn{border-color:#dc2626;background:#dc2626;color:#fff}
.handover-alert-setting-row.needs-enable .btn:hover{background:#b91c1c;border-color:#b91c1c}
.handover-alert-setting-row .btn:focus-visible{outline:2px solid #fca5a5;outline-offset:2px}
.handover-alert-setting-status{margin:0;color:var(--admin-text);font-size:.82rem}
.handover-alert-setting-status:empty{display:none}
.global-silence-alarm{position:fixed;right:20px;bottom:20px;z-index:1350;min-height:46px;padding:.68rem 1rem;border:1px solid #fb7185;border-radius:10px;background:#be123c;color:#fff;box-shadow:0 12px 30px rgba(15,23,42,.34);font:inherit;font-size:.9rem;font-weight:850;line-height:1;cursor:pointer}
.global-silence-alarm:hover{background:#9f1239;border-color:#fda4af}
.global-silence-alarm:focus-visible{outline:3px solid rgba(251,113,133,.38);outline-offset:3px}
.global-silence-alarm[hidden]{display:none!important}
.global-silence-alarm.in-navbar{position:static;right:auto;bottom:auto;z-index:auto;min-height:40px;padding:.55rem .8rem;border-radius:8px;box-shadow:none;white-space:nowrap}
@media(max-width:640px){.global-silence-alarm{right:12px;bottom:12px;min-height:44px}}
@media(max-width:640px){.handover-alert-setting-row{align-items:flex-start;flex-direction:column}.handover-alert-setting-row .btn{width:100%}}

.settings-field-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.settings-field{
  display: grid;
  gap: 0.35rem;
}

.settings-field span{
  color: var(--admin-muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.settings-field .form-select{
  min-height: 38px;
  padding-top: 0.42rem;
  padding-bottom: 0.42rem;
  font-size: 0.86rem;
}

.settings-list{
  gap: 0.55rem;
}

.settings-row{
  min-height: 58px;
  padding: 0.68rem 0.75rem;
}

.settings-row span{
  gap: 0.16rem;
}

.settings-row strong{
  font-size: 0.86rem;
  line-height: 1.2;
}

.settings-row small{
  font-size: 0.72rem;
  line-height: 1.35;
}

.settings-row .form-check-input{
  flex: 0 0 auto;
  margin-top: 0;
}

.settings-security-card{
  min-height: 108px;
  gap: 0.45rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.settings-security-card .section-title{
  margin-bottom: 0 !important;
}

.settings-security-row{
  min-height: 50px;
  padding: 0.5rem 0.75rem;
  cursor: default;
}

.settings-security-row .btn{
  min-height: 36px;
  white-space: nowrap;
}

.settings-security-row .btn span{
  display: inline;
}

@media (max-width: 640px){
  .settings-security-row{
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-security-row .btn{
    width: 100%;
  }
}

.settings-actions{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.settings-status{
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0;
  color: #93c5fd;
  font-size: 0.9rem;
  font-weight: 800;
}

.settings-status:empty{
  display: none;
}

html.compact-tables .table tbody td{
  padding-top: 0.62rem;
  padding-bottom: 0.62rem;
}

html.compact-data-sheets .excel-sheet th, html.compact-data-sheets .excel-sheet td{
  height: 28px;
  padding-top: 0.22rem;
  padding-bottom: 0.22rem;
  font-size: 0.82rem;
}

html.static-navbar .admin-navbar{
  position: static;
}

html.no-chart-animation .chart-column, html.no-chart-animation .record-chart, html.no-chart-animation .metric-card, html.no-chart-animation .panel{
  transition: none !important;
  animation: none !important;
}



























.upload-panel{
  padding: 1rem;
}

.upload-panel [data-weekly-period-control],
.upload-panel [data-upload-week]{
  display: none !important;
}



.dashboard-date-actions{
  align-items: end;
}





.chart-filter-group{
  box-sizing: border-box;
  display: grid;
  gap: 0.45rem;
  width: 170px;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.18);
}



.chart-filter-group:last-of-type{
  width: 188px;
}

html.is-operator-user .chart-department-field, html.is-operator-user .chart-operator-field, html.is-operator-user .operator-filter-hidden{
  display: none !important;
}

.dashboard-date-actions .upload-date-field{
  min-width: 142px;
}

.page-heading .dashboard-date-actions .upload-date-field{
  color: var(--admin-text);
  gap: 0.32rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.page-heading .dashboard-date-actions .upload-date-field > span{
  color: var(--admin-text);
  line-height: 1.1;
  white-space: nowrap;
}

.dashboard-page-layout .dashboard-date-actions .form-select{
  min-height: 36px;
}

.dashboard-content > .container-fluid > .page-heading .form-select{
  min-height: 36px;
}

.dashboard-content > .container-fluid:not(.review-chart-layout) > .page-heading{
  margin-bottom: 1rem !important;
}

.dashboard-content > .container-fluid:not(.review-chart-layout) > .page-heading + section{
  margin-top: 0 !important;
}

.dashboard-page-layout .dashboard-graph-stack-section > .dashboard-graph-stack-item:first-child{
  margin-top: 0;
}



















.report-download-footer{
  margin-top: 1rem;
}

.dashboard-content > .review-chart-layout{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem !important;
}

.review-chart-layout .review-graph-section{
  flex: 1 1 auto;
  min-height: 0;
}

.review-chart-layout .review-graph-section > .col-12{
  display: flex;
  min-height: 0;
}

.review-chart-layout .charts-performance-panel{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.review-chart-layout .charts-performance-panel .record-chart{
  flex: 1 1 auto;
  min-height: 0;
}

.review-chart-layout .review-score-section{
  margin-top: 0.375rem !important;
  margin-bottom: 0.8rem !important;
}

.review-chart-layout .report-download-footer{
  margin-top: 0.1rem;
  padding-top: 0;
}

html.is-operator-user .review-chart-layout .report-download-footer{
  display: none !important;
}

@media (min-width: 1200px) and (min-height: 720px) {
  .dashboard-content > .container-fluid:not(.review-chart-layout){
    padding-top: 1.35rem !important;
  }

  .dashboard-content > .container-fluid:not(.review-chart-layout) > .page-heading{
    min-height: 54px;
    margin-bottom: 0.95rem !important;
  }

  .dashboard-content > .review-chart-layout{
    height: 100%;
    min-height: 0;
    padding-top: 1.35rem !important;
    padding-bottom: 0.35rem !important;
    overflow: hidden;
  }

  .review-chart-layout .page-heading{
    flex: 0 0 auto;
    min-height: 54px;
    margin-bottom: 0.95rem !important;
  }

  .review-chart-layout .review-graph-section{
    flex: 1 1 auto;
    min-height: 0;
  }

  .review-chart-layout .review-graph-section > .col-12, .review-chart-layout .charts-performance-panel{
    min-height: 0;
  }

  .review-chart-layout .charts-performance-panel{
    padding: 1rem;
  }

  .review-chart-layout .charts-performance-panel .panel-header{
    flex: 0 0 auto;
    margin-bottom: 0.75rem;
  }

  .review-chart-layout .charts-performance-panel .record-chart{
    --chart-label-lane: 3.85rem;
    flex: 0 0 auto;
    height: var(--review-chart-height);
    min-height: var(--review-chart-height);
    max-height: var(--review-chart-height);
  }

  .review-chart-layout .charts-performance-panel .record-axis, .review-chart-layout .charts-performance-panel .chart-bars{
    height: var(--review-chart-height);
    min-height: var(--review-chart-height);
    max-height: var(--review-chart-height);
  }

  .review-chart-layout .review-score-section{
    flex: 0 0 auto;
    margin-top: 0.375rem !important;
  }

  .review-chart-layout .report-download-footer{
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
}

.review-report-status{
  min-height: 1.25rem;
  font-size: 0.9rem;
  font-weight: 800;
}







.upload-date-field{
  display: grid;
  gap: 0.25rem;
  min-width: 142px;
  margin: 0;
  color: var(--admin-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.weekly-native-select{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.weekly-select-shell{
  position: relative;
  width: 100%;
  min-width: 0;
}

.weekly-select-button{
  position: relative;
  width: 100%;
  min-height: 36px;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: var(--admin-surface);
  color: var(--admin-text);
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-select-button::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0.85rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.weekly-select-button:focus-visible{
  border-color: #60a5fa;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}

.weekly-select-menu{
  position: fixed;
  z-index: 1200;
  max-height: 420px;
  overflow-y: auto;
  padding: 0.3rem;
  border: 1px solid var(--admin-border);
  border-radius: 7px;
  background: var(--admin-surface);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.45);
}

.weekly-select-menu[hidden]{
  display: none !important;
}

.weekly-select-option{
  display: block;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--admin-text);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
}

.weekly-select-option:hover,
.weekly-select-option:focus-visible{
  background: rgba(96, 165, 250, 0.18);
  outline: 0;
}

.weekly-select-option.is-current{
  box-shadow: inset 3px 0 0 #60a5fa;
}

.weekly-select-option.is-selected{
  background: #93c5fd;
  color: #0f172a;
}

.upload-month-select, .upload-year-select, .chart-filter-select{
  min-height: 38px;
  border-radius: 8px;
  font-weight: 700;
}





.upload-submit, .upload-clear{
  display: none !important;
  flex: 0 0 auto;
  border: 0;
  padding: 0.5rem 1rem;
  min-height: 38px;
}

.upload-submit{
  background: #0d6efd;
  color: #ffffff;
}

.upload-clear{
  border: 1px solid rgba(248, 113, 113, 0.42);
  background: rgba(248, 113, 113, 0.12);
  color: var(--admin-danger);
}

.upload-submit, .upload-clear{
  border-radius: 8px;
  font-weight: 800;
}

.data-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.data-tabs .nav-item{
  display: flex;
}

.data-tabs .nav-link{
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1rem;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  color: var(--admin-text);
  box-shadow: none;
  font-weight: 800;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.data-tabs .nav-link:hover, .data-tabs .nav-link:focus{
  border-color: rgba(96, 165, 250, 0.72);
  background: rgba(37, 99, 235, 0.12);
  color: var(--admin-text);
  box-shadow: none;
  transform: translateY(-1px);
}

.data-tabs .nav-link.active{
  border-color: var(--admin-primary);
  background: var(--admin-primary);
  color: #ffffff;
  box-shadow: none;
}







.ticket-dashboard-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section-space);
  align-items: start;
  justify-content: stretch;
  width: 100%;
}

.ticket-dashboard-grid-full{
  grid-template-columns: minmax(0, 1fr);
}

.ticket-dashboard-grid-three{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reload-data-workspace{
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.reload-data-subtabs{
  display: flex;
  gap: var(--space-2);
  padding: 0.35rem;
  overflow-x: auto;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  background: var(--admin-surface-soft);
  scrollbar-width: thin;
}

.reload-data-subtabs button{
  flex: 1 0 auto;
  min-height: 42px;
  padding: 0.55rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--admin-text-muted);
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
}

.reload-data-subtabs button:hover,
.reload-data-subtabs button:focus-visible{
  border-color: rgba(96, 165, 250, 0.6);
  color: var(--admin-text);
}

.reload-data-subtabs button.active{
  border-color: var(--admin-primary);
  background: var(--admin-primary);
  color: #fff;
}

.reload-data-content,
.reload-data-content > .tab-pane,
.reload-data-sheet-card{
  min-width: 0;
}

.reload-data-heading h3{
  margin: 0;
  font: inherit;
}

.reload-data-heading span{
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.9;
  text-align: right;
}

@media (max-width: 767.98px){
  .reload-data-subtabs{
    margin-inline: -0.2rem;
  }

  .reload-data-subtabs button{
    flex-basis: auto;
    min-height: 40px;
  }

  .reload-data-heading{
    align-items: flex-start;
    flex-direction: column;
  }

  .reload-data-heading span{
    text-align: left;
  }
}

.ticket-dashboard-grid-three-across{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ticket-dashboard-grid-two-by-two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calls-dispatches-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ticket-dashboard-table{
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
}

.ticket-dashboard-heading{
  margin: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 0;
  border-bottom: 1px solid var(--admin-border);
  border-radius: 0;
  background: rgb(96, 165, 250);
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.2;
}

.ticket-dashboard-heading-title{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-dashboard-heading-actions{
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
}

.ticket-dashboard-heading-button{
  min-height: 32px;
  padding: 0.35rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
}

.ticket-dashboard-heading-clear{
  background: #dc2626;
  border-color: #b91c1c;
}

.ticket-dashboard-heading-save{
  background: #16a34a;
  border-color: #15803d;
}

.ticket-dashboard-heading-download{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding-left: 0;
  padding-right: 0;
  background: #2563eb;
  border-color: #1d4ed8;
}

.ticket-dashboard-heading-download .bi{
  font-size: 1rem;
  line-height: 1;
}


.ticket-dashboard-heading-button:hover, .ticket-dashboard-heading-button:focus{
  color: #ffffff;
  filter: brightness(0.92);
}

.ticket-dashboard-sheet{
  width: 100%;
  max-height: 420px;
  border: 0;
  border-radius: 0;
}

.ticket-dashboard-sheet .excel-sheet th, .ticket-dashboard-sheet .excel-sheet td{
  min-width: 142px;
  height: 34px;
}

.ticket-dashboard-grid-three .ticket-dashboard-sheet .excel-sheet th, .ticket-dashboard-grid-three .ticket-dashboard-sheet .excel-sheet td{
  min-width: 104px;
}

.ticket-dashboard-grid-three-across .ticket-dashboard-sheet .excel-sheet th,
.ticket-dashboard-grid-three-across .ticket-dashboard-sheet .excel-sheet td{
  min-width: 104px;
}

@media (max-width: 1400px) {
  .ticket-dashboard-grid-three{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ticket-dashboard-grid, .ticket-dashboard-grid-three, .ticket-dashboard-grid-three-across, .calls-dispatches-grid{
    grid-template-columns: 1fr;
  }
}

.upload-submit:hover, .upload-submit:focus{
  background: #0d6efd;
  color: #ffffff;
}

.upload-clear:hover, .upload-clear:focus{
  border-color: var(--admin-danger);
  background: var(--admin-danger);
  color: #ffffff;
}



.sheet-wrap{
  max-height: 66vh;
  overflow: auto;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
}

.sheet-wrap.ticket-dashboard-sheet{
  max-height: 420px;
  border: 0;
  border-radius: 0;
}

.stored-data-message{
  margin: 0.85rem 0 0;
  color: var(--admin-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.excel-sheet{
  width: max-content;
  min-width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 0.88rem;
}

.excel-sheet th, .excel-sheet td{
  min-width: 128px;
  height: 34px;
  padding: 0.35rem 0.5rem;
  border-right: 1px solid var(--admin-border);
  border-bottom: 1px solid var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text);
  vertical-align: top;
}

.excel-sheet th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--admin-surface-soft);
  color: var(--admin-muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
  user-select: none;
}

.excel-sheet td:focus{
  position: relative;
  z-index: 4;
  outline: 2px solid var(--admin-primary);
  outline-offset: -2px;
}

.assign-panel{
  display: grid;
  gap: var(--section-space);
}

.assign-tabs{
  display: grid;
  grid-template-columns: repeat(9, max-content);
  justify-content: start;
  gap: 0.5rem;
  width: 100%;
}

.assign-tabs .nav-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.62rem 0.45rem;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  color: var(--admin-text);
  box-shadow: var(--admin-shadow-sm);
  font-size: 0.96rem;
  font-weight: 800;
  white-space: nowrap;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.assign-tabs .nav-link:hover, .assign-tabs .nav-link:focus{
  border-color: rgba(96, 165, 250, 0.72);
  background: rgba(37, 99, 235, 0.12);
  color: var(--admin-text);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.12), var(--admin-shadow-sm);
  transform: translateY(-1px);
}

.assign-tabs .nav-link.active{
  border-color: var(--admin-primary);
  background: var(--admin-primary);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
}

.assign-tabs .nav-link [data-assignment-count]{
  min-width: 1.35rem;
  padding: 0.1rem 0.32rem;
  border-radius: 999px;
  background: var(--admin-surface-soft);
  color: var(--admin-muted);
  font-size: 0.76rem;
}

.assign-tabs .nav-link.active [data-assignment-count]{
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.assign-tab-content{
  min-height: 320px;
}

.assignment-card{
  display: grid;
  gap: var(--section-space);
  padding: var(--space-4);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface-soft);
}

.assignment-split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--section-space);
  align-items: start;
}

[data-tad-assign-page] .assign-tab-content{
  min-height: 0;
}

.assignment-split-single{
  grid-template-columns: minmax(0, 1fr);
}

[data-tad-assign-page] .assignment-side{
  width: 100%;
}

.assignment-side{
  position: relative;
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--admin-shadow-sm);
}

.assignment-side:nth-child(1), .assignment-side:nth-child(2){
  border-color: rgba(96, 165, 250, 0.36);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.1), rgba(15, 23, 42, 0.28));
}

.assignment-side-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.55rem;
}

.assignment-side-heading h4{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--admin-text);
  font-size: 1.08rem;
  font-weight: 900;
}

.assignment-side-heading span{
  min-width: 1.55rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--admin-muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}

.assignment-side:nth-child(1) .assignment-side-heading span{
  background: rgba(96, 165, 250, 0.16);
  color: #bfdbfe;
}

.assignment-side:nth-child(2) .assignment-side-heading span{
  background: rgba(96, 165, 250, 0.16);
  color: #bfdbfe;
}

.assignment-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.assignment-heading h3{
  margin: 0;
  color: var(--admin-text);
  font-size: 1.1rem;
  font-weight: 900;
}

.assignment-heading > span{
  color: var(--admin-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.assignment-form{
  display: flex;
  gap: 0.65rem;
}

.assignment-name-form{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.assignment-form .form-control{
  min-height: 42px;
}

.assignment-form .btn{
  flex: 0 0 auto;
  min-width: 108px;
}

.assignment-list{
  display: grid;
  gap: 0.45rem;
  min-height: 52px;
}

.assignment-chip{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.62rem 0.65rem 0.62rem 0.85rem;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  color: var(--admin-text);
  box-shadow: var(--admin-shadow-sm);
  font-weight: 800;
}

.assignment-chip > span{
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.assignment-person{
  display: grid;
  gap: 0.18rem;
}

.assignment-person strong{
  font-size: 0.9rem;
  font-weight: 900;
}

.assignment-person small{
  color: var(--admin-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.assignment-actions{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto !important;
  overflow-wrap: normal !important;
}

.assignment-move, .assignment-remove{
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding: 0.32rem 0.72rem;
  border-radius: 7px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.assignment-move{
  border: 1px solid var(--admin-primary);
  background: var(--admin-primary);
}

.assignment-move:hover, .assignment-move:focus{
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18);
}

.assignment-remove{
  border: 1px solid var(--admin-danger);
  background: var(--admin-danger);
}

.assignment-remove:hover, .assignment-remove:focus{
  border-color: #dc2626;
  background: #dc2626;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.18);
}

.assignment-move-modal .modal-dialog{
  max-width: 680px;
}

.assignment-move-summary{
  margin: 0 0 0.85rem;
  color: var(--admin-muted);
}

.assignment-move-summary strong{
  color: var(--admin-text);
}

.assignment-move-departments{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.assignment-move-department{
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--admin-border);
  border-radius: 7px;
  background: var(--admin-surface);
  color: var(--admin-text);
  font-weight: 800;
  text-align: left;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.assignment-move-department:hover, .assignment-move-department:focus, .assignment-move-department.is-selected{
  border-color: var(--admin-primary);
  background: rgba(37, 99, 235, 0.16);
  color: #bfdbfe;
}

.assignment-move-department.is-selected{
  box-shadow: inset 3px 0 0 var(--admin-primary);
}

.assignment-move-department:disabled{
  border-color: var(--admin-border);
  background: var(--admin-surface-soft);
  color: var(--admin-muted);
  cursor: not-allowed;
  opacity: 0.72;
}

.assignment-move-department i{
  color: var(--admin-primary);
  font-size: 1rem;
}

.assignment-move-department small{
  color: var(--admin-muted);
  font-size: 0.72rem;
}

.assignment-empty{
  margin: 0;
  color: var(--admin-muted);
  font-weight: 700;
}

@media (min-width: 768px) and (max-width: 1399.98px) {
  .assign-tabs{
    gap: 0.3rem;
  }

  .assign-tabs .nav-link{
    gap: 0.2rem;
    min-height: 42px;
    padding: 0.55rem 0.2rem;
    font-size: 0.72rem;
  }

  .assign-tabs .nav-link [data-assignment-count]{
    min-width: 1.15rem;
    padding: 0.08rem 0.22rem;
    font-size: 0.64rem;
  }
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
  .assign-tabs{
    gap: 0.4rem;
  }

  .assign-tabs .nav-link{
    gap: 0.24rem;
    padding-inline: 0.28rem;
    font-size: 0.84rem;
  }

  .assign-tabs .nav-link [data-assignment-count]{
    min-width: 1.2rem;
    padding-inline: 0.24rem;
    font-size: 0.64rem;
  }
}

.department-shift-label{
  font-weight: 400 !important;
}

[data-dashboard-department], [data-chart-department], #defaultDepartment, [data-dashboard-department] option, [data-chart-department] option, #defaultDepartment option{
  font-weight: 400;
}

@media (max-width: 767.98px) {
  .assign-tabs{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .assign-tabs .nav-link{
    flex: 0 0 auto;
    padding-inline: 0.75rem;
  }

  .assignment-name-form{
    grid-template-columns: 1fr;
  }

  .assignment-chip{
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .assignment-person{
    flex-basis: 100% !important;
  }

  .assignment-actions{
    width: 100%;
    justify-content: flex-end;
  }

  .assignment-move, .assignment-remove{
    width: 78px;
  }

  .assignment-move-departments{
    grid-template-columns: 1fr;
  }
}

.assignment-save-message{
  margin: 0;
  color: var(--admin-muted);
  font-size: 0.84rem;
  font-weight: 700;
}

@media (max-width: 991.98px) {
  .assignment-split{
    grid-template-columns: 1fr;
  }
}

.auth-body{
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fbff 0%, #eaf2ff 44%, #eef8f6 100%);
}

.auth-page{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--page-inline-space);
}

.auth-card{
  width: min(100%, 460px);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--admin-shadow-lg);
}

.auth-card{
  padding: var(--panel-space);
}









.auth-brand{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  color: var(--admin-text);
}

.auth-brand:hover, .auth-brand:focus{
  color: var(--admin-text);
}

.auth-brand span:last-child{
  display: grid;
  line-height: 1.2;
}

.auth-brand small{
  color: var(--admin-muted);
}

.password-field{
  position: relative;
}

.generated-password-control{
  width: 100%;
}

.password-generate-button{
  position: absolute;
  top: 50%;
  right: 3.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 102px;
  height: 32px;
  padding: 0 0.6rem;
  border: 0;
  border-left: 1px solid var(--admin-border);
  border-radius: 0;
  background: transparent;
  color: #60a5fa;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
}

.password-generate-button:hover, .password-generate-button:focus-visible{
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
  outline: 0;
}

.password-field .form-control{
  padding-right: 3rem;
}

.generated-password-control .form-control{
  padding-right: 10.25rem;
}

.password-field .form-control.is-invalid, .was-validated .password-field .form-control:invalid, .password-field .form-control.is-valid, .was-validated .password-field .form-control:valid{
  padding-right: 5.25rem;
  background-position: right 0.8rem center;
}

.password-toggle{
  position: absolute;
  top: 50%;
  right: 0.65rem;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--admin-muted);
  transform: translateY(-50%);
}

.password-field .form-control.is-invalid + .password-toggle, .was-validated .password-field .form-control:invalid + .password-toggle, .password-field .form-control.is-valid + .password-toggle, .was-validated .password-field .form-control:valid + .password-toggle{
  right: 2.6rem;
}

.password-toggle:hover, .password-toggle:focus{
  background: rgba(96, 165, 250, 0.12);
  color: var(--admin-text);
}

.auth-remember{
  min-height: auto;
  color: var(--admin-muted);
}

.auth-remember .form-check-input{
  background-color: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.45);
}

.auth-remember .form-check-input:checked{
  background-color: var(--admin-primary);
  border-color: var(--admin-primary);
}





@media (min-width: 992px) {
  body.sidebar-mini .admin-sidebar{
    width: var(--sidebar-mini-width);
  }

  body.sidebar-mini .admin-main{
    margin-left: var(--sidebar-mini-width);
  }

  body.sidebar-mini .nav-text, body.sidebar-mini .sidebar-footer span{
    width: 0;
    opacity: 0;
    overflow: hidden;
  }

  body.sidebar-mini .brand-logo{
    max-width: 48px;
  }

  body.sidebar-mini .sidebar-header{
    margin-inline: 1rem;
    padding-inline: 0;
  }

  body.sidebar-mini .sidebar-footer{
    margin-inline: 1rem;
  }

  body.sidebar-mini .sidebar-nav .nav-link{
    justify-content: center;
    padding-inline: 0.65rem;
  }

  

  body.sidebar-mini .sidebar-nav .nav-link:hover, body.sidebar-mini .sidebar-nav .nav-link:focus{
    transform: none;
  }
}

@media (max-width: 991.98px) {
  .admin-sidebar{
    width: min(var(--sidebar-width), calc(100vw - 48px));
    transform: translateX(-100%);
  }

  .admin-main{
    margin-left: 0;
  }

  body.sidebar-open{
    overflow: hidden;
  }

  body.sidebar-open .admin-sidebar{
    transform: translateX(0);
  }

  body.sidebar-open .sidebar-backdrop{
    display: block;
  }
}

@media (max-width: 575.98px) {
  .page-heading, .panel-header{
    align-items: flex-start;
    flex-direction: column;
  }

  .heading-actions{
    width: 100%;
    justify-content: stretch;
  }

  .profile-heading-actions{
    margin-left: 0;
  }

  .profile-security-action-top{
    width: 100%;
  }

  

  .chart-filter-group{
    width: 100%;
  }

  

  .heading-actions .btn{
    flex: 1 1 0;
  }

  .chart-bars{
    gap: 0.6rem;
    padding-inline: 0.25rem;
  }

  .metric-value{
    font-size: 1.85rem;
  }

  .metric-card, .panel{
    padding: 1.1rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .sidebar-nav .nav-link, .sidebar-toggle, .profile-button, .btn, .metric-card, .panel, .table tbody tr{
    transition: none;
  }

  .sidebar-nav .nav-link:hover, .sidebar-nav .nav-link:focus, .btn:hover, .btn:focus, .metric-card:hover{
    transform: none;
  }
}

html[data-theme="dark"]{
  background: #0f172a;
  --admin-bg: #0f172a;
  --admin-surface: #182235;
  --admin-surface-soft: #111827;
  --admin-border: #2f3b52;
  --admin-text: #e5edf7;
  --admin-muted: #9aa8bd;
  --admin-primary: #60a5fa;
  --admin-primary-dark: #3b82f6;
  --admin-success: #2dd4bf;
  --admin-warning: #fbbf24;
  --admin-danger: #f87171;
  --admin-sidebar: #090f1d;
  --admin-sidebar-soft: #172033;
  --admin-shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.24);
  --admin-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
  --admin-shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.42);
  --admin-ring: 0 0 0 4px rgba(96, 165, 250, 0.18);
}

html[data-theme="dark"] body{
  background: linear-gradient(180deg, #111827 0%, var(--admin-bg) 48%, #0b1120 100%);
}

.brand-icon{
  font-size: 1.1rem;
}

.nav-icon{
  font-size: 0.95rem;
}

.admin-navbar.bg-white, .sidebar-toggle, .profile-button{
  background-color: var(--admin-surface) !important;
  color: var(--admin-text);
}

html[data-theme="dark"] .admin-navbar.bg-white{
  background-color: rgba(24, 34, 53, 0.92) !important;
}



.page-heading-copy{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.page-icon, .section-title i{
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #eaf2ff;
  color: var(--admin-primary-dark);
}

.page-icon{
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
}

.section-title{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.section-title i{
  width: 34px;
  height: 34px;
  font-size: 0.95rem;
}

html[data-theme="dark"] .page-icon, html[data-theme="dark"] .section-title i{
  background: #1e3a5f;
  color: #bfdbfe;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.btn-light{
  border-color: var(--admin-border);
  background: var(--admin-surface-soft);
  color: var(--admin-text);
}

.btn-outline-secondary{
  border-color: var(--admin-border);
  color: var(--admin-text);
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus{
  border-color: var(--admin-primary);
  background: #eaf2ff;
  color: var(--admin-primary-dark);
}

html[data-theme="dark"] .btn-outline-secondary:hover, html[data-theme="dark"] .btn-outline-secondary:focus{
  background: #1e3a5f;
  color: #bfdbfe;
}

html[data-theme="dark"] .chart-bars{
  background:
    linear-gradient(to bottom, transparent 0 calc(100% - var(--chart-label-lane)), #182235 calc(100% - var(--chart-label-lane))),
    linear-gradient(180deg, #111827 0%, #182235 100%);
}

html[data-theme="dark"] .chart-bars::before{
  background: linear-gradient(180deg, #111827 0%, #111827 100%);
}

html[data-theme="dark"] .chart-average-line{
  border-top-color: rgba(226, 232, 240, 0.58);
}

html[data-theme="dark"].table-hover-enabled .table tbody tr:hover{
  background: #111827;
}

html[data-theme="dark"].table-hover-enabled .excel-sheet tbody tr:hover td{
  background: #111827;
}



html[data-theme="dark"] .auth-body{
  background: linear-gradient(135deg, #0b1120 0%, #111827 48%, #10201f 100%);
}

.auth-card{
  background: var(--admin-surface);
}

.dropdown-menu, .modal-content{
  border-color: var(--admin-border);
  background-color: var(--admin-surface);
  color: var(--admin-text);
}

.dropdown-item{
  color: var(--admin-text);
}

.dropdown-item:hover, .dropdown-item:focus{
  background-color: var(--admin-surface-soft);
  color: var(--admin-text);
}

.form-control, .form-select{
  border-color: var(--admin-border);
  background-color: var(--admin-surface);
  color: var(--admin-text);
}

.form-control:focus, .form-select:focus{
  border-color: #93c5fd;
  background-color: var(--admin-surface);
  color: var(--admin-text);
  box-shadow: var(--admin-ring);
}

.form-control::placeholder{
  color: var(--admin-muted);
}

.text-muted{
  color: var(--admin-muted) !important;
}





@media (max-width: 767.98px) {
  .navbar-title{
    font-size: 1rem;
  }

  .navbar-subtitle{
    font-size: 0.68rem;
  }

  .navbar-actions{
    gap: 0.5rem;
  }

  

  

  .profile-button, .sidebar-toggle{
    width: 40px;
    height: 40px;
  }

  .profile-button{
    padding: 0.3rem;
  }

  .page-heading-copy{
    align-items: flex-start;
  }
}

@media (max-width: 575.98px) {
  .page-heading-copy{
    width: 100%;
  }

  .page-icon{
    width: 44px;
    height: 44px;
  }

  .panel-header .d-flex, .panel-header .form-control, .panel-header .form-select{
    width: 100%;
  }
}

html[data-theme="light"]{
  color-scheme: light;
}

html[data-theme="dark"]{
  color-scheme: dark;
}

.metric-card, .panel, .auth-card, .dropdown-menu, .modal-content, .form-control, .form-select{
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.table{
  --bs-table-color: var(--admin-text);
  --bs-table-border-color: var(--admin-border);
  color: var(--admin-text);
}









.alert{
  border-radius: 8px;
}









html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer{
  border-color: var(--admin-border);
}

.btn-close{
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface-soft);
  background-image: none;
  color: var(--admin-muted);
  opacity: 1;
  filter: none;
}

.btn-close::before,
.btn-close::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.btn-close::before{ transform: translate(-50%, -50%) rotate(45deg); }
.btn-close::after{ transform: translate(-50%, -50%) rotate(-45deg); }

.btn-close:hover,
.btn-close:focus{
  border-color: #5b83ad;
  background: rgba(37, 99, 235, .10);
  color: var(--admin-text);
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .15);
}

html[data-theme="dark"] .btn-close{
  filter: none;
}









@media (max-width: 991.98px) {
  .dashboard-content > .container-fluid{
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .admin-sidebar{
    box-shadow: 18px 0 48px rgba(0, 0, 0, 0.28);
  }
}

@media (max-width: 767.98px) {
  .panel-header{
    align-items: flex-start;
  }

  .panel-header > .d-flex{
    width: 100%;
  }

  

  .auth-page{
    padding: 1rem;
  }

  .auth-card{
    padding: 1.15rem;
  }
}

@media (max-width: 420px) {
  .heading-actions{
    width: 100%;
  }

  .heading-actions .btn{
    width: 100%;
  }

  .metric-card{
    min-height: 146px;
  }

  
}

@media (max-width: 575.98px) {
  

  .avatar-xl{
    width: 70px;
    height: 70px;
  }

  

  

  

  
}

html:not([data-theme="dark"]){
  background: #f5f7fb;
  --admin-sidebar: #ffffff;
  --admin-sidebar-soft: #eef4ff;
  --admin-sidebar-border: #dbe4ef;
  --admin-sidebar-text: #475569;
  --admin-sidebar-text-strong: #0f172a;
  --admin-sidebar-muted: #64748b;
  --admin-sidebar-icon-bg: #eaf2ff;
  --admin-sidebar-icon: #2563eb;
  --admin-sidebar-shadow: 18px 0 42px rgba(15, 23, 42, 0.08);
}

html:not([data-theme="dark"]) body{
  background: linear-gradient(180deg, #f8fafc 0%, #f5f7fb 48%, #edf2f7 100%);
}

html:not([data-theme="dark"]) .admin-main, html:not([data-theme="dark"]) .dashboard-content{
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.94) 0%, rgba(245, 247, 251, 0.98) 48%, #eef3f8 100%);
}

html:not([data-theme="dark"]) .admin-navbar.bg-white{
  background-color: rgba(255, 255, 255, 0.94) !important;
}

html:not([data-theme="dark"]) .brand-logo{
  content: url("../img/pulsit-logo-light-blue.png?v=20261005-handover-weekly-alarm-v159");
}

html:not([data-theme="dark"]) .settings-row{
  background: #f8fafc;
}

html:not([data-theme="dark"]) .settings-row:hover{
  background: #f3f7fc;
}

html[data-theme="dark"]{
  --admin-sidebar-border: rgba(255, 255, 255, 0.08);
  --admin-sidebar-text: #d1d5db;
  --admin-sidebar-text-strong: #ffffff;
  --admin-sidebar-muted: #9ca3af;
  --admin-sidebar-icon-bg: rgba(255, 255, 255, 0.08);
  --admin-sidebar-icon: #bfdbfe;
  --admin-sidebar-shadow: 18px 0 42px rgba(0, 0, 0, 0.34);
}

.admin-sidebar{
  border-right: 1px solid var(--admin-sidebar-border);
  background: var(--admin-sidebar);
  color: var(--admin-sidebar-text-strong);
  box-shadow: var(--admin-sidebar-shadow);
}

.sidebar-header{
  border-bottom-color: var(--admin-sidebar-border);
}

.brand-mark, .brand-mark:hover, .brand-mark:focus{
  color: var(--admin-sidebar-text-strong);
}



.sidebar-nav .nav-link{
  color: var(--admin-sidebar-text);
}

.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link:focus, .sidebar-nav .nav-link.active{
  background: var(--admin-sidebar-soft);
  color: var(--admin-sidebar-text-strong);
}

.nav-icon{
  background: var(--admin-sidebar-icon-bg);
  color: var(--admin-sidebar-icon);
}

button, .btn, .nav-link, .dropdown-item, .sidebar-toggle, .profile-button, .ticket-dashboard-heading-button, .assignment-remove, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], button:hover, .btn:hover, .nav-link:hover, .dropdown-item:hover, .sidebar-toggle:hover, .profile-button:hover, .ticket-dashboard-heading-button:hover, .assignment-remove:hover, [role="button"]:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:focus, .btn:focus, .nav-link:focus, .dropdown-item:focus, .sidebar-toggle:focus, .profile-button:focus, .ticket-dashboard-heading-button:focus, .assignment-remove:focus, [role="button"]:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible, .sidebar-toggle:focus-visible, .profile-button:focus-visible, .ticket-dashboard-heading-button:focus-visible, .assignment-remove:focus-visible, [role="button"]:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible, input[type="reset"]:focus-visible, button:active, .btn:active, .nav-link:active, .dropdown-item:active, .sidebar-toggle:active, .profile-button:active, .ticket-dashboard-heading-button:active, .assignment-remove:active, [role="button"]:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, button.active, .btn.active, .nav-link.active, .dropdown-item.active, .sidebar-toggle.active, .profile-button.active, .ticket-dashboard-heading-button.active, .assignment-remove.active, [role="button"].active, input[type="button"].active, input[type="submit"].active, input[type="reset"].active{
  box-shadow: none !important;
  text-shadow: none !important;
}




/* Keep every managed graph invisible until its current layout pass is stable. */
.review-chart-layout.review-data-loading .review-score-section{
  visibility: hidden !important;
}

.review-chart-layout .chart-bars[data-charts-grid]{
  transition: none !important;
}

.review-chart-layout .chart-bars[data-charts-grid]:not(.chart-bars-ready){
  opacity: 0 !important;
}

.review-chart-layout .chart-bars[data-charts-grid]:not(.chart-bars-ready) .chart-column, .review-chart-layout .chart-bars[data-charts-grid]:not(.chart-bars-ready) .chart-average-line, .review-chart-layout .chart-bars[data-charts-grid]:not(.chart-bars-ready)::after{
  visibility: hidden !important;
}

.record-chart .chart-bars[data-operator-graph]:not(.chart-bars-ready), .record-chart .chart-bars[data-dynamic-graph="true"]:not(.chart-bars-ready), .record-chart .chart-bars[data-helpdesk-ticket-types]:not(.chart-bars-ready), .graph-panel-red .chart-bars:not(.chart-bars-ready){
  opacity: 0 !important;
}

.record-chart .chart-bars[data-operator-graph]:not(.chart-bars-ready) .chart-column, .record-chart .chart-bars[data-dynamic-graph="true"]:not(.chart-bars-ready) .chart-column, .record-chart .chart-bars[data-helpdesk-ticket-types]:not(.chart-bars-ready) .chart-column, .graph-panel-red .chart-bars:not(.chart-bars-ready) .chart-column, .record-chart .chart-bars[data-operator-graph]:not(.chart-bars-ready) .chart-average-line, .record-chart .chart-bars[data-dynamic-graph="true"]:not(.chart-bars-ready) .chart-average-line, .record-chart .chart-bars[data-helpdesk-ticket-types]:not(.chart-bars-ready) .chart-average-line, .graph-panel-red .chart-bars:not(.chart-bars-ready) .chart-average-line{
  visibility: hidden !important;
}


/* A rendered graph becomes visible only after the chart engine has calculated its
   final order and dimensions for the current page/container. */
.chart-bars[data-chart-rendered="true"].chart-bars-ready{
  opacity: 1 !important;
}

.chart-bars[data-chart-rendered="true"].chart-bars-ready .chart-column,
.chart-bars[data-chart-rendered="true"].chart-bars-ready .chart-average-line,
.chart-bars[data-chart-rendered="true"].chart-bars-ready::after{
  visibility: visible !important;
}

@media (prefers-reduced-motion: reduce){
  .chart-bars[data-charts-grid],
  .chart-bars[data-operator-graph],
  .chart-bars[data-dynamic-graph],
  .graph-panel-red .chart-bars,
  .record-axis{
    transition: none !important;
  }
}

/* Review graphs are inserted progressively during panel navigation. Keep them hidden
   until the chart engine has calculated bar heights for the current container. */
.review-chart-layout .chart-bars[data-charts-grid][data-chart-rendered="true"]:not(.chart-bars-ready){
  opacity: 0 !important;
}

.review-chart-layout .chart-bars[data-charts-grid][data-chart-rendered="true"]:not(.chart-bars-ready) .chart-column,
.review-chart-layout .chart-bars[data-charts-grid][data-chart-rendered="true"]:not(.chart-bars-ready) .chart-average-line,
.review-chart-layout .chart-bars[data-charts-grid][data-chart-rendered="true"]:not(.chart-bars-ready)::after{
  visibility: hidden !important;
}

.chart-bars[data-chart-loading="true"][data-chart-rendered="false"],
.record-chart .chart-bars[data-chart-loading="true"][data-chart-rendered="false"],
.review-chart-layout .chart-bars[data-chart-loading="true"][data-chart-rendered="false"],
.graph-panel-red .chart-bars[data-chart-loading="true"][data-chart-rendered="false"]{
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  visibility: visible !important;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.18), rgba(148, 163, 184, 0.08)),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  background-size: 220% 100%, 100% 100%;
  color: var(--admin-muted);
  font-size: 0.86rem;
  font-weight: 800;
  animation: chart-loading-sweep 1.25s ease-in-out infinite;
}

.chart-bars[data-chart-loading="true"][data-chart-rendered="false"]::before,
.record-chart .chart-bars[data-chart-loading="true"][data-chart-rendered="false"]::before,
.review-chart-layout .chart-bars[data-chart-loading="true"][data-chart-rendered="false"]::before,
.graph-panel-red .chart-bars[data-chart-loading="true"][data-chart-rendered="false"]::before{
  position: static;
  inset: auto;
  z-index: 3;
  width: auto;
  height: auto;
  background: transparent;
  content: attr(data-loading-label);
}

.chart-bars[data-chart-loading="true"][data-chart-rendered="false"]::after,
.record-chart .chart-bars[data-chart-loading="true"][data-chart-rendered="false"]::after,
.review-chart-layout .chart-bars[data-chart-loading="true"][data-chart-rendered="false"]::after,
.graph-panel-red .chart-bars[data-chart-loading="true"][data-chart-rendered="false"]::after{
  display: none;
}

html[data-theme="dark"] .chart-bars[data-chart-loading="true"][data-chart-rendered="false"],
html[data-theme="dark"] .record-chart .chart-bars[data-chart-loading="true"][data-chart-rendered="false"],
html[data-theme="dark"] .review-chart-layout .chart-bars[data-chart-loading="true"][data-chart-rendered="false"],
html[data-theme="dark"] .graph-panel-red .chart-bars[data-chart-loading="true"][data-chart-rendered="false"]{
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.16), rgba(148, 163, 184, 0.08)),
    linear-gradient(180deg, #111827 0%, #0f172a 100%);
}

@keyframes chart-loading-sweep{
  0%{ background-position: 120% 0, 0 0; }
  100%{ background-position: -120% 0, 0 0; }
}

/* Mobile live-ready polish (20260701)
   Keeps the app neat on phones/tablets while preserving desktop layout. */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}

.dashboard-content, .sheet-wrap, .ticket-dashboard-sheet, .chart-bars-scroll{
  -webkit-overflow-scrolling: touch;
}

@supports (height: 100dvh) {
  .admin-shell, .admin-main{
    height: 100dvh;
    min-height: 100dvh;
  }
}

@media (max-width: 991.98px) {
  body{
    background: var(--admin-bg);
  }

  .admin-shell, .admin-main{
    width: 100%;
    min-width: 0;
  }

  .admin-main{
    margin-left: 0;
  }

  .admin-navbar{
    min-height: 64px;
  }

  .admin-navbar .container-fluid{
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: nowrap;
  }

  .navbar-title-block{
    position: static;
    left: auto;
    top: auto;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0.1rem;
    text-align: left;
    transform: none;
    pointer-events: auto;
  }

  .navbar-title, .navbar-subtitle{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navbar-actions{
    flex: 0 0 auto;
    margin-left: 0 !important;
  }

  .dashboard-content{
    overflow-x: hidden;
    overscroll-behavior-y: contain;
  }

  .dashboard-content > .container-fluid{
    width: 100%;
    max-width: 100%;
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }

  .page-heading{
    min-height: auto;
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }

  .page-heading-copy{
    width: 100%;
    min-width: 0;
  }

  .heading-actions, .dashboard-date-actions{
    width: 100%;
    justify-content: stretch;
  }

  .dashboard-date-actions{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: var(--space-2);
  }

  .dashboard-date-actions .upload-date-field{
    width: 100%;
    min-width: 0;
  }

  

  

  .chart-filter-group, .chart-filter-group:last-of-type{
    width: 100%;
    min-width: 0;
    background: var(--admin-surface-soft);
  }

  

  

  .ticket-dashboard-grid, .ticket-dashboard-grid-three, .ticket-dashboard-grid-three-across, .calls-dispatches-grid{
    grid-template-columns: 1fr;
  }

  .ticket-dashboard-grid-two-by-two{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-chart-layout .page-heading{
    margin-bottom: 1rem !important;
  }

  .review-chart-layout .review-score-section{
    margin-top: 1rem !important;
  }

  

  

  .settings-columns, .settings-field-grid{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767.98px) {
  .admin-navbar{
    min-height: 60px;
  }

  .admin-navbar .container-fluid{
    min-height: 60px;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .navbar-title{
    font-size: 0.98rem;
  }

  .navbar-subtitle{
    display: none;
  }

  .navbar-actions .btn{
    min-height: 36px;
    padding: 0.35rem 0.55rem;
    font-size: 0.76rem;
  }

  .profile-button{
    min-width: 40px;
    padding: 0.25rem;
  }

  .profile-button strong, .profile-button span:not(.profile-avatar){
    display: none;
  }

  .page-heading h1{
    font-size: 1.35rem;
  }

  .page-heading, .panel-header{
    align-items: stretch;
  }

  .panel-header{
    gap: 0.75rem;
  }

  .panel-header > .d-flex{
    width: 100%;
    flex-wrap: wrap;
  }

  .panel, .upload-panel, .settings-card, .metric-card{
    padding: var(--space-4);
  }

  .metric-card{
    min-height: 126px;
  }

  .metric-value{
    font-size: 1.65rem;
  }

  .record-chart{
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0.25rem;
  }

  .record-axis, .chart-bars{
    height: 260px;
  }

  .charts-performance-panel .record-axis, .charts-performance-panel .chart-bars{
    height: 330px;
  }

  .chart-bars, .chart-bars-wide, .chart-bars-spacious, .chart-bars-dense{
    --chart-column-min: 32px;
    --chart-column-max: 42px;
    justify-content: start;
    gap: 0.45rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .chart-bars::-webkit-scrollbar{
    height: 7px;
  }

  .chart-column strong{
    font-size: 0.58rem;
  }

  .chart-column small{
    font-size: 0.56rem;
    line-height: 1.24;
    -webkit-line-clamp: 3;
  }

  .chart-total{
    font-size: 0.7rem;
    padding: 0.22rem 0.42rem;
  }

  .chart-legend{
    justify-content: flex-start;
    gap: 0.45rem;
  }

  .data-tabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
  }

  .data-tabs .nav-item{
    flex: 0 0 auto;
  }

  .data-tabs .nav-link{
    min-height: 42px;
    padding: 0.58rem 0.78rem;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .ticket-dashboard-heading{
    min-height: auto;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.6rem 0.7rem;
  }

  .ticket-dashboard-heading-title{
    width: 100%;
    white-space: normal;
  }

  .ticket-dashboard-heading-actions{
    width: 100%;
    justify-content: flex-end;
    gap: 0.35rem;
  }

  .ticket-dashboard-heading-button{
    min-height: 34px;
    padding: 0.42rem 0.65rem;
    font-size: 0.76rem;
  }

  .ticket-dashboard-heading-download{
    width: 38px;
  }

  .sheet-wrap, .sheet-wrap.ticket-dashboard-sheet, .ticket-dashboard-sheet{
    max-height: 58dvh;
    overflow: auto;
  }

  .excel-sheet th, .excel-sheet td, .ticket-dashboard-sheet .excel-sheet th, .ticket-dashboard-sheet .excel-sheet td, .ticket-dashboard-grid-three .ticket-dashboard-sheet .excel-sheet th, .ticket-dashboard-grid-three .ticket-dashboard-sheet .excel-sheet td, .ticket-dashboard-grid-three-across .ticket-dashboard-sheet .excel-sheet th, .ticket-dashboard-grid-three-across .ticket-dashboard-sheet .excel-sheet td{
    min-width: 96px;
    height: 32px;
    padding: 0.25rem 0.35rem;
    font-size: 0.76rem;
  }

  

  

  .table-responsive{
    border-radius: 8px;
  }
}

@media (max-width: 575.98px) {
  .dashboard-content > .container-fluid{
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
    padding-top: var(--space-4) !important;
    padding-bottom: var(--space-4) !important;
  }

  .dashboard-date-actions{
    grid-template-columns: 1fr;
  }

  .upload-date-field{
    width: 100%;
    min-width: 0;
  }

  

  .navbar-title{
    font-size: 0.92rem;
  }

  .sidebar-toggle, .profile-button{
    width: 38px;
    height: 38px;
  }

  .page-icon{
    width: 42px;
    height: 42px;
  }

  .page-heading-copy{
    gap: var(--space-3);
  }

  .page-heading-copy p{
    font-size: 0.85rem;
  }

  .record-chart{
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .record-axis, .chart-bars{
    height: 240px;
  }

  .charts-performance-panel .record-axis, .charts-performance-panel .chart-bars{
    height: 305px;
  }

  .chart-bars, .chart-bars-wide, .chart-bars-spacious, .chart-bars-dense{
    --chart-column-min: 30px;
    --chart-column-max: 38px;
  }

  .ticket-dashboard-heading-actions{
    justify-content: stretch;
  }

  .ticket-dashboard-heading-button{
    flex: 1 1 0;
  }

  .ticket-dashboard-heading-download{
    flex: 0 0 38px;
  }

  .auth-card{
    border-radius: 8px;
  }
}

@media (max-width: 380px) {
  .navbar-actions .btn{
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ticket-dashboard-heading-button{
    padding-left: 0.42rem;
    padding-right: 0.42rem;
  }

  .chart-column small{
    font-size: 0.52rem;
  }
}


/* Operator sidebar must remain visible: only hide the links operators do not need. */
html.is-operator-user .admin-sidebar, body.is-operator-user .admin-sidebar{
  display: flex !important;
}

html.is-operator-user .sidebar-toggle, body.is-operator-user .sidebar-toggle{
  display: inline-grid !important;
}

html.is-operator-user .sidebar-nav .nav-link:not([data-operator-nav]), body.is-operator-user .sidebar-nav .nav-link:not([data-operator-nav]), html.is-operator-user .sidebar-nav .operator-nav-hidden, body.is-operator-user .sidebar-nav .operator-nav-hidden{
  display: none !important;
}

html.is-operator-user .sidebar-nav .nav-link[data-operator-kpi-subnav],
body.is-operator-user .sidebar-nav .nav-link[data-operator-kpi-subnav]{
  display: none !important;
}

@media (min-width: 992px) {
  html.is-operator-user .admin-main, body.is-operator-user .admin-main{
    margin-left: var(--sidebar-width);
  }

  body.sidebar-mini.is-operator-user .admin-main{
    margin-left: var(--sidebar-mini-width);
  }
}

@media (max-width: 991.98px) {
  html.is-operator-user .admin-main, body.is-operator-user .admin-main{
    margin-left: 0;
  }
}


/* Operator account navigation and settings restrictions */
.operator-hidden-setting{
  display: none !important;
}

html.operator-settings-mode .settings-card:has(#defaultPage){
  display: none !important;
}

/* Stored-data sheets render only their visible row and column window. */
.excel-sheet .sheet-virtual-spacer,
.excel-sheet col.sheet-virtual-spacer-column {
  min-width: 0 !important;
  padding: 0 !important;
  border-right: 0 !important;
  pointer-events: none;
}

.excel-sheet th.sheet-virtual-spacer,
.excel-sheet td.sheet-virtual-spacer {
  overflow: hidden;
  color: transparent;
}

.excel-sheet tr.sheet-virtual-row-spacer,
.excel-sheet td.sheet-virtual-row-spacer-cell {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none;
}

.excel-sheet td.sheet-virtual-row-spacer-cell {
  min-width: 0 !important;
  line-height: 0;
}


/* Reserved department overview */
.reserved-departments-worked-button {
  min-height: 36px;
  white-space: nowrap;
  align-self: flex-end;
}

.reserved-review-worked-button {
  flex: 0 0 auto;
  margin-top: auto;
}

.reserved-review-overview {
  min-width: 0;
}

.reserved-departments-worked-button i,
.reserved-add-department i {
  margin-right: 0.35rem;
}

.reserved-comparison-panel {
  min-height: clamp(430px, 60vh, 650px);
}

.reserved-chart-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 190px;
}

.reserved-chart-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--admin-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.reserved-graph-empty {
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: 2rem;
  color: var(--admin-muted);
  text-align: center;
  font-weight: 700;
  border: 1px dashed var(--admin-border);
  border-radius: 0.85rem;
  background: rgba(15, 23, 42, 0.24);
}

html[data-theme="light"] .reserved-graph-empty {
  background: rgba(241, 245, 249, 0.7);
}

.reserved-record-chart {
  min-height: 350px;
}

.reserved-comparison-bars .chart-column {
  min-width: 128px;
}

.reserved-worked-modal {
  z-index: 1090;
  color-scheme: dark;
}

.reserved-worked-modal .modal-dialog {
  transform: none !important;
  transition: none !important;
}

.reserved-worked-modal .modal-content,
.reserved-worked-modal .modal-header,
.reserved-worked-modal .modal-body,
.reserved-worked-modal .modal-footer {
  background-color: #182235 !important;
  color: #f1f5f9 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  transition: none !important;
}

.reserved-worked-modal .modal-content {
  border: 1px solid #334155;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}

.reserved-worked-modal .modal-header,
.reserved-worked-modal .modal-footer {
  border-color: #334155;
}

.reserved-worked-modal .reserved-modal-period,
.reserved-worked-modal .reserved-worked-help,
.reserved-worked-modal .reserved-worked-field > span {
  color: #94a3b8 !important;
}

.reserved-worked-modal .form-control,
.reserved-worked-modal .form-select {
  background-color: #111827 !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

.reserved-worked-modal .form-control:focus,
.reserved-worked-modal .form-select:focus {
  background-color: #111827 !important;
  border-color: #60a5fa !important;
  color: #f8fafc !important;
}

.reserved-worked-modal .form-select option {
  background-color: #111827;
  color: #f8fafc;
}

.reserved-worked-modal .btn-close {
  filter: none;
}

.reserved-worked-help {
  color: var(--admin-muted);
  margin-bottom: 1rem;
}

.reserved-worked-rows {
  display: grid;
  gap: 0.75rem;
}

.reserved-worked-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 190px) auto;
  gap: 0.75rem;
  align-items: end;
  padding: 0.85rem;
  border: 1px solid #334155;
  border-radius: 0.75rem;
  background: #111827;
}

.reserved-worked-field {
  display: grid;
  gap: 0.35rem;
}

.reserved-worked-field > span {
  color: var(--admin-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.reserved-worked-remove {
  min-width: 40px;
  min-height: 38px;
  display: inline-grid;
  place-items: center;
}

.reserved-worked-validation {
  min-height: 1.35rem;
  margin: 0.75rem 0;
  color: var(--bs-danger, #ef4444);
  font-size: 0.86rem;
  font-weight: 700;
}

@media (max-width: 680px) {
  .reserved-worked-row {
    grid-template-columns: 1fr;
  }

  .reserved-worked-remove {
    width: 100%;
  }

  .reserved-chart-legend {
    width: 100%;
    min-width: 0;
  }
}


/* Reserved operator graphs: all schedule seats fit inside the panel without
   browser scrollbars that can look like duplicate bars. */
[data-reserved-operator-graphs] .reserved-operator-chart {
  /* Clip the chart without turning it into a nested scroll container. A nested
     overflow container can trap mouse-wheel and trackpad scrolling in Firefox. */
  overflow: clip;
  overscroll-behavior-y: auto;
  touch-action: pan-y pinch-zoom;
}

[data-reserved-operator-graphs] .reserved-operator-bars,
[data-reserved-operator-graphs] .reserved-operator-bars.chart-bars-scroll {
  --chart-column-min: 0px;
  --chart-column-max: 1fr;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  /* The Reserved chart never needs an internal scrollbar. overflow: clip keeps
     the bars tidy while allowing vertical wheel/touch scrolling to reach the
     dashboard's real scroll container. */
  overflow: clip !important;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-y pinch-zoom;
  scrollbar-width: none;
}

[data-reserved-operator-graphs] .reserved-operator-bars::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Keep Reserved department bars visually separated like the standard dashboard
   charts. The shared chart engine applies a zero gap to sparse charts, which made
   wide Reserved bars appear joined together. */
[data-reserved-operator-graphs] .reserved-operator-bars,
[data-reserved-operator-graphs] .reserved-operator-bars.chart-bars-spacious {
  column-gap: clamp(0.9rem, 1.35vw, 1.35rem) !important;
  justify-content: space-evenly;
}


/* Reserved operators use the same chart engine as the other dashboards, but each
   operator stays on its own clean full-width row. */
[data-reserved-operator-graphs]{
  --bs-gutter-y: 0;
  row-gap: 1rem;
}

[data-reserved-operator-graphs] > .col-12{
  margin-top: 0 !important;
}

.reserved-operator-panel{
  min-height: 0;
}

.reserved-operator-panel .panel-header{
  align-items: flex-start;
}

.reserved-operator-chart{
  --chart-label-lane: 3.35rem;
  --chart-top-lane: 2rem;
}

.dashboard-content .reserved-operator-chart .record-axis,
.dashboard-content .reserved-operator-chart .chart-bars{
  height: clamp(220px, 25vh, 270px);
}

.reserved-operator-bars .chart-column small{
  font-size: 0.62rem;
  line-height: 1.25;
}

.assignment-card-reserved .assignment-side-reserved{
  width: 100%;
  max-width: none;
}


.reserved-operator-panel[data-reserved-review-link="true"]{
  cursor: pointer;
}

.reserved-operator-panel[data-reserved-review-link="true"] .record-chart,
.reserved-operator-panel[data-reserved-review-link="true"] .chart-column{
  cursor: pointer;
  touch-action: pan-y pinch-zoom;
}

.reserved-operator-panel[data-reserved-review-link="true"]:focus-visible{
  outline: 3px solid var(--admin-primary);
  outline-offset: 4px;
}

/* Operator month-to-month comparison */
.compare-page-heading{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.compare-admin-filters{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-left: auto;
}

.compare-admin-filters[hidden],
.compare-period-filters[hidden]{
  display: none;
}

.compare-filter-field,
.compare-period-filters label{
  display: grid;
  gap: 0.3rem;
  margin: 0;
  color: var(--admin-text);
  font-size: 0.75rem;
  font-weight: 700;
}

.compare-filter-field .form-select{
  width: 190px;
  min-height: 36px;
}

.compare-panel-actions{
  display: grid;
  justify-items: end;
  gap: 0.65rem;
}

.compare-period-filters{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.5rem;
}

.compare-period-filters .form-select{
  width: 118px;
  min-height: 36px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.82rem;
}

.compare-period-filters label:first-child .form-select{
  width: 132px;
}

.compare-state-panel{
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 120px;
  padding: 1.4rem;
}

.compare-state-panel[hidden]{
  display: none;
}

.compare-state-panel h2,
.compare-state-panel p{
  margin: 0;
}

.compare-state-panel h2{
  font-size: 1.05rem;
}

.compare-state-panel p{
  margin-top: 0.2rem;
  color: var(--admin-muted);
}

.compare-state-icon{
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.16);
  font-size: 1.25rem;
}

.compare-approval-note{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  color: var(--admin-muted);
  font-size: 0.9rem;
}

.compare-approval-note i{
  color: #34d399;
}

.compare-graph-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.compare-graph-panel{
  min-width: 0;
  overflow: hidden;
}

.compare-graph-panel .panel-header{
  align-items: flex-start;
  gap: 1rem;
}

.compare-graph-panel .compare-period-title span{
  color: var(--admin-primary);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

html[data-theme="dark"] .compare-graph-panel .compare-period-title span{
  color: #60a5fa;
}

.compare-graph-panel .record-chart{
  position: relative;
  height: 390px;
  min-height: 390px;
  max-height: 390px;
}

.compare-graph-panel .record-axis,
.compare-graph-panel .chart-bars{
  height: 390px;
  min-height: 390px;
}

.compare-graph-panel .chart-bars{
  overflow-x: auto;
  overflow-y: hidden;
}

.compare-record-chart-unavailable .record-axis{
  opacity: 0.35;
}

.compare-graph-panel-unavailable .chart-legend{
  opacity: 0.45;
}

.compare-graph-empty{
  position: absolute;
  inset: var(--chart-top-lane) 0.75rem var(--chart-label-lane);
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.55rem;
  padding: 1.25rem;
  color: var(--admin-muted);
  text-align: center;
}

.compare-graph-empty i{
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  background: var(--admin-surface);
  color: #93c5fd;
  font-size: 1.35rem;
}

.compare-graph-empty strong{
  max-width: 430px;
  color: var(--admin-text);
  font-size: 1rem;
}

.compare-graph-empty span{
  max-width: 460px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.compare-table-panel{
  margin-top: 1rem;
  padding-top: 1rem;
}

.compare-table-panel-header{
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
}

.compare-verdict.compare-verdict-compact{
  flex: 0 1 auto;
  width: 100%;
  max-width: none;
  margin: 1rem 0 0;
}

.compare-verdict-compact p{
  white-space: nowrap;
}

.compare-table{
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
}

.compare-table thead{
  position: sticky;
  top: 0;
  z-index: 12;
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.22);
}

.compare-table thead th{
  border-top: 2px solid rgba(96, 165, 250, 0.5);
  border-bottom: 2px solid rgba(96, 165, 250, 0.5);
  background: color-mix(in srgb, var(--admin-surface) 92%, #60a5fa 8%);
  color: var(--admin-text);
  font-size: 1rem;
  font-weight: 800;
}

@media (min-width: 768px){
  .compare-table-panel .table-responsive{
    overflow: visible;
  }
}

.compare-table th,
.compare-table td{
  padding: 0.9rem 1rem;
  vertical-align: middle;
}

.compare-table th:last-child,
.compare-table td:last-child{
  padding-left: 2rem;
}

.compare-table tbody th{
  color: var(--admin-text);
  font-weight: 700;
}

.compare-table tfoot th,
.compare-table tfoot td{
  padding: 1rem;
  border-top: 2px solid rgba(96, 165, 250, 0.5);
  background: rgba(96, 165, 250, 0.08);
  color: var(--admin-text);
  font-weight: 800;
}

.compare-change{
  font-weight: 750;
}

.compare-change-positive{
  color: #34d399 !important;
}

.compare-change-negative{
  color: #f87171 !important;
}

.compare-change-neutral{
  color: var(--admin-muted) !important;
}

.compare-verdict{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem 1rem 1rem;
  padding: 0.9rem 1rem 0.9rem 0.7rem;
  border: 1px solid var(--admin-border);
  border-left-width: 4px;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}

.compare-verdict-icon{
  display: inline-grid;
  flex: 0 0 auto;
  width: 36px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-size: 1.55rem;
}

.compare-verdict h3,
.compare-verdict p{
  margin: 0;
}

.compare-verdict h3{
  font-size: 1.08rem;
  font-weight: 850;
}

.compare-verdict p{
  margin-top: 0.22rem;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
}

.compare-verdict-title-label{
  color: #ffffff;
}

.compare-verdict-title-outcome-positive{
  color: #34d399;
}

.compare-verdict-title-outcome-negative{
  color: #f87171;
}

.compare-verdict-title-outcome-neutral{
  color: #60a5fa;
}

.compare-verdict-outcome{
  font-weight: 850;
}

.compare-verdict-outcome-positive{
  color: #34d399;
}

.compare-verdict-outcome-negative{
  color: #f87171;
}

.compare-verdict-outcome-neutral{
  color: #60a5fa;
}

.compare-verdict-positive{
  border-color: rgba(52, 211, 153, 0.58);
  background: transparent;
}

.compare-verdict-positive .compare-verdict-icon{
  color: #34d399;
}

.compare-verdict-positive .compare-verdict-icon{
  background: transparent;
}

.compare-verdict-negative{
  border-color: rgba(248, 113, 113, 0.58);
  background: transparent;
}

.compare-verdict-negative .compare-verdict-icon{
  color: #f87171;
}

.compare-verdict-negative .compare-verdict-icon{
  background: transparent;
}

.compare-verdict-neutral{
  border-color: rgba(96, 165, 250, 0.54);
  background: transparent;
}

.compare-verdict-neutral .compare-verdict-icon{
  color: #60a5fa;
}

.compare-verdict-neutral .compare-verdict-icon{
  background: transparent;
}

@media (max-width: 1199.98px){
  .compare-table-panel-header{
    align-items: stretch;
    flex-direction: column;
  }

  .compare-verdict.compare-verdict-compact{
    width: 100%;
    max-width: none;
    margin: 1rem 0 0;
  }

  .compare-verdict-compact p{
    white-space: normal;
  }

  .compare-page-heading{
    align-items: flex-start;
    flex-direction: column;
  }

  .compare-admin-filters{
    justify-content: flex-start;
    margin-left: 0;
  }

  .compare-graph-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px){
  .compare-table-panel .table-responsive{
    max-height: calc(100vh - 96px);
    overflow: auto;
  }

  .compare-table thead{
    top: 0;
  }

  .compare-admin-filters{
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .compare-filter-field .form-select{
    width: 100%;
  }

  .compare-graph-panel .panel-header{
    display: block;
  }

  .compare-panel-actions{
    justify-items: start;
    margin-top: 0.85rem;
  }

  .compare-period-filters{
    justify-content: flex-start;
  }

  .compare-graph-panel .record-chart,
  .compare-graph-panel .record-axis,
  .compare-graph-panel .chart-bars{
    height: 350px;
    min-height: 350px;
    max-height: 350px;
  }

  .compare-verdict{
    margin: 0.75rem;
  }
}

/* Review chart flow
   Let every Review graph consume the height available above the score cards.
   The existing minimum chart height keeps short screens in normal scroll flow
   so a graph can never spill over or sit on top of the cards. */
.dashboard-content > .review-chart-layout{
  height: auto !important;
  min-height: 100% !important;
  padding-bottom: 0.75rem !important;
  overflow: visible !important;
}

.review-chart-layout .review-graph-section{
  display: flex;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.review-chart-layout .review-graph-section > .col-12{
  display: flex;
  min-height: 0 !important;
}

.review-chart-layout .charts-performance-panel{
  width: 100%;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
}

.review-chart-layout .charts-performance-panel .record-chart{
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: var(--review-chart-height) !important;
  max-height: none !important;
}

.review-chart-layout .charts-performance-panel .record-chart:has(> .chart-bars-scroll){
  --chart-scroll-drop: 16px;
  margin-bottom: calc(-1 * var(--chart-scroll-drop));
}

.review-chart-layout .charts-performance-panel .record-axis,
.review-chart-layout .charts-performance-panel .chart-bars{
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch;
}

.review-chart-layout .review-score-section{
  position: relative;
  z-index: 1;
  flex: 0 0 auto !important;
  clear: both;
  align-items: stretch;
  margin-bottom: 0 !important;
}

.review-chart-layout .report-download-footer:has(.review-report-status:empty){
  display: none;
}

.review-chart-layout .review-graph-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
}

.review-chart-layout .review-graph-grid > .review-graph-section{
  align-self: stretch;
  width: 100%;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}

.review-chart-layout .review-graph-grid > .review-graph-section > .col-12{
  padding-left: 0;
  padding-right: 0;
}

/* Technician Review order: Previous Week first, Current Month second. */
.review-chart-layout .review-graph-grid.is-technicians-review > [data-technicians-previous-week-section]{
  order: 1;
}

.review-chart-layout .review-graph-grid.is-technicians-review > [data-review-standard-graph-section]{
  order: 2;
}

@media (min-width: 1200px){
  .review-chart-layout .review-graph-grid.is-technicians-review{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
  }

  .review-chart-layout .review-graph-grid.is-technicians-review > .review-graph-section{
    margin-top: 0 !important;
  }

  .review-chart-layout .review-graph-grid.is-technicians-review .charts-performance-panel{
    height: 100% !important;
  }
}

/* The graph now owns the spare height; this fixed separation keeps the score
   cards immediately below it and the container padding supplies the bottom gap. */
.review-chart-layout .review-score-section{
  margin-top: 0 !important;
  padding-top: 0.375rem;
}

.review-chart-layout .review-score-section > [class*="col-"]{
  margin-top: 0.5rem;
}

/* Responsive review score cards
   Size the score grid from its available content width instead of the viewport,
   so a restored window or an expanded sidebar cannot leave four cramped cards. */
.review-chart-layout{
  container-name: review-layout;
  container-type: inline-size;
}

.review-chart-layout .review-score-section > [class*="col-"]{
  display: flex;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Monthly and weekly technician reviews share one stable three-card layout. */
.review-chart-layout .review-score-section.is-technician-score-section{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-right: 0;
  margin-left: 0;
}

.review-chart-layout .review-score-section.is-technician-score-section > [class*="col-"]{
  width: auto;
  max-width: none;
  margin-top: 0.5rem;
  padding-right: 0;
  padding-left: 0;
}

@media (max-width: 899.98px){
  .review-chart-layout .review-score-section.is-technician-score-section{
    grid-template-columns: 1fr;
  }
}

/* Technicians has exactly two score cards. Keep both cards in one row even
   though the general responsive score-card rule defaults every column to 100%. */
.review-chart-layout .review-score-section > .col-6{
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
}

.review-chart-layout .review-score-card{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 176px;
  min-height: 176px;
  max-height: 176px;
  min-width: 0;
}

.review-chart-layout .review-score-card .metric-top{
  align-items: flex-start;
  min-width: 0;
}

.review-chart-layout .review-score-card .metric-label{
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.review-chart-layout .review-score-card .metric-value{
  min-width: 0;
  overflow-wrap: break-word;
}

.review-chart-layout .review-score-card .metric-meta{
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  align-self: stretch;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
}

.review-chart-layout .review-score-card .metric-meta > span{
  display: inline;
  min-width: 0;
  overflow-wrap: break-word;
}

@container review-layout (min-width: 640px){
  .review-chart-layout .review-score-section > .col-md-6,
  .review-chart-layout .review-score-section > .col-xl-4{
    flex-basis: 50%;
    width: 50%;
    max-width: 50%;
  }

}

@container review-layout (min-width: 900px){
  .review-chart-layout .review-score-section > .col-xl-4{
    flex-basis: 33.333333%;
    width: 33.333333%;
    max-width: 33.333333%;
  }

  .review-chart-layout .review-score-section > .col-xl-4 .metric-top{
    min-height: 42px;
  }
}

@container review-layout (min-width: 1160px){
  .review-chart-layout .review-score-section > .col-xl-3{
    flex-basis: 25%;
    width: 25%;
    max-width: 25%;
  }

  .review-chart-layout .review-score-section > .col-xl-3 .metric-top{
    min-height: 3.75rem;
  }
}

/* TAD's 2x2 Data view shows the header plus eight editable rows. The sheets
   retain all stored rows and use their existing scrollbar for the remainder. */
.ticket-dashboard-grid-two-by-two .ticket-dashboard-sheet{
  max-height: 321px;
}

@media (max-width: 767.98px){
  .ticket-dashboard-grid-two-by-two .ticket-dashboard-sheet{
    max-height: 304px;
  }
}


/* Operator Review Feedback visibility */
[data-review-feedback-trigger][hidden],
html.is-operator-user [data-review-feedback-trigger] {
  display: none !important;
}

/* Every dashboard, Review and Compare graph may overflow horizontally, but it
   must never become its own vertical scroll area. Keep vertical wheel and touch
   movement available to the page while the graph itself scrolls left/right. */
.chart-bars,
.chart-bars-scroll {
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y pinch-zoom;
}
[data-monthly-period-control][hidden],
[data-weekly-period-control][hidden]{
  display: none !important;
}
/* Scheduled leave */
.control-room-switch {
  align-items: center;
  border-bottom: 1px solid #31445f;
  display: flex;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  overflow-x: auto;
}

.control-room-mode {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #9eb7d7;
  display: inline-flex;
  font-weight: 700;
  gap: .5rem;
  min-height: 44px;
  padding: .65rem .9rem;
  white-space: nowrap;
}

.control-room-mode:hover,
.control-room-mode:focus-visible { color: #ffffff; }
.control-room-mode.is-active { border-bottom-color: #60a5fa; color: #ffffff; }
.control-room-mode i { color: #7dd3fc; }
.control-room-handover { max-width: none; padding: .15rem 0 0; }
.control-room-section-heading { margin-bottom: .75rem; padding: .15rem 0; }
.control-room-section-heading .page-icon { width: 2.35rem; height: 2.35rem; }
body.control-room-handover-active .scheduled-leave-period { display: none !important; }

html[data-theme="light"] .control-room-switch { border-bottom-color: #cbd5e1; }
html[data-theme="light"] .control-room-mode { color: #52647a; }
html[data-theme="light"] .control-room-mode:hover,
html[data-theme="light"] .control-room-mode:focus-visible,
html[data-theme="light"] .control-room-mode.is-active { color: #172033; }

.schedule-tabs {
  border-bottom: 1px solid #31445f;
  display: flex;
  gap: var(--space-1);
  margin: 0 0 var(--section-space);
  overflow-x: auto;
}
.schedule-tab {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--bs-secondary-color);
  display: inline-flex;
  gap: .5rem;
  padding: .7rem 1rem;
  white-space: nowrap;
}
.schedule-tab:hover, .schedule-tab.is-active { color: var(--bs-body-color); }
.schedule-tab.is-active { border-bottom-color: #60a5fa; font-weight: 700; }
.schedule-tab i { color: #7dd3fc; }
.admin-kpi-tabs {
  border-bottom: 1px solid #31445f;
  display: flex;
  gap: var(--space-1);
  margin: 0 0 var(--section-space);
  overflow-x: auto;
  scrollbar-width: thin;
}
.admin-kpi-tab {
  align-items: center;
  border-bottom: 2px solid transparent;
  color: var(--bs-secondary-color);
  display: inline-flex;
  flex: 0 0 auto;
  gap: .5rem;
  padding: .7rem 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.admin-kpi-tab i { color: #7dd3fc; }
.admin-kpi-tab:hover,
.admin-kpi-tab:focus-visible,
.admin-kpi-tab.is-active { color: var(--bs-body-color); }
.admin-kpi-tab.is-active { border-bottom-color: #60a5fa; font-weight: 700; }
.dashboard-content > .container-fluid > [data-platform-section-heading] {
  margin-bottom: var(--space-3) !important;
}
.platform-section-utility-bar {
  align-items: flex-end;
  border-bottom: 1px solid #31445f;
  gap: var(--section-space);
  justify-content: flex-end;
  min-height: 45px;
  padding-bottom: var(--space-3);
}
.platform-section-utility-bar > .page-heading-copy {
  align-self: center;
  display: flex !important;
  flex: 1 1 280px;
  gap: var(--space-2);
  margin: 0 auto 0 0;
}
.platform-section-utility-bar > .page-heading-copy .page-icon {
  border-radius: 7px;
  font-size: 1rem;
  height: 38px;
  width: 38px;
}
.platform-section-utility-bar > .page-heading-copy h1 {
  font-size: 1.1rem;
  line-height: 1.2;
  margin: 0 0 .12rem !important;
}
.platform-section-utility-bar > .page-heading-copy p {
  font-size: .82rem;
  line-height: 1.2;
}
.platform-section-tabs {
  border-bottom: 0;
  flex: 1 1 auto;
  margin: 0;
  min-height: 45px;
  scrollbar-width: thin;
}
.platform-section-tabs > .schedule-tab,
.platform-section-tabs > .admin-kpi-tab {
  min-height: 45px;
  padding: .65rem .9rem;
}
.navbar-title-block.navbar-platform-navigation {
  align-self: stretch;
  display: flex;
  flex: 1 1 auto;
  gap: 0;
  left: auto;
  margin: 0 var(--space-4);
  min-width: 0;
  pointer-events: auto;
  position: static;
  text-align: left;
  top: auto;
  transform: none;
}
.navbar-platform-tabs {
  align-items: stretch;
  align-self: stretch;
  border-bottom: 0;
  display: flex;
  flex: 1 1 auto;
  margin: 0;
  min-height: 0;
  min-width: 0;
  overflow-x: auto;
  width: 100%;
}
.navbar-platform-tabs > .schedule-tab,
.navbar-platform-tabs > .admin-kpi-tab {
  align-self: stretch;
  min-height: 100%;
  padding: var(--space-3) var(--space-4);
}
.navbar-title-block.navbar-page-heading {
  max-width: min(54vw, 720px);
}
.page-heading-relocated {
  min-height: 0 !important;
  margin: 0 !important;
}
.page-heading-relocated > .page-heading-copy {
  display: none !important;
}
.page-heading-relocated:not(:has(.heading-actions > :not([hidden]))) {
  display: none !important;
}
.page-heading-relocated .heading-actions {
  margin: 0 0 var(--section-space) auto;
}
.platform-section-heading-empty {
  display: none !important;
}
.platform-section-tabs-source {
  display: none !important;
}
.department-segment-source.department-segment-source,
.department-segment-native.department-segment-native {
  display: none !important;
}
.department-segment-bar {
  margin-bottom: var(--space-3);
  min-width: 0;
  width: 100%;
}
.department-segment-control {
  align-items: center;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  display: flex;
  gap: var(--space-2);
  min-height: 54px;
  overflow-x: auto;
  padding: var(--space-2);
  scrollbar-width: thin;
}
.department-segment-option {
  appearance: none;
  background: transparent;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  color: var(--admin-muted);
  flex: 0 0 auto;
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.2;
  min-height: 40px;
  padding: .55rem .9rem;
  white-space: nowrap;
}
.department-segment-option:hover,
.department-segment-option:focus-visible {
  border-color: #4f8bd8;
  color: var(--admin-text);
}
.department-segment-option.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
.department-segment-option:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.shift-schedule-panel > .department-segment-bar {
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
}
@media (max-width: 767.98px) {
  .platform-section-utility-bar {
    align-items: stretch;
  }
  .platform-section-tabs {
    max-width: 100%;
    width: 100%;
  }
  .navbar-title-block.navbar-platform-navigation {
    align-self: stretch;
    margin: 0 var(--space-2);
    width: auto;
  }
  .navbar-platform-tabs > .schedule-tab,
  .navbar-platform-tabs > .admin-kpi-tab {
    min-height: 60px;
    padding-inline: var(--space-3);
  }
  .navbar-title-block.navbar-page-heading {
    max-width: none;
  }
}
.schedule-alert-badge { align-items:center;background:#dc2626;border:1px solid #fb7185;border-radius:999px;color:#fff;display:inline-flex;font-size:.68rem;font-weight:800;justify-content:center;line-height:1;min-height:1.25rem;min-width:1.25rem;padding:.15rem .35rem; }
.schedule-alert-badge[hidden] { display:none !important; }
[data-schedule-view][hidden] { display: none !important; }
.shift-schedule-panel { border: 1px solid #31445f; border-radius: 8px; overflow: hidden; padding: 0; }
.shift-schedule-panel .panel-header { align-items: center; display: flex; gap: .75rem; justify-content: space-between; margin: 0; padding: .65rem .8rem; }
.shift-schedule-panel .panel-header > div:first-child { display: grid; gap: .1rem; min-width: 0; }
.shift-schedule-panel .panel-header .section-title { display: block; margin: 0 !important; }
.shift-schedule-panel .panel-header .text-muted { line-height: 1.2; }
.shift-schedule-panel .section-title i { margin-right: .4rem; }
.shift-header-actions { align-items: end; display: flex; flex-wrap: wrap; gap: .5rem; }
.shift-department-field { color: var(--bs-secondary-color); display: grid; font-size: .75rem; gap: .15rem; min-width: 190px; }
.shift-schedule-status { color: var(--bs-success); font-size: .8rem; padding: 0 1rem; }
.shift-schedule-status:empty { display: none; }
.shift-schedule-status.is-error { color: var(--bs-danger); }
.shift-schedule-scroll { max-height: min(70vh, 950px); overflow: auto; }
.reserve-schedule-grid { background: #101b2a; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 680px), 1fr)); padding: .8rem; }
.reserve-schedule-grid[hidden] { display: none !important; }
.reserve-seat-schedule { border: 1px solid #33445a; min-width: 0; }
.reserve-seat-title { background: #1b2b40; border-bottom: 1px solid #33445a; color: #f3f6fb; font-size: .9rem; font-weight: 700; margin: 0; padding: .55rem .7rem; }
.reserve-seat-scroll { max-height: min(70vh, 950px); overflow: auto; }
.reserve-schedule-table { min-width: 680px; table-layout: fixed; }
.reserve-schedule-table th { background: #24344b; color: #e6edf6; font-size: .72rem; position: sticky; top: 0; z-index: 2; }
.reserve-schedule-table td, .reserve-schedule-table th { border-color: #33445a; padding: .3rem .4rem; vertical-align: middle; }
.reserve-schedule-table th:nth-child(1) { width: 84px; }
.reserve-schedule-table th:nth-child(2) { width: 66px; }
.reserve-schedule-table th:nth-child(3) { width: 170px; }
.reserve-schedule-table th:nth-child(4) { width: 150px; }
.reserve-schedule-table th:nth-child(5) { width: 110px; }
.reserve-schedule-table th:nth-child(6) { width: 150px; }
.reserve-schedule-table tbody td { background: #1b2b40; font-size: .76rem; }
.reserve-schedule-table tbody tr:nth-child(even) td { background: #1e3147; }
.reserve-schedule-table .reserve-month-row th { background: #2a4059; color: #f3f6fb; font-size: .8rem; padding: .45rem .55rem; position: static; text-align: left; }
.reserve-schedule-table .form-select { font-size: .75rem; min-height: 30px; padding-block: .2rem; }
.reserve-operator-cell { color: #b9e8ff; font-weight: 700; }
.reserve-schedule-empty { color: var(--bs-secondary-color); grid-column: 1 / -1; padding: 1.5rem; text-align: center; }
.shift-schedule-table { min-width: 1100px; table-layout: fixed; }
.shift-schedule-table th { background: #24344b; color: #e6edf6; font-size: .75rem; position: sticky; top: 0; z-index: 1; }
.shift-schedule-table .shift-month-row th { background: #283c54; color: #f3f6fb; font-size: .83rem; font-weight: 700; padding: .55rem .7rem; position: static; text-align: left; width: auto; }
.shift-schedule-table td, .shift-schedule-table th { border-color: #33445a; padding: .45rem .55rem; vertical-align: top; }
.shift-schedule-table th:nth-child(1) { width: 70px; }
.shift-schedule-table th:nth-child(2) { width: 76px; }
.shift-schedule-table th:nth-child(n+3) { width: calc((100% - 146px) / 4); }
.shift-schedule-panel.is-weekly-shift .shift-schedule-table th:nth-child(5),
.shift-schedule-panel.is-weekly-shift .shift-schedule-table td:nth-child(5),
.shift-schedule-panel.is-weekly-shift .shift-schedule-table th:nth-child(6),
.shift-schedule-panel.is-weekly-shift .shift-schedule-table td:nth-child(6) { display: none; }
.shift-schedule-panel.is-weekly-shift .shift-schedule-table { min-width: 760px; }
.shift-schedule-panel.is-weekly-shift .shift-schedule-table th:nth-child(n+3) { width: calc((100% - 146px) / 2); }
.shift-schedule-table td:nth-child(-n+2) { font-size: .8rem; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.shift-schedule-table td:first-child, .shift-schedule-table td:nth-child(2) { background: #182638; position: sticky; z-index: 2; }
.shift-schedule-table td:first-child, .shift-schedule-table th:first-child { left: 0; }
.shift-schedule-table td:nth-child(2), .shift-schedule-table th:nth-child(2) { left: 70px; }
.shift-schedule-table th:first-child, .shift-schedule-table th:nth-child(2) { z-index: 3; }
.shift-schedule-table tbody td { height: 70px; }
.shift-schedule-table .shift-weekend-off {
  background: #3b3a20 !important;
  color: #fff3a3;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle;
}
.shift-weekend-off span { align-items: center; display: inline-flex; gap: .45rem; }
.shift-weekend-row:hover .shift-weekend-off { background: #454323 !important; }
.shift-slot { --shift-base: #1c2b3d; --shift-alt: #213247; --shift-hover: #2c4056; background: var(--shift-base) !important; cursor: pointer; padding-right: 2rem !important; position: relative; }
.shift-slot.shift-slot-inactive { cursor: default; padding-right: .55rem !important; }
.shift-slot.shift-slot-inactive:hover,
.shift-schedule-table tbody tr:nth-child(even) .shift-slot.shift-slot-inactive:hover { background: var(--shift-base) !important; }
.shift-schedule-table tbody tr:nth-child(even) .shift-slot.shift-slot-inactive:hover { background: var(--shift-alt) !important; }
.shift-slot-grid { display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); min-height: 26px; }
.shift-slot.shift-cell-editing { cursor: default; padding-right: .55rem !important; }
.shift-schedule-table tbody tr:nth-child(even) .shift-slot { background: var(--shift-alt) !important; }
.shift-slot:hover, .shift-schedule-table tbody tr:nth-child(even) .shift-slot:hover { background: var(--shift-hover) !important; }
.shift-operator-entry { align-items: center; display: flex; min-height: 27px; min-width: 0; padding: 1px 0; }
.shift-operator-entry[hidden] { display: none !important; }
.shift-operator { align-items: center; background: var(--bubble-bg); border: 1px solid var(--bubble-border); border-radius: 999px; color: var(--bubble-text); display: inline-flex; font-size: .78rem; font-weight: 600; gap: .4rem; line-height: 1.25; min-width: 0; padding: .23rem .5rem .23rem .28rem; text-align: left; width: 100%; }
.shift-operator[data-shift-draggable] { cursor: grab; touch-action: none; user-select: none; }
.shift-operator[data-shift-draggable]:active { cursor: grabbing; }
.shift-operator-position { background: var(--bubble-badge); border-radius: 999px; color: inherit; flex: none; font-size: .66rem; font-weight: 800; padding: .14rem .38rem; white-space: nowrap; }
.shift-operator-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-operator-edit-icon { font-size: .7rem; opacity: 0; }
.shift-operator:hover .shift-operator-edit-icon, .shift-operator:focus-visible .shift-operator-edit-icon { opacity: 1; }
.shift-schedule-table .shift-operator.shift-group-0, .shift-drag-ghost.shift-group-0, .shift-drop-marker.shift-group-0 { --bubble-bg: #273a24; --bubble-border: #6d9f4a; --bubble-badge: #385830; --bubble-text: #d6f5c5; }
.shift-schedule-table .shift-operator.shift-group-1, .shift-drag-ghost.shift-group-1, .shift-drop-marker.shift-group-1 { --bubble-bg: #392b48; --bubble-border: #a876ca; --bubble-badge: #573968; --bubble-text: #efd8fb; }
.shift-schedule-table .shift-operator.shift-group-2, .shift-drag-ghost.shift-group-2, .shift-drop-marker.shift-group-2 { --bubble-bg: #482c35; --bubble-border: #cf7884; --bubble-badge: #693c47; --bubble-text: #ffe1e4; }
.shift-schedule-table .shift-operator.shift-group-3, .shift-drag-ghost.shift-group-3, .shift-drop-marker.shift-group-3 { --bubble-bg: #213e4d; --bubble-border: #55a8cb; --bubble-badge: #315b6e; --bubble-text: #d1f1ff; }
.shift-operator:hover, .shift-operator:focus-visible { filter: brightness(1.16); outline: 2px solid var(--bubble-border); outline-offset: 1px; }
.shift-operator.shift-is-dragging { opacity: .45; }
.shift-drag-active .shift-operator { pointer-events: none; }
.shift-drag-ghost { box-shadow: 0 8px 22px #0008; left: 0; overflow: visible; pointer-events: none; position: fixed; top: 0; will-change: transform; z-index: 9999; }
.shift-drag-position { background: var(--bubble-bg); border: 1px solid var(--bubble-border); border-radius: 4px; bottom: calc(100% + 5px); box-shadow: 0 4px 12px #0007; color: var(--bubble-text); font-size: .7rem; font-weight: 800; left: 50%; padding: 3px 7px; position: absolute; transform: translateX(-50%); white-space: nowrap; }
.shift-drag-position[hidden] { display: none !important; }
.shift-drop-marker { border-top: 3px solid var(--bubble-border); height: 0; left: 0; pointer-events: none; position: fixed; top: 0; will-change: transform; z-index: 9998; }
.shift-drop-marker.is-empty { background: var(--bubble-bg); border: 2px dashed var(--bubble-border); border-radius: 999px; height: 27px; }
.shift-drop-marker[hidden] { display: none; }
.shift-drop-empty { outline: 2px dashed #6db9ed; outline-offset: -3px; }
.shift-cell-add { align-items: center; background: transparent; border: 1px solid #50637b; border-radius: 3px; color: #b4c5d7; display: inline-flex; font-size: .85rem; height: 20px; justify-content: center; line-height: 1; opacity: 0; padding: 0; position: absolute; right: .35rem; top: .35rem; width: 20px; }
.shift-slot-empty .shift-cell-add { opacity: .45; }
.shift-slot:hover .shift-cell-add, .shift-slot:focus-within .shift-cell-add { opacity: 1; }
.shift-cell-add[hidden] { display: none !important; }
.shift-cell-add:hover, .shift-cell-add:focus-visible { border-color: #5a7694; color: #fff; }
.shift-cell-form { align-items: center; display: flex; gap: .2rem; min-width: 0; width: 100%; }
.shift-cell-form .form-control { flex: 1 1 0; font-size: .75rem; min-width: 0; padding: .25rem .35rem; }
.shift-operator-search { flex: 1 1 0; min-width: 0; position: relative; width: 100%; }
.shift-operator-search .form-control { width: 100%; }
.shift-operator-search-results {
  background: #172538;
  border: 1px solid #4a6079;
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(0,0,0,.32);
  left: 0;
  max-height: 220px;
  min-width: 210px;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
}
.shift-operator-search-results[hidden] { display: none !important; }
.shift-operator-search-option {
  background: transparent;
  border: 0;
  color: #e6edf6;
  display: block;
  font-size: .78rem;
  padding: .45rem .55rem;
  text-align: left;
  width: 100%;
}
.shift-operator-search-option:hover,
.shift-operator-search-option:focus-visible { background: #29415b; color: #fff; outline: 0; }
.shift-operator-search-empty { color: #91a4ba; display: block; font-size: .75rem; padding: .55rem; }
.shift-cell-confirm, .shift-cell-cancel { align-items: center; background: #225a45; border: 1px solid #4fa47d; border-radius: 4px; color: #fff; display: inline-flex; flex: 0 0 28px; height: 28px; justify-content: center; padding: 0; }
.shift-cell-cancel { background: #182538; border-color: #465873; color: #cbd5e1; }
.shift-cell-confirm:hover, .shift-cell-confirm:focus-visible { background: #2b795b; }
.shift-cell-cancel:hover, .shift-cell-cancel:focus-visible { background: #24344a; border-color:#5b83ad; color:#fff; }
.shift-cell-edit { align-items: stretch; display: grid; gap: .3rem; }
.shift-cell-edit .shift-cell-edit-name { width: 100%; }
.shift-cell-edit-fields { display: flex; gap: .3rem; min-width: 0; }
.shift-cell-edit-fields .form-control { flex: 1 1 120px; width: 0; }
.shift-cell-edit-fields .form-select { flex: 1 1 90px; font-size: .75rem; min-width: 0; padding: .25rem 1.4rem .25rem .35rem; width: 0; }
.shift-cell-edit-actions, .shift-cell-remove-confirm { align-items: center; display: flex; gap: .3rem; }
.shift-cell-edit-actions[hidden], .shift-cell-remove-confirm[hidden] { display: none !important; }
.shift-cell-remove-confirm { color: var(--bs-body-color); font-size: .75rem; }
.shift-cell-remove-confirm span { flex: 1; }
.shift-cell-remove { align-items: center; background: rgba(244,63,94,.10); border: 1px solid rgba(251,113,133,.55); border-radius: 4px; color: #fda4af; display: inline-flex; flex: 0 0 28px; height: 28px; justify-content: center; padding: 0; }
.shift-cell-remove:hover, .shift-cell-remove:focus-visible { background: #be123c; border-color:#fb7185; color: #fff; }
.annual-leave-table { min-width: 980px; table-layout: fixed; width: 100%; }
.annual-leave-table th, .annual-leave-table td { border-color: #31445f; padding: .75rem .85rem; vertical-align: middle; }
.annual-leave-table th { background: #263a55; color: #f8fafc; font-size: .75rem; text-transform: uppercase; }
.annual-leave-table th:nth-child(1) { width: 21%; }
.annual-leave-table th:nth-child(2) { width: 12%; }
.annual-leave-table th:nth-child(3) { width: 20%; }
.annual-leave-table th:nth-child(4) { width: 13%; }
.annual-leave-table th:nth-child(5) { width: 16%; }
.annual-leave-table th:nth-child(6) { width: 10%; }
.annual-leave-table th:nth-child(7) { width: 8%; }
.annual-leave-table tbody tr:nth-child(odd) > * { background: #101a2b; }
.annual-leave-table tbody tr:nth-child(even) > * { background: #142137; }
.annual-leave-table tbody tr:hover > * { background: #192a45; }
.annual-leave-table tbody tr.has-high-leave > * { box-shadow: inset 0 1px rgba(245,158,11,.25), inset 0 -1px rgba(245,158,11,.25); }
.annual-operator-name { color: var(--bs-body-color); font-weight: 700; }
.annual-balance { color: #bfdbfe; font-size: 1rem; }
.annual-balance.is-high { color: #fbbf24; }
.annual-leave-rate { align-items: center; color: #93c5fd; display: inline-flex; font-size: .8rem; font-weight: 700; gap: .35rem; white-space: nowrap; }
.annual-rate { color: #86efac; font-weight: 700; }
.annual-total-input { min-width: 105px; }
.annual-status-badge { border: 1px solid transparent; border-radius: 999px; display: inline-flex; font-size: .72rem; font-weight: 700; padding: .28rem .55rem; white-space: nowrap; }
.annual-status-badge.is-current { background: rgba(34,197,94,.12); border-color: rgba(74,222,128,.4); color: #86efac; }
.annual-status-badge.is-unset { background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.35); color: #cbd5e1; }
.annual-status-badge.is-warning { background: rgba(245,158,11,.14); border-color: rgba(251,191,36,.48); color: #fbbf24; }
.annual-save-button { align-items: center; display: inline-flex; gap: .35rem; justify-content: center; }
.annual-leave-alert { background: rgba(245,158,11,.12); border-bottom: 1px solid rgba(251,191,36,.35); color: #fcd34d; font-size: .875rem; font-weight: 700; padding: .7rem 1rem; }
.annual-leave-alert[hidden] { display: none !important; }
html[data-theme="light"] .shift-slot { --shift-base: #f7f9fc; --shift-alt: #f1f5f9; --shift-hover: #e8eef5; }
html[data-theme="light"] .shift-operator-search-results { background: #fff; border-color: #cbd5e1; box-shadow: 0 10px 24px rgba(15,23,42,.16); }
html[data-theme="light"] .shift-operator-search-option { color: #243448; }
html[data-theme="light"] .shift-operator-search-option:hover,
html[data-theme="light"] .shift-operator-search-option:focus-visible { background: #e8f1fb; color: #15263b; }
html[data-theme="light"] .shift-operator-search-empty { color: #64748b; }
html[data-theme="light"] .reserve-schedule-grid { background: #f1f5f9; }
html[data-theme="light"] .reserve-seat-schedule { border-color: #cbd5e1; }
html[data-theme="light"] .reserve-seat-title { background: #e6eef7; border-color: #cbd5e1; color: #243448; }
html[data-theme="light"] .reserve-schedule-table th { background: #dce8f4; color: #243448; }
html[data-theme="light"] .reserve-schedule-table tbody td { background: #fff; }
html[data-theme="light"] .reserve-schedule-table tbody tr:nth-child(even) td { background: #f8fafc; }
html[data-theme="light"] .reserve-schedule-table .reserve-month-row th { background: #d5e3f0; color: #26384c; }
html[data-theme="light"] .reserve-operator-cell { color: #155b76; }
html[data-theme="light"] .shift-schedule-table .shift-month-row th { background: #dce8f4; color: #26384c; }
html[data-theme="light"] .shift-schedule-table .shift-weekend-off { background: #fff8c9 !important; color: #5f5400; }
html[data-theme="light"] .shift-weekend-row:hover .shift-weekend-off { background: #fff3a8 !important; }
html[data-theme="light"] .shift-schedule-table .shift-operator.shift-group-0, html[data-theme="light"] .shift-drag-ghost.shift-group-0, html[data-theme="light"] .shift-drop-marker.shift-group-0 { --bubble-bg: #e8f5dd; --bubble-border: #8ab96c; --bubble-badge: #cce8ba; --bubble-text: #315b1f; }
html[data-theme="light"] .shift-schedule-table .shift-operator.shift-group-1, html[data-theme="light"] .shift-drag-ghost.shift-group-1, html[data-theme="light"] .shift-drop-marker.shift-group-1 { --bubble-bg: #f3eafa; --bubble-border: #bc94d7; --bubble-badge: #e7d5f3; --bubble-text: #694285; }
html[data-theme="light"] .shift-schedule-table .shift-operator.shift-group-2, html[data-theme="light"] .shift-drag-ghost.shift-group-2, html[data-theme="light"] .shift-drop-marker.shift-group-2 { --bubble-bg: #fbe9ed; --bubble-border: #dc9aa5; --bubble-badge: #f2cfd6; --bubble-text: #8a394a; }
html[data-theme="light"] .shift-schedule-table .shift-operator.shift-group-3, html[data-theme="light"] .shift-drag-ghost.shift-group-3, html[data-theme="light"] .shift-drop-marker.shift-group-3 { --bubble-bg: #e2f3fa; --bubble-border: #7fbcd5; --bubble-badge: #c2e6f3; --bubble-text: #155b76; }
html[data-theme="light"] .shift-schedule-table td:first-child, html[data-theme="light"] .shift-schedule-table td:nth-child(2) { background: #f8fafc; }
html[data-theme="light"] .shift-cell-add { color: #3a5e7a; }
html[data-theme="light"] .shift-schedule-table th, html[data-theme="light"] .annual-leave-table th { background: #e6eef7; color: #243448; }
html[data-theme="light"] .annual-leave-table tbody tr:nth-child(odd) > * { background:#ffffff; }
html[data-theme="light"] .annual-leave-table tbody tr:nth-child(even) > * { background:#f7f9fc; }
html[data-theme="light"] .annual-leave-table tbody tr:hover > * { background:#eef5ff; }
html[data-theme="light"] .annual-balance { color:#1d4ed8; }
html[data-theme="light"] .annual-balance.is-high { color:#b45309; }
html[data-theme="light"] .annual-leave-rate { color:#2563eb; }
html[data-theme="light"] .annual-rate { color:#15803d; }
html[data-theme="light"] .annual-status-badge.is-current { background:#dcfce7;border-color:#86efac;color:#166534; }
html[data-theme="light"] .annual-status-badge.is-unset { background:#f1f5f9;border-color:#cbd5e1;color:#475569; }
html[data-theme="light"] .annual-status-badge.is-warning { background:#fef3c7;border-color:#fcd34d;color:#92400e; }
html[data-theme="light"] .annual-leave-alert { background:#fffbeb;border-color:#fcd34d;color:#92400e; }
html[data-theme="light"] .scheduled-overtime-table th { background:#e6eef7;color:#243448; }
html[data-theme="light"] .scheduled-overtime-table tbody tr:nth-child(odd) > * { background:#fff; }
html[data-theme="light"] .scheduled-overtime-table tbody tr:nth-child(even) > * { background:#f7f9fc; }
html[data-theme="light"] .scheduled-overtime-table tbody tr:hover > * { background:#eef5ff; }
html[data-theme="light"] .shift-operator:hover, html[data-theme="light"] .shift-operator:focus-visible { filter: brightness(.96); }
@media (hover: none) {
  .shift-operator-edit-icon, .shift-cell-add { opacity: .75; pointer-events: auto; }
}
@media (max-width: 700px) {
  .shift-schedule-panel .panel-header { align-items: stretch; flex-direction: column; }
  .shift-header-actions { align-items: end; }
  .shift-department-field { min-width: 0; }
  .schedule-tab { padding-inline: .7rem; }
}
.scheduled-leave-page {
  max-width: 1760px;
}

.scheduled-leave-period {
  align-items: end;
  display: flex;
  gap: var(--space-2);
}
.scheduled-leave-period[hidden] { display: none !important; }

.scheduled-leave-period .upload-date-field {
  min-width: 142px;
}

.scheduled-search-native {
  display: none !important;
}

.scheduled-search-select {
  min-width: 0;
  position: relative;
  width: 100%;
}

.scheduled-search-toggle {
  align-items: center;
  background: #0b1424;
  border: 1px solid #344963;
  border-radius: 5px;
  color: #e5e7eb;
  display: flex;
  font-size: .8rem;
  gap: .5rem;
  justify-content: space-between;
  min-height: 34px;
  min-width: 0;
  padding: .35rem .55rem;
  text-align: left;
  width: 100%;
}

.scheduled-leave-period .scheduled-search-toggle {
  font-size: .875rem;
  min-height: 38px;
  padding-inline: .75rem;
}

.scheduled-search-toggle:hover:not(:disabled) {
  border-color: #4f6d93;
}

.scheduled-search-toggle:focus-visible,
.scheduled-search-select.is-open .scheduled-search-toggle {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, .14);
  outline: 0;
}

.scheduled-search-toggle:disabled {
  color: #64748b;
  cursor: default;
  opacity: 1;
}

.scheduled-search-toggle.is-placeholder {
  color: #94a3b8;
}

.scheduled-search-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scheduled-search-toggle .bi {
  color: #cbd5e1;
  flex: 0 0 auto;
  font-size: .72rem;
  transition: transform .14s ease;
}

.scheduled-search-select.is-open .scheduled-search-toggle .bi {
  transform: rotate(180deg);
}

.scheduled-search-menu {
  background: #0b1424;
  border: 1px solid #456080;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .38);
  max-height: min(320px, calc(100vh - 16px));
  overflow: hidden;
  padding: .4rem;
  position: fixed;
  z-index: 1095;
}

.scheduled-search-input {
  background: #111d31;
  border: 1px solid #3d5575;
  border-radius: 5px;
  color: #f8fafc;
  font-size: .8rem;
  min-height: 34px;
  outline: 0;
  padding: .4rem .55rem;
  width: 100%;
}

.scheduled-search-input::placeholder {
  color: #8291a8;
}

.scheduled-search-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, .14);
}

.scheduled-search-options {
  max-height: 248px;
  overflow-y: auto;
  padding-top: .35rem;
}

.scheduled-search-option {
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #e5e7eb;
  display: block;
  font-size: .8rem;
  padding: .45rem .55rem;
  text-align: left;
  width: 100%;
}

.scheduled-search-option:hover,
.scheduled-search-option:focus-visible {
  background: #1d3352;
  color: #fff;
  outline: 0;
}

.scheduled-search-option[aria-selected="true"] {
  background: #23446f;
  color: #dbeafe;
  font-weight: 700;
}

.scheduled-search-empty {
  color: #94a3b8;
  font-size: .78rem;
  padding: .7rem .55rem;
  text-align: center;
}

.scheduled-leave-panel {
  background: #101a2b;
  border: 1px solid #31445f;
  border-left: 5px solid #60a5fa;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
}

.scheduled-leave-panel .panel-header {
  align-items: center;
  background: #17243a;
  border-bottom: 1px solid #31445f;
  display: flex;
  gap: var(--section-space);
  justify-content: space-between;
  margin: 0;
  padding: var(--space-3) var(--space-4);
}

.scheduled-leave-panel-title {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  min-width: 0;
}

.scheduled-leave-panel-title .section-title {
  margin: 0 !important;
}

.scheduled-leave-header-actions { align-items:center;display:flex;gap:.5rem; }
.scheduled-leave-header-actions .btn { align-items:center;display:inline-flex;gap:.38rem;white-space:nowrap; }

.scheduled-leave-count {
  align-items: center;
  background: rgba(96, 165, 250, .12);
  border: 1px solid rgba(96, 165, 250, .32);
  border-radius: 5px;
  color: #bfdbfe;
  display: inline-flex;
  font-size: .7rem;
  font-weight: 700;
  justify-content: center;
  min-height: 1.45rem;
  padding: .12rem .45rem;
  white-space: nowrap;
}

.scheduled-leave-panel [data-scheduled-leave-add] {
  align-items: center;
  background: #16a34a;
  border-color: #16a34a;
  display: inline-flex;
  gap: .35rem;
  font-weight: 700;
  min-height: 34px;
}

.scheduled-leave-action-symbol {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.scheduled-leave-panel [data-scheduled-leave-add]:hover,
.scheduled-leave-panel [data-scheduled-leave-add]:focus {
  background: #15803d;
  border-color: #15803d;
}

.scheduled-leave-status {
  color: var(--bs-secondary-color);
  font-size: .875rem;
  min-height: 1.4rem;
  padding: .55rem 1rem 0;
}

.scheduled-leave-status:empty { display: none; }

.scheduled-leave-status.is-success { color: var(--bs-success); }
.scheduled-leave-status.is-error { color: var(--bs-danger); }

.scheduled-leave-status.is-busy::before {
  animation: scheduled-leave-spin .8s linear infinite;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: .8rem;
  margin-right: .45rem;
  vertical-align: -.05rem;
  width: .8rem;
}

@keyframes scheduled-leave-spin { to { transform: rotate(360deg); } }

.scheduled-leave-table-wrap,
.scheduled-leave-days-wrap {
  overflow-x: auto;
  width: 100%;
}

.scheduled-overtime-download { align-items: center; display: inline-flex; gap: .4rem; white-space: nowrap; }
.scheduled-overtime-table { min-width: 1180px; table-layout: fixed; width: 100%; }
.scheduled-overtime-table th, .scheduled-overtime-table td { border-color: #31445f; padding: .65rem .7rem; vertical-align: middle; }
.scheduled-overtime-table th { background: #263957; color: #f8fbff; font-size: .7rem; text-transform: uppercase; white-space: nowrap; }
.scheduled-overtime-table th:nth-child(1) { width: 9%; }
.scheduled-overtime-table th:nth-child(2) { width: 11%; }
.scheduled-overtime-table th:nth-child(3) { width: 16%; }
.scheduled-overtime-table th:nth-child(4) { width: 16%; }
.scheduled-overtime-table th:nth-child(5) { width: 10%; }
.scheduled-overtime-table th:nth-child(6) { width: 17%; }
.scheduled-overtime-table th:nth-child(7) { width: 13%; }
.scheduled-overtime-table th:nth-child(8) { width: 8%; }
.scheduled-overtime-table tbody tr:nth-child(odd) > * { background: #101a2b; }
.scheduled-overtime-table tbody tr:nth-child(even) > * { background: #142137; }
.scheduled-overtime-table tbody tr:hover > * { background: #192a45; }
.scheduled-overtime-table .form-select, .scheduled-overtime-table .form-control { font-size: .8rem; min-height: 34px; }
.scheduled-overtime-hours { min-width: 72px; }
.scheduled-overtime-missing { color: #fbbf24; font-style: italic; }
.scheduled-leave-days-table .is-auto-filled { border-color: #4d79a8; color: var(--bs-body-color); opacity: 1; }
.schedule-history-modal .modal-content { background:#101a2b;border-color:#3a4d68; }
.schedule-history-modal .modal-header { background:#17243a;border-color:#31445f; }
.schedule-history-filters { align-items:end;background:#111d30;border-bottom:1px solid #31445f;display:flex;gap:.65rem;padding:.75rem 1rem; }
.schedule-history-filters label { color:var(--bs-secondary-color);display:grid;font-size:.75rem;gap:.2rem;min-width:150px; }
.schedule-history-table { min-width:900px;table-layout:fixed;width:100%; }
.schedule-history-table th,.schedule-history-table td { border-color:#31445f;padding:.68rem .75rem;vertical-align:middle; }
.schedule-history-table th { background:#263957;color:#f8fbff;font-size:.7rem;text-transform:uppercase;white-space:nowrap; }
.schedule-history-table tbody tr:nth-child(odd)>* { background:#101a2b; }
.schedule-history-table tbody tr:nth-child(even)>* { background:#142137; }
.schedule-history-table tbody tr:hover>* { background:#192a45; }

.scheduled-leave-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
}

.scheduled-leave-table th:nth-child(1) { width: 20%; }
.scheduled-leave-table th:nth-child(2) { width: 19%; }
.scheduled-leave-table th:nth-child(3) { width: 19%; }
.scheduled-leave-table th:nth-child(4),
.scheduled-leave-table th:nth-child(5) { width: 15%; }
.scheduled-leave-table th:nth-child(6) { width: 12%; }

.scheduled-leave-table td,
.scheduled-leave-table th,
.scheduled-leave-days-table td,
.scheduled-leave-days-table th {
  vertical-align: middle;
}

.scheduled-leave-table thead th,
.scheduled-leave-days-table thead th {
  background: #263957;
  border-bottom: 2px solid #83a0ca;
  border-right: 1px solid #3b5578;
  color: #f8fbff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: .72rem .65rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.scheduled-leave-table thead th:last-child,
.scheduled-leave-days-table thead th:last-child { border-right: 0; }

.scheduled-leave-table tbody td,
.scheduled-leave-days-table tbody td {
  border-bottom: 1px solid #2f405a;
  padding: .72rem .55rem;
}

.scheduled-leave-table tbody tr:nth-child(odd) > *,
.scheduled-leave-days-table tbody tr:nth-child(odd) > * { background: #101a2b; }

.scheduled-leave-table tbody tr:nth-child(even) > *,
.scheduled-leave-days-table tbody tr:nth-child(even) > * { background: #142137; }

.scheduled-leave-table tbody tr:hover > *,
.scheduled-leave-days-table tbody tr:hover > * { background: #192a45; }

.scheduled-leave-table .form-control,
.scheduled-leave-table .form-select,
.scheduled-leave-days-table .form-select {
  background-color: #0b1424;
  border-color: #344963;
  font-size: .8rem;
  min-height: 34px;
  min-width: 0;
  padding-bottom: .35rem;
  padding-top: .35rem;
  width: 100%;
}

.scheduled-leave-table .form-control:focus,
.scheduled-leave-table .form-select:focus,
.scheduled-leave-days-table .form-select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, .14);
}

.scheduled-leave-table input[type="date"] { cursor: pointer; }

.scheduled-leave-incomplete-count {
  align-items: center;
  background: #dc2626;
  border-radius: 4px;
  color: #fff;
  display: inline-flex;
  font-size: .68rem;
  font-weight: 800;
  justify-content: center;
  min-height: 1.25rem;
  min-width: 1.25rem;
  padding: .05rem .28rem;
}

.scheduled-leave-incomplete-count[hidden] {
  display: none !important;
}

.scheduled-leave-icon-action {
  align-items: center;
  display: inline-flex;
  gap: .35rem;
  justify-content: center;
  min-height: 34px;
  min-width: 0;
  padding-inline: .5rem;
  width: 100%;
}

.scheduled-leave-empty {
  align-items: center;
  background: #0d1728;
  color: #94a3b8;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  color: var(--bs-secondary-color);
  min-height: 145px;
  justify-content: center;
  padding: 1.5rem 1rem;
  text-align: center;
}

.scheduled-leave-empty[hidden] { display: none !important; }
.scheduled-leave-empty i { color: #60a5fa; font-size: 1.35rem; }

.scheduled-leave-details-row > td {
  background: #0d1728 !important;
  border-bottom-color: #3b5578 !important;
  padding: .65rem .75rem .8rem !important;
}

.scheduled-leave-operator-control {
  align-items: center;
  display: flex;
  gap: .45rem;
  min-width: 0;
}

.scheduled-leave-operator-control .scheduled-search-select {
  flex: 1 1 auto;
  min-width: 0;
}

.scheduled-leave-row-toggle {
  align-items: center;
  background: #17243a;
  border: 1px solid #4f7db8;
  border-radius: 5px;
  color: #bfdbfe;
  display: inline-flex;
  flex: 0 0 34px;
  height: 34px;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 34px;
}

.scheduled-leave-row-toggle:hover,
.scheduled-leave-row-toggle:focus-visible {
  background: #213552;
  border-color: #60a5fa;
  outline: none;
}

.scheduled-leave-row-toggle.is-incomplete {
  border-color: #ef4444;
  color: #fecaca;
}

.scheduled-leave-row-toggle[hidden] { display: none !important; }

.scheduled-leave-row-chevron {
  font-size: .92rem;
  line-height: 1;
}

.scheduled-leave-row-toggle .scheduled-leave-incomplete-count {
  font-size: .58rem;
  min-height: 1.05rem;
  min-width: 1.05rem;
  padding: 0 .2rem;
  position: absolute;
  right: -.4rem;
  top: -.45rem;
  z-index: 2;
}

.scheduled-leave-details-panel {
  background: #0d1728;
  padding: 0;
}

.scheduled-leave-details-panel[hidden] { display: none !important; }

.scheduled-leave-days-wrap {
  border: 1px solid #344963;
  border-radius: 5px;
  max-height: min(58vh, 560px);
  overflow: auto;
}

.scheduled-leave-days-table { min-width: 860px; }
.scheduled-leave-days-table thead { position: sticky; top: 0; z-index: 2; }
.scheduled-leave-days-table th:nth-child(1) { width: 15%; }
.scheduled-leave-days-table th:nth-child(2) { width: 18%; }
.scheduled-leave-days-table th:nth-child(3) { width: 20%; }
.scheduled-leave-days-table th:nth-child(4) { width: 30%; }
.scheduled-leave-days-table th:nth-child(5) { width: 12%; }
.scheduled-leave-days-table th:nth-child(6) { width: 5%; }
.scheduled-leave-remove-day { height: 2rem; padding: .25rem; width: 2rem; }

.scheduled-leave-days-table thead th {
  background: #223551;
  font-size: .68rem;
  padding-bottom: .62rem;
  padding-top: .62rem;
}

.scheduled-leave-days-table tbody td {
  height: 54px;
  padding: .58rem .65rem;
}

.scheduled-leave-days-table .scheduled-leave-weekday {
  color: #e2e8f0;
  font-size: .84rem;
  font-weight: 650;
}

.scheduled-leave-days-table .scheduled-leave-date {
  color: #bfdbfe;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.scheduled-leave-days-table .form-select {
  border-radius: 5px;
  font-size: .78rem;
}

.scheduled-leave-days-table .form-select.is-placeholder {
  color: #94a3b8;
}

.scheduled-leave-days-table .form-select option {
  color: #e5e7eb;
}

.scheduled-leave-remove-day {
  align-items: center;
  border-radius: 5px;
  display: inline-flex;
  justify-content: center;
}

@media (max-width: 767.98px) {
  .scheduled-leave-period { align-items: stretch; display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .scheduled-leave-period .upload-date-field { min-width: 0; }
  .scheduled-leave-panel .panel-header { align-items: center; }
  .scheduled-leave-header-actions { align-items:stretch;flex-wrap:wrap;justify-content:flex-end; }
  .schedule-history-filters { align-items:stretch;display:grid;grid-template-columns:1fr 1fr; }
  .schedule-history-filters label { min-width:0; }
  .scheduled-leave-panel-title { align-items: flex-start; flex-direction: column; gap: .4rem; }
  .scheduled-leave-table { min-width: 980px; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .scheduled-leave-table { min-width: 980px; }
}

/* Light mode refinement: stronger hierarchy, readable accents, and true light
   surfaces for modules that use dedicated dark-mode component styling. */
html[data-theme="light"] {
  --admin-bg: #f3f6fa;
  --admin-surface: #ffffff;
  --admin-surface-soft: #f7f9fc;
  --admin-border: #cfd9e6;
  --admin-text: #172033;
  --admin-muted: #5f6b7a;
  --admin-warning: #a34b08;
  --admin-shadow-sm: 0 6px 18px rgba(15, 23, 42, .06);
  --admin-shadow: 0 12px 32px rgba(15, 23, 42, .08);
  --admin-shadow-lg: 0 20px 52px rgba(15, 23, 42, .12);
}

html[data-theme="light"] body,
html[data-theme="light"] .admin-main,
html[data-theme="light"] .dashboard-content {
  background: linear-gradient(180deg, #f8fafc 0%, #f3f6fa 52%, #edf2f7 100%);
}

html[data-theme="light"] .admin-navbar {
  border-bottom-color: #d7e0ea;
  box-shadow: 0 5px 18px rgba(15, 23, 42, .05);
}

html[data-theme="light"] .panel,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .sheet-wrap {
  border-color: var(--admin-border);
}

html[data-theme="light"] .page-icon,
html[data-theme="light"] .section-title i,
html[data-theme="light"] .profile-info-icon,
html[data-theme="light"] .operator-password-icon,
html[data-theme="light"] .compare-approval-icon,
html[data-theme="light"] .compare-graph-empty-icon {
  background: #e8f1ff;
  color: #1d4ed8;
}

html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: var(--admin-text);
}

html[data-theme="light"] .form-control::placeholder { color: #7b8797; }
html[data-theme="light"] .table thead th { color: #526174; }

html[data-theme="light"] .assignment-side {
  background: #ffffff;
  border-color: #cfd9e6;
  box-shadow: var(--admin-shadow-sm);
}

html[data-theme="light"] .assignment-side:nth-child(1),
html[data-theme="light"] .assignment-side:nth-child(2) {
  background: linear-gradient(180deg, #f8fbff, #f3f7fc);
  border-color: #c9daf2;
}

html[data-theme="light"] .assignment-side:nth-child(1) .assignment-side-heading span,
html[data-theme="light"] .assignment-side:nth-child(2) .assignment-side-heading span,
html[data-theme="light"] .assignment-move-department:hover,
html[data-theme="light"] .assignment-move-department:focus,
html[data-theme="light"] .assignment-move-department.is-selected {
  color: #1d4ed8;
}

html[data-theme="light"] .reserved-worked-modal { color-scheme: light; }
html[data-theme="light"] .reserved-worked-modal .modal-content,
html[data-theme="light"] .reserved-worked-modal .modal-header,
html[data-theme="light"] .reserved-worked-modal .modal-body,
html[data-theme="light"] .reserved-worked-modal .modal-footer {
  background-color: #ffffff !important;
  color: var(--admin-text) !important;
}

html[data-theme="light"] .reserved-worked-modal .modal-content {
  border-color: #cfd9e6;
  box-shadow: var(--admin-shadow-lg);
}

html[data-theme="light"] .reserved-worked-modal .modal-header,
html[data-theme="light"] .reserved-worked-modal .modal-footer { border-color: #dbe3ed; }
html[data-theme="light"] .reserved-worked-modal .reserved-modal-period,
html[data-theme="light"] .reserved-worked-modal .reserved-worked-help,
html[data-theme="light"] .reserved-worked-modal .reserved-worked-field > span { color: var(--admin-muted) !important; }

html[data-theme="light"] .reserved-worked-modal .form-control,
html[data-theme="light"] .reserved-worked-modal .form-select,
html[data-theme="light"] .reserved-worked-modal .form-control:focus,
html[data-theme="light"] .reserved-worked-modal .form-select:focus {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: var(--admin-text) !important;
}

html[data-theme="light"] .reserved-worked-modal .form-control:focus,
html[data-theme="light"] .reserved-worked-modal .form-select:focus { border-color: #60a5fa !important; }
html[data-theme="light"] .reserved-worked-modal .form-select option { background:#fff;color:var(--admin-text); }
html[data-theme="light"] .reserved-worked-row { background:#f7f9fc;border-color:#d6e0eb; }

html[data-theme="light"] .shift-schedule-panel { border-color: #cbd5e1; }
html[data-theme="light"] .shift-schedule-table td,
html[data-theme="light"] .shift-schedule-table th,
html[data-theme="light"] .annual-leave-table td,
html[data-theme="light"] .annual-leave-table th { border-color:#cbd5e1; }
html[data-theme="light"] .shift-cell-add { border-color:#94a3b8;color:#475569; }
html[data-theme="light"] .shift-cell-add:hover,
html[data-theme="light"] .shift-cell-add:focus-visible { border-color:#2563eb;color:#1d4ed8; }
html[data-theme="light"] .shift-cell-cancel { background:#f8fafc;border-color:#cbd5e1;color:#475569; }
html[data-theme="light"] .shift-cell-cancel:hover,
html[data-theme="light"] .shift-cell-cancel:focus-visible { background:#eef2f7;border-color:#94a3b8;color:#172033; }
html[data-theme="light"] .shift-cell-remove { color:#be123c; }

html[data-theme="light"] .scheduled-search-toggle,
html[data-theme="light"] .scheduled-search-input {
  background:#ffffff;
  border-color:#cbd5e1;
  color:var(--admin-text);
}

html[data-theme="light"] .scheduled-search-toggle .bi { color:#64748b; }
html[data-theme="light"] .scheduled-search-toggle:hover:not(:disabled) { border-color:#60a5fa; }
html[data-theme="light"] .scheduled-search-menu {
  background:#ffffff;
  border-color:#cbd5e1;
  box-shadow:0 12px 28px rgba(15,23,42,.14);
}

html[data-theme="light"] .scheduled-search-option { color:#334155; }
html[data-theme="light"] .scheduled-search-option:hover,
html[data-theme="light"] .scheduled-search-option:focus-visible { background:#eef5ff;color:#172033; }
html[data-theme="light"] .scheduled-search-option[aria-selected="true"] { background:#dbeafe;color:#1d4ed8; }

html[data-theme="light"] .scheduled-leave-panel {
  background:#ffffff;
  border-color:#cbd5e1;
  border-left-color:#3b82f6;
  box-shadow:var(--admin-shadow-sm);
}

html[data-theme="light"] .scheduled-leave-panel .panel-header { background:#f7f9fc;border-color:#d6e0eb; }
html[data-theme="light"] .scheduled-leave-count { background:#e8f1ff;border-color:#bfdbfe;color:#1d4ed8; }
html[data-theme="light"] .scheduled-leave-table thead th,
html[data-theme="light"] .scheduled-leave-days-table thead th {
  background:#e8eef6;
  border-bottom-color:#aabbd0;
  border-right-color:#cbd5e1;
  color:#334155;
}

html[data-theme="light"] .scheduled-leave-table tbody td,
html[data-theme="light"] .scheduled-leave-days-table tbody td { border-bottom-color:#dbe3ed; }
html[data-theme="light"] .scheduled-leave-table tbody tr:nth-child(odd) > *,
html[data-theme="light"] .scheduled-leave-days-table tbody tr:nth-child(odd) > * { background:#ffffff; }
html[data-theme="light"] .scheduled-leave-table tbody tr:nth-child(even) > *,
html[data-theme="light"] .scheduled-leave-days-table tbody tr:nth-child(even) > * { background:#f7f9fc; }
html[data-theme="light"] .scheduled-leave-table tbody tr:hover > *,
html[data-theme="light"] .scheduled-leave-days-table tbody tr:hover > * { background:#eef5ff; }

html[data-theme="light"] .scheduled-leave-table .form-control,
html[data-theme="light"] .scheduled-leave-table .form-select,
html[data-theme="light"] .scheduled-leave-days-table .form-select { background-color:#ffffff;border-color:#cbd5e1;color:#172033; }
html[data-theme="light"] .scheduled-leave-empty,
html[data-theme="light"] .scheduled-leave-details-row > td,
html[data-theme="light"] .scheduled-leave-details-panel { background:#f7f9fc !important; }
html[data-theme="light"] .scheduled-leave-days-wrap { border-color:#cbd5e1; }
html[data-theme="light"] .scheduled-leave-row-toggle { background:#ffffff;border-color:#94a3b8;color:#2563eb; }
html[data-theme="light"] .scheduled-leave-row-toggle:hover,
html[data-theme="light"] .scheduled-leave-row-toggle:focus-visible { background:#e8f1ff;border-color:#3b82f6; }
html[data-theme="light"] .scheduled-leave-days-table .scheduled-leave-weekday { color:#334155; }
html[data-theme="light"] .scheduled-leave-days-table .scheduled-leave-date { color:#1d4ed8; }
html[data-theme="light"] .scheduled-leave-days-table .form-select option { color:#172033; }
html[data-theme="light"] .schedule-history-modal .modal-content { background:#fff;border-color:#cbd5e1; }
html[data-theme="light"] .schedule-history-modal .modal-header,
html[data-theme="light"] .schedule-history-filters { background:#f7f9fc;border-color:#d6e0eb; }
html[data-theme="light"] .schedule-history-table th { background:#e6eef7;color:#243448; }
html[data-theme="light"] .schedule-history-table tbody tr:nth-child(odd)>* { background:#fff; }
html[data-theme="light"] .schedule-history-table tbody tr:nth-child(even)>* { background:#f7f9fc; }

/* Remaining light-mode contrast refinements. */
html[data-theme="light"] .quick-review-heading span,
html[data-theme="light"] .dashboard-graph-quick-review-header h3 i,
html[data-theme="light"] .compare-state-icon,
html[data-theme="light"] .compare-graph-empty i {
  background:#e8f1ff;
  color:#1d4ed8;
}

html[data-theme="light"] .dashboard-graph-quick-review-item.is-above strong { color:#047857; }
html[data-theme="light"] .dashboard-graph-quick-review-item.is-average strong { color:#a34b08; }
html[data-theme="light"] .dashboard-graph-quick-review-item.is-below strong { color:#b91c1c; }
html[data-theme="light"] .quick-review-item-positive strong { color:#047857; }
html[data-theme="light"] .quick-review-item-negative strong { color:#b91c1c; }
html[data-theme="light"] .quick-review-panel [data-quick-review-average] { color:#172033; }
html[data-theme="light"] .settings-status { color:#1d4ed8; }
html[data-theme="light"] .password-generate-button,
html[data-theme="light"] .password-generate-button:hover,
html[data-theme="light"] .password-generate-button:focus-visible { color:#1d4ed8; }

html[data-theme="light"] .compare-change-positive { color:#047857 !important; }
html[data-theme="light"] .compare-change-negative { color:#b91c1c !important; }
html[data-theme="light"] .compare-verdict p,
html[data-theme="light"] .compare-verdict-title-label { color:#334155; }
html[data-theme="light"] .compare-verdict-title-outcome-positive,
html[data-theme="light"] .compare-verdict-outcome-positive,
html[data-theme="light"] .compare-verdict-positive .compare-verdict-icon { color:#047857; }
html[data-theme="light"] .compare-verdict-title-outcome-negative,
html[data-theme="light"] .compare-verdict-outcome-negative,
html[data-theme="light"] .compare-verdict-negative .compare-verdict-icon { color:#b91c1c; }
html[data-theme="light"] .compare-verdict-title-outcome-neutral,
html[data-theme="light"] .compare-verdict-outcome-neutral,
html[data-theme="light"] .compare-verdict-neutral .compare-verdict-icon { color:#1d4ed8; }
html[data-theme="light"] .compare-verdict-positive { background:#f0fdf4;border-color:#86efac; }
html[data-theme="light"] .compare-verdict-negative { background:#fef2f2;border-color:#fca5a5; }
html[data-theme="light"] .compare-verdict-neutral { background:#eff6ff;border-color:#93c5fd; }

html[data-theme="light"] .ticket-dashboard-heading { background:#2563eb;border-bottom-color:#1d4ed8; }
html[data-theme="light"] .ticket-dashboard-heading-save { background:#15803d;border-color:#166534; }