html[data-theme="dark"] {
  color-scheme:dark;
  --bg:#11121a; --panel:#191b26; --border:#2b2e3d; --text:#ececf4; --muted:#9ca3b5;
  --navy:#16141f; --navy-2:#201d2d; --blue:#6C20FF; --blue-2:#5917d8; --blue-soft:#27203b;
  --primary:#6C20FF; --primary-dark:#5917d8; --primary-light:#8f5cff; --primary-soft:#27203b;
  --surface:#191b26; --background:#11121a;
}
html[data-theme="dark"] body { background:var(--bg)!important;color:var(--text)!important; }
html[data-theme="dark"] .auth-page {
  --primary:#6C20FF;--primary-dark:#5917d8;--primary-light:#8f5cff;--primary-soft:#27203b;
  --navy:#16141f;--navy-soft:#201d2d;--text:#ececf4;--muted:#9ca3b5;
  --border:#2b2e3d;--surface:#191b26;--background:#11121a;
}
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .form-side,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel { background:#191b26!important;color:#ececf4!important;border-color:#2b2e3d!important; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background:#151720!important;color:#ececf4!important;border-color:#343746!important; }
html[data-theme="dark"] .quorly-logo-image { content:url('/logo-mark-dark.png')!important; }
html[data-theme="light"] .quorly-logo-image { content:url('/logo-mark-light.png')!important; }

html[data-theme="dark"] .m{background-image:url('/logo-mark-dark.png')!important}
html[data-theme="light"] .m{background-image:url('/logo-mark-light.png')!important}
html[data-theme="dark"] .app-page,html[data-theme="dark"] .app-shell,html[data-theme="dark"] .main,html[data-theme="dark"] .mobile-shell,html[data-theme="dark"] .mobile-app,html[data-theme="dark"] .content,html[data-theme="dark"] .page-content{background:#0d101b!important;color:#f5f3ff!important}html[data-theme="dark"] .topbar,html[data-theme="dark"] .mobile-header,html[data-theme="dark"] .bottom-nav{background:#141824!important;border-color:#303446!important;color:#f5f3ff!important}html[data-theme="dark"] .week-card,html[data-theme="dark"] .summary-card,html[data-theme="dark"] .request-card,html[data-theme="dark"] .schedule-card,html[data-theme="dark"] .day-card,html[data-theme="dark"] .stat-card{background:#171a26!important;color:#f5f3ff!important;border-color:#303446!important}html[data-theme="dark"] .week-days button,html[data-theme="dark"] .day-pill,html[data-theme="dark"] .summary-grid>*{background:#111522!important;color:#dfe3ee!important;border-color:#303446!important}html[data-theme="dark"] .bottom-nav a,html[data-theme="dark"] .bottom-nav button{color:#8f98ab!important}html[data-theme="dark"] .bottom-nav .active{color:#9b62ff!important;background:rgba(108,32,255,.10)!important}


/* =========================================================
   EMPLOYEE AUTH + DASHBOARD DARK COMPLETION
   Auth follows the same visual system as Manager access.
   ========================================================= */
html[data-theme="dark"] .auth-page{
  --primary:#6C20FF;--primary-dark:#5917d8;--primary-light:#8f5cff;--primary-soft:#27203b;
  --navy:#101522;--navy-soft:#1b1740;--text:#f5f3ff;--muted:#9ca7bd;
  --border:#30384d;--surface:#101522;--background:#0d101b;
  background:radial-gradient(circle at 8% 12%,rgba(108,32,255,.12),transparent 25%),radial-gradient(circle at 92% 86%,rgba(108,32,255,.10),transparent 28%),var(--background)!important;
}
html[data-theme="dark"] .auth-page .auth-card{
  width:min(1080px,100%)!important;
  min-height:660px!important;
  background:#101522!important;
  border:1px solid #37345b!important;
  box-shadow:0 24px 70px rgba(0,0,0,.34)!important;
}
html[data-theme="dark"] .auth-page .form-side{
  background:radial-gradient(circle at 80% 12%,rgba(108,32,255,.055),transparent 30%),#101522!important;
}
html[data-theme="dark"] .auth-page .auth-heading h1,
html[data-theme="dark"] .auth-page .field>span{color:#f5f3ff!important}
html[data-theme="dark"] .auth-page .auth-heading p,
html[data-theme="dark"] .auth-page .mobile-switch{color:#9ca7bd!important}
html[data-theme="dark"] .auth-page .auth-heading .eyebrow,
html[data-theme="dark"] .auth-page .mobile-switch a{color:#a970ff!important}
html[data-theme="dark"] .auth-page .field input{
  background:#111827!important;color:#f5f3ff!important;border-color:#34405a!important;
}
html[data-theme="dark"] .auth-page .field input:hover{border-color:#46516b!important}
html[data-theme="dark"] .auth-page .field input:focus{
  background:#111827!important;border-color:#6C20FF!important;box-shadow:0 0 0 3px rgba(108,32,255,.18)!important;
}
html[data-theme="dark"] .auth-page .password-toggle{
  background:#27203b!important;color:#b991ff!important;border:1px solid #44336c!important;
}
html[data-theme="dark"] .auth-page .auth-submit{
  background:linear-gradient(90deg,#6C20FF,#861cff)!important;color:#fff!important;
  box-shadow:0 10px 25px rgba(108,32,255,.28)!important;
}
html[data-theme="dark"] .auth-page .auth-submit:hover{background:linear-gradient(90deg,#5917d8,#7415e8)!important}
html[data-theme="dark"] .auth-page .visual-overlay{
  background:radial-gradient(circle at 78% 24%,rgba(108,32,255,.55),transparent 28%),radial-gradient(circle at 25% 75%,rgba(108,32,255,.28),transparent 34%),linear-gradient(145deg,#17153d 0%,#151343 45%,#5114d8 100%)!important;
}
html[data-theme="dark"] .auth-page .feature,
html[data-theme="dark"] .auth-page .overlay-toggle{
  border-color:rgba(255,255,255,.16)!important;background:rgba(255,255,255,.055)!important;color:#fff!important;
}

/* Employee dashboard: eliminate every remaining white control/surface. */
html[data-theme="dark"] .employee-chip,
html[data-theme="dark"] .round,
html[data-theme="dark"] .week-label,
html[data-theme="dark"] .schedule-state,
html[data-theme="dark"] .empty-week,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .day-card{
  background:#171a26!important;color:#f5f3ff!important;border-color:#303446!important;
}
html[data-theme="dark"] .schedule-state,
html[data-theme="dark"] .empty-week{border-style:dashed!important}
html[data-theme="dark"] .empty-week strong{color:#f5f3ff!important}
html[data-theme="dark"] .empty-week p{color:#9ca7bd!important}
html[data-theme="dark"] .round,
html[data-theme="dark"] .week-label{background:#202330!important;color:#d7d9e4!important}
html[data-theme="dark"] .round:hover,
html[data-theme="dark"] .week-label:hover{background:#2b2e3d!important}
html[data-theme="dark"] .sidebar .text-button{
  width:100%;padding:10px 12px!important;border:1px solid #393d4b!important;border-radius:9px!important;
  background:#202330!important;color:#d7d9e4!important;text-align:center!important;
}
html[data-theme="dark"] .sidebar .text-button:hover{background:#2b2e3d!important;color:#fff!important}
html[data-theme="dark"] .employee-chip{background:#171a26!important}
html[data-theme="dark"] .day-card.is-today{border-color:#6C20FF!important;box-shadow:0 6px 16px rgba(108,32,255,.10)!important}
html[data-theme="dark"] .bottom-nav a,
html[data-theme="dark"] .bottom-nav button{background:transparent!important;border-color:transparent!important}

/* =========================================================
   EMPLOYEE POLISH · 2026-09-08
   ========================================================= */
/* Greeting/header should sit directly on the page, without another surface. */
html[data-theme="dark"] .app-page .topbar{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Sidebar uses the same neutral grey family as the day cards. */
html[data-theme="dark"] .app-page .sidebar{
  background:#171a26!important;
  border-right:1px solid #303446!important;
}

/* Today's shift uses the same violet ambience as the Employee access screen. */
html[data-theme="dark"] .app-page .today-card{
  background:
    radial-gradient(circle at 82% 18%,rgba(134,28,255,.48),transparent 34%),
    radial-gradient(circle at 18% 82%,rgba(108,32,255,.25),transparent 38%),
    linear-gradient(145deg,#17153d 0%,#201653 48%,#5114d8 100%)!important;
  border:1px solid rgba(159,112,255,.22)!important;
  box-shadow:0 18px 42px rgba(54,18,120,.24)!important;
}