:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --deep: #080f20;
  --bg: #151322;
  --card: #242137;
  --input: #312e47;
  --line: rgba(221, 216, 244, 0.2);
  --text: #fff;
  --muted: #aaa4bd;
  --soft: #d9d4e8;
  --purple: #aa7cf2;
  --orange: #ffa334;
  --blue: #2585ff;
  --green: #42db78;
  --red: #ff4a42;
  --cyan: #00b8d9;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-height: 100dvh; overscroll-behavior: none; }
button, input, textarea, select { font: inherit; }
button, .file-button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; filter: grayscale(0.55); opacity: 0.45; }
.hidden { display: none !important; }

.auth-view {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: calc(1.4rem + env(safe-area-inset-top)) 1.35rem calc(1rem + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 11%, rgba(45, 111, 255, 0.32), transparent 24rem),
    linear-gradient(160deg, rgba(53, 26, 100, 0.7), transparent 55%),
    var(--deep);
}
.brand-intro { width: min(100%, 32rem); margin: 0 auto; text-align: center; }
.brand-name, .home-brand {
  color: var(--blue);
  font-size: clamp(2.8rem, 13vw, 4.4rem);
  font-weight: 900;
  letter-spacing: 0.055em;
  line-height: 0.95;
  text-shadow: 0 5px 18px #000;
}
.brand-intro p, .home-subtitle { margin: 0.35rem 0 0.7rem; font-weight: 750; text-shadow: 0 2px 7px #000; }
.bolt-divider { display: flex; align-items: center; gap: 0.75rem; width: min(20rem, 82%); margin: 0.45rem auto 0; }
.bolt-divider::before, .bolt-divider::after { content: ""; height: 1px; flex: 1; background: #ffd600; }
.bolt-divider span { color: #ffd600; font-size: 1.55rem; filter: drop-shadow(0 3px 4px #000); }
.bolt-divider.compact { margin-top: 0.15rem; }
.bolt-divider.compact span { font-size: 1.2rem; }
.release-pill {
  display: inline-flex;
  padding: 0.36rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  color: #f6f3ff;
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.auth-card {
  width: min(100%, 32rem);
  margin: 0 auto;
  padding: 1.2rem;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 0.8rem;
  background: rgba(22, 19, 35, 0.94);
  box-shadow: 0 16px 42px rgba(0,0,0,0.45);
}
.auth-card h1 { margin: 0 0 0.35rem; font-size: 1.55rem; }
.auth-card > p { margin: 0 0 1rem; color: var(--muted); font-size: 0.88rem; }
form { display: grid; gap: 0.55rem; }
label { display: block; margin-top: 0.5rem; color: #ddd8ed; font-size: 0.82rem; font-weight: 720; }
input, textarea, select {
  width: 100%;
  min-height: 2.85rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  outline: 0;
  background: var(--input);
  color: var(--text);
}
input:focus, textarea:focus, select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(170,124,242,0.18); }
input[readonly] { color: #c8c1dc; opacity: 0.85; }
textarea { min-height: 6.2rem; resize: vertical; }
select { appearance: auto; }

.primary-button, .secondary-button {
  width: 100%;
  min-height: 2.9rem;
  margin-top: 0.55rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.45rem;
  font-weight: 850;
}
.primary-button { background: var(--purple); color: #151221; }
.secondary-button { background: #555368; color: white; }
.success-button { background: var(--green); }
.danger-button { background: var(--red); color: white; }
.form-message { min-height: 1.2rem; margin: 0.75rem 0 0; color: #ffc46f; font-size: 0.8rem; line-height: 1.4; }
.standalone-version { margin: 0 auto; color: rgba(255,255,255,0.43); font-size: 0.65rem; }

.session-bar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.6rem;
  align-items: center;
  min-height: 3.45rem;
  padding: max(0.55rem, env(safe-area-inset-top)) 0.75rem 0.55rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: rgba(8,15,32,0.94);
  backdrop-filter: blur(16px);
}
.session-brand { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; background: #30274f; color: #ffd600; }
.session-copy { min-width: 0; display: grid; }
.session-copy strong, .session-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-copy strong { font-size: 0.78rem; color: #c8b6ff; }
.session-copy span { font-size: 0.65rem; color: var(--muted); }
.connection-badge { color: #e9e4f4; font-size: 0.62rem; }
.connection-badge.online { color: #7df0a2; }
.connection-badge.offline { color: #ffc46f; }
.icon-button { min-height: 2rem; padding: 0.35rem 0.55rem; border: 1px solid var(--line); border-radius: 0.35rem; background: transparent; color: white; font-size: 0.68rem; }

.screen, .content-screen {
  width: min(100%, 42rem);
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(1.25rem + env(safe-area-inset-top)) 1.1rem calc(2rem + env(safe-area-inset-bottom));
  background: var(--bg);
}
.session-bar:not(.hidden) + .screen,
.session-bar:not(.hidden) ~ .employee-shell .content-screen { min-height: calc(100dvh - 3.45rem); padding-top: 1rem; }
.screen-heading { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
.screen-heading .bolt-logo { display: grid; width: 3.6rem; min-width: 3.6rem; height: 3.3rem; place-items: center; background: #30274f; color: #ffd600; font-size: 1.7rem; }
.screen-heading div:last-child { display: grid; gap: 0.18rem; }
.screen-heading strong { color: #c4aaff; font-size: 1.35rem; }
.screen-heading span { color: #d3d0dc; font-size: 0.72rem; }
.sticky-heading { position: sticky; z-index: 15; top: 3.4rem; padding: 0.45rem 0; background: var(--bg); }

.organization-list { display: grid; gap: 0.75rem; margin: 1rem 0; }
.organization-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.75rem;
  width: 100%;
  min-height: 4.6rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--card);
  color: white;
  text-align: left;
}
.organization-card strong { align-self: end; color: #fff; }
.organization-card small { color: var(--muted); }
.organization-card span { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 0.25rem 0.5rem; border-radius: 999px; background: rgba(67,218,120,0.15); color: #8af2ae; font-size: 0.68rem; }

.employee-shell { min-height: calc(100dvh - 3.45rem); }
.employee-screen { width: min(100%, 42rem); margin: 0 auto; }
.home-screen {
  min-height: calc(100dvh - 3.45rem);
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 6%, rgba(37,133,255,0.2), transparent 20rem),
    linear-gradient(155deg, rgba(69,29,112,0.38), transparent 50%),
    var(--deep);
}
.home-brand { font-size: clamp(2.15rem, 9vw, 3.2rem); text-align: center; }
.home-subtitle { text-align: center; font-size: 0.92rem; }
.home-screen > .release-pill { align-self: center; }

.journey-card {
  display: grid;
  gap: 0.32rem;
  margin: 0.9rem 0 0.45rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(205,200,235,0.27);
  border-radius: 0.65rem;
  background: rgba(35,32,54,0.92);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.journey-card > strong { color: #ffc064; font-size: 0.82rem; }
.journey-card.open > strong { color: #82efaa; }
.journey-details, .journey-total, .journey-daily { color: #f0edf8; font-size: 0.72rem; line-height: 1.35; }
.journey-total { color: #c7b6ff; font-weight: 800; }
.journey-daily { color: #b9e8ff; }
.journey-card > span { color: var(--muted); font-size: 0.62rem; }
.home-message, .queue-status { min-height: 0.9rem; margin: 0.1rem 0; color: #ffe2b7; font-size: 0.67rem; text-align: center; }
.queue-status { color: #c8c2d6; }
.queue-status.pending { color: #ffc064; font-weight: 750; }

.home-actions { display: grid; gap: clamp(0.42rem, 1.2dvh, 0.65rem); margin-top: 0.35rem; }
.action-button {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  width: 100%;
  min-height: clamp(3.25rem, 7.2dvh, 4.2rem);
  padding: 0 1.2rem 0.25rem 1.45rem;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 0.55rem;
  color: white;
  font-size: clamp(1rem, 2.7dvh, 1.3rem);
  text-align: left;
  text-shadow: 0 3px 4px rgba(0,0,0,0.85);
  box-shadow: 0 5px 0 rgba(0,0,0,0.82), 0 9px 15px rgba(0,0,0,0.3);
  transition: transform 0.08s, box-shadow 0.08s;
}
.action-button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #000, 0 4px 8px rgba(0,0,0,0.35); }
.action-button span { width: 1.55rem; text-align: center; }
.action-purple { background: linear-gradient(#c6a7ff, #9952ec 42%, #4b176f); }
.action-green { background: linear-gradient(#79f39b, #26c94b 42%, #085220); }
.action-red { background: linear-gradient(#ff8d84, #f23c36 42%, #75100d); }
.action-orange { background: linear-gradient(#ffc262, #f69500 42%, #8b3e00); }
.action-cyan { background: linear-gradient(#70ecff, #00a5cb 42%, #004e79); }
.action-blue { background: linear-gradient(#83b9ff, #2879e8 42%, #12366f); }
.small-action { align-self: center; min-width: 13rem; min-height: 2.2rem; margin-top: 0.65rem; border: 1px solid rgba(255,255,255,0.35); border-radius: 0.45rem; background: linear-gradient(#9d9caf, #57566b); color: white; font-weight: 750; }
.home-footer { margin-top: auto; padding-top: 0.55rem; text-align: center; }
.home-footer div { display: flex; align-items: center; gap: 0.55rem; color: var(--blue); font-weight: 900; }
.home-footer div::before, .home-footer div::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, var(--blue), #ffd600); }
.home-footer strong { display: block; margin-top: 0.2rem; font-size: 0.74rem; }
.home-footer > span { display: block; margin-top: 0.15rem; color: rgba(255,255,255,0.38); font-size: 0.52rem; }

.content-card { margin-bottom: 1rem; padding: 1rem; border: 1px solid rgba(255,255,255,0.06); background: var(--card); }
.content-card h2 { margin: 0 0 0.85rem; color: var(--orange); font-size: 1rem; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.two-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.attendance-status { display: grid; gap: 0.45rem; color: #f1eef7; }
.attendance-state { color: var(--orange); font-size: 1rem; }
.attendance-state.open { color: var(--green); }
.attendance-line { display: flex; justify-content: space-between; gap: 0.75rem; color: var(--soft); font-size: 0.82rem; }
.attendance-line strong { color: white; text-align: right; font-variant-numeric: tabular-nums; }

.draft-notice { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; margin-bottom: 1rem; padding: 0.8rem; border: 1px solid rgba(170,124,242,0.55); border-radius: 0.55rem; background: rgba(170,124,242,0.12); }
.draft-notice strong { color: #d4bdff; }
.draft-notice span { grid-column: 1; color: var(--soft); font-size: 0.74rem; }
.draft-notice button { grid-column: 2; grid-row: 1 / 3; border: 0; border-radius: 0.35rem; background: #5e5870; color: white; }
.file-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-top: 0.45rem; }
.file-button { display: grid; min-height: 2.75rem; place-items: center; margin: 0; border-radius: 0.4rem; background: var(--purple); color: #171323; font-weight: 850; }
.file-button input { display: none; }
.file-help, .file-count { margin: 0.5rem 0 0; color: #bdb6d2; font-size: 0.7rem; line-height: 1.35; }
.file-count { color: #ded9ed; }
.file-previews { display: flex; gap: 0.65rem; overflow-x: auto; padding: 0.65rem 0 0.1rem; }
.file-preview { position: relative; display: grid; width: 5.5rem; min-width: 5.5rem; height: 5.5rem; place-items: center; overflow: hidden; background: #161420; }
.file-preview img, .file-preview video { width: 100%; height: 100%; object-fit: cover; }
.file-preview .file-icon { font-size: 1.7rem; }
.file-preview small { position: absolute; right: 0; bottom: 0; left: 0; padding: 0.2rem; background: rgba(0,0,0,0.72); font-size: 0.52rem; text-align: center; }
.file-preview button { position: absolute; top: 0; right: 0; width: 1.6rem; height: 1.6rem; border: 0; background: #ba3f55; color: white; font-weight: 900; }
.storage-note { margin-bottom: 0.8rem; padding: 0.75rem; border: 1px solid rgba(255,163,52,0.35); border-radius: 0.5rem; background: rgba(255,163,52,0.1); color: #ffe1b5; font-size: 0.72rem; line-height: 1.4; }

.history-list { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
.history-card { padding: 0.9rem; border: 1px solid var(--line); border-radius: 0.55rem; background: var(--card); box-shadow: 0 5px 14px rgba(0,0,0,0.25); }
.history-card header { display: flex; justify-content: space-between; gap: 0.65rem; margin-bottom: 0.55rem; }
.history-card header strong { color: #ffc064; }
.history-card header span { color: #d5d0e1; font-size: 0.72rem; }
.history-card p { margin: 0.28rem 0; color: #f2eff8; font-size: 0.78rem; line-height: 1.35; white-space: pre-wrap; }
.history-card b { color: #c9b7ff; }
.evidence-summary { margin-top: 0.7rem; color: #aaa3b6; font-size: 0.7rem; }
.evidence-button { width: 100%; padding: 0.65rem; border: 1px solid rgba(67, 203, 221, 0.4); border-radius: 0.45rem; background: rgba(67, 203, 221, 0.1); color: #baf5ff; font-weight: 800; }
.evidence-button:disabled { opacity: 0.65; }
.evidence-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.65rem; }
.evidence-gallery figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 0.45rem; background: #11101a; }
.evidence-gallery img, .evidence-gallery video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #05050a; }
.evidence-gallery figcaption { overflow: hidden; padding: 0.4rem; color: #ded8e9; font-size: 0.58rem; text-overflow: ellipsis; white-space: nowrap; }
.empty-state { padding: 1rem; color: var(--muted); text-align: center; }

.month-toolbar {
  display: grid;
  grid-template-columns: 2.8rem 1fr auto;
  gap: 0.55rem;
  align-items: end;
  margin-bottom: 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: var(--card);
}
.month-toolbar label { grid-column: 2; grid-row: 1; margin: 0; }
.month-toolbar input { grid-column: 2; grid-row: 2; }
.month-toolbar button {
  min-height: 2.85rem;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.4rem;
  background: #4e4964;
  color: white;
  font-weight: 800;
}
.month-toolbar #previous-month { grid-column: 1; grid-row: 1 / 3; font-size: 1.8rem; }
.month-toolbar #current-month { grid-column: 3; grid-row: 1 / 3; font-size: 0.72rem; }
.month-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0 0 0.8rem; }
.month-metric { display: grid; gap: 0.18rem; min-height: 4.5rem; align-content: center; padding: 0.75rem; border: 1px solid var(--line); border-radius: 0.55rem; background: linear-gradient(145deg, #302b48, #211e34); }
.month-metric strong { color: #fff; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.month-metric span { color: #c8c1da; font-size: 0.68rem; }
.month-metric.hours strong { color: #86b9ff; }
.month-metric.reports strong { color: #ffc064; }
.month-metric.incidents strong { color: #ff8f88; }
.summary-notice { margin-bottom: 0.8rem; padding: 0.75rem; border: 1px solid rgba(255, 192, 100, 0.4); border-radius: 0.5rem; background: rgba(255, 192, 100, 0.1); color: #ffe0b2; font-size: 0.72rem; line-height: 1.4; }
.summary-notice.cached { border-color: rgba(112, 236, 255, 0.35); background: rgba(0, 165, 203, 0.1); color: #c1f6ff; }
.month-days { display: grid; gap: 0.65rem; margin-bottom: 1rem; }
.month-day { padding: 0.8rem; border: 1px solid var(--line); border-radius: 0.55rem; background: var(--card); box-shadow: 0 4px 12px rgba(0,0,0,0.22); }
.month-day.empty { opacity: 0.62; }
.month-day header { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; margin-bottom: 0.5rem; }
.month-day header strong { color: #c9b7ff; font-size: 0.88rem; text-transform: capitalize; }
.month-day header span { color: #86b9ff; font-weight: 850; font-variant-numeric: tabular-nums; }
.month-day-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.32rem 0.8rem; }
.month-day-grid span { color: #d9d4e8; font-size: 0.72rem; }
.month-day-grid b { color: white; }
.month-day-alerts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.month-day-alerts span { padding: 0.24rem 0.42rem; border-radius: 999px; background: rgba(255, 74, 66, 0.16); color: #ffaaa5; font-size: 0.62rem; font-weight: 750; }
.month-day-alerts .open-segment { background: rgba(66, 219, 120, 0.14); color: #8cf0ad; }

.modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1.3rem; background: rgba(8,7,15,0.9); }
.modal-card { width: min(100%, 28rem); padding: 1.3rem; border: 1px solid var(--line); border-radius: 0.7rem; background: var(--card); text-align: center; }
.modal-card h2 { margin: 0.7rem 0 0.4rem; color: var(--green); }
.modal-card p { color: var(--soft); line-height: 1.45; }
.spinner { width: 3.5rem; height: 3.5rem; margin: 0 auto; border: 5px solid rgba(255,255,255,0.16); border-top-color: white; border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.trace-id { position: fixed; right: 0.25rem; bottom: 0.2rem; z-index: -1; color: transparent; font-size: 1px; }

@media (min-width: 700px) {
  .session-bar { padding-inline: calc((100% - 42rem) / 2 + 0.8rem); }
  .content-screen { border-right: 1px solid rgba(255,255,255,0.06); border-left: 1px solid rgba(255,255,255,0.06); }
}
@media (max-width: 390px) {
  .home-screen { padding-inline: 0.9rem; }
  .action-button { min-height: 3.1rem; font-size: 0.98rem; }
  .session-copy strong { max-width: 8.5rem; }
  .connection-badge { display: none; }
  .session-bar { grid-template-columns: auto 1fr auto; }
  .month-toolbar { grid-template-columns: 2.5rem 1fr; }
  .month-toolbar #current-month { grid-column: 1 / 3; grid-row: 3; min-height: 2.35rem; }
}
@media (max-height: 760px) {
  .home-screen { padding-top: 0.6rem; }
  .home-brand { font-size: 2rem; }
  .home-subtitle { margin-block: 0.15rem 0.35rem; font-size: 0.75rem; }
  .home-screen > .release-pill { padding-block: 0.2rem; font-size: 0.52rem; }
  .journey-card { margin-top: 0.45rem; padding-block: 0.55rem; }
  .home-actions { gap: 0.38rem; }
  .action-button { min-height: 2.9rem; font-size: 0.95rem; }
  .small-action { min-height: 1.9rem; margin-top: 0.45rem; }
  .home-footer { padding-top: 0.35rem; }
}