@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;

  /* Palette */
  --color-50: #dbe1e6;
  --color-100: #e9ebf5;
  --color-300: #9db5cb;
  --color-500: #6b88aa;
  --color-900: #3c4474;

  --background: var(--color-50);
  --surface: #f3f5fb;
  --surface-2: #eef1f8;
  --text: #21284a;
  --muted: #5d668d;
  --primary: var(--color-900);
  --primary-soft: var(--color-500);
  --border: color-mix(in oklab, var(--color-900) 24%, white 76%);
  --success: #2f6f5f;
  --danger: #9a3f4c;
  --warning: #8a6a2f;
  --info: #2f5f8a;

  /* Utopia Fluid Type */
  --step--2: clamp(0.76rem, 0.73rem + 0.13vw, 0.84rem);
  --step--1: clamp(0.91rem, 0.87rem + 0.19vw, 1.03rem);
  --step-0: clamp(1.05rem, 1rem + 0.24vw, 1.2rem);
  --step-1: clamp(1.22rem, 1.14rem + 0.37vw, 1.45rem);
  --step-2: clamp(1.42rem, 1.3rem + 0.58vw, 1.78rem);
  --step-3: clamp(1.66rem, 1.48rem + 0.88vw, 2.2rem);
  --step-4: clamp(1.95rem, 1.69rem + 1.29vw, 2.74rem);

  /* Utopia Fluid Space */
  --space-3xs: clamp(0.25rem, 0.22rem + 0.13vw, 0.33rem);
  --space-2xs: clamp(0.5rem, 0.46rem + 0.19vw, 0.62rem);
  --space-xs: clamp(0.75rem, 0.68rem + 0.32vw, 0.95rem);
  --space-s: clamp(1rem, 0.91rem + 0.44vw, 1.28rem);
  --space-m: clamp(1.5rem, 1.37rem + 0.63vw, 1.9rem);
  --space-l: clamp(2rem, 1.83rem + 0.88vw, 2.55rem);
  --space-xl: clamp(3rem, 2.74rem + 1.32vw, 3.82rem);

  --space-s-m: clamp(1rem, 0.77rem + 1.14vw, 1.7rem);
  --space-m-l: clamp(1.5rem, 1.23rem + 1.39vw, 2.35rem);
  --space-l-xl: clamp(2rem, 1.61rem + 1.96vw, 3.2rem);

  /* Utopia Grid */
  --grid-max-width: 92rem;
  --grid-gutter: clamp(1rem, 0.73rem + 1.39vw, 1.85rem);
  --grid-columns: 12;

  --radius-s: 0.5rem;
  --radius-m: 0.8rem;
  --radius-l: 1.15rem;
  --shadow-soft: 0 6px 24px rgb(60 68 116 / 0.08);
  --shadow-card: 0 10px 30px rgb(60 68 116 / 0.13);
}

* {
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgb(255 255 255 / 0.88), transparent 40%),
    radial-gradient(circle at 95% 5%, rgb(157 181 203 / 0.35), transparent 35%),
    linear-gradient(145deg, var(--background) 0%, #f6f8fc 40%, #edf2f9 100%);
}

:where(h1, h2, h3, h4, p) {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--primary);
}

table {
  border-collapse: collapse;
}

/* Base layout */
.container {
  width: min(var(--grid-max-width), calc(100% - (var(--grid-gutter) * 2)));
  margin-inline: auto;
}

main {
  display: grid;
  align-content: start;
  gap: var(--space-m);
}

header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: linear-gradient(160deg, rgb(255 255 255 / 0.75), rgb(233 235 245 / 0.72));
}

footer {
  backdrop-filter: blur(8px);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  transition: background-color 180ms ease, color 180ms ease;
}

.nav-link:hover {
  color: var(--primary);
  background-color: rgb(107 136 170 / 0.12);
}

.icon {
  display: inline-flex;
  vertical-align: middle;
}

.icon svg {
  width: 1em;
  height: 1em;
}

/* Components */
.card {
  border: 1px solid color-mix(in oklab, var(--border) 80%, white 20%);
  border-radius: var(--radius-l);
  background: linear-gradient(165deg, rgb(255 255 255 / 0.93), rgb(233 235 245 / 0.9));
  box-shadow: var(--shadow-soft);
  overflow: clip;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-s) var(--space-m);
  border-bottom: 1px solid rgb(60 68 116 / 0.12);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(157 181 203 / 0.1));
}

.card-body {
  padding: var(--space-m);
}

.flash-stack {
  position: fixed;
  top: 5.25rem;
  right: var(--space-s);
  z-index: 60;
  width: min(28rem, calc(100vw - (var(--space-s) * 2)));
  display: grid;
  gap: var(--space-2xs);
  pointer-events: none;
}

.flash-notice {
  border: 1px solid rgb(60 68 116 / 0.2);
  border-left-width: 0.38rem;
  border-radius: var(--radius-m);
  background: rgb(255 255 255 / 0.96);
  color: var(--text);
  box-shadow: 0 10px 24px rgb(60 68 116 / 0.16);
  padding: 0.72rem 0.92rem;
  font-size: var(--step--1);
  font-weight: 600;
  transform: translateY(0);
  opacity: 1;
  transition: transform 180ms ease, opacity 180ms ease;
}

.flash-notice.is-leaving {
  transform: translateY(-4px);
  opacity: 0;
}

.flash-success {
  border-left-color: var(--success);
  background: color-mix(in oklab, var(--success) 10%, white 90%);
}

.flash-danger,
.flash-error {
  border-left-color: var(--danger);
  background: color-mix(in oklab, var(--danger) 9%, white 91%);
}

.flash-warning {
  border-left-color: var(--warning);
  background: color-mix(in oklab, var(--warning) 12%, white 88%);
}

.flash-info {
  border-left-color: var(--info);
  background: color-mix(in oklab, var(--info) 10%, white 90%);
}

.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-border: color-mix(in oklab, var(--primary-soft) 45%, white 55%);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 2.85rem;
  padding: 0.68rem 1.15rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--btn-border);
  background: linear-gradient(180deg, color-mix(in oklab, var(--btn-bg) 70%, white 30%), var(--btn-bg));
  color: var(--btn-fg);
  font-family: 'Sora', 'Segoe UI', sans-serif;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgb(60 68 116 / 0.09);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgb(60 68 116 / 0.18);
  filter: saturate(1.05);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  --btn-bg: var(--primary);
  --btn-fg: #f3f5ff;
  --btn-border: color-mix(in oklab, var(--primary) 70%, black 30%);
}

.btn-danger {
  --btn-bg: var(--danger);
  --btn-fg: #fff;
  --btn-border: color-mix(in oklab, var(--danger) 70%, black 30%);
}

.btn-info {
  --btn-bg: var(--info);
  --btn-fg: #fff;
  --btn-border: color-mix(in oklab, var(--info) 70%, black 30%);
}

.btn-lg {
  min-height: 3.2rem;
  font-size: var(--step-0);
  padding-inline: 1.35rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.badge-success {
  color: color-mix(in oklab, var(--success) 80%, black 20%);
  background-color: color-mix(in oklab, var(--success) 20%, white 80%);
}

.badge-danger {
  color: color-mix(in oklab, var(--danger) 80%, black 20%);
  background-color: color-mix(in oklab, var(--danger) 17%, white 83%);
}

.table {
  width: 100%;
  min-width: 56rem;
}

.table th {
  background-color: rgb(60 68 116 / 0.06);
  border-bottom: 1px solid rgb(60 68 116 / 0.14);
}

.table td {
  border-bottom: 1px solid rgb(60 68 116 / 0.08);
}

.table tbody tr:hover {
  background-color: rgb(107 136 170 / 0.12);
}

input[type='email'],
input[type='password'] {
  width: 100%;
  border: 1px solid color-mix(in oklab, var(--border) 85%, white 15%);
  border-radius: var(--radius-m);
  background-color: rgb(255 255 255 / 0.8);
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

input:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--primary) 70%, white 30%);
  box-shadow: 0 0 0 3px rgb(107 136 170 / 0.24);
  background-color: #fff;
}

/* Utility classes used in templates */
.bg-background { background-color: var(--background); }
.bg-background\/80 { background-color: rgb(219 225 230 / 0.8); }
.bg-border\/50 { background-color: rgb(107 136 170 / 0.2); }
.bg-muted\/50 { background-color: rgb(157 181 203 / 0.24); }
.bg-warning\/50 { background-color: rgb(138 106 47 / 0.12); }
.bg-danger\/50 { background-color: rgb(154 63 76 / 0.14); }
.bg-surface { background-color: var(--surface); }

.text-text { color: var(--text); }
.text-muted { color: var(--muted); }
.text-primary { color: var(--primary); }
.text-primary-dark { color: color-mix(in oklab, var(--primary) 86%, black 14%); }
.text-info { color: var(--info); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-white { color: #fff; }

.border-border { border-color: rgb(60 68 116 / 0.22); }
.border-border\/20 { border-color: rgb(60 68 116 / 0.2); }
.border-warning\/20 { border-color: rgb(138 106 47 / 0.27); }
.border-danger\/20 { border-color: rgb(154 63 76 / 0.27); }

.min-h-screen { min-height: 100dvh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-shrink-0 { flex-shrink: 0; }
.block { display: block; }
.hidden { display: none !important; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: 1fr; }
.gap-4 { gap: var(--space-s); }
.gap-6 { gap: var(--space-m); }

.space-y-1 > * + * { margin-top: var(--space-2xs); }
.space-y-2 > * + * { margin-top: var(--space-xs); }
.attendance-actions > * + * { margin-top: var(--space-s); }
.space-y-6 > * + * { margin-top: var(--space-m); }
.space-x-3 > * + * { margin-left: var(--space-xs); }

.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-16 { height: 4rem; }
.h-64 { height: 16rem; }
.h-96 { height: 24rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-full { width: 100%; }

.w-72 { width: 18rem; }
.w-80 { width: 20rem; }
.w-96 { width: 24rem; }

.p-0 { padding: 0; }
.p-2 { padding: var(--space-2xs); }
.p-4 { padding: var(--space-s); }
.px-3 { padding-inline: var(--space-xs); }
.px-4 { padding-inline: var(--space-s); }
.py-2 { padding-block: var(--space-2xs); }
.py-3 { padding-block: var(--space-xs); }
.py-4 { padding-block: var(--space-s); }
.py-6 { padding-block: var(--space-m); }
.py-8 { padding-block: var(--space-l); }

.mx-auto { margin-inline: auto; }
.mt-1 { margin-top: var(--space-3xs); }
.mt-2 { margin-top: var(--space-2xs); }
.mt-6 { margin-top: var(--space-m); }
.mt-auto { margin-top: auto; }
.mb-2 { margin-bottom: var(--space-2xs); }
.mb-3 { margin-bottom: var(--space-xs); }
.mb-4 { margin-bottom: var(--space-s); }
.mr-2 { margin-right: var(--space-2xs); }
.mr-3 { margin-right: var(--space-xs); }

.rounded-md { border-radius: var(--radius-s); }
.rounded-lg { border-radius: var(--radius-m); }

.text-xs { font-size: var(--step--2); }
.text-sm { font-size: var(--step--1); }
.text-base { font-size: var(--step-0); }
.text-lg { font-size: var(--step-1); }
.text-xl { font-size: var(--step-1); }
.text-3xl {
  font-size: var(--step-3);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold {
  font-family: 'Sora', 'Segoe UI', sans-serif;
  font-weight: 700;
}
.font-mono { font-family: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.whitespace-nowrap { white-space: nowrap; }
.max-w-xl { max-width: 36rem; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.tracking-wider { letter-spacing: 0.08em; }

.border { border: 1px solid rgb(60 68 116 / 0.2); }
.border-b { border-bottom: 1px solid rgb(60 68 116 / 0.2); }
.border-t { border-top: 1px solid rgb(60 68 116 / 0.2); }

.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgb(107 136 170 / 0.42); }
.focus\:ring-primary:focus { box-shadow: 0 0 0 2px rgb(60 68 116 / 0.38); }
.focus\:ring-offset-2:focus { outline-offset: 2px; }
.focus\:border-primary:focus { border-color: var(--primary); }

.hover\:text-primary:hover { color: var(--primary); }
.hover\:text-primary-dark:hover { color: color-mix(in oklab, var(--primary) 86%, black 14%); }
.hover\:text-white:hover { color: #fff; }
.hover\:bg-primary:hover { background-color: var(--primary); }
.hover\:bg-muted\/50:hover { background-color: rgb(157 181 203 / 0.24); }
.hover\:bg-gray-100:hover { background-color: rgb(219 225 230 / 0.8); }
.hover\:text-gray-500:hover { color: #5f6888; }

.text-gray-400 { color: #737b97; }

.transition-all {
  transition: all 180ms ease;
}

/* Responsive utilities */
@media (min-width: 40rem) {
  .sm\:px-6 { padding-inline: var(--space-m); }
  .sm\:py-12 { padding-block: var(--space-xl); }
  .sm\:w-96 { width: 24rem; }
}

@media (min-width: 48rem) {
  .md\:hidden { display: none !important; }
  .md\:flex { display: flex !important; }
  .md\:items-center { align-items: center; }
  .md\:space-x-6 > * + * { margin-left: var(--space-m); }
  .md\:w-80 { width: 20rem; }
  .md\:w-auto { width: auto; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .lg\:px-8 { padding-inline: var(--space-l); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:w-72 { width: 18rem; }
}

/* Landscape-first polish */
@media (orientation: landscape) and (min-width: 56rem) {
  main {
    gap: var(--space-l);
  }

  .attendance-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-s);
  }

  .attendance-actions > * + * {
    margin-top: 0;
  }

  .table {
    min-width: 62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}