/* Sprint 7: Employee Core UX Excellence
   Scope: visual and responsive polish only. No business logic, no backend writes.
   Keep ORARI main / PR 10 design DNA: improve structure, do not redesign. */

:root {
  --s7-bg: #F8FAFC;
  --s7-surface: #ffffff;
  --s7-surface-strong: #0B0F14;
  --s7-ink: #1B2430;
  --s7-muted: #667382;
  --s7-primary: #B8FF2C;
  --s7-primary-dark: #83c900;
  --s7-accent: #35D6FF;
  --s7-line: rgba(27, 36, 48, 0.1);
  --s7-line-strong: rgba(27, 36, 48, 0.16);
  --s7-shadow: 0 14px 32px rgba(11, 15, 20, 0.07);
  --s7-shadow-soft: 0 8px 20px rgba(11, 15, 20, 0.045);
  --s7-radius: 18px;
  --s7-content-max: 1120px;
  --s7-sidebar-width: 228px;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  min-height: 100dvh;
}

.workspace {
  background: var(--s7-bg);
}

.mainLayout {
  gap: clamp(14px, 2vw, 24px);
}

.screen {
  gap: clamp(12px, 1.6vw, 18px);
}

.screen,
.screen > *,
.screenHead,
.todayHero,
.timerCommandCard,
.todaySummaryGrid,
.fieldQuickActions,
.missionList,
.moduleGrid,
.splitGrid,
.metricGrid,
.reportDraft,
.timeForm,
.workbookHead,
.workbookBody,
.userFoundationGrid,
.authShell,
.entryChoiceGrid,
.formGrid {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.screen > *,
.screenHead,
.todayHero,
.timerCommandCard,
.todaySummaryGrid,
.fieldQuickActions,
.missionList,
.moduleGrid,
.splitGrid,
.metricGrid,
.reportDraft,
.timeForm,
.workbookHead,
.workbookBody,
.userFoundationGrid,
.authShell,
.entryChoiceGrid,
.formGrid {
  width: 100%;
}

.sprint6Header {
  padding-block: clamp(14px, 1.7vw, 20px);
}

#screenTitle,
.brandBlock h1 {
  font-size: clamp(1.48rem, 2.2vw, 2.2rem);
  letter-spacing: 0;
}

.todayHero,
.timerCommandCard,
.screenHead,
.workbookHead,
.reportDraft,
.missionCard,
.listCard,
.formCard,
.accountCard,
.authCard {
  border-radius: var(--s7-radius);
  box-shadow: var(--s7-shadow-soft);
}

/* Heute: DOM order stays Hero -> Timer -> Summary -> Quick Actions. */
.todayHero {
  min-height: unset;
  padding: clamp(15px, 1.9vw, 20px);
  background: var(--s7-surface);
  border: 1px solid var(--s7-line);
  color: var(--s7-ink);
}

.todayIntro span,
.todayIntro p,
.activeJobCard span,
.activeJobCard p {
  color: var(--s7-muted);
}

.todayIntro h2 {
  margin: 4px 0;
  font-size: clamp(1.22rem, 2vw, 1.72rem);
  line-height: 1.08;
}

.activeJobCard {
  min-height: unset;
  padding: 13px;
  border-radius: 14px;
  background: var(--s7-surface);
  border: 1px solid var(--s7-line);
  box-shadow: none;
}

.activeJobCard h3 {
  margin: 4px 0 2px;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.15;
}

.activeJobCard strong {
  display: inline-flex;
  margin-top: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(184, 255, 44, 0.18);
  color: #3c5f00;
  font-size: 0.82rem;
}

/* Timer: heart of the product, but not a hero banner. */
.timerCommandCard {
  position: relative;
  overflow: hidden;
  min-height: unset;
  padding: clamp(14px, 1.6vw, 18px);
  background: var(--s7-surface-strong);
  border: 1px solid rgba(53, 214, 255, 0.18);
  color: #ffffff;
}

.timerCommandCard::before {
  content: "Arbeitsstatus";
  display: inline-flex;
  width: fit-content;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(184, 255, 44, 0.12);
  color: var(--s7-primary);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.timerCommandCard > div:first-child span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.timerCommandCard h2 {
  max-width: 14ch;
  margin-top: 2px;
  color: #ffffff;
  font-size: clamp(1.48rem, 2.7vw, 2.55rem);
  line-height: 1.03;
  letter-spacing: 0;
}

.timerActions {
  align-items: stretch;
  gap: 8px;
}

.timerActions .primaryAction,
.timerActions .dangerAction,
.timerActions button {
  min-height: 48px;
  border-radius: 14px;
  font-size: clamp(0.94rem, 1.35vw, 1.05rem);
  font-weight: 900;
}

.timerActions .primaryAction {
  background: var(--s7-primary);
  color: var(--s7-surface-strong);
  box-shadow: 0 10px 20px rgba(184, 255, 44, 0.16);
}

.timerActions .primaryAction:hover {
  background: var(--s7-primary-dark);
}

.timerActions .dangerAction {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

.timerCommandCard .mainActionRow {
  margin-top: 8px;
  gap: 8px;
}

.timerCommandCard .mainActionRow button {
  min-height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.88rem;
}

/* Summary and quick actions follow the real rendered count. */
.todaySummaryGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.todaySummaryGrid article {
  min-height: 82px;
  height: 100%;
  padding: 13px;
  border-radius: 16px;
  background: var(--s7-surface);
  border: 1px solid var(--s7-line);
  box-shadow: var(--s7-shadow-soft);
}

.todaySummaryGrid h3,
.todaySummaryGrid strong {
  margin: 5px 0 3px;
  font-size: clamp(1.15rem, 1.55vw, 1.55rem);
}

.fieldQuickActions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.fieldQuickActions button {
  min-height: 56px;
  border-radius: 16px;
  background: var(--s7-surface);
  border: 1px solid var(--s7-line);
  color: var(--s7-ink);
  box-shadow: var(--s7-shadow-soft);
}

.fieldQuickActions button:first-child,
.fieldQuickActions button:last-child {
  background: rgba(184, 255, 44, 0.13);
  border-color: rgba(184, 255, 44, 0.32);
}

.fieldQuickActions span {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: rgba(11, 15, 20, 0.07);
}

/* Assignment / Auftrag: keep colored left markers, increase density. */
.screenHead {
  padding: clamp(18px, 2.1vw, 24px);
  background: var(--s7-surface);
  border: 1px solid var(--s7-line);
}

.screenHead h2 {
  font-size: clamp(1.36rem, 2vw, 1.95rem);
}

.screenHead p,
.missionCard p,
.missionMeta,
.listCard p,
.workbookHead p {
  color: var(--s7-muted);
}

.missionList,
.cardList {
  gap: 12px;
}

.missionCard {
  min-height: unset;
  padding: 16px;
  background: var(--s7-surface);
  border: 1px solid var(--s7-line);
  border-left-width: 5px;
}

.missionCard h3 {
  font-size: clamp(1.06rem, 1.5vw, 1.3rem);
}

.missionCard .cardActions,
.cardActions {
  align-items: center;
  gap: 8px;
}

.cardActions .primaryAction {
  min-height: 46px;
  padding-inline: 18px;
  border-radius: 14px;
  background: var(--s7-primary);
  color: var(--s7-surface-strong);
}

.cardActions .primaryAction:hover {
  background: var(--s7-primary-dark);
}

.cardActions button:not(.primaryAction) {
  min-height: 44px;
  border-radius: 14px;
  background: rgba(11, 15, 20, 0.045);
  color: var(--s7-ink);
}

.workbookHead {
  background: var(--s7-surface);
  border: 1px solid var(--s7-line);
}

.workbookHead h2 {
  font-size: clamp(1.36rem, 2vw, 2rem);
}

.tabRail {
  gap: 8px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(11, 15, 20, 0.045);
}

.tabRail button {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 850;
}

.metricGrid article,
.listCard {
  border-radius: 16px;
  border: 1px solid var(--s7-line);
  box-shadow: var(--s7-shadow-soft);
}

/* Rapport: calm product UI, not form-heavy. */
.reportDraft {
  padding: clamp(16px, 1.9vw, 22px);
  background: var(--s7-surface);
  border: 1px solid var(--s7-line);
}

.reportDraft article {
  min-height: 96px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--s7-line);
  background: var(--s7-surface);
  box-shadow: none;
}

.reportDraft h3 {
  font-size: 0.78rem;
  color: var(--s7-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.reportDraft strong,
.reportDraft p:first-of-type {
  font-size: clamp(1.08rem, 1.6vw, 1.34rem);
  color: var(--s7-ink);
}

.reportDraft .wide {
  min-height: 114px;
}

/* Preview switcher: keep established dark ORARI panel, make it release-safe. */
.previewContextPanel {
  width: min(520px, calc(100vw - 28px));
  max-width: min(520px, calc(100vw - 28px));
  gap: 12px;
  padding: 15px;
  border-radius: 20px;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(184, 255, 44, 0.08), rgba(53, 214, 255, 0.08) 56%, transparent),
    var(--s7-surface-strong);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 26px 70px rgba(11, 15, 20, 0.38);
}

.previewPanelHead {
  gap: 12px;
  margin-bottom: 0;
}

.previewPanelHead h2 {
  font-size: 1rem;
}

.previewPanelHead span,
.previewPanelSection > span {
  color: rgba(255, 255, 255, 0.66);
}

.previewPanelHead h2,
.previewPanelHead h2 strong {
  color: #ffffff;
}

#previewCurrentRole {
  color: var(--s7-primary);
}

.previewPanelSection,
.previewSelectGrid {
  gap: 10px;
}

.previewRoleGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.previewRoleGrid button {
  min-height: 42px;
  min-width: 0;
  padding-inline: 8px;
  border-radius: 13px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: none;
  font-size: 0.78rem;
}

.previewRoleGrid button.active {
  color: var(--s7-surface-strong);
  background: var(--s7-primary);
  border-color: rgba(184, 255, 44, 0.8);
  box-shadow: 0 10px 22px rgba(184, 255, 44, 0.16);
}

.previewSelectGrid label,
.rememberPreviewChoice {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.86rem;
}

.previewSelectGrid select {
  min-height: 44px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.previewSelectGrid select option {
  color: var(--s7-ink);
}

.rememberPreviewChoice {
  display: flex;
  align-items: center;
  gap: 10px;
}

.previewHint {
  color: rgba(255, 255, 255, 0.74);
  background: rgba(53, 214, 255, 0.08);
  border-color: rgba(53, 214, 255, 0.16);
  font-size: 0.82rem;
}

button,
select,
input,
textarea {
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}

button:active {
  transform: translateY(1px);
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(53, 214, 255, 0.38);
  outline-offset: 2px;
}

/* Desktop: controlled SaaS density without stretched mobile feel. */
@media (min-width: 980px) {
  .mainLayout {
    width: 100%;
    max-width: calc(var(--s7-sidebar-width) + var(--s7-content-max) + clamp(14px, 2vw, 24px));
    grid-template-columns: var(--s7-sidebar-width) minmax(0, var(--s7-content-max));
    justify-content: start;
    align-items: start;
    margin-inline: auto;
  }

  .screen {
    width: 100%;
    max-width: var(--s7-content-max);
    justify-self: stretch;
    margin-inline: 0;
  }

  .todayHero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
    align-items: center;
  }

  .timerCommandCard {
    display: grid;
    grid-template-columns: minmax(210px, 0.75fr) minmax(360px, 1.25fr);
    align-items: end;
    column-gap: 18px;
  }

  .timerCommandCard::before {
    grid-column: 1 / -1;
  }

  .timerActions,
  .timerCommandCard .mainActionRow {
    grid-column: 2;
  }

  .timerActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .missionList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .missionCard.full {
    grid-column: span 1;
  }

  .reportDraft {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .reportDraft .wide {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .todaySummaryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

/* Tablet and phone: compact first fold without hiding core information. */
@media (max-width: 860px) {
  .workspace {
    padding-top: 0;
  }

  .sprint6Header {
    padding: 14px 16px 16px;
  }

  .brandBlock span {
    font-size: 0.78rem;
  }

  #screenTitle,
  .brandBlock h1 {
    font-size: clamp(1.24rem, 6vw, 1.82rem);
  }

  .previewSwitcher {
    margin-top: -8px;
    padding-inline: 12px;
  }

  .mainLayout {
    padding-inline: 12px;
  }

  .screen {
    margin-top: -4px;
  }

  .todayHero {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 13px;
  }

  .todayIntro h2 {
    font-size: 1.22rem;
  }

  .todayIntro p {
    margin-bottom: 0;
  }

  .activeJobCard {
    display: block;
    padding: 11px;
  }

  .activeJobCard p {
    margin-bottom: 0;
  }

  .timerCommandCard {
    padding: 13px;
    border-radius: 18px;
  }

  .timerCommandCard::before {
    margin-bottom: 6px;
    font-size: 0.64rem;
  }

  .timerCommandCard h2 {
    font-size: clamp(1.7rem, 8.8vw, 2.35rem);
  }

  .timerActions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .timerActions .primaryAction,
  .timerActions .dangerAction,
  .timerActions button {
    min-height: 52px;
  }

  .timerCommandCard .mainActionRow {
    grid-template-columns: 1fr 1fr;
  }

  .fieldQuickActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fieldQuickActions button {
    min-height: 56px;
  }

  .screenHead {
    padding: 16px;
  }

  .screenHead h2 {
    font-size: 1.46rem;
  }

  .missionCard {
    padding: 15px;
  }

  .missionCard .cardActions,
  .cardActions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cardActions .primaryAction,
  .cardActions button:not(.primaryAction) {
    min-height: 50px;
  }

  .tabRail {
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .tabRail button {
    min-width: 132px;
    scroll-snap-align: start;
  }

  .workbookHead {
    padding: 18px;
  }

  .workbookHead h2 {
    font-size: 1.5rem;
  }

  .metricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reportDraft {
    grid-template-columns: 1fr;
  }

  .reportDraft article {
    min-height: 88px;
  }
}

@media (max-width: 640px) {
  .todaySummaryGrid {
    grid-template-columns: 1fr;
  }

  .previewContextPanel {
    inset-inline: 12px;
    width: auto;
    max-width: none;
    padding: 14px;
  }

  .previewRoleGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .timerCommandCard .mainActionRow,
  .metricGrid {
    grid-template-columns: 1fr;
  }

  .fieldQuickActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .screen {
    gap: 10px;
  }

  .timerCommandCard h2 {
    font-size: 1.9rem;
  }
}

@media (max-width: 360px) {
  .fieldQuickActions,
  .previewRoleGrid {
    grid-template-columns: 1fr;
  }
}