/* =============================================================================
   Simple HR in The Simple Suite style (Release 100, #335)
   Discovery Technologies Jamaica Limited. Tokens from the Simple Suite style guide (Simple Board R1.6).
   Loaded after wow.css and td-polish.css: it re-points their variables and restyles the top bar, the left menu and
   the shared components. The layout is the one Simple HR had before Release 100 (Release 101, #337).
   ============================================================================= */
:root{
  --navy:#102A3A;--navy-2:#1B4560;--navy-deep:#0A1C27;--gold:#E3A532;--gold-soft:#FBF3E2;--gold-text:#8A5D0A;
  --ss-bg:#F5F6F8;--ss-surface:#FFFFFF;--ss-ink:#102A3A;--ss-ink-2:#4A5568;--ss-muted:#6B7588;--ss-line:#E3E7EE;--ss-band:#102A3A;--ss-th:#FAFBFC;
  --ss-accent:#1E5A78;--ss-accent-soft:#E9F1F6;--ss-pri-bg:#102A3A;--ss-pri-fg:#FFFFFF;--ss-pri-hover:#0A1C27;
  --ss-green:#15803D;--ss-green-soft:#E8F6EC;--ss-amber:#B45309;--ss-amber-soft:#FDF3E4;--ss-red:#B42318;--ss-red-soft:#FDECEA;--ss-blue:#1D4ED8;--ss-blue-soft:#EAF0FD;--ss-purple:#7E22CE;--ss-purple-soft:#F3E8FF;
  --ss-shadow:0 1px 2px rgba(16,42,58,.06),0 2px 8px rgba(16,42,58,.04);--ss-pop:0 18px 48px rgba(16,42,58,.22);
  --ss-col:1200px;--ss-gutter:28px;
  /* the old design system's variables, re-pointed */
  --brand-900:#0A1C27;--brand-800:#102A3A;--brand-600:#1E5A78;--brand-500:#1E5A78;--brand-50:#E9F1F6;--brand-100:#DCE9F1;--brand:#1E5A78;
  --accent:#1E5A78;--ink:var(--ss-ink);--ink-2:var(--ss-ink-2);--muted:var(--ss-muted);--faint:#8D97A8;
  --bg:var(--ss-bg);--surface:var(--ss-surface);--surface-2:#F7F8FA;--card:var(--ss-surface);--line:var(--ss-line);--line-2:#EDF0F4;
  --ok-bg:var(--ss-green-soft);--ok-fg:var(--ss-green);--warn-bg:var(--ss-amber-soft);--warn-fg:var(--ss-amber);--danger-bg:var(--ss-red-soft);--danger-fg:var(--ss-red);--info-bg:var(--ss-blue-soft);--info-fg:var(--ss-blue);
  --r-sm:8px;--r:12px;--r-lg:12px;--r-xl:14px;--shadow-sm:var(--ss-shadow);--shadow:var(--ss-shadow);--shadow-lg:var(--ss-pop);
  --hero-grad:linear-gradient(135deg,#102A3A,#1B4560);
}
html[data-theme=dark]{
  --ss-bg:#0B1A24;--ss-surface:#12263A;--ss-ink:#E6EAF2;--ss-ink-2:#C3CAD8;--ss-muted:#98A2B6;--ss-line:#2A3550;--ss-band:#0B1324;--ss-th:#162C42;
  --ss-accent:#7FB8D6;--ss-accent-soft:#1A3142;--gold-soft:#3A2D14;--gold-text:#E3A532;--ss-pri-bg:#E3A532;--ss-pri-fg:#102A3A;--ss-pri-hover:#F0B85A;
  --ss-green:#5FD08A;--ss-green-soft:#18352A;--ss-amber:#F0B25A;--ss-amber-soft:#3A2D17;--ss-red:#F2867A;--ss-red-soft:#3D1F1F;--ss-blue:#8FB2FF;--ss-blue-soft:#1D2A4A;--ss-purple:#C99BF5;--ss-purple-soft:#2F2245;
  --ss-shadow:none;--brand-600:#7FB8D6;--brand-500:#7FB8D6;--brand:#7FB8D6;--brand-50:#1A3142;--brand-100:#1A3142;--accent:#7FB8D6;--surface-2:#162C42;--line-2:#24314A;--faint:#7D879B;
  color-scheme:dark;
}

/* ---------- base ---------- */
body.ss-app,body.ss-login{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;font-size:14px;background:var(--ss-bg)!important;color:var(--ss-ink)!important}
body.ss-app a{color:var(--ss-accent)}
body.ss-app h1,body.ss-app h2,body.ss-app h3,body.ss-app h4{color:var(--ss-ink);letter-spacing:0}
body.ss-app h3{font-size:15px;font-weight:600}
body.ss-app .muted{color:var(--ss-muted)}

/* ---------- top bar: navy with the Simple HR lock-up (same controls, same places) ---------- */
body.ss-app .app-header.ss-band{background:var(--ss-band)!important;border-bottom:0!important;color:#fff;box-shadow:none!important}
.ss-brand{display:flex;align-items:center;gap:10px;color:#fff!important;text-decoration:none!important;min-width:0;flex:none}
.ss-logo{width:38px;height:38px;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.16);flex:none}
.ss-brand b{font-family:"Source Serif 4",Georgia,serif;font-size:18px;font-weight:700;display:block;line-height:1.1;color:#fff}
.ss-brand small{font-size:11.5px;color:#AFC3D2;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-band .menu-btn{color:#fff!important;background:transparent!important;border:1px solid rgba(255,255,255,.18)!important}
.ss-band .menu-btn svg{color:#fff!important}
.ss-band .td-lay>summary{height:38px!important;min-height:38px!important;border-radius:10px!important;background:transparent!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:none!important}
.ss-band .td-lay>summary *{color:#fff!important}
.ss-band .td-user-meta{display:none!important}
.ss-band .td-user-meta small,.ss-band .td-user-meta .muted,.ss-band .td-user-meta span+span{color:#AFC3D2!important}

/* old header controls, re-skinned for the navy band */
.ss-band .td-attn{max-width:300px;height:38px!important;border-radius:999px!important;background:rgba(227,165,50,.14)!important;border:1px solid rgba(227,165,50,.45)!important;color:#fff!important;box-shadow:none!important}
.ss-band .td-attn *{color:#fff!important}
.ss-band .td-attn-dot{background:var(--gold)!important;box-shadow:none!important}
.ss-band .td-rel,.ss-band .td-faq-btn,.ss-band .td-chat-btn,.ss-band .td-bell>summary,.ss-band .td-timer>summary{height:38px!important;min-height:38px!important;border-radius:10px!important;background:transparent!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:none!important}
.ss-band .td-rel *,.ss-band .td-faq-btn *,.ss-band .td-chat-btn *,.ss-band .td-bell>summary svg,.ss-band .td-timer>summary *{color:#fff!important}
.ss-band .td-rel{background:rgba(255,255,255,.06)!important}
.ss-band .td-bell-count,.ss-band .td-chat-badge,.ss-band .nav-badge{background:var(--gold)!important;color:#102A3A!important}
.ss-band .td-userbar{gap:0!important;margin:0!important;padding:0!important;border:0!important;background:none!important}
.ss-band .user-avatar{width:38px!important;height:38px!important;border-radius:50%!important;background:var(--navy-2)!important;color:#fff!important;border:2px solid rgba(255,255,255,.25)!important;font-weight:700;font-size:13px}
.ss-band .td-bell-pop,.ss-band .td-timer-pop,.ss-band .td-user-pop,.ss-band .td-lay-pop{color:var(--ss-ink)!important}
.ss-band .td-bell-pop *,.ss-band .td-timer-pop *,.ss-band .td-user-pop *{color:inherit}
/* ---------- left menu ---------- */
body.ss-app .side{background:var(--ss-surface)!important;border-right:1px solid var(--ss-line)!important}
body.ss-app .nav a{color:var(--ss-ink-2)!important}
body.ss-app .nav a:hover{background:var(--ss-bg)!important;color:var(--ss-ink)!important}
body.ss-app .nav a.active{background:var(--gold-soft)!important;color:var(--ss-ink)!important;box-shadow:none!important;border-left:0!important}
body.ss-app .nav a.active svg{color:var(--gold)!important}
body.ss-app .nav-toggle{color:var(--ss-ink)!important}
body.ss-app .nav-toggle[aria-expanded=true]{background:var(--ss-accent-soft)!important;color:var(--ss-ink)!important}
body.ss-app .nav-group{color:var(--ss-muted)!important}
html[data-theme=dark] body.ss-app .nav a.active{color:#fff!important}
body.ss-app .nav-hub{color:var(--ss-ink)!important}
body.ss-app .nav-hub:hover{background:var(--ss-bg)!important}
body.ss-app .nav-hub.is-on{background:var(--gold-soft)!important;color:var(--ss-ink)!important;box-shadow:none!important;border-left:0!important}
body.ss-app .nav-hub.is-on svg{color:var(--gold)!important}

/* ---------- page heading band: Simple Suite navy ---------- */
body.ss-app .workspace-hero{background:linear-gradient(135deg,#102A3A,#1B4560)!important;color:#fff!important;box-shadow:none!important}
body.ss-app .workspace-hero h2,body.ss-app .workspace-hero p,body.ss-app .workspace-hero dt,body.ss-app .workspace-hero dd{color:#fff!important}
body.ss-app .workspace-hero p,body.ss-app .workspace-hero dt{color:#D6E2EA!important}
body.ss-app .workspace-hero .hero-copy h2{font-family:"Source Serif 4",Georgia,serif!important;font-weight:700!important}

/* ---------- footer ---------- */
body.ss-app .td-footer{color:var(--ss-muted)!important;border-top-color:var(--ss-line)!important}
body.ss-app .td-foot-brand{color:var(--ss-ink-2)!important;font-weight:600}

@media (max-width:1100px){
  .ss-band .td-rel .td-rel-txt,.ss-band .td-chat-lbl{display:none}
  .ss-band .td-attn{max-width:200px}
}
@media (max-width:700px){
  .ss-brand>span{display:none}
  .ss-logo{width:32px;height:32px;border-radius:8px}
  .ss-band .td-rel,.ss-band .td-faq-btn,.ss-band .td-chat-btn,.ss-band .td-bell>summary,.ss-band .td-timer>summary,.ss-band .td-lay>summary,.ss-band .menu-btn{height:34px!important;min-height:34px!important;padding:0 8px!important;border-color:transparent!important}
  .ss-band .user-avatar{width:34px!important;height:34px!important}
}

/* breadcrumb */
body.ss-app .orientation{font-size:12.5px;color:var(--ss-muted);margin:0 0 8px}
body.ss-app .orientation a{color:var(--ss-accent)}

/* ---------- components ---------- */
body.ss-app .card,body.ss-app .chart-card,body.ss-app .dash-tile,body.ss-app .co-card,body.ss-app .td-dialog{background:var(--ss-surface)!important;border:1px solid var(--ss-line)!important;border-radius:12px!important;box-shadow:var(--ss-shadow)!important;color:var(--ss-ink)}
body.ss-app .card{padding:18px}
body.ss-app .dash-tile-value{color:var(--ss-ink)!important}
body.ss-app .dash-tile.is-alert{box-shadow:inset 0 -3px 0 var(--gold),var(--ss-shadow)!important}
body.ss-app .dash-meter span,body.ss-app .chart-track span,body.ss-app .progress i,body.ss-app .td-meter span{background:var(--gold)!important}
body.ss-app .dash-spark span{background:var(--ss-accent)!important}

body.ss-app .btn,body.ss-app button.btn,body.ss-app a.btn,body.ss-app summary.btn,body.ss-app input[type=submit]{background:var(--ss-pri-bg)!important;color:var(--ss-pri-fg)!important;border:1px solid transparent!important;border-radius:8px!important;font-family:Inter,sans-serif!important;font-weight:600!important;font-size:13px!important;box-shadow:none!important;background-image:none!important;text-decoration:none!important}
body.ss-app .btn:hover{background:var(--ss-pri-hover)!important}
body.ss-app .btn.alt,body.ss-app .btn.secondary,body.ss-app .btn.ghost,body.ss-app summary.btn.alt{background:var(--ss-surface)!important;color:var(--ss-ink)!important;border-color:var(--ss-line)!important}
body.ss-app .btn.alt:hover{background:var(--ss-bg)!important}
body.ss-app .btn.danger,body.ss-app .btn.red{background:var(--ss-surface)!important;color:var(--ss-red)!important;border-color:var(--ss-red)!important}
body.ss-app .td-confirm-ok{background:var(--ss-pri-bg)!important;color:var(--ss-pri-fg)!important;border-radius:8px!important}
body.ss-app .td-confirm-cancel{background:var(--ss-surface)!important;color:var(--ss-ink)!important;border:1px solid var(--ss-line)!important;border-radius:8px!important}
body.ss-app .td-confirm-dialog,body.ss-app .td-modal-box,body.ss-app dialog{border-radius:14px!important;box-shadow:var(--ss-pop)!important;background:var(--ss-surface)!important;color:var(--ss-ink)!important}

body.ss-app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),body.ss-app select,body.ss-app textarea{border:1px solid var(--ss-line)!important;border-radius:8px!important;background:var(--ss-surface)!important;color:var(--ss-ink)!important;font-family:Inter,sans-serif}
body.ss-app input:focus,body.ss-app select:focus,body.ss-app textarea:focus{outline:2px solid var(--ss-accent)!important;outline-offset:1px;box-shadow:none!important;border-color:var(--ss-line)!important}
body.ss-app .ss-band input{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.14)!important}
body.ss-app label,body.ss-app .field>label{color:var(--ss-ink)}

body.ss-app table{border-color:var(--ss-line)}
body.ss-app th{background:var(--ss-th)!important;color:var(--ss-muted)!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--ss-line)!important}
body.ss-app td{border-bottom-color:var(--ss-line)!important}
body.ss-app tbody tr:hover td{background:rgba(227,165,50,.05)}

body.ss-app .badge{border-radius:999px!important;font-size:11px!important;font-weight:600!important;padding:2px 8px!important;background:var(--ss-bg);color:var(--ss-ink-2);border:0!important}
body.ss-app .badge.ok{background:var(--ss-green-soft)!important;color:var(--ss-green)!important}
body.ss-app .badge.warn{background:var(--ss-amber-soft)!important;color:var(--ss-amber)!important}
body.ss-app .badge.danger{background:var(--ss-red-soft)!important;color:var(--ss-red)!important}
body.ss-app .badge.info{background:var(--ss-blue-soft)!important;color:var(--ss-blue)!important}
body.ss-app .flash{background:var(--ss-accent-soft)!important;color:var(--ss-ink)!important;border:1px solid var(--ss-line)!important;border-radius:10px!important;box-shadow:none!important}

/* module tabs re-pointed to navy + amber (Books, tickets, timesheet view) */
body.ss-app .bk-tabs a.on,body.ss-app .bk-more-menu summary.on,body.ss-app .tsv-btn.is-on{background:var(--ss-pri-bg)!important;border-color:var(--ss-pri-bg)!important;color:var(--ss-pri-fg)!important}
body.ss-app .bk-dot,body.ss-app .bk-hubdot{background:var(--ss-red)!important}
body.ss-app .bk-co a.on{border-color:var(--navy)!important;box-shadow:inset 0 -3px 0 var(--gold)!important}
body.ss-app .td96-n{background:var(--navy)!important}
html[data-theme=dark] body.ss-app .td96-n{background:var(--gold)!important;color:#102A3A}

/* account menu */
body.ss-app .td-account-pop{border-radius:14px!important;box-shadow:var(--ss-pop)!important;border:1px solid var(--ss-line)!important;background:var(--ss-surface)!important}
body.ss-app .td-theme-grid{display:flex!important;gap:0!important;padding:3px!important;border-radius:10px;background:var(--ss-bg);grid-template-columns:none!important}
body.ss-app .td-theme-tile{flex:1;justify-content:center;border:0!important;background:transparent!important;border-radius:8px!important;font-weight:600;color:var(--ss-ink-2)!important;box-shadow:none!important;min-height:34px}
body.ss-app .td-theme-tile.is-on{background:var(--ss-surface)!important;color:var(--ss-ink)!important;box-shadow:var(--ss-shadow)!important}
body.ss-app .td-theme-sw{display:none!important}
body.ss-app .td-acct-links a[href='/logout']{color:var(--ss-red)!important}



/* ---------- dark theme: surfaces the old CSS hard-codes ---------- */
html[data-theme=dark] body.ss-app .td-bell-pop,html[data-theme=dark] body.ss-app .td-timer-pop,html[data-theme=dark] body.ss-app .td-user-pop,html[data-theme=dark] body.ss-app .td-lay-pop,html[data-theme=dark] body.ss-app .td-confirm-dialog,html[data-theme=dark] body.ss-app details>div,html[data-theme=dark] body.ss-app .tkv-pb{background:var(--ss-surface)!important;color:var(--ss-ink)!important;border-color:var(--ss-line)!important}
html[data-theme=dark] body.ss-app [style*='background:#fff'],html[data-theme=dark] body.ss-app [style*='background: #fff'],html[data-theme=dark] body.ss-app [style*='background:#ffffff']{background:var(--ss-surface)!important}
html[data-theme=dark] body.ss-app [style*='color:#0f172a'],html[data-theme=dark] body.ss-app [style*='color:#334155']{color:var(--ss-ink)!important}
html[data-theme=dark] body.ss-app th{background:var(--ss-th)!important}
html[data-theme=dark] body.ss-app tbody tr:hover td{background:rgba(127,184,214,.06)}

/* ---------- sign-in ---------- */
body.ss-login{background:linear-gradient(180deg,#102A3A 0,#1B4560 260px,var(--ss-bg) 260px)!important}
body.ss-login .login-shell{display:flex!important;justify-content:center;align-items:flex-start;min-height:100vh;padding:80px 16px 40px;background:none!important;grid-template-columns:none!important}
body.ss-login .login-visual{display:none!important}
body.ss-login .login-form-side{background:none!important;padding:0!important;display:block!important;width:100%;max-width:440px}
body.ss-login .login-card{background:#fff!important;border:1px solid #E3E7EE!important;border-radius:14px!important;box-shadow:0 18px 48px rgba(16,42,58,.18)!important;padding:32px!important;max-width:none!important;width:100%;box-sizing:border-box;color:#102A3A}
.ss-login-lock{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.ss-login-lock .ss-logo{width:56px;height:56px;border-radius:14px;box-shadow:none}
.ss-login-lock b{display:block;font-family:"Source Serif 4",Georgia,serif;font-size:24px;font-weight:700;color:#102A3A;line-height:1.1}
.ss-login-lock small{display:block;font-size:12px;color:#6B7588}
body.ss-login .login-card h2{font-family:Inter,sans-serif!important;font-size:20px!important;font-weight:600!important;color:#102A3A!important;margin:0!important}
body.ss-login .login-copy{color:#6B7588!important;font-size:12.5px!important;margin:2px 0 16px!important}
body.ss-login .login-submit{background:#102A3A!important;color:#fff!important;border-radius:8px!important;box-shadow:none!important;background-image:none!important}
body.ss-login .login-submit:hover{background:#0A1C27!important}
body.ss-login input{border:1px solid #E3E7EE!important;border-radius:8px!important}
body.ss-login input:focus{outline:2px solid #1E5A78!important;box-shadow:none!important}
body.ss-login a{color:#1E5A78!important}
body.ss-login .login-footer{color:#6B7588!important;font-size:11.5px!important;border-top:1px solid #E3E7EE;padding-top:12px;margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 16px}

/* older accent colours (indigo, bright blue) re-pointed to navy + amber */
body.ss-app .tk-toggle a.on{background:var(--ss-pri-bg)!important;color:var(--ss-pri-fg)!important}
body.ss-app .em-card.on,body.ss-app .em88-card.on{border-color:var(--navy)!important;box-shadow:inset 0 -3px 0 var(--gold)!important}
body.ss-app .em88-card.on::after{background:var(--navy)!important}
body.ss-app .air-item.on,body.ss-app .em88-item.on,body.ss-app .lrr-item.on{border-color:var(--ss-line)!important;background:var(--ss-accent-soft)!important;box-shadow:inset 3px 0 0 var(--gold)!important}
body.ss-app .em88-item.on .em88-state,body.ss-app .lrr-item.on .lrr-state{color:var(--ss-ink)!important}
@media (max-width:430px){.ss-band .ss-brand{display:none}}
@media (max-width:1280px){.ss-brand small{display:none}}
@media (max-width:1024px){.ss-brand>span{display:none}.ss-band .td-user-meta{display:none!important}}