/* School Admin App - Modern Institutional UI */

:root {
  --sa-scale: 1;
  --sa-font-body: 'Public Sans', sans-serif;
  --sa-font-display: 'Fraunces', serif;
  --sa-body-gradient:
    radial-gradient(circle at top left, rgba(175, 122, 63, 0.08), transparent 30%),
    linear-gradient(180deg, #f7f3eb 0%, #f2eee5 48%, #ece7dc 100%);
  --sa-ink: #10233c;
  --sa-ink-soft: #274668;
  --sa-ink-muted: #617690;
  --sa-canvas: #f3efe6;
  --sa-surface: rgba(255, 252, 247, 0.88);
  --sa-surface-strong: #fffdf8;
  --sa-surface-muted: rgba(241, 236, 227, 0.78);
  --sa-sidebar: rgba(12, 27, 47, 0.9);
  --sa-sidebar-gradient: linear-gradient(180deg, rgba(16, 35, 60, 0.96), rgba(12, 27, 47, 0.94));
  --sa-sidebar-line: rgba(236, 228, 214, 0.12);
  --sa-line: rgba(26, 48, 75, 0.12);
  --sa-line-strong: rgba(20, 37, 61, 0.18);
  --sa-primary: #1f5f63;
  --sa-primary-strong: #17484b;
  --sa-primary-soft: rgba(31, 95, 99, 0.12);
  --sa-accent: #af7a3f;
  --sa-accent-soft: rgba(175, 122, 63, 0.14);
  --sa-success: #1d7c57;
  --sa-warning: #b67a28;
  --sa-danger: #a34d44;
  --sa-info: #446f9f;
  --sa-white: #fffefb;
  --sa-shadow-lg: 0 24px 60px rgba(13, 28, 47, 0.14);
  --sa-shadow-md: 0 14px 30px rgba(16, 35, 60, 0.1);
  --sa-shadow-sm: 0 8px 18px rgba(16, 35, 60, 0.08);
  --sa-radius-xl: 28px;
  --sa-radius-lg: 20px;
  --sa-radius-md: 14px;
  --sa-radius-sm: 10px;
  --sa-button-radius: 999px;
  --sa-tab-radius: 18px;
  --sa-panel-border-style: solid;
  --sa-card-bg: linear-gradient(180deg, rgba(255, 253, 249, 0.97), rgba(249, 245, 238, 0.94));
  --sa-topbar-bg: rgba(255, 253, 249, 0.72);
  --sa-sidebar-shadow: 28px 0 50px rgba(8, 19, 34, 0.12);
  --sa-hero-bg: linear-gradient(145deg, rgba(255, 252, 247, 0.92), rgba(247, 243, 235, 0.82));
  --sa-hero-accent: radial-gradient(circle, rgba(175, 122, 63, 0.18), transparent 66%);
  --sa-metric-shape-radius: 20px;
  --sa-metric-text: #fffefb;
  --sa-dashboard-highlight-span: 3;
  --sa-login-shell-bg: rgba(255, 253, 249, 0.78);
  --sa-login-hero-bg: radial-gradient(circle at top right, rgba(175, 122, 63, 0.22), transparent 36%), linear-gradient(160deg, #16334d 0%, #10243c 54%, #0d1b2d 100%);
  --sa-login-hero-text: #fffaf2;
  --sa-login-kicker: rgba(255, 244, 228, 0.72);
  --sa-login-copy: rgba(255, 244, 228, 0.78);
  --sa-login-feature-bg: rgba(255, 255, 255, 0.06);
  --sa-login-feature-border: rgba(255, 244, 228, 0.08);
  --sa-login-feature-icon: #f0c48a;
  --sa-login-panel-bg: linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(247, 243, 235, 0.9));
  --sa-login-ornament-radius: 28px;
  --sa-login-ornament-rotation: 14deg;
  --sa-table-head-bg: rgba(241, 236, 227, 0.92);
  --sa-table-hover-bg: rgba(31, 95, 99, 0.045);
  --sa-badge-bg: rgba(255, 255, 255, 0.76);
  --sa-badge-text: var(--sa-ink);
  --sa-border-accent: rgba(31, 95, 99, 0.12);
  --sa-focus-border: rgba(31, 95, 99, 0.42);
  --sa-focus-ring: rgba(31, 95, 99, 0.16);
  --sa-sidebar-brand-border: rgba(236, 228, 214, 0.12);
  --sa-sidebar-brand-text: rgba(255, 250, 244, 0.98);
  --sa-sidebar-kicker: rgba(255, 246, 235, 0.58);
  --sa-sidebar-section-text: rgba(255, 246, 235, 0.42);
  --sa-nav-link-text: rgba(255, 249, 241, 0.72);
  --sa-nav-link-icon: rgba(255, 243, 227, 0.82);
  --sa-nav-link-hover-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  --sa-nav-link-hover-text: var(--sa-white);
  --sa-nav-link-active-bg: linear-gradient(135deg, rgba(175, 122, 63, 0.3), rgba(31, 95, 99, 0.3));
  --sa-nav-link-active-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --sa-nav-link-danger-text: #f4b8a8;
  --sa-btn-primary-bg: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-strong));
  --sa-btn-primary-hover-bg: linear-gradient(135deg, #246c70, #163f43);
  --sa-btn-primary-text: #fffefb;
  --sa-btn-secondary-bg: rgba(255, 255, 255, 0.58);
  --sa-btn-secondary-hover-bg: rgba(255, 255, 255, 0.86);
  --sa-btn-secondary-border: rgba(16, 35, 60, 0.14);
  --sa-btn-secondary-text: var(--sa-ink);
  --sa-btn-ghost-bg: rgba(31, 95, 99, 0.04);
  --sa-btn-ghost-hover-bg: rgba(31, 95, 99, 0.12);
  --sa-btn-ghost-border: rgba(31, 95, 99, 0.22);
  --sa-btn-ghost-text: var(--sa-primary);
  --sa-btn-success-bg: linear-gradient(135deg, #28916a, #176447);
  --sa-btn-success-hover-bg: linear-gradient(135deg, #2f9f75, #1a7554);
  --sa-btn-success-text: #fffefb;
  --sa-btn-success-soft: rgba(29, 124, 87, 0.08);
  --sa-btn-info-bg: linear-gradient(135deg, #5a83b2, #355b8e);
  --sa-btn-info-hover-bg: linear-gradient(135deg, #6793c4, #406ba4);
  --sa-btn-info-text: #fffefb;
  --sa-btn-info-soft: rgba(68, 111, 159, 0.08);
  --sa-btn-danger-bg: linear-gradient(135deg, #b66256, #8d4036);
  --sa-btn-danger-hover-bg: linear-gradient(135deg, #c36c61, #9d4a40);
  --sa-btn-danger-text: #fffdfb;
  --sa-btn-danger-soft: rgba(163, 77, 68, 0.08);
  --sa-btn-warning-bg: linear-gradient(135deg, #c9913d, #9b671a);
  --sa-btn-warning-hover-bg: linear-gradient(135deg, #d29c4d, #ab751f);
  --sa-btn-warning-text: #fffef8;
  --sa-status-success-bg: rgba(29, 124, 87, 0.14);
  --sa-status-warning-bg: rgba(182, 122, 40, 0.14);
  --sa-status-danger-bg: rgba(163, 77, 68, 0.14);
  --sa-search-result-hover-bg: color-mix(in srgb, var(--sa-primary) 10%, transparent);
  --sa-search-result-border: color-mix(in srgb, var(--sa-line) 72%, var(--sa-border-accent) 28%);
  --sa-progress-track: rgba(255, 255, 255, 0.24);
  --sa-progress-fill: rgba(255, 255, 255, 0.92);
  --sa-calendar-neutral-bg: color-mix(in srgb, var(--sa-surface-strong) 88%, white 12%);
  --sa-metric-primary-bg: linear-gradient(135deg, #1d5e63, #0f3f46);
  --sa-metric-success-bg: linear-gradient(135deg, #237a5d, #124638);
  --sa-metric-info-bg: linear-gradient(135deg, #426e99, #214164);
  --sa-metric-warning-bg: linear-gradient(135deg, #b68036, #7b5217);
  --sa-metric-neutral-bg: linear-gradient(135deg, #fff9f2, #efe7da);
  --sa-sidebar-width: 292px;
  --sa-content-width: 1380px;
  --sa-transition: 220ms ease;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--sa-font-body);
  font-size: calc(16px * var(--sa-scale));
  color: var(--sa-ink);
  background: var(--sa-body-gradient);
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-font {
  font-family: var(--sa-font-display);
  letter-spacing: -0.03em;
}

body[data-theme='sandstone-ledger'] {
  --sa-scale: 1;
  --sa-font-body: 'Public Sans', sans-serif;
  --sa-font-display: 'Fraunces', serif;
  --sa-ink: #10233c;
  --sa-ink-soft: #274668;
  --sa-ink-muted: #617690;
  --sa-surface: rgba(255, 252, 247, 0.88);
  --sa-surface-strong: #fffdf8;
  --sa-surface-muted: rgba(241, 236, 227, 0.78);
  --sa-sidebar: rgba(12, 27, 47, 0.9);
  --sa-sidebar-gradient: linear-gradient(180deg, rgba(16, 35, 60, 0.96), rgba(12, 27, 47, 0.94));
  --sa-sidebar-line: rgba(236, 228, 214, 0.12);
  --sa-line: rgba(26, 48, 75, 0.12);
  --sa-primary: #1f5f63;
  --sa-primary-strong: #17484b;
  --sa-accent: #af7a3f;
  --sa-success: #1d7c57;
  --sa-warning: #b67a28;
  --sa-danger: #a34d44;
  --sa-info: #446f9f;
  --sa-button-radius: 999px;
  --sa-tab-radius: 18px;
  --sa-panel-border-style: solid;
  --sa-card-bg: linear-gradient(180deg, rgba(255, 253, 249, 0.97), rgba(249, 245, 238, 0.94));
  --sa-topbar-bg: rgba(255, 253, 249, 0.72);
  --sa-sidebar-shadow: 28px 0 50px rgba(8, 19, 34, 0.12);
  --sa-hero-bg: linear-gradient(145deg, rgba(255, 252, 247, 0.92), rgba(247, 243, 235, 0.82));
  --sa-hero-accent: radial-gradient(circle, rgba(175, 122, 63, 0.18), transparent 66%);
  --sa-metric-shape-radius: 20px;
  --sa-metric-text: #fffefb;
  --sa-dashboard-highlight-span: 3;
  --sa-login-shell-bg: rgba(255, 253, 249, 0.78);
  --sa-login-hero-bg: radial-gradient(circle at top right, rgba(175, 122, 63, 0.22), transparent 36%), linear-gradient(160deg, #16334d 0%, #10243c 54%, #0d1b2d 100%);
  --sa-login-hero-text: #fffaf2;
  --sa-login-kicker: rgba(255, 244, 228, 0.72);
  --sa-login-copy: rgba(255, 244, 228, 0.78);
  --sa-login-feature-bg: rgba(255, 255, 255, 0.06);
  --sa-login-feature-border: rgba(255, 244, 228, 0.08);
  --sa-login-feature-icon: #f0c48a;
  --sa-login-panel-bg: linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(247, 243, 235, 0.9));
  --sa-login-ornament-radius: 28px;
  --sa-login-ornament-rotation: 14deg;
  --sa-border-accent: rgba(31, 95, 99, 0.12);
  --sa-focus-border: rgba(31, 95, 99, 0.42);
  --sa-focus-ring: rgba(31, 95, 99, 0.16);
}

body[data-theme='midnight-academy'] {
  --sa-scale: 0.98;
  --sa-font-body: 'Manrope', sans-serif;
  --sa-font-display: 'Fraunces', serif;
  --sa-ink: #e9effb;
  --sa-ink-soft: #bfd0f2;
  --sa-ink-muted: #93a8cf;
  --sa-surface: rgba(24, 35, 59, 0.9);
  --sa-surface-strong: rgba(31, 44, 72, 0.96);
  --sa-surface-muted: rgba(35, 51, 82, 0.88);
  --sa-sidebar: rgba(8, 14, 27, 0.96);
  --sa-sidebar-gradient: linear-gradient(180deg, rgba(12, 19, 36, 0.98), rgba(8, 14, 27, 0.96));
  --sa-sidebar-line: rgba(189, 205, 240, 0.1);
  --sa-line: rgba(183, 200, 235, 0.12);
  --sa-primary: #6da4ff;
  --sa-primary-strong: #467fe0;
  --sa-accent: #f0b35e;
  --sa-success: #53c48b;
  --sa-warning: #dfb161;
  --sa-danger: #e07f79;
  --sa-info: #6ab8d9;
  --sa-radius-xl: 22px;
  --sa-radius-lg: 16px;
  --sa-radius-md: 12px;
  --sa-button-radius: 12px;
  --sa-tab-radius: 14px;
  --sa-panel-border-style: solid;
  --sa-card-bg: linear-gradient(180deg, rgba(28, 40, 66, 0.98), rgba(21, 31, 53, 0.95));
  --sa-topbar-bg: rgba(18, 28, 49, 0.78);
  --sa-sidebar-shadow: 18px 0 42px rgba(3, 8, 18, 0.32);
  --sa-hero-bg: linear-gradient(135deg, rgba(29, 44, 74, 0.98), rgba(19, 28, 47, 0.95));
  --sa-hero-accent: radial-gradient(circle, rgba(109, 164, 255, 0.2), transparent 64%);
  --sa-metric-shape-radius: 14px;
  --sa-metric-text: #eef4ff;
  --sa-dashboard-highlight-span: 6;
  --sa-login-shell-bg: rgba(17, 27, 49, 0.86);
  --sa-login-hero-bg: radial-gradient(circle at top right, rgba(109, 164, 255, 0.24), transparent 34%), linear-gradient(160deg, #10182c 0%, #12213c 54%, #1b2e55 100%);
  --sa-login-hero-text: #eef4ff;
  --sa-login-kicker: rgba(205, 219, 247, 0.72);
  --sa-login-copy: rgba(210, 222, 247, 0.82);
  --sa-login-feature-bg: rgba(109, 164, 255, 0.08);
  --sa-login-feature-border: rgba(189, 205, 240, 0.14);
  --sa-login-feature-icon: #8fb7ff;
  --sa-login-panel-bg: linear-gradient(180deg, rgba(25, 38, 64, 0.98), rgba(20, 30, 53, 0.95));
  --sa-login-ornament-radius: 18px;
  --sa-login-ornament-rotation: 6deg;
  --sa-table-head-bg: rgba(31, 44, 72, 0.92);
  --sa-table-hover-bg: rgba(109, 164, 255, 0.08);
  --sa-badge-bg: rgba(31, 44, 72, 0.82);
  --sa-badge-text: #e9effb;
  --sa-border-accent: rgba(109, 164, 255, 0.16);
  --sa-focus-border: rgba(109, 164, 255, 0.56);
  --sa-focus-ring: rgba(109, 164, 255, 0.2);
  --sa-sidebar-brand-border: rgba(189, 205, 240, 0.14);
  --sa-sidebar-brand-text: #eef4ff;
  --sa-sidebar-kicker: rgba(205, 219, 247, 0.68);
  --sa-sidebar-section-text: rgba(189, 205, 240, 0.5);
  --sa-nav-link-text: rgba(221, 232, 255, 0.76);
  --sa-nav-link-icon: #8fb7ff;
  --sa-nav-link-hover-bg: linear-gradient(135deg, rgba(109, 164, 255, 0.22), rgba(46, 95, 177, 0.16));
  --sa-nav-link-hover-text: #f2f7ff;
  --sa-nav-link-active-bg: linear-gradient(135deg, rgba(109, 164, 255, 0.34), rgba(74, 120, 209, 0.26));
  --sa-nav-link-active-shadow: 0 8px 18px rgba(7, 17, 34, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --sa-nav-link-danger-text: #ffb0ab;
  --sa-btn-primary-bg: linear-gradient(135deg, #78adff, #3a6fd1);
  --sa-btn-primary-hover-bg: linear-gradient(135deg, #89b8ff, #4a7ee0);
  --sa-btn-primary-text: #081422;
  --sa-btn-secondary-bg: rgba(30, 47, 76, 0.94);
  --sa-btn-secondary-hover-bg: rgba(39, 60, 95, 0.98);
  --sa-btn-secondary-border: rgba(189, 205, 240, 0.16);
  --sa-btn-secondary-text: #eaf1ff;
  --sa-btn-ghost-bg: rgba(109, 164, 255, 0.08);
  --sa-btn-ghost-hover-bg: rgba(109, 164, 255, 0.16);
  --sa-btn-ghost-border: rgba(109, 164, 255, 0.26);
  --sa-btn-ghost-text: #b8d2ff;
  --sa-btn-success-bg: linear-gradient(135deg, #56c78f, #2a7d59);
  --sa-btn-success-hover-bg: linear-gradient(135deg, #69d79f, #309167);
  --sa-btn-success-text: #071711;
  --sa-btn-success-soft: rgba(83, 196, 139, 0.1);
  --sa-btn-info-bg: linear-gradient(135deg, #72c3e4, #387a9d);
  --sa-btn-info-hover-bg: linear-gradient(135deg, #83d0ee, #4489ae);
  --sa-btn-info-text: #08141b;
  --sa-btn-info-soft: rgba(106, 184, 217, 0.1);
  --sa-btn-danger-bg: linear-gradient(135deg, #ea8a84, #b95752);
  --sa-btn-danger-hover-bg: linear-gradient(135deg, #f29a95, #c86460);
  --sa-btn-danger-text: #190909;
  --sa-btn-danger-soft: rgba(224, 127, 121, 0.1);
  --sa-btn-warning-bg: linear-gradient(135deg, #e2b66b, #a77328);
  --sa-btn-warning-hover-bg: linear-gradient(135deg, #ecc27a, #b5802f);
  --sa-btn-warning-text: #1e1306;
  --sa-status-success-bg: rgba(83, 196, 139, 0.16);
  --sa-status-warning-bg: rgba(223, 177, 97, 0.18);
  --sa-status-danger-bg: rgba(224, 127, 121, 0.18);
  --sa-metric-primary-bg: linear-gradient(135deg, #5f95ec, #2c5fb7);
  --sa-metric-success-bg: linear-gradient(135deg, #3da374, #1f6c4d);
  --sa-metric-info-bg: linear-gradient(135deg, #4d8eaa, #28586d);
  --sa-metric-warning-bg: linear-gradient(135deg, #d2a257, #8d5d1f);
  --sa-metric-neutral-bg: linear-gradient(135deg, rgba(38, 53, 84, 0.98), rgba(28, 39, 63, 0.95));
  --sa-body-gradient:
    radial-gradient(circle at top left, rgba(109, 164, 255, 0.12), transparent 28%),
    linear-gradient(180deg, #0e1628 0%, #111b31 48%, #15213b 100%);
}

body[data-theme='emerald-court'] {
  --sa-scale: 1.02;
  --sa-font-body: 'IBM Plex Sans', sans-serif;
  --sa-font-display: 'Cormorant Garamond', serif;
  --sa-ink: #18322c;
  --sa-ink-soft: #31534a;
  --sa-ink-muted: #5f786f;
  --sa-surface: rgba(251, 250, 244, 0.9);
  --sa-surface-strong: #fffdf7;
  --sa-surface-muted: rgba(235, 241, 232, 0.86);
  --sa-sidebar: rgba(18, 50, 43, 0.94);
  --sa-sidebar-gradient: linear-gradient(180deg, rgba(24, 58, 51, 0.98), rgba(18, 50, 43, 0.94));
  --sa-sidebar-line: rgba(229, 240, 229, 0.12);
  --sa-line: rgba(35, 70, 61, 0.12);
  --sa-primary: #2c6c58;
  --sa-primary-strong: #1e5042;
  --sa-accent: #b58b42;
  --sa-success: #2f8a68;
  --sa-warning: #bb8a3d;
  --sa-danger: #b55f57;
  --sa-info: #4d7f7b;
  --sa-radius-xl: 32px;
  --sa-radius-lg: 24px;
  --sa-radius-md: 16px;
  --sa-button-radius: 999px;
  --sa-tab-radius: 22px;
  --sa-panel-border-style: solid;
  --sa-card-bg: linear-gradient(180deg, rgba(255, 253, 247, 0.96), rgba(241, 245, 236, 0.94));
  --sa-topbar-bg: rgba(250, 252, 247, 0.8);
  --sa-sidebar-shadow: 20px 0 40px rgba(11, 35, 30, 0.16);
  --sa-hero-bg: linear-gradient(145deg, rgba(255, 254, 249, 0.95), rgba(238, 244, 234, 0.9));
  --sa-hero-accent: radial-gradient(circle, rgba(44, 108, 88, 0.18), transparent 64%);
  --sa-metric-shape-radius: 24px;
  --sa-metric-text: #fffef7;
  --sa-dashboard-highlight-span: 4;
  --sa-login-shell-bg: rgba(255, 253, 247, 0.86);
  --sa-login-hero-bg: radial-gradient(circle at top right, rgba(44, 108, 88, 0.16), transparent 34%), linear-gradient(150deg, #17382f 0%, #234c40 52%, #2d6656 100%);
  --sa-login-hero-text: #fffdf6;
  --sa-login-kicker: rgba(233, 242, 229, 0.72);
  --sa-login-copy: rgba(235, 244, 231, 0.8);
  --sa-login-feature-bg: rgba(255, 255, 255, 0.08);
  --sa-login-feature-border: rgba(233, 242, 229, 0.12);
  --sa-login-feature-icon: #d9be7d;
  --sa-login-panel-bg: linear-gradient(180deg, rgba(255, 253, 247, 0.96), rgba(241, 245, 236, 0.92));
  --sa-login-ornament-radius: 36px;
  --sa-login-ornament-rotation: 12deg;
  --sa-table-head-bg: rgba(231, 239, 229, 0.92);
  --sa-table-hover-bg: rgba(44, 108, 88, 0.05);
  --sa-badge-bg: rgba(235, 241, 232, 0.84);
  --sa-badge-text: #18322c;
  --sa-border-accent: rgba(44, 108, 88, 0.12);
  --sa-focus-border: rgba(44, 108, 88, 0.44);
  --sa-focus-ring: rgba(44, 108, 88, 0.14);
  --sa-sidebar-brand-border: rgba(229, 240, 229, 0.14);
  --sa-sidebar-brand-text: #fffdf6;
  --sa-sidebar-kicker: rgba(233, 242, 229, 0.64);
  --sa-sidebar-section-text: rgba(233, 242, 229, 0.5);
  --sa-nav-link-text: rgba(243, 248, 240, 0.76);
  --sa-nav-link-icon: #d9be7d;
  --sa-nav-link-hover-bg: linear-gradient(135deg, rgba(217, 190, 125, 0.22), rgba(44, 108, 88, 0.16));
  --sa-nav-link-hover-text: #fffcf3;
  --sa-nav-link-active-bg: linear-gradient(135deg, rgba(217, 190, 125, 0.3), rgba(44, 108, 88, 0.28));
  --sa-nav-link-active-shadow: 0 10px 22px rgba(10, 33, 28, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --sa-nav-link-danger-text: #ffc8bf;
  --sa-btn-primary-bg: linear-gradient(135deg, #347e67, #1f5546);
  --sa-btn-primary-hover-bg: linear-gradient(135deg, #3c9177, #266351);
  --sa-btn-primary-text: #fffdf6;
  --sa-btn-secondary-bg: rgba(255, 253, 247, 0.74);
  --sa-btn-secondary-hover-bg: rgba(255, 253, 247, 0.95);
  --sa-btn-secondary-border: rgba(35, 70, 61, 0.14);
  --sa-btn-secondary-text: #18322c;
  --sa-btn-ghost-bg: rgba(44, 108, 88, 0.05);
  --sa-btn-ghost-hover-bg: rgba(44, 108, 88, 0.12);
  --sa-btn-ghost-border: rgba(44, 108, 88, 0.2);
  --sa-btn-ghost-text: #245848;
  --sa-btn-success-bg: linear-gradient(135deg, #43a17b, #20634a);
  --sa-btn-success-hover-bg: linear-gradient(135deg, #4db58a, #267156);
  --sa-btn-success-text: #fffef7;
  --sa-btn-success-soft: rgba(47, 138, 104, 0.08);
  --sa-btn-info-bg: linear-gradient(135deg, #609390, #3d6361);
  --sa-btn-info-hover-bg: linear-gradient(135deg, #6ea39f, #477371);
  --sa-btn-info-text: #fffef8;
  --sa-btn-info-soft: rgba(77, 127, 123, 0.08);
  --sa-btn-danger-bg: linear-gradient(135deg, #c36f66, #944840);
  --sa-btn-danger-hover-bg: linear-gradient(135deg, #d27d73, #a4544b);
  --sa-btn-danger-text: #fffdfa;
  --sa-btn-danger-soft: rgba(181, 95, 87, 0.08);
  --sa-btn-warning-bg: linear-gradient(135deg, #c59b52, #8a6423);
  --sa-btn-warning-hover-bg: linear-gradient(135deg, #d3aa61, #99712b);
  --sa-btn-warning-text: #fffdf7;
  --sa-status-success-bg: rgba(47, 138, 104, 0.14);
  --sa-status-warning-bg: rgba(181, 139, 66, 0.16);
  --sa-status-danger-bg: rgba(181, 95, 87, 0.14);
  --sa-metric-primary-bg: linear-gradient(135deg, #2c6c58, #194235);
  --sa-metric-success-bg: linear-gradient(135deg, #3f8f70, #1d5f48);
  --sa-metric-info-bg: linear-gradient(135deg, #5a8983, #365d59);
  --sa-metric-warning-bg: linear-gradient(135deg, #b58b42, #76581f);
  --sa-metric-neutral-bg: linear-gradient(135deg, #fffdf7, #ecf1e4);
  --sa-body-gradient:
    radial-gradient(circle at top left, rgba(44, 108, 88, 0.08), transparent 30%),
    linear-gradient(180deg, #f5f4ec 0%, #eef2e8 50%, #e6ede1 100%);
}

body[data-theme='rose-studio'] {
  --sa-scale: 1.04;
  --sa-font-body: 'Manrope', sans-serif;
  --sa-font-display: 'Crimson Pro', serif;
  --sa-ink: #4a2f3e;
  --sa-ink-soft: #6f4d60;
  --sa-ink-muted: #8a6b7c;
  --sa-surface: rgba(255, 248, 249, 0.92);
  --sa-surface-strong: #fffdfd;
  --sa-surface-muted: rgba(248, 236, 239, 0.86);
  --sa-sidebar: rgba(78, 43, 58, 0.94);
  --sa-sidebar-gradient: linear-gradient(180deg, rgba(98, 54, 72, 0.98), rgba(78, 43, 58, 0.94));
  --sa-sidebar-line: rgba(255, 235, 241, 0.12);
  --sa-line: rgba(106, 71, 88, 0.12);
  --sa-primary: #b45872;
  --sa-primary-strong: #8d4058;
  --sa-accent: #d08d58;
  --sa-success: #4e8f75;
  --sa-warning: #cb8b44;
  --sa-danger: #bf5e68;
  --sa-info: #7b77b8;
  --sa-radius-xl: 18px;
  --sa-radius-lg: 14px;
  --sa-radius-md: 10px;
  --sa-button-radius: 10px;
  --sa-tab-radius: 12px;
  --sa-panel-border-style: dashed;
  --sa-card-bg: linear-gradient(180deg, rgba(255, 251, 252, 0.98), rgba(249, 240, 243, 0.95));
  --sa-topbar-bg: rgba(255, 251, 252, 0.82);
  --sa-sidebar-shadow: 16px 0 34px rgba(71, 34, 48, 0.14);
  --sa-hero-bg: linear-gradient(135deg, rgba(255, 251, 252, 0.98), rgba(247, 234, 239, 0.94));
  --sa-hero-accent: radial-gradient(circle, rgba(180, 88, 114, 0.18), transparent 64%);
  --sa-metric-shape-radius: 12px;
  --sa-metric-text: #fffafc;
  --sa-dashboard-highlight-span: 6;
  --sa-login-shell-bg: rgba(255, 250, 252, 0.88);
  --sa-login-hero-bg: radial-gradient(circle at top right, rgba(180, 88, 114, 0.2), transparent 34%), linear-gradient(150deg, #5a3044 0%, #7d415d 52%, #b45872 100%);
  --sa-login-hero-text: #fff8fb;
  --sa-login-kicker: rgba(255, 228, 238, 0.76);
  --sa-login-copy: rgba(255, 234, 241, 0.84);
  --sa-login-feature-bg: rgba(255, 255, 255, 0.1);
  --sa-login-feature-border: rgba(255, 228, 238, 0.16);
  --sa-login-feature-icon: #ffd3a8;
  --sa-login-panel-bg: linear-gradient(180deg, rgba(255, 251, 252, 0.98), rgba(249, 240, 243, 0.95));
  --sa-login-ornament-radius: 12px;
  --sa-login-ornament-rotation: 18deg;
  --sa-table-head-bg: rgba(247, 234, 239, 0.92);
  --sa-table-hover-bg: rgba(180, 88, 114, 0.05);
  --sa-badge-bg: rgba(255, 241, 245, 0.86);
  --sa-badge-text: #4a2f3e;
  --sa-border-accent: rgba(180, 88, 114, 0.14);
  --sa-focus-border: rgba(180, 88, 114, 0.42);
  --sa-focus-ring: rgba(180, 88, 114, 0.14);
  --sa-sidebar-brand-border: rgba(255, 235, 241, 0.16);
  --sa-sidebar-brand-text: #fff8fb;
  --sa-sidebar-kicker: rgba(255, 228, 238, 0.72);
  --sa-sidebar-section-text: rgba(255, 228, 238, 0.52);
  --sa-nav-link-text: rgba(255, 236, 243, 0.78);
  --sa-nav-link-icon: #ffd3a8;
  --sa-nav-link-hover-bg: linear-gradient(135deg, rgba(255, 211, 168, 0.2), rgba(180, 88, 114, 0.16));
  --sa-nav-link-hover-text: #fff8fb;
  --sa-nav-link-active-bg: linear-gradient(135deg, rgba(208, 141, 88, 0.28), rgba(180, 88, 114, 0.24));
  --sa-nav-link-active-shadow: 0 10px 20px rgba(87, 48, 64, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --sa-nav-link-danger-text: #ffc1c8;
  --sa-btn-primary-bg: linear-gradient(135deg, #c86b86, #93445b);
  --sa-btn-primary-hover-bg: linear-gradient(135deg, #d87892, #a45067);
  --sa-btn-primary-text: #fffafc;
  --sa-btn-secondary-bg: rgba(255, 249, 251, 0.78);
  --sa-btn-secondary-hover-bg: rgba(255, 252, 253, 0.96);
  --sa-btn-secondary-border: rgba(106, 71, 88, 0.14);
  --sa-btn-secondary-text: #4a2f3e;
  --sa-btn-ghost-bg: rgba(180, 88, 114, 0.05);
  --sa-btn-ghost-hover-bg: rgba(180, 88, 114, 0.12);
  --sa-btn-ghost-border: rgba(180, 88, 114, 0.22);
  --sa-btn-ghost-text: #9f4861;
  --sa-btn-success-bg: linear-gradient(135deg, #68a089, #44705f);
  --sa-btn-success-hover-bg: linear-gradient(135deg, #74ae96, #4d7e6a);
  --sa-btn-success-text: #fffdf9;
  --sa-btn-success-soft: rgba(78, 143, 117, 0.08);
  --sa-btn-info-bg: linear-gradient(135deg, #8d87cf, #625da6);
  --sa-btn-info-hover-bg: linear-gradient(135deg, #9b95da, #706bbb);
  --sa-btn-info-text: #fffafd;
  --sa-btn-info-soft: rgba(123, 119, 184, 0.08);
  --sa-btn-danger-bg: linear-gradient(135deg, #cf6a74, #a14b57);
  --sa-btn-danger-hover-bg: linear-gradient(135deg, #db7881, #b25763);
  --sa-btn-danger-text: #fffafc;
  --sa-btn-danger-soft: rgba(191, 94, 104, 0.08);
  --sa-btn-warning-bg: linear-gradient(135deg, #d89a5f, #ab6a34);
  --sa-btn-warning-hover-bg: linear-gradient(135deg, #e5a76d, #bb7740);
  --sa-btn-warning-text: #fffaf6;
  --sa-status-success-bg: rgba(78, 143, 117, 0.14);
  --sa-status-warning-bg: rgba(208, 141, 88, 0.16);
  --sa-status-danger-bg: rgba(191, 94, 104, 0.14);
  --sa-metric-primary-bg: linear-gradient(135deg, #b45872, #843d52);
  --sa-metric-success-bg: linear-gradient(135deg, #649987, #3c695b);
  --sa-metric-info-bg: linear-gradient(135deg, #8b84c8, #5d579b);
  --sa-metric-warning-bg: linear-gradient(135deg, #d08d58, #a6612f);
  --sa-metric-neutral-bg: linear-gradient(135deg, #fff8fa, #f6e8ec);
  --sa-body-gradient:
    radial-gradient(circle at top left, rgba(180, 88, 114, 0.08), transparent 30%),
    linear-gradient(180deg, #fcf4f5 0%, #f8eef0 50%, #f4e7ea 100%);
}

a {
  color: inherit;
}

.app-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.app-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.7;
}

.app-bg-orb-a {
  width: 26rem;
  height: 26rem;
  top: -7rem;
  right: -5rem;
  background: rgba(31, 95, 99, 0.12);
}

.app-bg-orb-b {
  width: 20rem;
  height: 20rem;
  bottom: 2rem;
  left: -4rem;
  background: rgba(175, 122, 63, 0.12);
}

.app-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(16, 35, 60, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 35, 60, 0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 80%);
}

#main-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100vh;
}

#sidebar {
  width: var(--sa-sidebar-width);
  min-height: 100vh;
  padding: 1.4rem 1rem 1.2rem;
  background:
    var(--sa-sidebar-gradient),
    var(--sa-sidebar);
  border-right: 1px solid var(--sa-sidebar-line);
  box-shadow: var(--sa-sidebar-shadow);
  transition: transform var(--sa-transition);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0.95rem 1.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--sa-sidebar-brand-border);
  color: var(--sa-sidebar-brand-text);
}

.sidebar-brand-mark {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--sa-accent), #d0ab73);
  color: #fff9f1;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.sidebar-brand-kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sa-sidebar-kicker);
  margin-bottom: 0.2rem;
}

#sidebarNav {
  gap: 0.3rem;
}

.sidebar-section-label {
  padding: 1rem 0.95rem 0.45rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sa-sidebar-section-text);
}

#sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0.25rem;
  padding: 0.8rem 0.9rem;
  border-radius: 16px;
  color: var(--sa-nav-link-text);
  font-weight: 500;
  border: 1px solid transparent;
  transition: background var(--sa-transition), color var(--sa-transition), transform var(--sa-transition), border-color var(--sa-transition), box-shadow var(--sa-transition);
}

#sidebar .nav-link i {
  width: 1.2rem;
  text-align: center;
  color: var(--sa-nav-link-icon);
  transition: color var(--sa-transition), transform var(--sa-transition);
}

#sidebar .nav-link:hover {
  color: var(--sa-nav-link-hover-text);
  background: var(--sa-nav-link-hover-bg);
  border-color: var(--sa-sidebar-line);
  transform: translateX(2px);
}

#sidebar .nav-link:hover i,
#sidebar .nav-link.active i {
  color: currentColor;
  transform: scale(1.05);
}

#sidebar .nav-link.active {
  color: var(--sa-nav-link-hover-text);
  background: var(--sa-nav-link-active-bg);
  border-color: var(--sa-border-accent);
  box-shadow: var(--sa-nav-link-active-shadow);
  transform: translateX(3px);
}

#sidebar .nav-link.text-danger {
  color: var(--sa-nav-link-danger-text) !important;
}

#sidebar .nav-link:focus-visible {
  outline: none;
  border-color: var(--sa-focus-border);
  box-shadow: 0 0 0 0.2rem var(--sa-focus-ring);
}

#content-wrapper {
  flex: 1;
  min-width: 0;
  padding: 1.2rem;
}

.topbar {
  position: sticky;
  top: 1rem;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.15rem;
  padding: 1.15rem 1.35rem;
  margin: 0 auto 1.5rem;
  max-width: var(--sa-content-width);
  background: var(--sa-topbar-bg);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(16, 35, 60, 0.08);
  border-radius: 24px;
  box-shadow: var(--sa-shadow-sm);
}

.topbar-intro,
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.topbar-intro {
  min-width: 0;
}

.topbar-toggle {
  color: var(--sa-ink) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.topbar-eyebrow {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--sa-ink-muted);
  margin-bottom: 0.18rem;
}

#pageTitle {
  font-size: 1.25rem;
  color: var(--sa-ink);
}

.topbar-search {
  min-width: min(22rem, 46vw);
}

.topbar-search .form-control {
  padding: 0.82rem 1rem 0.82rem 2.5rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 35, 60, 0.12);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: none;
}

.topbar-search .form-control:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--sa-focus-border);
  box-shadow: 0 0 0 0.22rem var(--sa-focus-ring);
}

.topbar-search-icon {
  position: absolute;
  top: 50%;
  left: 0.95rem;
  transform: translateY(-50%);
  color: var(--sa-ink-muted);
}

.topbar-search-results {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 0;
  right: 0;
  padding: 0.5rem;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--sa-line) 72%, var(--sa-border-accent) 28%);
  background: rgba(255, 253, 249, 0.98);
  box-shadow: var(--sa-shadow-lg);
  max-height: 320px;
  overflow-y: auto;
  z-index: 1050;
}

.topbar-search-results.is-hidden {
  display: none;
}

.topbar-search-results-empty {
  padding: 0.75rem;
  color: var(--sa-ink-muted);
  text-align: center;
}

.topbar-search-result {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--sa-search-result-border);
  transition: background var(--sa-transition), transform var(--sa-transition);
}

.topbar-search-result:last-child {
  border-bottom: none;
}

.topbar-search-result:hover,
.topbar-search-result:focus-visible {
  background: var(--sa-search-result-hover-bg);
  transform: translateY(-1px);
  outline: none;
}

.topbar-search-result strong {
  color: var(--sa-ink);
}

.topbar-search-result-meta {
  color: var(--sa-ink-muted) !important;
}

.topbar-user {
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: var(--sa-surface-muted);
  color: var(--sa-ink);
  font-weight: 600;
  white-space: nowrap;
}

.content-shell {
  max-width: var(--sa-content-width);
  margin: 0 auto;
  padding: 0.45rem 0 2rem;
}

.page-shell {
  display: grid;
  gap: 1.5rem;
  animation: pageRise 300ms ease;
}

.page-shell > * {
  min-width: 0;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 1.5rem;
  padding: 1.75rem 1.8rem;
  border-radius: var(--sa-radius-xl);
  background:
    var(--sa-hero-bg),
    var(--sa-surface);
  border: 1px solid color-mix(in srgb, var(--sa-line) 65%, var(--sa-border-accent) 35%);
  box-shadow: var(--sa-shadow-md);
}

.page-header-hero {
  position: relative;
  overflow: hidden;
}

.page-header-hero::after {
  content: '';
  position: absolute;
  inset: auto -4rem -4rem auto;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: var(--sa-hero-accent);
}

.page-eyebrow {
  display: inline-block;
  margin-bottom: 0.45rem;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sa-primary);
  font-weight: 700;
}

.page-title {
  margin: 0;
  font-size: clamp(1.8rem, 2vw, 2.35rem);
  color: var(--sa-ink);
}

.page-subtitle {
  margin: 0.65rem 0 0;
  max-width: 42rem;
  line-height: 1.65;
  color: var(--sa-ink-muted);
}

.page-actions,
.page-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.surface-card,
.card,
.modal-content {
  border: 1px solid color-mix(in srgb, var(--sa-line) 70%, var(--sa-border-accent) 30%);
  border-style: var(--sa-panel-border-style);
  border-radius: var(--sa-radius-lg);
  background: var(--sa-card-bg);
  box-shadow: var(--sa-shadow-sm);
}

.surface-card {
  padding: 1.45rem 1.55rem;
}

.card {
  margin-bottom: 0;
}

.card + .card,
.surface-card + .surface-card {
  margin-top: 0.4rem;
}

.section-shell {
  padding: 1.25rem 1.35rem;
}

.section-title,
.card-header {
  font-family: 'Fraunces', serif;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  color: var(--sa-ink);
  background: transparent;
  border-bottom: 1px solid var(--sa-line);
  padding: 1rem 1.25rem;
}

.toolbar-card,
.filter-card {
  padding: 1.15rem 1.25rem;
}

.filter-grid {
  display: grid;
  gap: 1rem 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
}

.action-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.btn {
  border-radius: var(--sa-button-radius);
  font-weight: 600;
  padding: 0.65rem 1rem;
  transition: background var(--sa-transition), color var(--sa-transition), border-color var(--sa-transition), box-shadow var(--sa-transition), transform var(--sa-transition);
}

.btn-sm {
  padding: 0.52rem 0.88rem;
}

.btn-primary {
  background: var(--sa-btn-primary-bg);
  border-color: transparent;
  color: var(--sa-btn-primary-text);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--sa-btn-primary-hover-bg);
  color: var(--sa-btn-primary-text);
}

.btn-outline-primary {
  color: var(--sa-btn-ghost-text);
  border-color: var(--sa-btn-ghost-border);
  background: var(--sa-btn-ghost-bg);
}

.btn-secondary {
  color: var(--sa-btn-secondary-text);
  border-color: var(--sa-btn-secondary-border);
  background: var(--sa-btn-secondary-bg);
}

.btn-outline-secondary,
.btn-outline-dark,
.btn-link {
  color: var(--sa-btn-ghost-text);
  border-color: var(--sa-btn-ghost-border);
  background: var(--sa-btn-ghost-bg);
}

.btn-success {
  background: var(--sa-btn-success-bg);
  border-color: transparent;
  color: var(--sa-btn-success-text);
}

.btn-outline-success {
  color: var(--sa-success);
  border-color: color-mix(in srgb, var(--sa-success) 28%, transparent);
  background: var(--sa-btn-success-soft);
}

.btn-info {
  background: var(--sa-btn-info-bg);
  border-color: transparent;
  color: var(--sa-btn-info-text);
}

.btn-outline-info {
  color: var(--sa-info);
  border-color: color-mix(in srgb, var(--sa-info) 30%, transparent);
  background: var(--sa-btn-info-soft);
}

.btn-danger {
  background: var(--sa-btn-danger-bg);
  border-color: transparent;
  color: var(--sa-btn-danger-text);
}

.btn-outline-danger {
  color: var(--sa-danger);
  border-color: color-mix(in srgb, var(--sa-danger) 28%, transparent);
  background: var(--sa-btn-danger-soft);
}

.btn-warning {
  background: var(--sa-btn-warning-bg);
  border-color: transparent;
  color: var(--sa-btn-warning-text);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--sa-btn-secondary-hover-bg);
  color: var(--sa-btn-secondary-text);
  border-color: var(--sa-btn-secondary-border);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-link:hover,
.btn-link:focus {
  background: var(--sa-btn-ghost-hover-bg);
  color: var(--sa-btn-ghost-text);
  border-color: var(--sa-focus-border);
}

.btn-success:hover,
.btn-success:focus {
  background: var(--sa-btn-success-hover-bg);
  color: var(--sa-btn-success-text);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  background: color-mix(in srgb, var(--sa-btn-success-soft) 55%, var(--sa-success) 45%);
  color: var(--sa-btn-success-text);
  border-color: transparent;
}

.btn-info:hover,
.btn-info:focus {
  background: var(--sa-btn-info-hover-bg);
  color: var(--sa-btn-info-text);
}

.btn-outline-info:hover,
.btn-outline-info:focus {
  background: color-mix(in srgb, var(--sa-btn-info-soft) 50%, var(--sa-info) 50%);
  color: var(--sa-btn-info-text);
  border-color: transparent;
}

.btn-danger:hover,
.btn-danger:focus {
  background: var(--sa-btn-danger-hover-bg);
  color: var(--sa-btn-danger-text);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background: color-mix(in srgb, var(--sa-btn-danger-soft) 48%, var(--sa-danger) 52%);
  color: var(--sa-btn-danger-text);
  border-color: transparent;
}

.btn-warning:hover,
.btn-warning:focus {
  background: var(--sa-btn-warning-hover-bg);
  color: var(--sa-btn-warning-text);
}

.btn:focus,
.btn:focus-visible,
.btn-close:focus,
.theme-card:focus-visible,
.nav-tabs .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.22rem var(--sa-focus-ring);
}

.btn:active {
  transform: translateY(1px);
}

.form-control,
.form-select,
textarea.form-control {
  min-height: 2.75rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sa-line) 82%, var(--sa-border-accent) 18%);
  background: rgba(255, 255, 255, 0.78);
}

.form-label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sa-ink-muted);
}

.table-responsive {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--sa-line) 78%, var(--sa-border-accent) 22%);
  background: color-mix(in srgb, var(--sa-surface) 82%, white 18%);
  overflow: hidden;
}

.card-body {
  padding: 1.25rem;
}

.table {
  margin-bottom: 0;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(16, 35, 60, 0.025);
}

.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.9rem 0.85rem;
  background: var(--sa-table-head-bg);
  border-bottom: 1px solid var(--sa-line);
  color: var(--sa-ink-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.table td {
  padding: 0.92rem 0.85rem;
  border-color: rgba(16, 35, 60, 0.08);
  vertical-align: middle;
}

.table tbody tr:hover {
  background: var(--sa-table-hover-bg);
}

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  border-bottom: none;
  padding: 0.45rem;
  border-radius: var(--sa-tab-radius);
  background: var(--sa-surface-muted);
  border: 1px solid color-mix(in srgb, var(--sa-line) 76%, var(--sa-border-accent) 24%);
}

.nav-tabs .nav-item {
  flex: 0 1 auto;
}

.nav-tabs .nav-link {
  margin: 0;
  border: none;
  border-radius: calc(var(--sa-tab-radius) - 4px);
  color: var(--sa-ink-muted);
  font-weight: 700;
  padding: 0.75rem 1rem;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  background: color-mix(in srgb, var(--sa-surface-strong) 88%, white 12%);
  color: var(--sa-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sa-line) 70%, var(--sa-border-accent) 30%);
}

.metric-card {
  position: relative;
  overflow: hidden;
  padding: 1.35rem;
  border-radius: var(--sa-metric-shape-radius);
  color: var(--sa-metric-text);
  min-height: 11.5rem;
}

.metric-card::after {
  content: '';
  position: absolute;
  inset: auto -2rem -3rem auto;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.metric-card .metric-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.84;
  line-height: 1.45;
}

.metric-card .metric-value {
  margin-top: 1rem;
  font-family: 'Fraunces', serif;
  font-size: 2.4rem;
  line-height: 1;
  overflow-wrap: anywhere;
}

.metric-card .metric-subtext {
  margin-top: 0.75rem;
  font-size: 0.92rem;
  opacity: 0.86;
  line-height: 1.55;
}

.metric-progress {
  margin-top: 1rem;
  height: 6px;
  border-radius: 999px;
  background: var(--sa-progress-track);
  overflow: hidden;
}

.metric-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--sa-progress-fill);
}

.metric-primary { background: var(--sa-metric-primary-bg); }
.metric-success { background: var(--sa-metric-success-bg); }
.metric-info { background: var(--sa-metric-info-bg); }
.metric-warning { background: var(--sa-metric-warning-bg); }
.metric-neutral { background: var(--sa-metric-neutral-bg); color: var(--sa-ink); }

.summary-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.summary-grid > * {
  grid-column: span 3;
}

.summary-grid > :first-child {
  grid-column: span var(--sa-dashboard-highlight-span);
}

.dashboard-panel-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-theme='midnight-academy'] .page-header,
body[data-theme='midnight-academy'] .surface-card,
body[data-theme='midnight-academy'] .card,
body[data-theme='midnight-academy'] .modal-content,
body[data-theme='midnight-academy'] .topbar-search-results {
  border-color: rgba(183, 200, 235, 0.12);
}

body[data-theme='midnight-academy'] .nav-tabs,
body[data-theme='midnight-academy'] .topbar-user,
body[data-theme='midnight-academy'] .topbar-search .form-control {
  background: rgba(31, 44, 72, 0.82);
}

body[data-theme='midnight-academy'] .metric-card::after {
  width: 6rem;
  height: 6rem;
  background: rgba(255, 255, 255, 0.08);
}

body[data-theme='midnight-academy'] .metric-neutral {
  background: linear-gradient(135deg, rgba(38, 53, 84, 0.98), rgba(28, 39, 63, 0.95));
  color: var(--sa-ink);
}

body[data-theme='emerald-court'] .page-header {
  box-shadow: 0 18px 34px rgba(18, 50, 43, 0.08);
}

body[data-theme='emerald-court'] .metric-card {
  padding: 1.5rem;
}

body[data-theme='emerald-court'] .metric-card::after {
  width: 9rem;
  height: 9rem;
  background: rgba(255, 255, 255, 0.1);
}

body[data-theme='emerald-court'] .nav-tabs .nav-link {
  letter-spacing: 0.03em;
}

body[data-theme='rose-studio'] .page-header {
  border-style: dashed;
}

body[data-theme='rose-studio'] .metric-card {
  box-shadow: 0 10px 22px rgba(123, 74, 95, 0.12);
}

body[data-theme='rose-studio'] .metric-card::after {
  width: 7rem;
  height: 7rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  transform: rotate(18deg);
}

body[data-theme='rose-studio'] .nav-tabs,
body[data-theme='rose-studio'] .topbar-user {
  background: rgba(255, 244, 247, 0.84);
}

body[data-theme='sandstone-ledger'] .page-header-hero,
body[data-theme='emerald-court'] .page-header-hero {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.quicklink-card {
  transition: transform var(--sa-transition), box-shadow var(--sa-transition), border-color var(--sa-transition);
}

.quicklink-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sa-shadow-md);
  border-color: rgba(31, 95, 99, 0.18);
}

.data-table-card {
  overflow: hidden;
}

.list-shell {
  display: grid;
  gap: 1.1rem;
}

.list-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--sa-ink-muted);
  font-size: 0.94rem;
}

.announcement-list {
  display: grid;
  gap: 1rem;
}

.announcement-item {
  padding: 1.15rem 1.2rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(16, 35, 60, 0.08);
}

#feeTabContent,
#announcementsContent,
#hrTabContent {
  display: grid;
  gap: 1.15rem;
}

.fee-tab:not(.d-none) {
  display: grid;
  gap: 1.15rem;
}

.announcement-meta {
  color: var(--sa-ink-muted);
  font-size: 0.88rem;
}

.login-shell {
  min-height: calc(100vh - 3rem);
  display: grid;
  place-items: center;
  padding: 2rem 0 3rem;
}

.login-layout {
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  overflow: hidden;
  border-radius: 34px;
  background: var(--sa-login-shell-bg);
  border: 1px solid rgba(16, 35, 60, 0.08);
  box-shadow: 0 34px 80px rgba(16, 35, 60, 0.16);
}

.login-hero,
.login-panel {
  padding: 2.25rem;
}

.login-hero {
  position: relative;
  background: var(--sa-login-hero-bg);
  color: var(--sa-login-hero-text);
}

.login-hero::after {
  content: '';
  position: absolute;
  inset: auto 2rem 2rem auto;
  width: 10rem;
  height: 10rem;
  border-radius: var(--sa-login-ornament-radius);
  border: 1px solid rgba(255, 245, 227, 0.14);
  transform: rotate(var(--sa-login-ornament-rotation));
}

.login-kicker {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sa-login-kicker);
}

.login-title {
  margin-top: 1rem;
  font-size: clamp(2.3rem, 3vw, 3.5rem);
  line-height: 1.02;
}

.login-copy {
  margin-top: 1rem;
  max-width: 28rem;
  color: var(--sa-login-copy);
  font-size: 1rem;
}

.login-feature-list {
  margin-top: 2rem;
  display: grid;
  gap: 0.85rem;
}

.login-feature {
  display: flex;
  gap: 0.8rem;
  align-items: start;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: var(--sa-login-feature-bg);
  border: 1px solid var(--sa-login-feature-border);
}

.login-feature i {
  color: var(--sa-login-feature-icon);
}

.login-panel {
  display: flex;
  align-items: center;
  background: var(--sa-login-panel-bg);
}

.login-card {
  width: 100%;
  padding: 1rem 0.2rem;
}

.login-card h4 {
  margin-bottom: 0.55rem;
  font-size: 2rem;
}

.login-card p {
  color: var(--sa-ink-muted);
}

.login-card .btn {
  margin-top: 0.4rem;
}

.status-paid,
.status-partial,
.status-unpaid {
  font-weight: 700;
}

.status-paid { color: var(--sa-success); }
.status-partial { color: var(--sa-warning); }
.status-unpaid { color: var(--sa-danger); }

.badge {
  border-radius: 999px;
  padding: 0.45rem 0.7rem;
  background: var(--sa-badge-bg);
  color: var(--sa-badge-text);
  border: 1px solid rgba(16, 35, 60, 0.08);
}

.status-paid,
.status-partial,
.status-unpaid {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
}

.status-paid {
  background: var(--sa-status-success-bg);
}

.status-partial {
  background: var(--sa-status-warning-bg);
}

.status-unpaid {
  background: var(--sa-status-danger-bg);
}

.modal-header,
.modal-footer {
  border-color: var(--sa-line);
  padding: 1.1rem 1.3rem;
}

.modal-body {
  padding: 1.35rem;
}

.modal-dialog {
  margin: 1.4rem auto;
}

.modal-section-title {
  margin: 0 0 1rem;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sa-primary);
  font-weight: 800;
}

.modal-body .row + .modal-section-title {
  margin-top: 1.6rem !important;
}

.modal-body .row.g-2 {
  row-gap: 0.9rem !important;
}

.empty-state-soft {
  padding: 1.4rem;
  text-align: center;
  color: var(--sa-ink-muted);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  border: 1px dashed rgba(16, 35, 60, 0.14);
}

.app-empty-state,
.app-loading-state {
  padding: 1.6rem;
  text-align: center;
  color: var(--sa-ink-muted);
}

.app-empty-state-icon {
  display: block;
  margin-bottom: 0.65rem;
  font-size: 3rem;
  color: var(--sa-primary);
  opacity: 0.7;
}

.app-loading-state .spinner-border {
  width: 2.4rem;
  height: 2.4rem;
}

.data-scroll-shell {
  max-height: 300px;
  overflow-y: auto;
}

.portal-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.portal-calendar-head {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sa-ink-muted);
}

.portal-calendar-day {
  display: grid;
  place-items: center;
  min-height: 2rem;
  padding: 0.3rem;
  border-radius: 10px;
  font-size: 0.82rem;
  color: var(--sa-ink);
  background: var(--sa-calendar-neutral-bg);
}

.portal-calendar-day.is-present {
  background: var(--sa-status-success-bg);
  color: var(--sa-success);
}

.portal-calendar-day.is-absent {
  background: var(--sa-status-danger-bg);
  color: var(--sa-danger);
}

.portal-calendar-day.is-late {
  background: var(--sa-status-warning-bg);
  color: var(--sa-warning);
}

.attendance-report-table {
  font-size: 0.75rem;
}

.attendance-report-table .report-sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--sa-surface-strong);
  white-space: nowrap;
}

.attendance-mark.is-present {
  color: var(--sa-success);
}

.attendance-mark.is-late {
  color: var(--sa-warning);
}

.attendance-mark.is-absent {
  color: var(--sa-danger);
}

.theme-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.theme-card {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid rgba(16, 35, 60, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  text-align: left;
  transition: transform var(--sa-transition), box-shadow var(--sa-transition), border-color var(--sa-transition);
}

.theme-card:hover,
.theme-card.active {
  transform: translateY(-2px);
  box-shadow: var(--sa-shadow-md);
  border-color: rgba(31, 95, 99, 0.24);
}

.theme-card-swatch {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 0.5rem;
  height: 84px;
}

.theme-card-swatch span {
  display: block;
  border-radius: 14px;
}

.theme-sandstone-ledger span:nth-child(1) { background: #10233c; }
.theme-sandstone-ledger span:nth-child(2) { background: #1f5f63; }
.theme-sandstone-ledger span:nth-child(3) { background: #efe7da; }

.theme-midnight-academy span:nth-child(1) { background: #0e1628; }
.theme-midnight-academy span:nth-child(2) { background: #6da4ff; }
.theme-midnight-academy span:nth-child(3) { background: #1f2c48; }

.theme-emerald-court span:nth-child(1) { background: #18322c; }
.theme-emerald-court span:nth-child(2) { background: #2c6c58; }
.theme-emerald-court span:nth-child(3) { background: #eef2e8; }

.theme-rose-studio span:nth-child(1) { background: #4a2f3e; }
.theme-rose-studio span:nth-child(2) { background: #b45872; }
.theme-rose-studio span:nth-child(3) { background: #f8eef0; }

.theme-card-body {
  text-align: left;
}

.theme-card-body strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--sa-font-display);
  font-size: 1.2rem;
}

.theme-card-body p {
  margin: 0;
  color: var(--sa-ink-muted);
  line-height: 1.55;
}

@keyframes pageRise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media print {
  #sidebar,
  .topbar,
  .action-row,
  .btn {
    display: none !important;
  }

  #content {
    padding: 0;
  }
}

@media (max-width: 1200px) {
  .summary-grid > * {
    grid-column: span 6;
  }

  .dashboard-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .login-layout {
    grid-template-columns: 1fr;
  }

  .topbar {
    top: 0.5rem;
  }

  .dashboard-panel-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  #sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    transform: translateX(calc(-1 * var(--sa-sidebar-width) - 1rem));
  }

  #sidebar.show {
    transform: translateX(0);
  }

  #content-wrapper {
    padding: 0.75rem;
  }

  .topbar,
  .page-header {
    padding: 1rem;
    border-radius: 20px;
  }

  .topbar,
  .topbar-actions,
  .page-header,
  .page-header-actions,
  .page-actions,
  .list-meta {
    flex-direction: column;
    align-items: stretch;
  }

  .surface-card,
  .toolbar-card,
  .filter-card {
    padding: 1rem;
  }

  .topbar-search {
    min-width: 100%;
    margin-right: 0 !important;
  }

  .summary-grid > * {
    grid-column: span 12;
  }

  .table-mobile-cards thead {
    display: none;
  }

  .table-mobile-cards tbody tr {
    display: block;
    margin-bottom: 0.9rem;
    border: 1px solid rgba(16, 35, 60, 0.08);
    border-radius: 1rem;
    padding: 0.65rem;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 6px 14px rgba(16, 35, 60, 0.05);
  }

  .table-mobile-cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.55rem 0.5rem;
    border: none;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .table-mobile-cards tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    margin-right: 0.8rem;
    color: var(--sa-ink-muted);
    text-align: left;
    flex: 0 0 42%;
  }

  .modal-dialog {
    margin: 0.8rem;
  }

  .modal-body,
  .modal-header,
  .modal-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}