:root { color-scheme: light; }

.employee-page { min-height: 100%; color: var(--ink); background: #e9eeeb; }
.employee-page button { border: 0; }
.employee-page button:disabled { cursor: not-allowed; }
.employee-page .eyebrow { margin: 0; color: var(--orange); font-size: .75rem; font-weight: 900; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
.employee-page .demo-chip { display: inline-flex; align-items: center; min-height: 29px; padding: 5px 10px; color: var(--navy); background: var(--volt); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

.app-header { position: sticky; top: 0; z-index: 50; min-height: 78px; display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 24px; padding: 11px max(24px, calc((100% - 1500px) / 2)); color: var(--white); background: rgba(6,26,40,.96); border-bottom: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(18px); }
.app-brand { width: 195px; padding: 7px 9px; background: var(--white); }
.app-brand img { width: 100%; height: auto; }
.app-product { display: flex; align-items: center; gap: 10px; font-weight: 900; }
.app-product span { letter-spacing: .03em; }
.app-product b { padding: 4px 7px; color: var(--navy); background: var(--volt); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.app-header-actions { display: flex; align-items: center; gap: 10px; }
.app-header-actions > a, .install-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 15px; color: var(--white); background: transparent; border: 1px solid rgba(255,255,255,.28); font-size: .75rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.install-button { color: var(--navy); background: var(--volt); border-color: var(--volt); }
.install-button[hidden] { display: none; }
.app-header-actions > a:hover { border-color: var(--volt); }

.app-layout { width: min(1500px, 100%); min-width: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr); margin: 0 auto; }
.app-sidebar { min-width: 0; min-height: calc(100svh - 78px); display: flex; flex-direction: column; padding: 34px 24px; color: var(--white); background: var(--navy); }
.demo-profile { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.14); }
.demo-avatar { width: 46px; height: 46px; display: grid; place-items: center; color: var(--navy); background: var(--volt); border-radius: 50%; font-size: .76rem; font-weight: 900; }
.demo-profile small, .demo-profile strong { display: block; }
.demo-profile small { color: #9fb4c1; font-size: .72rem; }
.demo-profile strong { margin-top: 2px; font-size: .88rem; }

.app-nav { display: grid; gap: 6px; margin-top: 32px; }
.app-nav a { min-height: 50px; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 9px; padding: 10px 12px; color: #a9bdc9; border-left: 3px solid transparent; font-size: .84rem; font-weight: 800; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.app-nav a span { color: var(--volt); font-size: .64rem; letter-spacing: .08em; }
.app-nav a:hover, .app-nav a.is-active { color: var(--white); background: rgba(255,255,255,.07); border-left-color: var(--volt); }

.connection-card { margin-top: auto; padding-top: 28px; }
.connection-card .eyebrow { color: var(--volt); }
.connection-card dl { margin: 16px 0 0; }
.connection-card dl div { display: grid; gap: 3px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.12); }
.connection-card dt { color: #91a9b6; font-size: .72rem; }
.connection-card dd { margin: 0; color: var(--white); font-size: .76rem; font-weight: 800; }
.connection-card dd i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--orange); border-radius: 50%; }

.app-main { min-width: 0; padding: clamp(28px, 4vw, 64px); }
.app-hero { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(310px, .78fr); gap: clamp(28px, 5vw, 74px); align-items: end; padding: clamp(34px, 5vw, 70px); color: var(--white); background: var(--blue); overflow: hidden; }
.app-hero h1 { margin-top: 22px; font-size: clamp(3.6rem, 6.6vw, 7.2rem); }
.app-hero h1 span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.8); }
.app-hero > div:first-child > p:last-child { max-width: 680px; margin: 28px 0 0; color: #d7e9f5; font-size: 1rem; }
.demo-mode { padding: 24px; color: var(--navy); background: var(--volt); }
.demo-mode strong { font: 900 2rem/1 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.demo-mode p { margin: 14px 0 0; font-size: .9rem; font-weight: 700; }

.login-readiness { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 7vw, 100px); align-items: end; padding: clamp(40px, 6vw, 82px); color: var(--white); background: var(--navy-soft); border-top: 7px solid var(--orange); }
.login-readiness h2 { margin-top: 18px; font-size: clamp(2.6rem, 4.8vw, 5.2rem); }
.login-readiness h2 span { color: var(--volt); }
.login-readiness-copy > p { max-width: 660px; margin: 0 0 24px; color: #bcd0dc; }
.login-readiness button, .blocked-action, .change-card button, .report-card button { min-height: 46px; padding: 12px 16px; color: #6f7d84; background: #d8dedb; font-size: .75rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.login-readiness-copy small { display: block; max-width: 600px; margin-top: 11px; color: #91a9b6; font-size: .78rem; }

.dashboard-section { padding: clamp(66px, 8vw, 112px) 0 0; scroll-margin-top: 100px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.section-heading h2 { margin-top: 14px; color: var(--navy); font-size: clamp(2.7rem, 4.6vw, 5rem); }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.summary-card { min-width: 0; min-height: 230px; display: flex; flex-direction: column; padding: 24px; background: var(--paper); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary-card > span { color: var(--muted); font-size: .76rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.summary-card > strong { margin: 30px 0 12px; color: var(--navy); font: 900 clamp(2.8rem, 4.8vw, 5rem)/.9 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.summary-card > p { margin: auto 0 0; color: var(--muted); font-size: .84rem; }
.summary-card-primary { color: var(--white); background: var(--orange); }
.summary-card-primary > span, .summary-card-primary > strong, .summary-card-primary > p { color: var(--navy); }

.next-shift-card { min-width: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 28px; align-items: center; margin-top: 22px; padding: 28px; color: var(--white); background: var(--blue); }
.shift-date { display: grid; place-items: center; padding: 18px; color: var(--navy); background: var(--volt); }
.shift-date span { font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.shift-date strong { font: 900 4rem/.9 var(--display); }
.shift-date small { margin-top: 4px; font-size: .7rem; font-weight: 800; }
.shift-title-row { display: flex; flex-wrap: wrap; gap: 8px; }
.next-shift-card h3 { margin-top: 18px; font-size: clamp(2rem, 3.4vw, 3.5rem); }
.shift-facts { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 22px 0 0; }
.shift-facts div { min-width: 120px; }
.shift-facts dt { color: #a9c5d7; font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.shift-facts dd { margin: 3px 0 0; font-size: .86rem; font-weight: 750; }
.blocked-action { max-width: 180px; }

.status-pill { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 8px; font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.status-confirmed { color: #174620; background: #c9efcf; }
.status-changed { color: #5d3600; background: #ffe19b; }

.shift-list { background: var(--paper); border-left: 1px solid var(--line); }
.shift-list article { min-width: 0; display: grid; grid-template-columns: 90px minmax(0, 1fr) 38px; gap: 24px; align-items: center; min-height: 132px; padding: 20px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.list-date { display: grid; gap: 3px; padding-right: 18px; border-right: 1px solid var(--line); }
.list-date strong { color: var(--orange); font-size: .72rem; letter-spacing: .12em; }
.list-date span { color: var(--navy); font: 900 1.55rem/1 var(--display); }
.shift-list h3 { margin-top: 10px; color: var(--navy); font-size: clamp(1.65rem, 2.7vw, 2.65rem); }
.shift-list p { margin: 7px 0 0; color: var(--muted); font-size: .86rem; }
.list-arrow { color: var(--orange); font-size: 1.4rem; }

.change-grid, .report-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.change-card, .report-card { min-width: 0; padding: clamp(24px, 3.4vw, 42px); background: var(--paper); border: 1px solid var(--line); }
.change-card-new { border-top: 6px solid var(--orange); }
.change-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; color: var(--orange); font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.change-top time { color: var(--muted); font-weight: 750; }
.change-card h3, .report-card h3 { margin-top: 34px; color: var(--navy); font-size: clamp(2rem, 3.3vw, 3.35rem); }
.time-change { display: flex; align-items: center; gap: 18px; margin: 24px 0; }
.time-change span, .time-change strong { font: 900 2.2rem/1 var(--display); }
.time-change span { color: var(--muted); text-decoration: line-through; }
.time-change b { color: var(--orange); }
.time-change strong { color: var(--navy); }
.change-card > p { color: var(--muted); }
.change-card button, .report-card button { margin-top: 18px; }
.read-state { display: block; margin-top: 24px; color: var(--muted); font-size: .76rem; font-weight: 850; }

.report-card > div:first-child { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; color: var(--orange); font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.report-card > div:first-child strong { color: var(--navy); }
.report-open { color: var(--white); background: var(--navy); }
.report-open > div:first-child strong, .report-open h3 { color: var(--white); }
.report-card dl { margin: 28px 0 0; border-top: 1px solid var(--line); }
.report-open dl { border-color: rgba(255,255,255,.18); }
.report-card dl div { display: grid; grid-template-columns: minmax(120px, .38fr) 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.report-open dl div { border-color: rgba(255,255,255,.18); }
.report-card dt { color: var(--muted); font-size: .75rem; }
.report-open dt { color: #9fb4c1; }
.report-card dd { margin: 0; font-weight: 800; }

.pwa-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr); gap: clamp(36px, 7vw, 100px); align-items: end; margin-top: clamp(76px, 10vw, 140px); padding: clamp(40px, 6vw, 82px); color: var(--white); background: var(--blue); }
.pwa-section h2 { margin-top: 18px; font-size: clamp(2.7rem, 4.8vw, 5.2rem); }
.pwa-section h2 span { color: var(--volt); }
.pwa-section > div:last-child > p { color: #d7e9f5; }
.pwa-section details { margin-top: 22px; border-top: 1px solid rgba(255,255,255,.24); border-bottom: 1px solid rgba(255,255,255,.24); }
.pwa-section summary { padding: 16px 0; font-weight: 850; cursor: pointer; }
.pwa-section details p { margin: 0 0 18px; color: #d7e9f5; }
.install-button-inline { margin-top: 18px; }

.app-bottom-nav { display: none; }
.app-footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px max(24px, calc((100% - 1500px) / 2)); color: #9fb4c1; background: var(--navy); font-size: .76rem; }
.app-footer p { margin: 0; }

@media (max-width: 1180px) {
  .app-header { grid-template-columns: 200px 1fr auto; padding-inline: 20px; }
  .app-layout { grid-template-columns: 230px minmax(0, 1fr); }
  .app-sidebar { padding-inline: 18px; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next-shift-card { grid-template-columns: 120px minmax(0, 1fr); }
  .blocked-action { grid-column: 2; max-width: none; justify-self: start; }
}

@media (max-width: 900px) {
  .app-header { grid-template-columns: 190px 1fr auto; }
  .app-product { display: none; }
  .app-layout { display: block; }
  .app-sidebar { display: none; }
  .app-main { padding: clamp(20px, 4vw, 36px); padding-bottom: 110px; }
  .app-hero, .login-readiness, .pwa-section { grid-template-columns: 1fr; }
  .change-grid, .report-layout { grid-template-columns: 1fr; }
  .app-bottom-nav { position: fixed; inset: auto 12px max(12px, env(safe-area-inset-bottom)) 12px; z-index: 60; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 7px; color: #9fb4c1; background: rgba(6,26,40,.97); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 50px rgba(0,0,0,.28); backdrop-filter: blur(16px); }
  .app-bottom-nav a { min-width: 0; min-height: 55px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 3px; font-size: .67rem; font-weight: 800; }
  .app-bottom-nav a span { color: var(--volt); font-size: .61rem; }
  .app-bottom-nav a.is-active { color: var(--white); background: rgba(255,255,255,.08); }
}

@media (max-width: 620px) {
  .app-header { min-height: 68px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 9px 12px; }
  .app-brand { width: 164px; }
  .app-header-actions > a { width: 44px; padding: 0; font-size: 0; }
  .app-header-actions > a span { font-size: 1.15rem; }
  .app-header .install-button { display: none; }
  .app-main { padding: 14px; padding-bottom: 108px; }
  .app-hero, .login-readiness, .pwa-section { padding: 28px 22px; }
  .app-hero h1 { font-size: clamp(3rem, 16vw, 4.6rem); }
  .app-hero > div:first-child > p:last-child { font-size: .94rem; }
  .demo-mode { padding: 20px; }
  .login-readiness h2, .pwa-section h2 { font-size: clamp(2.6rem, 13vw, 4rem); }
  .summary-grid { grid-template-columns: 1fr; }
  .summary-card { min-height: 190px; }
  .section-heading { align-items: start; }
  .section-heading h2 { font-size: clamp(2.5rem, 12vw, 3.8rem); }
  .section-heading > .demo-chip { display: none; }
  .next-shift-card { grid-template-columns: 82px minmax(0, 1fr); gap: 18px; padding: 20px 16px; }
  .shift-date { padding: 13px 8px; }
  .shift-date strong { font-size: 3rem; }
  .shift-main h3 { font-size: 1.9rem; }
  .shift-facts { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .blocked-action { grid-column: 1 / -1; width: 100%; }
  .shift-list article { grid-template-columns: 64px minmax(0, 1fr); gap: 15px; padding: 18px 14px; }
  .list-date { padding-right: 10px; }
  .list-arrow { display: none; }
  .shift-list h3 { font-size: 1.75rem; }
  .change-card, .report-card { padding: 24px 20px; }
  .change-card h3, .report-card h3 { font-size: 2.2rem; }
  .change-card button, .report-card button, .login-readiness button { width: 100%; }
  .report-card dl div { grid-template-columns: 1fr; gap: 3px; }
  .app-footer { display: grid; gap: 6px; padding: 24px 18px 110px; }
}

@media (max-width: 390px) {
  .app-brand { width: 148px; }
  .app-bottom-nav { inset-inline: 6px; bottom: max(6px, env(safe-area-inset-bottom)); }
  .app-bottom-nav a { font-size: .61rem; }
  .app-bottom-nav a span { font-size: .57rem; }
  .app-hero h1 { font-size: 2.8rem; }
  .next-shift-card { grid-template-columns: 1fr; }
  .shift-date { width: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-nav a { transition: none; }
}