:root {
  --color-error: #ba1a1a;
  --color-secondary-container: #62fae3;
  --color-on-surface: #0b1c30;
  --color-inverse-surface: #213145;
  --color-on-background: #0b1c30;
  --color-on-primary-fixed-variant: #2d476f;
  --color-surface: #f8f9ff;
  --color-surface-container-highest: #d3e4fe;
  --color-on-secondary: #ffffff;
  --color-background: #f8f9ff;
  --color-surface-tint: #455f88;
  --color-on-tertiary-fixed-variant: #005049;
  --color-on-secondary-container: #007165;
  --color-on-secondary-fixed-variant: #005047;
  --color-tertiary-fixed-dim: #6bd8cb;
  --color-on-error-container: #93000a;
  --color-secondary-fixed-dim: #3cddc7;
  --color-tertiary-fixed: #89f5e7;
  --color-surface-container: #e5eeff;
  --color-outline-variant: #c4c6cf;
  --color-on-primary: #ffffff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-dim: #cbdbf5;
  --color-error-container: #ffdad6;
  --color-on-secondary-fixed: #00201c;
  --color-on-tertiary-fixed: #00201d;
  --color-secondary: #006b5f;
  --color-surface-bright: #f8f9ff;
  --color-on-error: #ffffff;
  --color-surface-container-high: #dce9ff;
  --color-primary-fixed-dim: #adc7f7;
  --color-inverse-primary: #adc7f7;
  --color-on-tertiary-container: #3cafa2;
  --color-on-primary-fixed: #001b3c;
  --color-on-surface-variant: #43474e;
  --color-surface-container-low: #eff4ff;
  --color-primary-fixed: #d6e3ff;
  --color-primary: #002045;
  --color-tertiary-container: #003d37;
  --color-inverse-on-surface: #eaf1ff;
  --color-primary-container: #1a365d;
  --color-surface-variant: #d3e4fe;
  --color-on-tertiary: #ffffff;
  --color-outline: #74777f;
  --color-on-primary-container: #86a0cd;
  --color-secondary-fixed: #62fae3;
  --color-tertiary: #002522;
}

.dark {
  color-scheme: dark;
  --color-error: #ffb4ab;
  --color-secondary-container: #005047;
  --color-on-surface: #f0f3fa;
  --color-inverse-surface: #f0f3fa;
  --color-on-background: #f0f3fa;
  --color-on-primary-fixed-variant: #adc7f7;
  --color-surface: #0b0e14;
  --color-surface-container-highest: #283146;
  --color-on-secondary: #003730;
  --color-background: #0b0e14;
  --color-surface-tint: #adc7f7;
  --color-on-tertiary-fixed-variant: #005049;
  --color-on-secondary-container: #62fae3;
  --color-on-secondary-fixed-variant: #005047;
  --color-tertiary-fixed-dim: #6bd8cb;
  --color-on-error-container: #ffdad6;
  --color-secondary-fixed-dim: #3cddc7;
  --color-tertiary-fixed: #89f5e7;
  --color-surface-container: #161c28;
  --color-outline-variant: #c4c6cf;
  --color-on-primary: #002045;
  --color-surface-container-lowest: #070a0f;
  --color-surface-dim: #0b0e14;
  --color-error-container: #93000a;
  --color-on-secondary-fixed: #00201c;
  --color-on-tertiary-fixed: #00201d;
  --color-secondary: #62fae3;
  --color-surface-bright: #1f242e;
  --color-on-error: #690005;
  --color-surface-container-high: #1e2535;
  --color-primary-fixed-dim: #adc7f7;
  --color-inverse-primary: #005faf;
  --color-on-tertiary-container: #3cafa2;
  --color-on-primary-fixed: #001b3c;
  --color-on-surface-variant: #c4c6cf;
  --color-surface-container-low: #10141d;
  --color-primary-fixed: #d6e3ff;
  --color-primary: #0b1c30;
  --color-tertiary-container: #003d37;
  --color-inverse-on-surface: #0b0e14;
  --color-primary-container: #1a365d;
  --color-surface-variant: #1a365d;
  --color-on-tertiary: #ffffff;
  --color-outline: #8e9199;
  --color-on-primary-container: #d6e3ff;
  --color-secondary-fixed: #62fae3;
  --color-tertiary: #002522;
}

/* Ensure WebKit/Blink calendar picker icons remain bright in dark mode */
.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

/* Hide scrollbar while keeping touch scroll active */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Mobile Touch Scroll Smoothing */
.touch-scroll {
  -webkit-overflow-scrolling: touch;
}

/* Safe area bottom padding for iPhone notch / home indicator */
.pb-safe {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* Prevent select box text from overlapping with default browser arrow */
select {
  padding-right: 2.5rem !important;
}

/* Custom scrollbars for a premium feel */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant, #c4c6cf);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-outline, #74777f);
}

/* ===== MODULE SPLIT BADGE ===== */
.module-badge {
    display: inline-flex;
    align-items: stretch;
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid var(--color-outline-variant);
    font-size: 0.8rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.dark .module-badge {
    border-color: var(--color-primary-container);
}
.module-badge-num {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.75rem;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.dark .module-badge-num {
    background: var(--color-primary-fixed-dim);
    color: var(--color-on-primary-fixed);
}
.module-badge-sep {
    display: flex;
    align-items: center;
    padding: 0 0.2rem;
    background: var(--color-outline-variant);
    color: var(--color-on-surface-variant);
    font-size: 0.7rem;
    opacity: 0.5;
}
.dark .module-badge-sep {
    background: var(--color-primary-container);
}
.module-badge-title {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.875rem;
    background: var(--color-surface-container);
    color: var(--color-on-surface-variant);
    font-weight: 500;
}
.dark .module-badge-title {
    background: var(--color-surface-container-high);
    color: var(--color-on-surface-variant);
}