:root { font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; color: #e5e7eb; background: #030712; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #030712; }
.shell { max-width: 560px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.sub { color: #9ca3af; font-size: .82rem; margin-top: 2px; }
.card, .panel { background: #111827; border: 1px solid #1f2937; border-radius: 16px; padding: 18px; margin-bottom: 14px; }
.panel { padding-bottom: 24px; }
h1, h2, h3 { margin-top: 0; }
label { display: block; color: #d1d5db; margin: 12px 0; font-size: .9rem; }
input, select, textarea { width: 100%; margin-top: 6px; padding: 12px; border-radius: 10px; border: 1px solid #374151; background: #0b1220; color: #f9fafb; font-size: 1rem; }
button { border: 0; border-radius: 10px; padding: 12px 14px; background: #2563eb; color: white; font-weight: 650; font-size: .95rem; }
button.secondary { background: #374151; }
button.danger { background: #b91c1c; }
button.ghost { background: transparent; border: 1px solid #374151; }
button:disabled { opacity: .55; }
.monthbar { display: grid; grid-template-columns: 42px 1fr 42px; gap: 8px; align-items: center; text-align: center; margin-bottom: 12px; }
.monthbar button { padding: 8px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; position: sticky; top: 0; padding: 8px 0; background: #030712; z-index: 2; scrollbar-width: thin; }
.tabs button { flex: 0 0 auto; background: #111827; color: #9ca3af; padding: 10px 12px; font-size: .76rem; white-space: nowrap; }
.tabs button.active { background: #1d4ed8; color: white; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metric { background: #0b1220; border-radius: 12px; padding: 12px; }
.metric .value { font-size: 1.35rem; font-weight: 700; }
.metric .label { color: #9ca3af; font-size: .8rem; margin-top: 4px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.item { border-top: 1px solid #1f2937; padding: 12px 0; }
.item:first-child { border-top: 0; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; background: #1f2937; font-size: .78rem; color: #d1d5db; }
.muted { color: #9ca3af; }
.error { color: #fca5a5; min-height: 1.2em; }
.success { color: #86efac; }
.hidden { display: none !important; }
@media (max-width: 420px) { .tabs button { font-size: .64rem; padding: 9px 2px; } .shell { padding-left: 10px; padding-right: 10px; } }

.summary-card { background:#0b1220; border:1px solid #1f2937; border-radius:12px; padding:12px; margin:10px 0; }
.notice { border-left:4px solid #6b7280; padding:10px 12px; background:#0b1220; margin:10px 0; border-radius:8px; }
.notice.warn { border-left-color:#f59e0b; }
.notice.ok { border-left-color:#10b981; }
.calendar-list { display:grid; gap:6px; }
.day-row { display:grid; grid-template-columns:72px 1fr auto; gap:8px; align-items:center; padding:10px; background:#0b1220; border-radius:10px; }
.day-row.rest { opacity:.7; }
.day-row.absence { border-left:4px solid #8b5cf6; }
.day-row.missing { border-left:4px solid #f59e0b; }
.day-row.ok { border-left:4px solid #10b981; }
.day-date { font-weight:700; }
.day-meta { color:#9ca3af; font-size:.82rem; }
.kv { display:grid; grid-template-columns:140px 1fr; gap:6px 12px; margin:8px 0; }
.kv > div:nth-child(odd) { color:#9ca3af; }
@media (max-width: 420px) { .tabs button { font-size: .7rem; padding: 9px 10px; } .shell { padding-left: 10px; padding-right: 10px; } .day-row { grid-template-columns:62px 1fr; } .day-row > :last-child { grid-column:2; } .kv { grid-template-columns:1fr; gap:2px; } }

.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin:12px 0 16px; }
.calendar-weekday { color:#9ca3af; text-align:center; font-size:.72rem; padding:4px 0; }
.calendar-cell { min-height:70px; padding:7px; border:1px solid #1f2937; border-radius:10px; background:#0b1220; text-align:left; color:#f3f4f6; }
.calendar-cell.empty { visibility:hidden; }
.calendar-cell .n { font-weight:700; }
.calendar-cell .s { display:block; font-size:.68rem; color:#9ca3af; margin-top:5px; line-height:1.15; }
.calendar-cell.work { border-left:4px solid #2563eb; }
.calendar-cell.rest { opacity:.65; }
.calendar-cell.holiday { border-left:4px solid #ef4444; }
.calendar-cell.leave { border-left:4px solid #8b5cf6; }
.calendar-cell.sick { border-left:4px solid #f97316; }
.calendar-cell.overtime { border-bottom:4px solid #14b8a6; }
.calendar-cell.missing { border-left:4px solid #f59e0b; }
.calendar-cell.prefilled { border-left:4px solid #10b981; }
.legend { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; font-size:.72rem; color:#d1d5db; }
.legend span { background:#111827; border-radius:999px; padding:4px 8px; }
@media (max-width: 520px) {
  .calendar-grid { gap:3px; }
  .calendar-cell { min-height:58px; padding:5px; }
  .calendar-cell .s { font-size:.58rem; }
}

.date-picker-dialog { width:min(94vw,420px); border:1px solid #374151; border-radius:16px; background:#111827; color:#e5e7eb; padding:14px; }
.date-picker-dialog::backdrop { background:rgba(0,0,0,.7); }
.date-picker-head { display:grid; grid-template-columns:44px 1fr 44px; gap:8px; align-items:center; }
.date-picker-selects { display:grid; grid-template-columns:1fr 90px; gap:6px; }
.date-picker-selects select { margin:0; padding:9px; }
.date-picker-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:12px; }
.date-picker-grid .weekday { text-align:center; color:#9ca3af; font-size:.72rem; padding:4px 0; }
.date-picker-grid button { min-height:42px; padding:5px; background:#0b1220; border:1px solid #1f2937; }
.date-picker-grid button.today { border-color:#2563eb; }
.date-picker-grid button.selected { background:#1d4ed8; }
.date-picker-grid .empty { min-height:42px; }
.date-picker-actions { justify-content:flex-end; margin-top:12px; }
input.date-field[readonly] { cursor:pointer; }

/* Employee UAT remediation */
.topbar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; }
.identity-block strong { display:block; font-size:1.02rem; }
.product-meta { color:#9ca3af; font-size:.72rem; white-space:nowrap; }
.product-meta span { color:#6b7280; }
.historical-month { color:#ef4444 !important; }
.historical-period { filter:grayscale(.55); opacity:.82; }
.historical-period .notice.warn,
.historical-period .error,
.historical-period .red-signal { filter:none; opacity:1; }
.calendar-cell.inactive-employment { opacity:.35; cursor:not-allowed; border-style:dashed; }
.calendar-cell:disabled { cursor:not-allowed; }
.inline-day-editor { margin:6px 0 10px; padding:12px; border:1px solid #374151; border-radius:12px; background:#0b1220; }
.compact-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; align-items:end; }
.compact-fields label { margin:0; }
.inline-day-editor textarea,
.inline-day-editor input { padding:9px; }
.legend .lg-work::before { content:"● "; color:#2563eb; }
.legend .lg-prefill::before { content:"● "; color:#10b981; }
.legend .lg-leave::before { content:"● "; color:#8b5cf6; }
.legend .lg-sick::before { content:"● "; color:#f97316; }
.legend .lg-missing::before { content:"● "; color:#f59e0b; }
.legend .lg-holiday::before { content:"● "; color:#ef4444; }
.legend .lg-overtime::before { content:"■ "; color:#14b8a6; }
.red-signal { border-left:4px solid #ef4444; background:#2a1114; padding:10px 12px; border-radius:8px; }
.orange-signal { border-left:4px solid #f59e0b; background:#2a2110; padding:10px 12px; border-radius:8px; }
.badge.pending { background:#78350f; color:#fde68a; }
.badge.error-state { background:#7f1d1d; color:#fecaca; }
.filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:10px 0 14px; }
.filters label { margin:0; }
.case-row { border-top:1px solid #1f2937; padding:10px 0; }
.case-row:first-child { border-top:0; }
.doc-missing { color:#fca5a5; }
@media (max-width:520px) {
  .topbar { grid-template-columns:minmax(0,1fr) auto; }
  .product-meta { grid-column:1; grid-row:2; margin-top:-4px; }
  .topbar #logoutBtn { grid-column:2; grid-row:1 / span 2; }
  .compact-fields { grid-template-columns:1fr 1fr; }
  .compact-fields label:last-child { grid-column:1 / -1; }
  .filters { grid-template-columns:1fr; }
}


/* Employee UAT follow-up – 2026-09-24 */
.tabs {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
  overflow:visible;
}
.tabs button {
  min-width:0;
  white-space:normal;
  line-height:1.15;
  min-height:46px;
}
.subtabs {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin:0 0 16px;
}
.subtabs button {
  background:#0b1220;
  color:#9ca3af;
  padding:9px 6px;
  font-size:.76rem;
}
.subtabs button.active {
  background:#1d4ed8;
  color:#fff;
}
.home-period {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  background:#0b1220;
  border:1px solid #1f2937;
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
}
.home-period strong { font-size:1.12rem; }
.home-period .badge { margin-left:8px; }
.home-today { text-align:right; }
.eyebrow {
  display:block;
  color:#9ca3af;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:3px;
}
.dashboard-visual {
  background:#0b1220;
  border:1px solid #1f2937;
  border-radius:14px;
  padding:14px;
  margin:10px 0;
}
.dashboard-title {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
  margin-bottom:12px;
}
.dashboard-title span {
  color:#d1d5db;
  font-size:.82rem;
  text-align:right;
}
.progress-track, .leave-track {
  position:relative;
  height:16px;
  border-radius:999px;
  background:#1f2937;
  overflow:hidden;
  margin:10px 0;
}
.progress-fill {
  height:100%;
  border-radius:999px;
}
.work-progress {
  background:linear-gradient(90deg,#dc2626 0%,#f59e0b 50%,#16a34a 100%);
}
.today-marker {
  position:absolute;
  top:-4px;
  width:2px;
  height:24px;
  background:#f9fafb;
  opacity:.85;
}
.dashboard-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  color:#9ca3af;
  font-size:.78rem;
}
.dashboard-meta strong { color:#f3f4f6; }
.leave-track { display:flex; }
.leave-track .leave-used { background:#8b5cf6; }
.leave-track .leave-planned { background:#f59e0b; }
.task-list { display:grid; gap:8px; }

.leave-balance-card {
  background:#0b1220;
  border:1px solid #1f2937;
  border-radius:14px;
  padding:12px;
  margin:10px 0;
}
.leave-metrics-row {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.leave-metrics-row + .leave-metrics-row {
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid #1f2937;
}
.leave-metric {
  min-width:0;
  background:#111827;
  border-radius:10px;
  padding:9px;
}
.leave-metric span {
  display:block;
  color:#9ca3af;
  font-size:.72rem;
  line-height:1.2;
}
.leave-metric strong {
  display:block;
  margin-top:4px;
  font-size:1rem;
}
.leave-metric small {
  display:block;
  margin-top:5px;
  color:#9ca3af;
  font-size:.66rem;
}
.dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  margin-right:3px;
}
.dot.used { background:#8b5cf6; }
.dot.planned { background:#f59e0b; }
.leave-details { margin-top:10px; }
.leave-details summary { cursor:pointer; color:#d1d5db; }
.leave-detail-row {
  display:grid;
  grid-template-columns:1.4fr .6fr 1fr;
  gap:8px;
  padding:7px 0;
  border-top:1px solid #1f2937;
  font-size:.78rem;
}
.leave-detail-row.used { border-left:3px solid #8b5cf6; padding-left:8px; }
.leave-detail-row.planned { border-left:3px solid #f59e0b; padding-left:8px; }

.selected-day-row {
  outline:2px solid #2563eb;
  outline-offset:1px;
}
.schedule-week {
  display:grid;
  gap:5px;
  margin-top:10px;
}
.schedule-day {
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 10px;
  padding:7px 0;
  border-top:1px solid #1f2937;
}
.schedule-day:first-child { border-top:0; }
.schedule-day small {
  grid-column:1 / -1;
  color:#9ca3af;
}

.legend span {
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.legend span::before {
  content:"" !important;
  display:inline-block;
  width:11px;
  height:11px;
  min-width:11px;
  border-radius:3px;
  border:1px solid rgba(255,255,255,.35);
}
.legend .lg-work::before { background:#2563eb; }
.legend .lg-prefill::before { background:#10b981; }
.legend .lg-leave::before { background:#8b5cf6; }
.legend .lg-sick::before { background:#f97316; }
.legend .lg-missing::before { background:#f59e0b; }
.legend .lg-holiday::before { background:#ef4444; }
.legend .lg-overtime::before { background:#14b8a6; }

@media (max-width:520px) {
  .tabs { gap:3px; }
  .tabs button { font-size:.66rem; padding:8px 3px; }
  .subtabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-period { align-items:flex-start; }
  .home-today { max-width:45%; }
  .dashboard-title { align-items:flex-start; }
  .leave-metric { padding:7px 5px; }
  .leave-metric span { font-size:.64rem; }
  .leave-metric strong { font-size:.9rem; }
  .leave-metric small { font-size:.6rem; }
  .leave-detail-row { grid-template-columns:1fr; gap:2px; }
  .legend { gap:6px; }
  .legend span { padding:5px 7px; font-size:.68rem; }
}


/* Employee UAT follow-up refinements – 2026-09-24 */
.login-card .login-brand {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}
.login-logo {
  width:72px;
  height:72px;
  object-fit:contain;
}
.login-product {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
.login-product strong { font-size:1.15rem; }
.login-product span { color:#9ca3af; font-size:.78rem; }
.login-campaign,
.home-message {
  border:1px solid #334155;
  background:#0b1220;
  border-radius:12px;
  padding:10px 12px;
  text-align:center;
  font-weight:700;
  margin:8px 0 14px;
}
body[data-login-theme="advent"] .login-card {
  box-shadow:0 0 0 1px rgba(245,158,11,.25), 0 16px 44px rgba(0,0,0,.35);
}
body[data-login-theme="advent"] .login-campaign,
.home-message.theme-advent {
  border-color:#92400e;
  background:linear-gradient(135deg,rgba(127,29,29,.38),rgba(120,53,15,.28));
}

.tabs button {
  font-size:.86rem;
  font-weight:700;
}
.dashboard-meta-centered {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  text-align:center;
  align-items:start;
}
.dashboard-meta-centered > span {
  display:block;
  flex:1 1 140px;
  max-width:180px;
}
.today-weekday {
  display:block;
  margin-top:3px;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.05em;
  color:#cbd5e1;
}
.home-campaigns {
  display:grid;
  gap:7px;
  margin-bottom:10px;
}
.leave-year-chart {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:4px;
  align-items:end;
  height:100px;
  margin-top:14px;
  padding-top:6px;
  border-top:1px solid #1f2937;
}
.leave-month-bar {
  display:flex;
  min-width:0;
  height:88px;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  gap:4px;
}
.leave-month-stack {
  width:70%;
  max-width:18px;
  min-height:2px;
  display:flex;
  flex-direction:column-reverse;
  overflow:hidden;
  border-radius:4px 4px 2px 2px;
  background:#1f2937;
}
.leave-month-used { display:block; background:#8b5cf6; width:100%; }
.leave-month-planned { display:block; background:#f59e0b; width:100%; }
.leave-month-bar small {
  color:#9ca3af;
  font-size:.58rem;
}

.legend .lg-prefill::before {
  width:5px;
  min-width:5px;
  height:14px;
  border-radius:2px;
  background:#10b981;
}
.legend .lg-overtime::before {
  width:15px;
  min-width:15px;
  height:4px;
  border-radius:2px;
  background:#14b8a6;
}
.inline-day-editor {
  text-align:center;
}
.inline-day-editor .day-meta {
  text-align:center;
}
.inline-day-editor .compact-fields {
  justify-content:center;
}
.inline-day-editor .compact-fields label {
  text-align:center;
}
.inline-day-editor .compact-fields input {
  text-align:center;
}
.inline-day-editor > label {
  text-align:center;
}
.inline-day-editor > .row {
  justify-content:center;
}

.two-field-row {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:end;
}
.two-field-row > label { margin:0; }

.document-filters {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.document-filters label {
  min-width:0;
}
.document-actions {
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0 12px;
}
.doc-select {
  display:flex;
  align-items:center;
  gap:7px;
  width:max-content;
  color:#9ca3af;
  font-size:.75rem;
  margin:0 0 8px;
}
.doc-select input { width:auto; }

.profile-summary-centered {
  text-align:center;
}
.work-schedule-card > summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.work-schedule-card > summary > span {
  color:#9ca3af;
  font-weight:600;
}
.personal-hr-details > summary {
  cursor:pointer;
}

@media (max-width:520px) {
  .tabs button {
    font-size:.72rem;
    font-weight:700;
  }
  .dashboard-meta-centered {
    gap:5px;
    font-size:.68rem;
  }
  .dashboard-meta-centered > span {
    flex:1 1 30%;
    max-width:none;
  }
  .leave-year-chart { gap:2px; }
  .leave-month-bar small { font-size:.5rem; }
  .two-field-row {
    grid-template-columns:1fr;
    gap:6px;
  }
  .document-filters {
    grid-template-columns:1fr;
  }
  .document-filters label {
    display:grid;
    grid-template-columns:minmax(72px,.7fr) minmax(0,1.3fr);
    align-items:center;
    gap:8px;
    margin:0;
  }
  .document-filters select {
    margin:0;
  }
}


/* Final Employee UAT refinements */
.identity-block {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.header-logo {
  width:auto;
  height:40px;
  max-width:96px;
  object-fit:contain;
  flex:0 0 auto;
}
.badge.closed {
  background:#064e3b;
  color:#a7f3d0;
}
.closed-period-banner {
  margin-bottom:10px;
}

/* Legend geometry mirrors calendar cell marker position. */
.legend span::before {
  content:"" !important;
  display:inline-block;
  border:0;
  border-radius:2px;
}
.legend .lg-work::before {
  width:5px; min-width:5px; height:14px; background:#2563eb;
}
.legend .lg-prefill::before {
  width:5px; min-width:5px; height:14px; background:#10b981;
}
.legend .lg-leave::before {
  width:5px; min-width:5px; height:14px; background:#8b5cf6;
}
.legend .lg-sick::before {
  width:5px; min-width:5px; height:14px; background:#f97316;
}
.legend .lg-holiday::before {
  width:5px; min-width:5px; height:14px; background:#ef4444;
}
.legend .lg-missing::before {
  width:5px; min-width:5px; height:14px; background:#f59e0b;
}
.legend .lg-overtime::before {
  width:15px; min-width:15px; height:4px; background:#14b8a6;
}

.entitlement-total {
  margin-top:4px;
  border-top:1px solid #374151;
}

.overtime-fields {
  align-items:start;
}
.overtime-fields > label {
  display:grid;
  grid-template-rows:auto 48px;
  align-items:start;
}
.overtime-fields > label > select {
  margin-top:6px;
  min-height:48px;
}
.overtime-fields > label > .row {
  margin-top:6px;
  min-height:48px;
  flex-wrap:nowrap;
}
.overtime-fields > label > .row input {
  margin-top:0;
  min-height:48px;
}
.overtime-fields > label > .row button {
  min-height:48px;
}

@media (max-width:520px) {
  .header-logo { width:auto; height:34px; max-width:82px; }
}


/* Beta-ready Employee refinements */
.product-meta {
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.product-meta .header-logo {
  width:40px;
  height:40px;
  max-width:none;
}
.product-meta .product-name {
  color:#9ca3af;
}
.dashboard-meta-centered > .timeoff-balance {
  flex:0 0 auto;
  max-width:none;
  white-space:nowrap;
}
@media (max-width:520px) {
  .dashboard-meta-centered > .timeoff-balance {
    flex-basis:100%;
    width:100%;
    white-space:nowrap;
  }
}

@media (max-width:520px) {
  .product-meta .header-logo { width:36px; height:36px; max-width:none; }
}


/* VPS pilot surface navigation */
.admin-surface-link {
  display:block;
  margin-top:8px;
  padding:8px 10px;
  border-radius:8px;
  color:#94a3b8;
  text-align:center;
  text-decoration:none;
  font-size:.78rem;
  font-weight:600;
}
.admin-surface-link:hover,
.admin-surface-link:focus-visible {
  color:#e5e7eb;
  background:#1f2937;
}
@media (min-width: 768px) {
  .login-card .admin-surface-link {
    margin-top:12px;
    padding:10px 12px;
    border:1px solid #334155;
    color:#cbd5e1;
    font-size:.88rem;
  }
}