@charset "UTF-8";
.nav-icon { position: relative; display: inline-flex; flex: none; }
.nav-alert { position: absolute; top: -8px; right: -12px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 20px; background: #bc2939; color: #fff; font: 700 10px/17px "Segoe UI", sans-serif; border: 1px solid #fff; box-shadow: 0 0 0 2px #bc293914; }
.bottom-nav { justify-content: flex-start; }
.bottom-nav button { flex: 1 0 80px; min-width: 80px; }
#theme-toggle { margin-left: auto; min-width: 42px; font-size: 1.5rem; padding: 6px; border: 1px solid var(--line); border-radius: 50%; }
#logout { margin-left: 0; }
.header-label { min-width: 0; }
.attendance-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.attendance-actions button { min-height: 48px; }
.needs-attention { border-left: 4px solid #bc2939; }
.request-card.needs-attention { padding-left: 16px; }
.badge.danger { background: #ffe8ec; color: #982336; border: 0; }
.day-date .badge { display: inline-flex; margin-top: 6px; font-size: .7rem; font-weight: 650; }
.attendance-card h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.attendance-card h2 .small { font-weight: 400; }
@media (max-width: 700px) {
  .header-inner { gap: 10px; padding-inline: 16px; }
  .header-label { flex: 1; padding-left: 10px; }
  .header-label span { max-width: 100%; }
  #theme-toggle { margin-left: 0; flex: none; min-width: 38px; width: 38px; min-height: 38px; }
  #logout { flex: none; padding: 6px 10px; }
  .bottom-nav { gap: 0; }
  .bottom-nav button { flex: 1 0 48px; min-width: 48px; max-width: none; font-size: .64rem; padding: 6px 1px; }
  .nav-alert { right: -8px; }
  .attendance-actions button { flex: 1 1 140px; }
}
html[data-theme="dark"] {
  color-scheme: dark;
  --navy: #e0ecff; --blue: #1587bc; --blue-dark: #8ed4fa;
  --bg: #0c1523; --ink: #e2e9f2; --muted: #acbdd2; --line: #2c3f56;
  --pale: #19334b; --green: #95daba; --shadow: 0 6px 24px #00000020;
}
html[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] .header, [data-theme="dark"] .card,
[data-theme="dark"] .metric, [data-theme="dark"] .day-item,
[data-theme="dark"] dialog { background: #142237; }
[data-theme="dark"] .brand { border-radius: 8px; background: #fff; padding: 3px; }
[data-theme="dark"] .bottom-nav { background: #142237f5; border-color: var(--line); box-shadow: 0 8px 35px #00000055; }
[data-theme="dark"] .bottom-nav button.active { background: #24445e; }
[data-theme="dark"] input, [data-theme="dark"] select,
[data-theme="dark"] textarea { background: #101d2f; border-color: #415571; }
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus { background: #182c42; }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #96a9c0; }
[data-theme="dark"] .secondary { background: #142237; border-color: #547894; }
[data-theme="dark"] .secondary:hover, [data-theme="dark"] .ghost:hover { background: #243d55; }
[data-theme="dark"] .danger { background: #3d2230; color: #ffc1ca; border-color: #9e5260; }
[data-theme="dark"] .danger:hover { background: #512c3b; }
[data-theme="dark"] .badge.danger { background: #512c3b; color: #ffc1ca; }
[data-theme="dark"] .metric.blue, [data-theme="dark"] .avatar,
[data-theme="dark"] .preference-icon, [data-theme="dark"] .welcome-tag,
[data-theme="dark"] .day-amount.primary { background: #1c3a52; border-color: #315976; }
[data-theme="dark"] .day-amount, [data-theme="dark"] .sound-switch,
[data-theme="dark"] .event-icon { background: #1c2f46; }
[data-theme="dark"] .badge.success, [data-theme="dark"] .notice.success,
[data-theme="dark"] .today-event.done .event-icon { background: #183d35; color: #a2e4c2; }
[data-theme="dark"] .badge.warning, [data-theme="dark"] .notice.warning { background: #433723; color: #f7d497; }
[data-theme="dark"] .badge.gray { background: #2b3748; color: #c4d1e0; }
[data-theme="dark"] .form-error, [data-theme="dark"] .offline { background: #462a30; color: #ffc1ca; border-color: #9e5260; }
[data-theme="dark"] .demo-banner, [data-theme="dark"] .demo-access { background: #433723; color: #f7d497; }
[data-theme="dark"] .day-amount.credit strong { color: #a2e4c2; }
[data-theme="dark"] .day-amount.debit strong { color: #ffc1ca; }
[data-theme="dark"] .time-panel, [data-theme="dark"] .welcome-day,
[data-theme="dark"] .app-intro { background: #102b55; }
[data-theme="dark"] .toast { background: #213f60; }
[data-theme="dark"] .toast.error { background: #912e27; }
[data-theme="dark"] .progress-steps span:not(.complete) { background: #2b415a; }
[data-theme="dark"] .punch-sidebar .card > .row > .icon { background: #1c3a52; color: #8ed4fa; }
[data-theme="dark"] .nav-alert { border-color: #142237; }