/* StaffSwift V3.2.0 — Apple-style responsive and light/dark visibility layer */
:root {
  color-scheme: light;
  --ss-page: #f5f5f7;
  --ss-page-soft: #fbfbfd;
  --ss-surface: rgba(255,255,255,.86);
  --ss-surface-solid: #ffffff;
  --ss-surface-2: #f2f2f7;
  --ss-surface-3: #e9e9ef;
  --ss-text: #161617;
  --ss-text-2: #424245;
  --ss-text-3: #6e6e73;
  --ss-border: rgba(60,60,67,.17);
  --ss-border-strong: rgba(60,60,67,.28);
  --ss-accent: #b8891a;
  --ss-accent-strong: #946b10;
  --ss-accent-soft: rgba(184,137,26,.12);
  --ss-blue: #0066cc;
  --ss-green: #168548;
  --ss-red: #d70015;
  --ss-amber: #b25000;
  --ss-shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.055);
  --ss-shadow-2: 0 18px 60px rgba(0,0,0,.11);
  --ss-radius-xs: 10px;
  --ss-radius-sm: 14px;
  --ss-radius-md: 18px;
  --ss-radius-lg: 24px;
  --ss-control-h: 44px;
  --ss-safe-x: max(14px, env(safe-area-inset-left));
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ss-page: #000000;
  --ss-page-soft: #101010;
  --ss-surface: rgba(29,29,31,.88);
  --ss-surface-solid: #1d1d1f;
  --ss-surface-2: #2c2c2e;
  --ss-surface-3: #3a3a3c;
  --ss-text: #f5f5f7;
  --ss-text-2: #d2d2d7;
  --ss-text-3: #a1a1a6;
  --ss-border: rgba(255,255,255,.14);
  --ss-border-strong: rgba(255,255,255,.25);
  --ss-accent: #d2aa55;
  --ss-accent-strong: #f0cf82;
  --ss-accent-soft: rgba(210,170,85,.16);
  --ss-blue: #2997ff;
  --ss-green: #30d158;
  --ss-red: #ff453a;
  --ss-amber: #ff9f0a;
  --ss-shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.32);
  --ss-shadow-2: 0 24px 72px rgba(0,0,0,.52);

  /* Map existing project tokens to the dark palette. */
  --page: var(--ss-page);
  --white: var(--ss-surface-solid);
  --s2: var(--ss-surface-2);
  --s3: var(--ss-surface-3);
  --border: var(--ss-border);
  --border2: var(--ss-border-strong);
  --t1: var(--ss-text);
  --t2: var(--ss-text-2);
  --t3: var(--ss-text-3);
  --bg: var(--ss-page);
  --surface: var(--ss-surface-solid);
  --surface2: var(--ss-surface-2);
  --line: var(--ss-border);
  --line2: var(--ss-border-strong);
  --text: var(--ss-text);
  --muted: var(--ss-text-2);
  --muted2: var(--ss-text-3);
  --sb-bg: #171719;
  --sb-br: var(--ss-border);
  --sb-text: #c7c7cc;
  --sb-icon: #98989d;
  --sb-act-bg: var(--ss-accent-soft);
  --sb-act-text: #fff;
  --gold-bg: var(--ss-accent-soft);
  --gold-b: rgba(210,170,85,.35);
  --green-bg: rgba(48,209,88,.12);
  --green-b: rgba(48,209,88,.28);
  --amber-bg: rgba(255,159,10,.12);
  --amber-b: rgba(255,159,10,.3);
  --red-bg: rgba(255,69,58,.12);
  --red-b: rgba(255,69,58,.3);
  --blue-bg: rgba(41,151,255,.12);
  --blue-b: rgba(41,151,255,.3);
}

html { overflow-x: hidden; background: var(--ss-page); }
body {
  background: var(--ss-page) !important;
  color: var(--ss-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "DM Sans", Arial, sans-serif !important;
  font-size: 15px;
  line-height: 1.52;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body, .main, .content, .page, .ap-main, .cp-main, .ss-panel-main, .ss-main {
  min-width: 0;
}

h1,h2,h3,h4,h5,h6,.pt,.section-title,.ss-page-title,.topbar-page-title {
  color: var(--ss-text) !important;
  letter-spacing: -.018em;
  text-wrap: balance;
}
p,.ps,.section-sub,.ss-page-sub,.muted,.help,.hint,small {
  color: var(--ss-text-2);
}

/* Glass-like navigation and surfaces. */
.topbar,.ss-header,.site-header,.auth-topbar,header.ss-header {
  background: color-mix(in srgb, var(--ss-surface-solid) 82%, transparent) !important;
  border-color: var(--ss-border) !important;
  box-shadow: 0 1px 0 var(--ss-border);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.sidebar,.ss-sidebar {
  background: color-mix(in srgb, var(--ss-surface-solid) 94%, transparent) !important;
  border-color: var(--ss-border) !important;
}

.card,.tbl,.stat-card,.kpi,.approval-card,.balance-hero,.ss-card,.ss-stat,.ss-item,
.panel,.box,.widget,.notice-card,.service-card,.address-card,.schedule-card,
.auth-card,.form-card,.profile-card,.settings-card,.integration-card,
.modal-content,.mc,.dropdown-menu,.srj-offer-card,.int-off,.int-card,.cs3-setup-item,.cpr-progress,.cpm-card-element,.cbs-ready-help,.cbs-order-error,.bot,.adm-run-cell,.adm-alert,.spx-card,.cdb-card {
  background: var(--ss-surface) !important;
  color: var(--ss-text) !important;
  border-color: var(--ss-border) !important;
  border-radius: var(--ss-radius-md) !important;
  box-shadow: var(--ss-shadow-1);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
}

.ch,.card-header,.mh,.modal-header,.panel-heading,.ss-card-header {
  background: transparent !important;
  color: var(--ss-text) !important;
  border-color: var(--ss-border) !important;
}
.cb,.card-body,.mb,.modal-body { color: var(--ss-text-2); }

/* Apple-like controls. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,textarea,.input,.ss-input,.ss-select,.ss-textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--ss-control-h);
  padding: 10px 12px;
  border: 1px solid var(--ss-border-strong) !important;
  border-radius: var(--ss-radius-xs) !important;
  background: var(--ss-surface-solid) !important;
  color: var(--ss-text) !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.025);
}
input::placeholder,textarea::placeholder { color: var(--ss-text-3) !important; opacity: 1; }
input:focus,select:focus,textarea:focus,.input:focus,.ss-input:focus,.ss-select:focus,.ss-textarea:focus {
  outline: none !important;
  border-color: var(--ss-blue) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ss-blue) 18%, transparent) !important;
}
input[disabled],select[disabled],textarea[disabled] { opacity: .68; cursor: not-allowed; }
label,.fg label,.form-label { color: var(--ss-text-2) !important; font-weight: 650; }

button,.btn,.ss-btn,.bgold,.bog,.bgn,.brd,.bd,.topbar-btn,.hamburger,.ss-linkbtn {
  min-height: 40px;
  border-radius: 999px !important;
  font-weight: 650;
  letter-spacing: -.005em;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
button:hover,.btn:hover,.ss-btn:hover,.bgold:hover,.bog:hover,.bgn:hover,.brd:hover,.bd:hover,.ss-linkbtn:hover {
  transform: translateY(-1px);
}
button:active,.btn:active,.ss-btn:active,.bgold:active,.bog:active,.bgn:active,.brd:active,.bd:active,.ss-linkbtn:active {
  transform: scale(.985);
}
.btn-primary,.btn.primary,.ss-btn:not(.ss-btn-secondary),.bgold,.bgn {
  background: var(--ss-accent) !important;
  border-color: var(--ss-accent) !important;
  color: #fff !important;
}
.btn-secondary,.btn.secondary,.ss-btn-secondary,.bog,.brd,.bd,.topbar-btn,.hamburger,.ss-linkbtn {
  background: var(--ss-surface-solid) !important;
  border: 1px solid var(--ss-border) !important;
  color: var(--ss-text) !important;
}

/* Theme switcher. */
.ss-theme-toggle {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--ss-border) !important;
  border-radius: 50% !important;
  background: var(--ss-surface-solid) !important;
  color: var(--ss-text) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  cursor: pointer;
  z-index: 1000;
}
.ss-theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ss-theme-toggle-floating {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
}

/* Navigation refinements. */
.nav-item,.ss-sidebar-nav a,.ss-nav a,.links a,.nav-links a,.mm-link {
  border-radius: 12px;
  line-height: 1.25;
}
.nav-item.active,.ss-sidebar-nav a.active {
  background: var(--ss-accent-soft) !important;
  color: var(--ss-text) !important;
}
.topbar-avatar,.sb-avatar,.avatar,.profile-avatar,.adm-avatar {
  overflow: hidden;
  border: 1px solid var(--ss-border) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.08);
}
.topbar-avatar img,.sb-avatar img,.avatar img,.profile-avatar img { width:100%;height:100%;object-fit:cover;display:block; }

/* Layout spacing and fluidity. */
.content,.ap-main,.cp-main,.page.active,.ss-panel-main {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding: clamp(14px, 2vw, 30px) !important;
}
.ss-container,.wrap,.container,.site-container {
  width: min(100% - 28px, 1280px) !important;
  max-width: 1280px;
  margin-inline: auto;
}
.grid,.ss-grid,.stats-grid,.kpi-g,.cdb-kpi-grid,.fgg,.fgg3,.sp2,.grid-2,.grid-3,.grid-4 {
  min-width: 0;
}
.grid > *,.ss-grid > *,.stats-grid > *,.kpi-g > *,.cdb-kpi-grid > *,
.fgg > *,.fgg3 > *,.sp2 > *,.grid-2 > *,.grid-3 > *,.grid-4 > * { min-width: 0; }

/* Responsive tables stay clear without widening the page. */
.table-responsive,.table-wrap,.ss-table-wrap,.tbl,.card:has(table),.cb:has(> table),.card-body:has(> table) {
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
table,.data-table,.ss-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ss-text-2) !important;
  background: transparent !important;
}
th {
  color: var(--ss-text-3) !important;
  background: var(--ss-surface-2) !important;
  font-weight: 700;
  white-space: nowrap;
}
td { color: var(--ss-text-2) !important; background: transparent; }
tr:hover td { background: color-mix(in srgb, var(--ss-accent) 5%, transparent) !important; }

/* Alerts and badges. */
.ap-flash,.ss-alert,.alert,.notice,.banner,.profile-completion-notice {
  border-radius: var(--ss-radius-sm) !important;
  border-color: var(--ss-border) !important;
  box-shadow: none;
}
.ap-flash-success,.ss-alert-success,.alert-success { background: color-mix(in srgb, var(--ss-green) 12%, var(--ss-surface-solid)) !important; color: var(--ss-green) !important; }
.ap-flash-error,.ss-alert-error,.alert-danger,.alert-error { background: color-mix(in srgb, var(--ss-red) 12%, var(--ss-surface-solid)) !important; color: var(--ss-red) !important; }
.ap-flash-info,.ss-alert-info,.alert-info { background: color-mix(in srgb, var(--ss-blue) 11%, var(--ss-surface-solid)) !important; color: var(--ss-blue) !important; }
.badge,.status,.ss-badge,.pill,.chip { border-radius: 999px !important; }

/* Running jobs remain unmistakable in both modes. */
.live-job-highlight,tr.live-job-highlight>td,.card.live-job-highlight,.adm-run-card,.spd-running,.cs3-running,[data-running-job="1"] {
  background: color-mix(in srgb, var(--ss-green) 10%, var(--ss-surface-solid)) !important;
  border-color: color-mix(in srgb, var(--ss-green) 60%, var(--ss-border)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-green) 16%, transparent), var(--ss-shadow-1) !important;
}
.live-time-counter,[data-live-start],[data-time-counter],.srj-live,.spd-clock,.cs3-live-time,.adm-run-time {
  color: var(--ss-green) !important;
  font-variant-numeric: tabular-nums;
}

/* Media and long content safety. */
img,svg,video,canvas,iframe { max-width: 100%; }
img { height: auto; }
pre,code,.mono { max-width:100%; overflow:auto; overflow-wrap:anywhere; }
address,.address,.job-address,.email,.phone,.description,.notes,td,th { overflow-wrap:anywhere; word-break:normal; }


/* Standalone marketing pages: dark-mode surface corrections. */
html[data-theme="dark"] {
  --bright:#111113;
  --gold-light:#d2aa55;
  --shadow-sm:0 2px 8px rgba(0,0,0,.28);
  --shadow-md:0 14px 34px rgba(0,0,0,.36);
  --shadow-lg:0 28px 70px rgba(0,0,0,.5);
}
html[data-theme="dark"] .hero-bg,
html[data-theme="dark"] .cat-hero-bg,
html[data-theme="dark"] .areas-hero-bg {
  background:
    radial-gradient(circle at 88% 0%,rgba(210,170,85,.14),transparent 44%),
    radial-gradient(circle at 4% 70%,rgba(41,151,255,.10),transparent 52%),
    linear-gradient(180deg,#161618 0%,#000 100%) !important;
}
html[data-theme="dark"] .crumb-bar,
html[data-theme="dark"] .benefits-band,
html[data-theme="dark"] .cat-section,
html[data-theme="dark"] .sec-band,
html[data-theme="dark"] .areas-band,
html[data-theme="dark"] .app-band {
  background:var(--ss-surface-2) !important;
  border-color:var(--ss-border) !important;
}
html[data-theme="dark"] .cv-card,
html[data-theme="dark"] .benefit-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .hiw-mcard,
html[data-theme="dark"] .related-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .hub-card,
html[data-theme="dark"] .featured-card,
html[data-theme="dark"] .cat-card,
html[data-theme="dark"] .bf-card,
html[data-theme="dark"] .area-card,
html[data-theme="dark"] .area-search,
html[data-theme="dark"] .area-disclaimer,
html[data-theme="dark"] .phone-screen {
  background:var(--ss-surface-solid) !important;
  color:var(--ss-text) !important;
  border-color:var(--ss-border) !important;
}

/* Public pages. */
.ss-public .ss-main { min-height: calc(100vh - 140px); padding-block: clamp(22px,4vw,56px); }
.ss-public .ss-header-inner { min-height: 64px; }
.ss-public .ss-nav { align-items: center; }
.ss-public .ss-nav a { color: var(--ss-text-2) !important; font-weight: 600; }
.ss-public .ss-logo { color: var(--ss-text) !important; font-weight: 750; }
.ss-public .ss-footer { background: var(--ss-surface-solid); border-top:1px solid var(--ss-border); }

/* Authentication pages retain their design while becoming clearer in dark mode. */
.auth-shell,.auth-page,.auth-wrap,.registration-shell,.login-shell {
  color: var(--ss-text);
}
.auth-panel,.auth-form-panel,.register-panel,.login-panel,.success-grid .content {
  background: var(--ss-surface-solid) !important;
  color: var(--ss-text) !important;
}
.auth-panel input,.auth-form-panel input,.register-panel input,.login-panel input,
.auth-panel select,.auth-form-panel select,.register-panel select,.login-panel select {
  background: var(--ss-surface-2) !important;
}

/* Modal responsiveness. */
.mo,.modal,.modal-backdrop { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.mc,.modal-dialog,.modal-content { width:min(100%,760px); max-height:calc(100dvh - 20px); overflow:auto; }

@media (max-width: 1180px) {
  .grid-4,.ss-grid-4,.stats-grid,.kpi-g,.cdb-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .grid-3,.ss-grid-3,.fgg3 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 900px) {
  .sidebar { width:min(88vw,320px) !important; }
  .main { margin-left:0 !important; width:100% !important; }
  .topbar { padding-inline:max(10px,env(safe-area-inset-left)) !important; }
  .topbar-right { gap:6px; }
  .topbar-user { padding:3px !important; border:0 !important; background:transparent !important; }
  .topbar-user>div:first-child { display:none; }
  .ss-panel-shell { grid-template-columns:1fr !important; }
  .ss-sidebar { border-right:0 !important; }
  .grid-2,.grid-3,.grid-4,.ss-grid-2,.ss-grid-3,.ss-grid-4,.fgg,.fgg3,.sp2 { grid-template-columns:1fr !important; }
  .section-header,.ph,.ss-page-head,.card-header,.ch,.form-actions,.action-buttons,.btn-group {
    align-items:stretch !important;
  }
  .section-header>.btn,.ph>.btn,.ss-page-head>.ss-btn { width:100%; }
}

@media (max-width: 700px) {
  html { font-size:15px; }
  body { font-size:14px; }
  .content,.ap-main,.cp-main,.page.active,.ss-panel-main { padding:12px !important; }
  .topbar { min-height:58px; height:auto !important; padding-block:8px; }
  .topbar-page-title { max-width:45vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.96rem !important; }
  .topbar-btn,.hamburger,.ss-theme-toggle,.topbar-avatar { width:38px !important; height:38px !important; min-height:38px !important; }
  .card,.tbl,.stat-card,.kpi,.approval-card,.balance-hero,.ss-card,.ss-stat,.ss-item,
  .panel,.box,.widget,.notice-card,.service-card,.address-card,.schedule-card { border-radius:16px !important; }
  .cb,.card-body,.ss-card,.ss-stat { padding:14px !important; }
  .ch,.card-header { padding:12px 14px !important; }
  .grid-4,.ss-grid-4,.stats-grid,.kpi-g,.cdb-kpi-grid,.grid-3,.ss-grid-3,.fgg3 { grid-template-columns:1fr !important; }
  .form-row,.form-grid,.fields,.row,.actions,.action-buttons,.form-actions,.btn-group,.toolbar,.filters {
    max-width:100%;
  }
  .form-row,.form-grid,.fields { grid-template-columns:1fr !important; }
  table,.data-table,.ss-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .form-actions,.action-buttons,.btn-group,.toolbar { display:flex; flex-wrap:wrap; gap:8px; }
  .form-actions>* ,.action-buttons>* ,.btn-group>* { flex:1 1 145px; }
  table,.data-table,.ss-table { min-width:620px !important; font-size:.8rem !important; }
  th,td { padding:10px !important; }
  .ss-public .ss-header-inner { flex-wrap:wrap; padding-block:10px; }
  .ss-public .ss-nav {
    width:100%;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:8px 0 12px;
  }
  .ss-public .ss-nav.is-open { display:flex; }
  .ss-public .ss-nav a { padding:11px 12px; background:var(--ss-surface-2); }
  .ss-public-menu-toggle { display:inline-grid !important; }
  .ss-theme-toggle-floating { top:10px; right:10px; }
}

@media (min-width: 701px) {
  .ss-public-menu-toggle { display:none !important; }
}

@media (max-width: 430px) {
  .content,.ap-main,.cp-main,.page.active,.ss-panel-main { padding:9px !important; }
  .topbar-page-title { max-width:38vw; }
  .topbar-btn.hide-mobile { display:none !important; }
  .btn,.ss-btn,button { white-space:normal; }
  .ss-container,.wrap,.container,.site-container { width:min(100% - 18px,1280px) !important; }
  .card,.tbl,.stat-card,.kpi,.ss-card,.ss-stat { border-radius:14px !important; }
}

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

@media print {
  html,html[data-theme="dark"],body { color-scheme:light !important; background:#fff !important; color:#000 !important; }
  .ss-theme-toggle,.ss-theme-toggle-floating,.hamburger,.topbar,.sidebar,.print-hide { display:none !important; }
  .main { margin:0 !important; }
  .content { max-width:none !important; padding:0 !important; }
  .card,.tbl,.ss-card { box-shadow:none !important; background:#fff !important; color:#000 !important; }
}