:root {
  --ksms-ink: #1f2430;
  --ksms-muted: #6b7280;
  --ksms-surface: #ffffff;
  --ksms-bg: #f4f1ee;
  --ksms-accent: #a82424;
  --ksms-accent-dark: #7d1717;
  --ksms-duty: #1b7f4b;
  --ksms-duty-soft: #e3f4ea;
  --ksms-off: #52606d;
  --ksms-off-soft: #eceff3;
  --ksms-leave: #b26a00;
  --ksms-leave-soft: #fff1d6;
  --ksms-radius: 16px;
  --ksms-shadow: 0 1px 2px rgba(31, 36, 48, .06), 0 8px 24px rgba(31, 36, 48, .08);
}

body {
  background: var(--ksms-bg);
  color: var(--ksms-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Logo watermark behind all content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/static/logo-emblem.png") center 60% / min(70vmin, 640px) no-repeat;
  opacity: .07;
}

.ksms-brand {
  padding: 0;
  min-width: 0;
  max-width: min(100%, 31rem);
  flex-shrink: 1;
  white-space: normal;
}
.ksms-brand img { flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 2px #d4a63a, 0 2px 8px rgba(0, 0, 0, .4); }
.ksms-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; white-space: normal; }
.ksms-brand-name { font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 800; letter-spacing: 0; line-height: 1.1; color: #f3c85b; }
.ksms-brand-tag { font-size: .7rem; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; color: #d9dde5; }
@media (max-width: 575.98px) {
  .ksms-brand { margin-right: 0; gap: .55rem !important; max-width: calc(100vw - 9.75rem); }
  .ksms-brand img { width: 44px; height: 44px; }
  .ksms-brand-text { flex: 1 1 auto; }
  .ksms-brand-name { font-size: clamp(.85rem, 4vw, 1.05rem); }
  .ksms-brand-tag { font-size: .62rem; letter-spacing: .04em; }
}
.ksms-title { font-size: clamp(1.05rem, 4vw, 1.5rem); font-weight: 800; letter-spacing: 0; line-height: 1.2; color: #1f3a73; text-wrap: balance; }
.login-emblem { border-radius: 50%; box-shadow: 0 6px 24px rgba(31, 36, 48, .3); }

.ksms-nav {
  background: linear-gradient(135deg, #1f2430, #2d3342);
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.ksms-nav .navbar-brand,
.ksms-nav .nav-link,
.ksms-nav .ksms-user { color: #f4f1ee; }
.ksms-nav .nav-link { border-radius: 999px; padding: .4rem .9rem; opacity: .85; white-space: nowrap; }
.ksms-nav .btn-signout { white-space: nowrap; }
.ksms-nav .nav-link:hover,
.ksms-nav .nav-link:focus-visible { background: rgba(255, 255, 255, .12); opacity: 1; }
.ksms-nav .navbar-toggler { border-color: rgba(255, 255, 255, .4); }
.ksms-nav .navbar-toggler-icon { filter: invert(1); }
.ksms-nav .btn-signout { color: #f4f1ee; border-color: rgba(255, 255, 255, .45); }
.ksms-nav .btn-signout:hover { background: rgba(255, 255, 255, .15); color: #fff; }

.ksms-card {
  background: var(--ksms-surface);
  border: 0;
  border-radius: var(--ksms-radius);
  box-shadow: var(--ksms-shadow);
  overflow: hidden;
}

.ksms-hero {
  border-radius: var(--ksms-radius);
  color: #fff;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--ksms-accent-dark), var(--ksms-accent) 55%, #c4552f);
  box-shadow: var(--ksms-shadow);
}
.ksms-hero.is-past { background: linear-gradient(135deg, #3b4252, #59627a); }
.ksms-hero.is-future { background: linear-gradient(135deg, #1f2430, #3b4a6b); }
.ksms-hero .hero-date { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 700; }
.ksms-hero .hero-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; opacity: .85; }
.hero-stat {
  background: rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: .6rem .9rem;
  min-width: 6.5rem;
}
.hero-stat .num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.hero-stat .lbl { font-size: .75rem; opacity: .9; }

.me-banner {
  border-radius: 12px;
  padding: .75rem 1rem;
  background: rgba(255, 255, 255, .95);
  color: var(--ksms-ink);
  font-weight: 600;
}

.day-strip { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem; scrollbar-width: thin; }
.day-chip {
  flex: 1 0 4.2rem;
  text-align: center;
  text-decoration: none;
  color: var(--ksms-muted);
  background: var(--ksms-surface);
  border-radius: 14px;
  padding: .5rem .25rem;
  border: 2px solid transparent;
  box-shadow: 0 1px 2px rgba(31, 36, 48, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.day-chip:hover, .day-chip:focus-visible { transform: translateY(-2px); box-shadow: var(--ksms-shadow); color: var(--ksms-ink); }
.day-chip .dow { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.day-chip .dom { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.day-chip .tag { font-size: .65rem; font-weight: 700; color: var(--ksms-accent); min-height: 1em; }
.day-chip.is-today { border-color: var(--ksms-accent); color: var(--ksms-ink); }
.day-chip.is-selected { background: var(--ksms-ink); color: #fff; border-color: var(--ksms-ink); }
.day-chip.is-selected .tag { color: #ffd9a8; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .2rem .65rem;
}
.status-pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.status-on_duty { color: var(--ksms-duty); background: var(--ksms-duty-soft); }
.status-off_duty { color: var(--ksms-off); background: var(--ksms-off-soft); }
.status-leave { color: var(--ksms-leave); background: var(--ksms-leave-soft); }

.person-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid #eee9e4;
}
.person-row:last-child { border-bottom: 0; }
.person-row.me-row {
  background: #fff6e0 !important;
  box-shadow: inset 4px 0 0 var(--ksms-accent);
}
.avatar {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  background: var(--ksms-off);
}
.avatar.on_duty { background: var(--ksms-duty); }
.avatar.leave { background: var(--ksms-leave); }
.avatar.si { background: var(--ksms-accent); }
.me-pill { background: var(--ksms-accent); color: #fff; border-radius: 999px; font-size: .65rem; font-weight: 700; padding: .1rem .5rem; }

.section-title { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem; font-weight: 700; }
.section-title.on_duty { color: var(--ksms-duty); background: var(--ksms-duty-soft); }
.section-title.off_duty { color: var(--ksms-off); background: var(--ksms-off-soft); }
.section-title.leave { color: var(--ksms-leave); background: var(--ksms-leave-soft); }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--ksms-muted); }

.login-wrap { min-height: 70vh; display: grid; place-items: center; }
.login-card { border-radius: 20px; box-shadow: var(--ksms-shadow); border: 0; }

.btn-ksms { background: var(--ksms-accent); border-color: var(--ksms-accent); color: #fff; }

.swap-tag { color: var(--ksms-leave); font-weight: 600; }

.ksms-bell-btn { position: relative; color: #f4f1ee; padding: .35rem .6rem; border: 0; }
.ksms-bell-btn:hover, .ksms-bell-btn:focus-visible { color: #fff; background: rgba(255, 255, 255, .14); }
.ksms-bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: #e5383b;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
  box-shadow: 0 0 0 2px #2d3342;
}
.ksms-bell-menu { min-width: min(22rem, 92vw); border-radius: 12px; box-shadow: var(--ksms-shadow); }
.ksms-bell-item { white-space: normal; border-bottom: 1px solid #eee; padding: .6rem 1rem; }
.ksms-bell-btn:focus-visible { outline: 3px solid #f0a030; outline-offset: 2px; box-shadow: none; }
@media (max-width: 575.98px) {
  .ksms-bell { position: static; }
  .ksms-bell-menu { position: absolute !important; inset: 100% .5rem auto .5rem !important; transform: none !important; min-width: 0; width: auto; }
}
.btn-ksms:hover, .btn-ksms:focus-visible { background: var(--ksms-accent-dark); border-color: var(--ksms-accent-dark); color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #f0a030; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}