/* ── Material Design 3 Token System ─────────────────────────── */
:root {
  --md-primary:             #6750A4;
  --md-primary-container:   #EADDFF;
  --md-on-primary:          #FFFFFF;
  --md-on-primary-container:#21005D;
  --md-secondary:           #625B71;
  --md-secondary-container: #E8DEF8;
  --md-surface:             #FFFBFE;
  --md-surface-variant:     #E7E0EC;
  --md-on-surface:          #1C1B1F;
  --md-on-surface-variant:  #49454F;
  --md-outline:             #79747E;
  --md-outline-variant:     #CAC4D0;
  --md-error:               #B3261E;
  --md-error-container:     #F9DEDC;
  --md-scrim:               rgba(0,0,0,.32);
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 28px;
  --elevation-1: 0 1px 2px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);
  --elevation-2: 0 2px 4px rgba(0,0,0,.14),0 1px 8px rgba(0,0,0,.08);
  --elevation-3: 0 4px 8px rgba(0,0,0,.14),0 2px 16px rgba(0,0,0,.08);
  --nav-width:      280px;
  --top-bar-height: 64px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Roboto',sans-serif; background:#F4F0FF; color:var(--md-on-surface); min-height:100vh; }

/* ── Typography ──────────────────────────────────────────────── */
.md-typescale-headline-medium { font-size:1.75rem; font-weight:400; line-height:2.25rem; }
.md-typescale-headline-small  { font-size:1.5rem;  font-weight:400; line-height:2rem;    }
.md-typescale-title-large     { font-size:1.375rem;font-weight:500; line-height:1.75rem; }
.md-typescale-title-medium    { font-size:1rem;    font-weight:500; line-height:1.5rem;  letter-spacing:.01em; }
.md-typescale-title-small     { font-size:.875rem; font-weight:500; line-height:1.25rem; letter-spacing:.01em; }
.md-typescale-body-large      { font-size:1rem;    font-weight:400; line-height:1.5rem;  }
.md-typescale-body-medium     { font-size:.875rem; font-weight:400; line-height:1.25rem; letter-spacing:.015em; }
.md-typescale-body-small      { font-size:.75rem;  font-weight:400; line-height:1rem;    letter-spacing:.02em;  }
.secondary-text { color:var(--md-on-surface-variant); }

/* ── Top App Bar ─────────────────────────────────────────────── */
.md-top-app-bar {
  position:fixed; top:0; left:0; right:0; height:var(--top-bar-height);
  background:var(--md-primary); color:var(--md-on-primary);
  z-index:200; box-shadow:var(--elevation-2);
}
.top-app-bar-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:100%; padding:0 8px 0 4px;
}
.top-app-bar-leading  { display:flex; align-items:center; gap:4px; }
.app-icon             { font-size:28px; margin:0 4px; }
.top-app-bar-title    { font-size:1.375rem; font-weight:500; margin-left:4px; }
.top-app-bar-actions  { display:flex; align-items:center; gap:8px; }
.top-app-bar-actions #userGreeting { color:rgba(255,255,255,.85); }

/* ── Icon Buttons ────────────────────────────────────────────── */
.md-icon-button {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border:none; background:transparent;
  border-radius:50%; cursor:pointer; color:inherit; transition:background .2s;
}
.md-icon-button:hover { background:rgba(255,255,255,.12); }
.md-icon-button .material-icons { font-size:24px; }

/* ── Navigation Drawer ───────────────────────────────────────── */
.md-nav-drawer {
  position:fixed; top:var(--top-bar-height); left:0; bottom:0; width:var(--nav-width);
  background:var(--md-surface); border-right:1px solid var(--md-outline-variant);
  transform:translateX(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:150; overflow-y:auto;
}
.md-nav-drawer.open { transform:translateX(0); }
.nav-overlay { position:fixed; inset:0; background:var(--md-scrim); z-index:140; }
.nav-overlay.hidden { display:none; }
.nav-drawer-header {
  display:flex; align-items:center; gap:12px; padding:20px 16px;
  border-bottom:1px solid var(--md-outline-variant);
}
.nav-avatar-icon { font-size:40px; color:var(--md-primary); }
.nav-list { list-style:none; padding:8px 0; }
.nav-item {
  display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer;
  border-radius:0 var(--radius-xl) var(--radius-xl) 0; margin-right:12px;
  transition:background .2s; font-size:.875rem; font-weight:500;
  color:var(--md-on-surface-variant);
}
.nav-item:hover  { background:var(--md-surface-variant); }
.nav-item.active { background:var(--md-secondary-container); color:var(--md-on-surface); }
.nav-item .material-icons { font-size:22px; }

/* ── Main Content ────────────────────────────────────────────── */
.main-content { margin-top:var(--top-bar-height); padding:24px; min-height:calc(100vh - var(--top-bar-height)); }
.page        { display:block; }
.page.hidden { display:none; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }

/* ── Cards ───────────────────────────────────────────────────── */
.md-card {
  background:var(--md-surface); border-radius:var(--radius-lg);
  box-shadow:var(--elevation-1); padding:20px; margin-bottom:16px;
}
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.md-button {
  display:inline-flex; align-items:center; gap:8px; padding:10px 24px;
  border:none; border-radius:var(--radius-xl); font-family:'Roboto',sans-serif;
  font-size:.875rem; font-weight:500; cursor:pointer; transition:all .2s; white-space:nowrap;
}
.md-button--filled  { background:var(--md-primary); color:var(--md-on-primary); box-shadow:var(--elevation-1); }
.md-button--filled:hover { box-shadow:var(--elevation-2); filter:brightness(1.08); }
.md-button--tonal   { background:var(--md-secondary-container); color:var(--md-on-surface); }
.md-button--tonal:hover  { filter:brightness(.96); }
.md-button--text    { background:transparent; color:var(--md-primary); }
.md-button--text:hover   { background:var(--md-primary-container); }
.md-button .material-icons { font-size:18px; }
.full-width { width:100%; justify-content:center; }

/* ── Text Fields ─────────────────────────────────────────────── */
.md-text-field {
  display:flex; align-items:center; gap:8px; border:1px solid var(--md-outline-variant);
  border-radius:var(--radius-sm); padding:12px 14px; background:var(--md-surface);
  margin-bottom:12px; transition:border-color .2s;
}
.md-text-field:focus-within { border-color:var(--md-primary); }
.md-text-field .field-icon  { color:var(--md-on-surface-variant); font-size:20px; }
.md-text-field input,.md-text-field select {
  flex:1; border:none; outline:none; background:transparent;
  font-family:'Roboto',sans-serif; font-size:.875rem; color:var(--md-on-surface);
}
.md-select {
  width:100%; padding:12px 14px; border:1px solid var(--md-outline-variant);
  border-radius:var(--radius-sm); background:var(--md-surface);
  font-family:'Roboto',sans-serif; font-size:.875rem; color:var(--md-on-surface);
  outline:none; margin-bottom:12px;
}

/* ── Stats ───────────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card  { display:flex; align-items:center; gap:16px; padding:20px; }
.stat-icon  { font-size:36px; }
.stat-value { font-size:2rem; font-weight:700; color:var(--md-primary); }
.stat-label { font-size:.75rem; color:var(--md-on-surface-variant); }

/* ── Calendar ────────────────────────────────────────────────── */
.calendar-card { overflow:hidden; }
.calendar-nav  { display:flex; align-items:center; gap:4px; }
.calendar-grid {
  display:grid; grid-template-columns:40px repeat(7,1fr); gap:2px; margin-top:8px;
}
.cal-day-header {
  text-align:center; padding:8px 4px; font-size:.75rem; font-weight:500;
  color:var(--md-on-surface-variant); text-transform:uppercase;
}
.cal-day {
  min-height:72px; padding:4px 5px; border-radius:var(--radius-xs);
  border:1px solid var(--md-outline-variant); font-size:.75rem;
  position:relative; transition:filter .15s;
  background:var(--md-surface); color:var(--md-on-surface);
}
.cal-day.other-month  { background:#f5f3f9; opacity:.5; }
.cal-day.has-assignment { border-color:transparent; }
.cal-day.has-assignment .cal-day-num {
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.cal-day.today {
  outline:2px solid var(--md-primary); outline-offset:-2px; z-index:1;
}
.cal-day.today:not(.has-assignment) .cal-day-num {
  background:var(--md-primary); color:var(--md-on-primary); border-radius:50%;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
}
.cal-holiday-label {
  position:absolute; bottom:3px; left:3px; right:3px;
  background:rgba(0,0,0,.22); color:#fff; border-radius:3px;
  padding:1px 4px; font-size:.6rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4;
}
.cal-day.is-holiday:not(.has-assignment) {
  background:#FFF8E1; border-color:#FFD54F;
}
.cal-day.is-holiday:not(.has-assignment) .cal-day-num { color:#E65100; font-weight:700; }
.cal-day.is-holiday:not(.has-assignment) .cal-holiday-label { background:#FFD54F; color:#4E342E; }
.cal-employee-name {
  font-size:.7rem; font-weight:600; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.3);
  margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cal-day-num { font-weight:500; margin-bottom:2px; }
.cal-day.is-monday-admin { cursor:pointer; }
.cal-day.is-monday-admin:hover { filter:brightness(.90); }
.cal-day.is-holiday-admin { cursor:pointer; }
.cal-day.is-holiday-admin:hover { filter:brightness(.90); }
.cal-edit-icon {
  position:absolute; top:3px; right:3px; font-size:14px !important;
  opacity:0; transition:opacity .15s; color:var(--md-on-surface);
}
.cal-day.has-assignment .cal-edit-icon { color:#fff; }
.cal-day.is-monday-admin:hover .cal-edit-icon  { opacity:.75; }
.cal-day.is-holiday-admin:hover .cal-edit-icon { opacity:.75; }
.cal-kw-cell {
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:.6rem; font-weight:600; color:var(--md-on-surface-variant);
  background:var(--md-surface-variant); border-radius:var(--radius-xs);
  padding:2px; line-height:1.2;
}
.cal-day-header.cal-kw-header {
  font-size:.65rem;
}
.oncall-badge {
  font-size:.65rem; padding:2px 6px; border-radius:var(--radius-xl);
  background:#E8F5E9; color:#2E7D32;
  font-weight:600; text-transform:uppercase; letter-spacing:.05em;
}
.calendar-legend {
  display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; padding-top:12px;
  border-top:1px solid var(--md-outline-variant);
}
.legend-item { display:flex; align-items:center; gap:6px; font-size:.75rem; }
.legend-dot  { width:12px; height:12px; border-radius:3px; }
.legend-holiday-dot { width:12px; height:12px; border-radius:3px; background:#FFD54F; border:1px solid #FFA000; }

/* ── Schedule List ───────────────────────────────────────────── */
.schedule-list { display:flex; flex-direction:column; gap:8px; }
.schedule-item {
  display:flex; align-items:center; gap:16px; padding:16px;
  border-radius:var(--radius-md); border:1px solid var(--md-outline-variant); transition:background .2s;
}
.schedule-item:hover      { background:var(--md-surface-variant); }
.schedule-week-badge {
  min-width:48px; height:48px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; font-weight:700; color:#fff;
}
.schedule-dates     { flex:1; }
.schedule-week-label{ font-size:.75rem; color:var(--md-on-surface-variant); }

/* ── Swap Cards ──────────────────────────────────────────────── */
.swap-card {
  border:1px solid var(--md-outline-variant); border-radius:var(--radius-md);
  padding:16px; margin-bottom:12px; background:var(--md-surface);
}
.swap-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.swap-badge { padding:4px 10px; border-radius:var(--radius-xl); font-size:.7rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; }
.swap-badge.PENDING   { background:#FFF9C4; color:#795548; }
.swap-badge.ACCEPTED  { background:#E8F5E9; color:#2E7D32; }
.swap-badge.REJECTED  { background:#FFEBEE; color:#B71C1C; }
.swap-badge.CANCELLED { background:#ECEFF1; color:#607D8B; }
.swap-card-actions { display:flex; gap:8px; margin-top:12px; }

/* ── Unavailability ──────────────────────────────────────────── */
.unavailability-list { display:flex; flex-direction:column; gap:8px; }
.unavail-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-radius:var(--radius-md); border:1px solid var(--md-outline-variant);
}
.unavail-date { font-weight:500; }
.unavail-type { font-size:.75rem; padding:2px 8px; border-radius:var(--radius-xl); background:var(--md-secondary-container); }

/* ── Admin ───────────────────────────────────────────────────── */
.admin-grid    { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; }
.admin-actions { display:flex; flex-direction:column; gap:8px; }
.divider       { border:none; border-top:1px solid var(--md-outline-variant); margin:16px 0; }
.user-row {
  display:flex; align-items:center; gap:12px; padding:12px;
  border-radius:var(--radius-md); border:1px solid var(--md-outline-variant); margin-bottom:8px;
}
.user-avatar {
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:700; font-size:.875rem; flex-shrink:0;
}
.user-info  { flex:1; min-width:0; }
.user-name  { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-email { font-size:.75rem; color:var(--md-on-surface-variant); }
.admin-badge {
  font-size:.65rem; padding:2px 6px; border-radius:var(--radius-xl);
  background:var(--md-primary-container); color:var(--md-on-primary-container);
  font-weight:600; text-transform:uppercase; letter-spacing:.05em;
}

/* ── Admin Schedule Table ────────────────────────────────────── */
.schedule-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.schedule-table th {
  text-align:left; padding:10px 12px; border-bottom:2px solid var(--md-outline-variant);
  color:var(--md-on-surface-variant); font-weight:500; white-space:nowrap;
}
.schedule-table td { padding:10px 12px; border-bottom:1px solid var(--md-outline-variant); vertical-align:middle; }
.schedule-table tr:last-child td { border-bottom:none; }
.schedule-table tr:hover td { background:var(--md-surface-variant); }
.week-user-select {
  border:1px solid var(--md-outline-variant); border-radius:var(--radius-sm);
  padding:6px 10px; font-family:'Roboto',sans-serif; font-size:.875rem;
  background:var(--md-surface); color:var(--md-on-surface); outline:none;
}
.week-user-select:focus { border-color:var(--md-primary); }
.override-chip {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--md-secondary-container); border-radius:var(--radius-xl);
  padding:2px 8px; font-size:.7rem; margin:2px;
}

/* ── Dialogs ─────────────────────────────────────────────────── */
.md-dialog-backdrop { position:fixed; inset:0; background:var(--md-scrim); z-index:300; }
.md-dialog {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--md-surface); border-radius:var(--radius-xl); padding:24px;
  z-index:400; min-width:320px; max-width:480px; width:90%; box-shadow:var(--elevation-3);
}
.md-dialog h3        { margin-bottom:20px; }
.dialog-actions      { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.md-checkbox-label,.md-radio-label { display:flex; align-items:center; gap:8px; font-size:.875rem; cursor:pointer; margin-bottom:12px; }
.radio-group { display:flex; gap:24px; margin-bottom:12px; }

/* ── Tabs ────────────────────────────────────────────────────── */
.tabs { display:flex; border-bottom:2px solid var(--md-outline-variant); margin-bottom:16px; }
.tab  {
  padding:12px 24px; background:transparent; border:none; font-family:'Roboto',sans-serif;
  font-size:.875rem; font-weight:500; color:var(--md-on-surface-variant); cursor:pointer;
  border-bottom:3px solid transparent; margin-bottom:-2px; transition:all .2s;
}
.tab.active           { color:var(--md-primary); border-bottom-color:var(--md-primary); }
.tab-content.hidden   { display:none; }

/* ── Toast ───────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:#313033; color:#fff; padding:12px 24px; border-radius:var(--radius-md);
  box-shadow:var(--elevation-3); font-size:.875rem; z-index:500; min-width:240px;
  text-align:center; animation:fadeIn .25s ease;
}
.toast.hidden { display:none; }
@keyframes fadeIn { from{opacity:0;transform:translateX(-50%) translateY(12px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ── Error ───────────────────────────────────────────────────── */
.error-message {
  background:var(--md-error-container); color:var(--md-error);
  border-radius:var(--radius-sm); padding:10px 14px; font-size:.875rem; margin-bottom:12px;
}

/* ── Login ───────────────────────────────────────────────────── */
.login-page {
  background:linear-gradient(135deg,#6750A4 0%,#7965AF 50%,#9A82DB 100%);
  display:flex; align-items:center; justify-content:center; min-height:100vh;
}
.login-container { width:100%; max-width:400px; padding:24px; }
.login-card      { border-radius:var(--radius-xl); box-shadow:var(--elevation-3); }
.login-header    { text-align:center; margin-bottom:32px; }
.login-icon      { font-size:56px; color:var(--md-primary); margin-bottom:12px; }

/* ── Utility ───��─────────────────────────────────────────────── */
.hidden            { display:none !important; }
.admin-only.hidden { display:none !important; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:600px) {
  .stats-grid  { grid-template-columns:1fr; }
  .calendar-grid { font-size:.65rem; grid-template-columns:28px repeat(7,1fr); }
  .cal-day     { min-height:56px; }
  .md-dialog   { min-width:unset; }
  .admin-grid  { grid-template-columns:1fr; }
  .page-header { flex-direction:column; align-items:flex-start; }
}