/* ==========================================================================
   STYLESHEET INDEX
   1) Icon Font Loading / Optimization (merged from icon-fonts.css)
   2) Core App Styles
   3) Print Preview / Report Styles (merged from print-styles.css)
   ========================================================================== */

/* ==========================================================================
   1) ICON FONT LOADING / OPTIMIZATION
   ========================================================================== */

/* Font display strategy: Show fallback immediately, swap when ready */
@supports (font-display: swap) {
    /* Font Awesome declarations */
    @font-face {
        font-family: "Font Awesome 6 Free";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-regular-400.woff2") format("woff2");
    }

    @font-face {
        font-family: "Font Awesome 6 Free";
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2") format("woff2");
    }

    @font-face {
        font-family: "Font Awesome 6 Brands";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2") format("woff2");
    }

    @font-face {
        font-family: "bootstrap-icons";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.woff2") format("woff2");
    }
}

/* Fallback for browsers without @supports */
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-regular-400.woff2") format("woff2"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-regular-400.woff") format("woff");
}

@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 700;
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2") format("woff2"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff") format("woff");
}

@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2") format("woff2"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff") format("woff");
}

@font-face {
    font-family: "bootstrap-icons";
    font-style: normal;
    font-weight: 400;
    src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.woff2") format("woff2"),
         url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.woff") format("woff");
}

/* Additional icon variants/sizing */
.icon-xs i { font-size: 0.75rem; }
.icon-sm i { font-size: 0.875rem; }
.icon-base i { font-size: 1rem; }
.icon-lg i { font-size: 1.25rem; }
.icon-2x i { font-size: 1.5rem; }
.icon-3x i { font-size: 1.875rem; }
.icon-4x i { font-size: 2.25rem; }

/* ==========================================================================
   2) CORE APP STYLES
   ========================================================================== */

/* Icon Font Rendering Optimization — match Font Awesome 6 solid weight */
.fas::before,
.fa-solid::before {
    font-weight: 900 !important;
}

.fab::before,
.fa-brands::before {
    font-weight: 400 !important;
}

.far::before,
.fa-regular::before {
    font-weight: 400 !important;
}

.fal::before,
.fa-light::before {
    font-weight: 300 !important;
}

.bi {
    display: inline-block;
    vertical-align: -0.125em;
    fill: currentColor;
    width: 1em;
    height: 1em;
    font-size: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "bootstrap-icons" !important;
}

/* Ensure all icon elements render properly */
i[class*="fa"],
i[class*="bi"] {
    -webkit-text-stroke: 0.3px transparent;
    text-rendering: optimizeLegibility;
    font-style: normal;
}

:root {
    --primary-color: #006400;
    --primary-dark: #004d00;
    --primary-light: #228B22;
    --primary-50: #f0f9f0;
    --primary-100: #e0f2e0;
    --secondary-color: #FFD700;
    --accent-color: #228B22;
    --secondary-light: #ffe34d;
    --success-color: #10b981;
    --success-dark: #059669;
    --success-light: #d1fae5;
    --success-lighter: #dcfce7;
    --success-lightest: #bbf7d0;
    --danger-color: #ef4444;
    --danger-dark: #dc2626;
    --danger-light: #fee2e2;
    --danger-lighter: #fecaca;
    --danger-darktext: #991b1b;
    --warning-color: #f97316;
    --warning-dark: #f59e0b;
    --warning-light: #fef3c7;
    --warning-lighter: #fde68a;
    --warning-darktext: #92400e;
    --info-color: #2563eb;
    --info-dark: #1d4ed8;
    --info-light: #dbeafe;
    --info-lighter: #bfdbfe;
    --info-darktext: #1e40af;
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #eeeeee;
    --gray-300: #e0e0e0;
    --gray-400: #bdbdbd;
    --gray-500: #9e9e9e;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;
    --dark-900: #1a1a1a;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.18);
    --shadow-2xl: 0 20px 32px rgba(0, 0, 0, 0.2);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 3rem;
    --z-sidebar: 999;
    --z-navbar: 1000;
    --z-modal: 1001;
    --z-dropdown: 950;
    --transition-fast: 0.15s ease-out;
    --transition-base: 0.3s ease-out;
    --transition-slow: 0.5s ease-out;
    --glass-bg: rgba(255, 255, 255, 0.25);
    --glass-bg-dark: rgba(0, 0, 0, 0.25);
    --glass-backdrop-blur: blur(10px);
    --glass-backdrop-blur-sm: blur(5px);
    --glass-backdrop-blur-lg: blur(15px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.18);
    --glass-border-dark: 1px solid rgba(0, 0, 0, 0.18);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    --glass-shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.3);
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 70px;
    --sidebar-width-mobile: 60px;
    --container-max-width: 1400px;
    --breakpoint-md: 768px;
    --breakpoint-sm: 480px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background-color: var(--gray-50);
    color: var(--gray-800);
    line-height: var(--line-height-normal);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-weight: var(--font-weight-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

body.with-sidebar {
    display: flex;
    flex-direction: row;
}

/* Prevent horizontal scroll due to fixed sidebar + content padding */
html, body {
    overflow-x: hidden;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.main-content-wrapper {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

/* Layout robustness: allow flex children to shrink and prevent content clipping
   - min-width: 0 prevents flex items from overflowing their container on some browsers
   - add padding so card shadows and rounded corners are not visually clipped
*/
.main-content-wrapper,
main,
.container {
    min-width: 0;
    box-sizing: border-box;
}

.main-content-wrapper {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
}

main .container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 2rem auto;
    padding: 0 2rem;
    box-sizing: border-box;
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ensure container does not exceed viewport when sidebar is present */
@media (min-width: 1200px) {
    .main-content-wrapper main .container {
        max-width: calc(var(--container-max-width) - var(--sidebar-width));
    }
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: var(--line-height-tight);
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.3px;
}

h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-lg);
}

h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-lg);
}

h3 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
}

h4 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
}

h5 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
}

h6 {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all var(--transition-base);
    font-weight: var(--font-weight-medium);
    position: relative;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

a:not(.btn):not(.nav-link):not(.sidebar-menu-link) {
    border-bottom: 1px solid transparent;
}

a:not(.btn):not(.nav-link):not(.sidebar-menu-link):hover {
    border-bottom-color: var(--primary-color);
}

a:active {
    opacity: 0.8;
}

p {
    margin: 0;
    color: var(--gray-700);
    line-height: var(--line-height-normal);
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 768px) {
    .main-content-wrapper {
        margin-left: var(--sidebar-width-collapsed);
    }

    .container {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .main-content-wrapper {
        margin-left: var(--sidebar-width-mobile);
    }

    body {
        font-size: 0.9rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.1rem;
    }
}


.glass {
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: var(--glass-backdrop-blur);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  transition: all var(--transition-base);
}

.glass-dark {
  background: var(--glass-bg-dark);
  border: var(--glass-border-dark);
  backdrop-filter: var(--glass-backdrop-blur);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow-dark);
  transition: all var(--transition-base);
}

.glass-blur-sm {
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: var(--glass-backdrop-blur-sm);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
}

.glass-blur-lg {
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: var(--glass-backdrop-blur-lg);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
}

.glass-rounded-sm {
  border-radius: var(--radius-md);
}

.glass-rounded-md {
  border-radius: var(--radius-xl);
}

.glass-rounded-lg {
  border-radius: var(--radius-2xl);
}

.glass-rounded-full {
  border-radius: var(--radius-full);
}

.glass-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
}

.glass-md {
  padding: var(--spacing-sm) var(--spacing-md);
}

.glass-lg {
  padding: var(--spacing-md) var(--spacing-lg);
}

.glass-xl {
  padding: var(--spacing-lg) var(--spacing-xl);
}

.glass-elevation-light {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.glass-elevation-medium {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.glass-elevation-strong {
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
}

.glass-elevation-intense {
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.2);
}

.glass-card {
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: var(--glass-backdrop-blur);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-lg);
  box-shadow: var(--glass-shadow);
}

.glass-card-dark {
  background: var(--glass-bg-dark);
  border: var(--glass-border-dark);
  backdrop-filter: var(--glass-backdrop-blur);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-lg);
  box-shadow: var(--glass-shadow-dark);
}

/* Glass Modal/Dialog */
.glass-modal {
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: var(--glass-backdrop-blur-lg);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-xl);
}

.glass-dropdown {
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: var(--glass-backdrop-blur);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  min-width: 160px;
}

.glass-navbar {
  background: rgba(255, 255, 255, 0.15);
  border-bottom: var(--glass-border);
  backdrop-filter: var(--glass-backdrop-blur-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.glass-sidebar {
  background: rgba(255, 255, 255, 0.1);
  border-right: var(--glass-border);
  backdrop-filter: var(--glass-backdrop-blur);
}

.glass-btn {
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: var(--glass-backdrop-blur-sm);
  border-radius: var(--radius-lg);
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base);
}

.glass-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.glass-btn:active {
  transform: scale(0.98);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.glass-input {
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: var(--glass-backdrop-blur-sm);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  transition: all 0.3s ease;
}

.glass-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.glass-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.glass-badge {
  display: inline-block;
  background: var(--glass-bg);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: var(--glass-backdrop-blur-sm);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #333;
}

.glass:hover {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.glass:focus-within {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5),
              0 8px 32px rgba(0, 0, 0, 0.15);
}

.glass-dark:hover {
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.glass-dark:focus-within {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3),
              0 8px 32px rgba(0, 0, 0, 0.3);
}

@keyframes glass-fade-in {
  from {
    opacity: 0;
    backdrop-filter: var(--glass-backdrop-blur-sm);
    -webkit-backdrop-filter: var(--glass-backdrop-blur-sm);
  }
  to {
    opacity: 1;
    backdrop-filter: var(--glass-backdrop-blur);
    -webkit-backdrop-filter: var(--glass-backdrop-blur);
  }
}

@keyframes glass-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.glass-animate-fade {
  animation: glass-fade-in 0.4s ease-out;
}

.glass-animate-slide {
  animation: glass-slide-up 0.4s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .glass,
  .glass-dark,
  .glass-btn,
  .glass-input {
    transition: background-color 0.01ms, border-color 0.01ms;
  }

  .glass-animate-fade,
  .glass-animate-slide {
    animation: none;
  }
}

@media (prefers-contrast: more) {
  .glass {
    border-width: 2px;
  }

  .glass-btn:hover {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: rgba(255, 255, 255, 0.4);
    --glass-bg-dark: rgba(0, 0, 0, 0.4);
    --glass-backdrop-blur: blur(15px);
  }
}

@media (max-width: 768px) {
  .glass-md {
    padding: 12px 16px;
  }

  .glass-lg {
    padding: 16px 24px;
  }

  .glass-card {
    padding: 16px;
    border-radius: 12px;
  }

  .glass-modal {
    padding: 20px;
    border-radius: 16px;
  }
}


.navbar {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 0;
    box-shadow: var(--shadow-md);
    z-index: var(--z-navbar);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: white;
}

.navbar-brand img {
    height: 2.5rem;
    width: auto;
}

.navbar-brand::before {
    content: '🎓';
    font-size: 1.8rem;
}

.navbar-menu {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.navbar-menu a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    position: relative;
    opacity: 0.9;
}

.navbar-menu a:hover {
    opacity: 1;
}

.navbar-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: rgba(255, 215, 0, 0.8);
    transition: width 0.3s ease;
}

.navbar-menu a:hover::after,
.navbar-menu a.active::after {
    width: 100%;
}

.navbar-user-info {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 2rem;
}

.navbar-user-info span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
}

.navbar-user-info a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
}

.navbar-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .navbar-user-info {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding-top: 1rem;
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .navbar-brand {
        font-size: 1.25rem;
    }

    .navbar-menu {
        gap: 1rem;
    }

    .navbar-user-info {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}


.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 236px;
    height: 100vh;
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    color: white;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: var(--z-sidebar);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 215, 0, 0.1);
}

.sidebar-toggle-btn {
    display: none;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: calc(var(--z-sidebar) + 2);
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 0.5rem;
    background: rgba(13, 13, 13, 0.9);
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sidebar-overlay {
    display: none;
}

.sidebar-header {
    padding: 0.9rem 0.85rem 0.75rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    margin-bottom: 0.55rem;
    flex-shrink: 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-logo span {
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.sidebar-logo:hover {
    color: var(--secondary-color);
    transform: translateX(2px);
}

.sidebar-logo-icon {
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-logo-image {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 215, 0, 0.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.sidebar-menu-item {
    padding: 0.18rem 0.55rem;
}

.sidebar-menu-link {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 0.55rem 0.72rem;
    border-radius: 8px;
    border-left: 3px solid transparent;
    margin: 0.12rem 0.22rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-weight: 500;
    font-size: 0.84rem;
    line-height: 1.25;
    position: relative;
}

.sidebar-menu-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px;
}

.sidebar-menu-link:hover {
    background: rgba(255, 215, 0, 0.12);
    color: white;
    border-left-color: var(--secondary-color);
    padding-left: 1.25rem;
    transform: translateX(2px);
}

.sidebar-menu-link.active {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.08) 100%);
    color: var(--secondary-color);
    border-left-color: var(--secondary-color);
    padding-left: 1.25rem;
    font-weight: 600;
    box-shadow: inset 0 2px 8px rgba(255, 215, 0, 0.1);
}

.sidebar-menu-icon {
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.sidebar-menu-link:hover .sidebar-menu-icon {
    transform: scale(1.1);
}

.sidebar-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
}

.sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.sidebar-menu-link {
    min-height: 34px;
    height: auto;
    width: auto;
}

.sidebar-list-divider {
    margin: 0.75rem 0;
}

.sidebar-logout-link {
    border-left: 3px solid transparent;
    margin: 0;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
}

.sidebar-user:hover {
    opacity: 0.9;
}

.sidebar-user-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--gray-900);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-user:hover .sidebar-user-avatar {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(255, 215, 0, 0.3);
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sidebar-user-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
    letter-spacing: -0.3px;
}

.sidebar-user-role {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: -0.2px;
}

.sidebar-logout-btn {
    width: 100%;
    padding: 0.625rem 1rem;
    margin-top: 1rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%);
    border: 1px solid rgba(255, 215, 0, 0.2);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

@media (max-width: 768px) {
    .main-content-wrapper {
        margin-left: 0 !important;
    }

    .sidebar-toggle-btn {
        display: inline-flex;
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: var(--z-sidebar);
        background: rgba(0, 0, 0, 0.45);
    }

    .sidebar {
        width: min(16rem, 85vw);
        padding-top: 1rem;
        transform: translateX(-110%);
        transition: transform var(--transition-base);
    }

    .sidebar-header {
        padding: 1rem 1rem 0.75rem;
        text-align: left;
    }

    .sidebar-logo {
        flex-direction: row;
        font-size: 0.88rem;
        gap: 0.5rem;
    }

    .sidebar-logo-icon {
        font-size: 1rem;
    }

    .sidebar-logo-image {
        width: 42px;
        height: 42px;
    }

    .sidebar-menu-link {
        padding: 0.55rem 0.82rem;
        justify-content: flex-start;
        font-size: 0.82rem;
    }

    .sidebar-menu-link span {
        display: inline;
    }

    .sidebar-footer {
        padding: 0.75rem;
    }

    .sidebar-user {
        justify-content: flex-start;
    }

    .sidebar-user-info,
    .sidebar-user-avatar {
        display: flex;
    }

    body.sidebar-mobile-open .sidebar {
        transform: translateX(0);
    }

    body.sidebar-mobile-open .sidebar-overlay {
        display: block;
    }
}

@media (max-width: 480px) {
    .main-content-wrapper {
        margin-left: 0 !important;
    }

    .sidebar {
        width: min(15rem, 88vw);
    }

    .sidebar-header {
        padding: 0.75rem;
    }

    .sidebar-menu-item {
        padding: 0.25rem 0.5rem;
    }
}


footer {
    width: 100%;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    background: var(--gray-900);
    color: white;
    margin-top: auto;
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer .container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    flex: none;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.footer-section h6 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.footer-section p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0.5rem 0;
}

.footer-section a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: white;
}

.footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 1.5rem 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--secondary-color);
}

.footer-user-info {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-user-info strong {
    color: var(--secondary-color);
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    footer {
        padding: 1.5rem;
    }

    .footer-content {
        gap: 1.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-links {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    footer {
        padding: 1rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-section p {
        font-size: 0.85rem;
    }

    .footer-bottom {
        font-size: 0.75rem;
    }
}



.alert-wrapper {
    margin-bottom: 1.5rem;
}

.alert {
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    border-left: 4px solid;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: var(--font-size-base);
    animation: slideIn 0.3s ease-out;
    backdrop-filter: blur(4px);
    font-weight: var(--font-weight-medium);
}

.alert::before {
    font-size: 1.25rem;
    flex-shrink: 0;
    line-height: 1;
}

.alert,
.alert-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.06) 100%);
    border-left-color: var(--info-color);
    color: var(--info-color);
    box-shadow: var(--shadow-sm);
}

.alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.06) 100%);
    border-left-color: var(--success-color);
    color: var(--success-dark);
    box-shadow: var(--shadow-sm);
}

.alert-warning {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(245, 158, 11, 0.06) 100%);
    border-left-color: var(--warning-color);
    color: var(--warning-dark);
    box-shadow: var(--shadow-sm);
}

.alert-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.06) 100%);
    border-left-color: var(--danger-color);
    color: var(--danger-dark);
    box-shadow: var(--shadow-sm);
}

.alert-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.06) 100%);
    border-left-color: var(--danger-color);
    color: var(--danger-dark);
    box-shadow: var(--shadow-sm);
}

.alert-modern {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    border-left: 4px solid;
    font-size: 0.95rem;
}

.alert-modern i {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.alert-modern.alert-danger {
    background: linear-gradient(135deg, var(--danger-light) 0%, var(--danger-lighter) 100%);
    border-left-color: var(--danger-color);
    color: var(--danger-darktext);
}

.alert-modern.alert-success {
    background: linear-gradient(135deg, var(--success-lighter) 0%, var(--success-lightest) 100%);
    border-left-color: var(--success-color);
    color: #166534;
}

.alert-modern.alert-warning {
    background: linear-gradient(135deg, var(--warning-light) 0%, var(--warning-lighter) 100%);
    border-left-color: var(--warning-color);
    color: var(--warning-darktext);
}

.alert-modern.alert-info {
    background: linear-gradient(135deg, var(--info-light) 0%, var(--info-lighter) 100%);
    border-left-color: var(--info-color);
    color: var(--info-darktext);
}

.alert-dismissible {
    position: relative;
}

.alert-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 1.25rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    padding: 0;
}

.alert-close:hover {
    opacity: 1;
}

.alert-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.alert-icon {
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1;
    margin-top: 0.125rem;
}

.alert-content {
    flex: 1;
}

@media (max-width: 768px) {
    .alert {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }

    .alert-close {
        position: static;
        margin-left: auto;
        margin-bottom: 0.5rem;
    }
}

.info-box {
    margin-top: 2rem;
    border-left: 4px solid;
    border-radius: var(--radius-lg);
    padding: 1rem;
    font-size: var(--font-size-base);
}

.info-box.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.06) 100%);
    border-left-color: #10b981;
}

.info-box.warning {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(245, 158, 11, 0.06) 100%);
    border-left-color: var(--warning-color);
}

.info-box.danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.06) 100%);
    border-left-color: var(--danger-color);
}

.info-box.info {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(29, 78, 216, 0.06) 100%);
    border-left-color: var(--info-color);
}

.info-box p {
    margin: 0;
    color: var(--gray-700);
    font-weight: var(--font-weight-medium);
}

.verification-summary {
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.08) 0%, rgba(34, 139, 34, 0.06) 100%);
    border: 2px solid var(--primary-color);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    margin-top: 2rem;
    box-shadow: var(--shadow-sm);
}

.verification-summary h3 {
    color: var(--primary-color);
    margin-top: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: 1rem;
}

.verification-summary ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.verification-summary li {
    padding: 0.5rem 0;
    color: var(--gray-700);
    font-weight: var(--font-weight-normal);
}

.verification-summary li:before {
    content: '✓';
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    margin-right: 0.5rem;
}

@media (max-width: 480px) {
    .alert,
    .alert-info,
    .alert-success,
    .alert-warning,
    .alert-error,
    .error-message,
    .success-message,
    .warning-message,
    .info-message {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
        font-size: 0.9rem;
    }

    .alert::before,
    .alert-info::before,
    .alert-success::before,
    .alert-warning::before,
    .alert-error::before,
    .error-message::before,
    .success-message::before,
    .warning-message::before,
    .info-message::before {
        font-size: 1rem;
    }

    .alert-success,
    .alert-warning {
        padding: 12px;
        margin-bottom: 16px;
    }

    .alert-success-message,
    .alert-warning-content {
        font-size: 12px;
    }
}


.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
    letter-spacing: 0.3px;
    white-space: nowrap;
    color: white;
    border: none;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}


.badge-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
}

.badge-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.badge-success {
    background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
    color: white;
}

.badge-success:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.badge-danger {
    background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
    color: white;
}

.badge-danger:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.badge-warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%);
    color: white;
}

.badge-warning:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.badge-info {
    background: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%);
    color: white;
}

.badge-info:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.badge-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%);
    color: #333;
}

.badge-secondary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.badge-light {
    background-color: var(--gray-100);
    color: var(--gray-800);
    box-shadow: var(--shadow-sm);
}

.badge-dark {
    background-color: var(--gray-800);
    color: white;
    box-shadow: var(--shadow-sm);
}

.badge-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.badge-lg {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.badge-outline {
    background-color: transparent;
    border: 1px solid;
    color: var(--gray-800);
}

.badge-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.badge-outline-success {
    border-color: var(--success-color);
    color: var(--success-color);
}

.badge-outline-danger {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.badge-outline-warning {
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.badge-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
}

.badge-dot::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: currentColor;
}

.inline-label {
    display: inline;
    background-color: var(--gray-100);
    color: var(--gray-700);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
}

.inline-badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Light background variations - use for subtle, inline highlighting */
.inline-badge-info {
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--info-color);
}

.inline-badge-success {
    background-color: rgba(0, 100, 0, 0.1);
    color: var(--success-color);
}

.inline-badge-warning {
    background-color: rgba(249, 115, 22, 0.1);
    color: var(--warning-color);
}

.inline-badge-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.inline-badge-secondary {
    background-color: rgba(255, 215, 0, 0.1);
    color: var(--secondary-color);
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 480px) {
    .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.65rem;
    }

    .badge-lg {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .inline-badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

.action-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: white;
}

.action-login {
    background: var(--success-color);
}

.action-create {
    background: var(--info-color);
}

.action-update {
    background: var(--warning-color);
    color: black;
}

.action-delete {
    background: var(--danger-color);
}

.action-logout {
    background: #6c757d;
}

.action-signup {
    background: #17a2b8;
}

.role-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.role-admin {
    background: var(--danger-color);
    color: white;
}

.role-faculty {
    background: var(--info-color);
    color: white;
}

.role-student {
    background: var(--success-color);
    color: white;
}

.operation-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    color: white;
}

.op-insert {
    background: #28a745;
}

.op-update {
    background: #ffc107;
    color: black;
}

.op-delete {
    background: #dc3545;
}


.btn,
button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-base);
    white-space: nowrap;
    font-family: inherit;
    letter-spacing: 0.3px;
}

.btn,
.btn-primary,
input[type="submit"] {
    background-color: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn:hover,
.btn-primary:hover,
input[type="submit"]:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn:active,
.btn-primary:active,
input[type="submit"]:active {
    transform: translateY(0);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #ffed4d 100%);
    color: #333;
    box-shadow: var(--shadow-md);
    font-weight: var(--font-weight-semibold);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #ffed4d 0%, #ffe34d 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: #333;
}

.btn-outline {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: none;
    font-weight: var(--font-weight-semibold);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-danger:hover {
    background-color: var(--danger-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-warning {
    background-color: var(--warning-color);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-warning:hover {
    background-color: #ea580c;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-success {
    background-color: var(--success-color);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-success:hover {
    background-color: #16a34a;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-info {
    background-color: var(--info-color);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-info:hover {
    background-color: var(--info-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-auth {
    width: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 100, 0, 0.2);
}

.btn-auth:hover {
    box-shadow: 0 8px 25px rgba(0, 100, 0, 0.3);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.85rem;
}

.btn-lg {
    padding: 0.85rem 2rem;
    font-size: 1rem;
}

.button-group {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.button-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.button-group-lg .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.button-group-sm .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.85rem;
}

.btn-link {
    background: none;
    color: var(--primary-color);
    text-decoration: underline;
    padding: 0;
    box-shadow: none;
    border: none;
}

.btn-link:hover {
    color: var(--primary-dark);
    transform: none;
    box-shadow: none;
}

.btn:disabled,
button:disabled,
input[type="submit"]:disabled {
    background-color: var(--gray-300);
    color: var(--gray-600);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none !important;
    box-shadow: none !important;
}

.settings-tab-btn {
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    color: #666;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-family: inherit;
}

.settings-tab-btn:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.settings-tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.button-group-right {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin: 0;
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    .button-group {
        flex-direction: column;
    }

    .button-group .btn {
        width: 100%;
    }

    .btn-lg {
        padding: 0.625rem 1rem;
        font-size: 0.9rem;
    }
}


.card,
.card-wrapper {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    border-left: 4px solid var(--primary-color);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-light) 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.card:hover,
.card-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--primary-dark);
}

.card:hover::before {
    opacity: 1;
}

.card.card-secondary,
.card-wrapper.card-secondary {
    border-left-color: var(--secondary-color);
}

.card.card-secondary:hover::before {
    background: linear-gradient(90deg, var(--secondary-color) 0%, #ffed4d 100%);
}

.card.card-accent,
.card-wrapper.card-accent,
.card.card-info,
.card-wrapper.card-info {
    border-left-color: var(--info-color);
}

.card.card-info:hover::before {
    background: linear-gradient(90deg, var(--info-color) 0%, #3b82f6 100%);
}

.card.card-danger,
.card-wrapper.card-danger {
    border-left-color: var(--danger-color);
}

.card.card-danger:hover::before {
    background: linear-gradient(90deg, var(--danger-color) 0%, #f87171 100%);
}

.card.card-warning,
.card-wrapper.card-warning {
    border-left-color: var(--warning-color);
}

.card.card-warning:hover::before {
    background: linear-gradient(90deg, var(--warning-color) 0%, #fb923c 100%);
}

.card.card-success,
.card-wrapper.card-success {
    border-left-color: var(--success-color);
}

.card.card-success:hover::before {
    background: linear-gradient(90deg, var(--success-color) 0%, #22c55e 100%);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.card-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.08) 0%, rgba(34, 139, 34, 0.06) 100%);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.card-title,
.card h3 {
    font-size: var(--font-size-lg);
    color: var(--gray-800);
    margin-bottom: 0.75rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.2px;
}

.card-text {
    color: var(--gray-600);
    font-size: 0.95rem;
    line-height: 1.5;
}

.big-number,
.card-value {
    font-size: 2.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin: 1.25rem 0;
    line-height: 1;
    letter-spacing: -0.5px;
}

.stat--card,
.stat-card {
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--primary-color);
    background: white;
    transition: all var(--transition-base);
}

.stat--card:hover,
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stat-card-value {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    line-height: 1;
}

.stat-card-label {
    font-size: var(--font-size-sm);
    margin-top: 0.5rem;
    opacity: 0.8;
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
}

.feature-card {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: all var(--transition-base);
    border: 1px solid var(--gray-100);
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.feature-card h3 {
    color: var(--primary-color);
    margin-top: 1rem;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.feature-card p {
    color: var(--gray-600);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    margin-top: 0.5rem;
}

.stat-item {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    border: 1px solid var(--gray-100);
}

.stat-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stat-number {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    line-height: 1;
}

.stat-name {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    margin-top: 0.5rem;
    font-weight: var(--font-weight-medium);
}

.card-description {
    color: var(--gray-500);
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

/* ==================
   DASHBOARD CARDS
   ================== */

/* ==================
   PROFILE CARDS
   ================== */

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    .dashboard-cards {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .card,
    .card-wrapper {
        padding: 1.25rem;
        margin-bottom: 1rem;
    }

    .card-icon {
        font-size: 2rem;
    }

    .big-number,
    .card-value {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .dashboard-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .card,
    .card-wrapper {
        padding: 1rem;
    }

    .card-icon {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }

    .card-title,
    .card h3 {
        font-size: 0.9rem;
    }

    .big-number,
    .card-value {
        font-size: 1.5rem;
    }
}

.backup-section {
    background: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid var(--gray-300);
}

.program-details {
    background-color: var(--gray-50);
    border-left: 4px solid var(--primary-color);
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 4px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.stat-box {
    background: var(--gray-50);
    padding: 15px;
    border-radius: 4px;
    border: 1px solid var(--gray-300);
    text-align: center;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #007bff;
}

.stat-label {
    color: #666;
    font-size: 12px;
    margin-top: 5px;
}


.box-info-light {
    background-color: rgba(34, 197, 94, 0.1);
    border-left: 4px solid var(--success-color);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

.box-info-light p {
    font-size: var(--font-size-sm);
    color: var(--gray-900);
}

/* Gray info box */
.box-gray-light {
    background-color: var(--gray-100);
    border-left: 4px solid var(--gray-300);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    text-align: center;
}

.box-gray-light p {
    color: var(--gray-700);
}

/* Light background box */
.box-light-bg {
    background-color: var(--gray-100);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.box-light-bg h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

/* Scrollable containers */
.scrollable-container {
    display: grid;
    gap: var(--spacing-sm);
    max-height: 10rem;
    overflow-y: auto;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    background-color: var(--gray-50);
}

.checkbox-label {
    display: flex;
    align-items: center;
}

.checkbox-label input {
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-300);
}

.checkbox-label span {
    margin-left: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--gray-900);
}

.assigned-room-item {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--gray-300);
}


.filter-section {
    background-color: var(--gray-50);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}

.filter-section h4 {
    margin: 0 0 1rem 0;
    font-size: var(--font-size-base);
    color: var(--gray-800);
    font-weight: var(--font-weight-semibold);
}

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

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    font-weight: var(--font-weight-semibold);
    font-size: 0.9rem;
    color: var(--gray-700);
    margin: 0;
}

.filter-group select,
.filter-group input {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    background-color: white;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: inherit;
}

.filter-group select:hover,
.filter-group input:hover {
    border-color: var(--gray-400);
    background-color: var(--gray-50);
    box-shadow: var(--shadow-sm);
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 100, 0, 0.1);
    background-color: white;
}

.filter-group select:disabled,
.filter-group input:disabled {
    background-color: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
    border-color: var(--gray-200);
}

.filter-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
}

.filter-buttons .btn {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .filter-controls {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .filter-buttons {
        flex-wrap: wrap;
        width: 100%;
    }

    .filter-buttons .btn {
        flex: 1;
        min-width: 100px;
    }

    .active-filters {
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .filter-section {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .filter-section h4 {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    .filter-controls {
        gap: 0.75rem;
    }

    .filter-group select,
    .filter-group input {
        padding: 0.5rem 0.625rem;
        font-size: 0.85rem;
    }

    .filter-buttons {
        gap: 0.5rem;
    }

    .filter-buttons .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .active-filters {
        gap: 0.5rem;
    }

    .filter-tag {
        padding: 0.25rem 0.625rem;
        font-size: 0.75rem;
    }
}


.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.95rem;
}

label.required::after {
    content: ' *';
    color: var(--danger-color);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    font-size: var(--font-size-base);
}

.form-label-sm {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

.form-helper-text {
    display: block;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

.form-helper-text-sm {
    display: block;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--gray-600);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-family: inherit;
    background-color: white;
    transition: all var(--transition-base);
    font-weight: var(--font-weight-normal);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="time"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
select:hover,
textarea:hover {
    border-color: var(--gray-400);
    background-color: var(--gray-50);
    box-shadow: var(--shadow-sm);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    background-color: white;
    transition: border-color var(--transition-base);
}

/* Focus states defined in utilities/focus.css */

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="date"]:disabled,
input[type="number"]:disabled,
textarea:disabled,
select:disabled {
    background-color: var(--gray-50);
    color: var(--gray-600);
    cursor: not-allowed;
    border-color: var(--gray-200);
}

/* Small input variants */
.input-sm {
    padding: var(--spacing-xs);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
}

/* Focus state defined in utilities/focus.css */

/* Select dropdown styling */
.select-sm {
    padding: var(--spacing-xs);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
}

/* Time inputs */
.time-input {
    padding: var(--spacing-xs);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
}

/* Disabled input styling */
.input-disabled {
    background-color: var(--gray-100);
    cursor: not-allowed;
}

textarea {
    resize: vertical;
    min-height: 120px;
}

.form-help-text {
    display: block;
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-top: 0.375rem;
    font-style: italic;
}

.form-container {
    background: white;
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    max-width: 700px;
    margin: 0 auto;
}

.form-wrapper {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    margin-bottom: 2rem;
}

.form-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.form-grid-row {
    display: grid;
    gap: var(--spacing-lg) var(--spacing-xl);
}

.form-input-container {
    display: grid;
    gap: var(--spacing-lg);
}

.form-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--gray-100);
}

.form-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-800);
    margin-bottom: 1.5rem;
    letter-spacing: 0.3px;
}

.form-section-title i {
    color: var(--primary-color);
    font-size: 1.4rem;
}

.form-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-family: inherit;
    background-color: white;
    transition: all var(--transition-base);
}

.form-hint {
    color: var(--gray-500);
    margin-top: 0.25rem;
    display: block;
    font-size: var(--font-size-sm);
    font-style: normal;
}

.required-star {
    color: var(--danger-color);
    font-weight: var(--font-weight-bold);
}

.form-max-width {
    max-width: 500px;
    margin: 0 auto;
}

.form-row,
.form-group-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.form-row .form-group,
.form-group-row .form-group {
    margin-bottom: 0;
}

.form-row-full,
.form-row-full .form-group {
    grid-column: 1 / -1;
}

.form-checkbox-group,
.form-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-checkbox,
.form-radio {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-checkbox input[type="checkbox"],
.form-radio input[type="radio"] {
    width: auto;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.form-checkbox label,
.form-radio label {
    margin: 0;
    cursor: pointer;
    font-weight: 500;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--primary-color);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:hover {
    border-color: var(--primary-color);
}

/* Form Status */
.form-error {
    border-color: var(--danger-color) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.form-success {
    border-color: var(--success-color) !important;
    box-shadow: 0 0 0 3px rgba(0, 100, 0, 0.1) !important;
}

.form-actions,
.form-actions-modern {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-200);
    justify-content: flex-start;
}

.form-actions .btn,
.form-actions-modern .btn {
    flex: 0 1 auto;
    min-width: 120px;
}

.btn-group {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    justify-content: flex-start;
}

.profile-card {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    border-left: 4px solid var(--primary-color);
}

.profile-card h3 {
    font-size: 1.1rem;
    color: var(--gray-800);
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-transform: capitalize;
}

.profile-form {
    width: 100%;
}

.profile-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

.profile-form .form-row .form-group {
    margin-bottom: 0;
    width: 100%;
}

.form-inline {
    display: inline;
}

.form-inline input:not([type="hidden"]),
.form-inline select,
.form-inline button {
    margin-right: 0.5rem;
}

.inline-form {
    display: inline;
}

.inline-action {
    display: inline;
    margin-right: 0.5rem;
}

.form-group-hidden {
    display: none;
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    .form-container {
        padding: 1.5rem;
    }

    .form-row,
    .form-group-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .form-actions,
    .form-actions-modern {
        flex-direction: column-reverse;
    }

    .form-actions .btn,
    .form-actions-modern .btn {
        width: 100%;
        justify-content: center;
    }

    .profile-form .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .form-container {
        padding: 1rem;
    }

    label {
        font-size: 0.9rem;
    }

    input,
    select,
    textarea {
        font-size: 0.9rem;
    }
}

/* ==================
   ENHANCED AUTH FORMS
   ================== */

/* All button styles consolidated in BUTTON STYLES section above
   These were duplicate definitions - use standard button classes */


.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 100%);
    backdrop-filter: blur(8px);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeInOverlay 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: auto;
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    animation: slideInModal 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

@keyframes slideInModal {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    padding: 2.5rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    letter-spacing: -0.5px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.75rem;
    cursor: pointer;
    color: var(--gray-500);
    transition: all 0.2s ease;
    padding: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10;
}

.modal-close:hover {
    color: var(--gray-900);
    background-color: #f0f0f0;
    transform: rotate(90deg);
}

.modal-body {
    padding: 2.5rem;
}

.modal-footer {
    padding: 2rem 2.5rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    background-color: #f9f9f9;
}

.modal-sm {
    max-width: 400px;
}

.modal-lg {
    max-width: 600px;
}

.modal-full {
    max-width: 90%;
    width: 90%;
}

.modal-confirm {
    max-width: 400px;
}

.modal-confirm .modal-body {
    text-align: center;
    padding: 2rem 1.5rem;
}

.modal-confirm-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.modal-confirm-message {
    margin-bottom: 1.5rem;
    color: var(--gray-700);
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .modal-content {
        max-width: 100%;
        max-height: 95vh;
    }

    .modal-header {
        padding: 1rem;
    }

    .modal-title {
        font-size: 1.1rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-footer {
        padding: 1rem;
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

    .modal-footer .btn {
        width: 100%;
        display: block;
        text-align: center;
    }

    .modal-lg {
        max-width: 100%;
    }

    .modal-full {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .modal-overlay {
        padding: 0.5rem;
    }

    .modal-content {
        border-radius: var(--radius-lg);
        max-height: 95vh;
    }

    .modal-header {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .modal-title {
        font-size: 1rem;
    }

    .modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
    }

    .modal-body {
        padding: 0.75rem;
    }

    .modal-footer {
        padding: 0.75rem;
        flex-direction: column;
        justify-content: stretch;
    }

    .modal-footer .btn {
        width: 100%;
    }
}


/* ================================
   TABLE STYLES
   Data Tables & Grid Components
   ================================ */

.table-container,
.table-wrapper {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
    border: 1px solid #f0f0f0;
    overflow: visible;
}

.table-container table,
.table-wrapper table {
    width: 100%;
    display: table;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.table-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    table-layout: auto;
}

thead {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    border-bottom: 2px solid var(--gray-300);
}

th,
td {
    overflow: hidden;
    text-overflow: ellipsis;
}

th {
    padding: 1.25rem 1.5rem;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    text-transform: capitalize;
    letter-spacing: 0.3px;
    word-break: break-word;
    vertical-align: middle;
    position: relative;
}

td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.95rem;
    color: var(--gray-800);
    vertical-align: middle;
    word-break: break-word;
    overflow-wrap: break-word;
}

tbody tr {
    transition: all var(--transition-base);
    border-bottom: 1px solid var(--gray-100);
}

tbody tr:hover {
    background-color: rgba(0, 100, 0, 0.03);
    box-shadow: inset 0 0 0 1px rgba(0, 100, 0, 0.05);
}

tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.01);
}

tbody tr:last-child td {
    border-bottom: none;
}

.table-cell-small {
    font-size: 0.85rem;
    color: var(--gray-600);
}

.table-cell-code {
    font-family: 'Courier New', monospace;
    background-color: var(--gray-50);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.table-cell-accent {
    color: var(--primary-color);
    font-weight: 600;
}

.table-row-border {
    border-bottom: 1px solid var(--gray-300);
}

.table-cell {
    padding: var(--spacing-md) var(--spacing-md);
}

.table-cell-sm {
    padding: var(--spacing-xs) var(--spacing-md);
}

.action-buttons {
    width: auto;
    min-width: auto;
    max-width: none;
    padding: 0.5rem 0.5rem !important;
    vertical-align: middle;
    white-space: nowrap;
    text-align: right;
}

.action-buttons a,
.action-buttons form {
    display: inline-block;
    margin-right: 0.25rem;
    vertical-align: middle;
    white-space: nowrap;
}

.action-buttons .btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.15rem 0 0;
}

.action-buttons .btn-sm {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
}

.table-empty {
    text-align: center;
    padding: 2rem 1.5rem !important;
    color: var(--gray-600);
    font-style: italic;
    background-color: rgba(0, 0, 0, 0.01);
}

@media (max-width: 1024px) {
    td {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    th {
        padding: 1rem;
        font-size: 0.85rem;
    }
    
    .action-buttons {
        width: auto;
        min-width: auto;
        max-width: none;
        padding: 0.4rem 0.3rem !important;
        white-space: nowrap;
        text-align: right;
    }
    
    .action-buttons .btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.7rem;
        margin-right: 0.1rem;
    }
}

@media (max-width: 768px) {
    .table-container,
    .table-wrapper {
        padding: 1rem;
        border-radius: 8px;
        overflow-x: auto;
    }
    
    table {
        font-size: 0.9rem;
        min-width: 600px;
    }
    
    td {
        padding: 0.75rem;
        font-size: 0.85rem;
        word-break: break-word;
    }
    
    th {
        padding: 0.75rem;
        font-size: 0.8rem;
        word-break: break-word;
    }
    
    .action-buttons {
        width: auto;
        min-width: auto;
        max-width: none;
        padding: 0.3rem 0.2rem !important;
        white-space: nowrap;
        text-align: right;
        vertical-align: middle;
    }
    
    .action-buttons .btn {
        display: inline-block !important;
        width: auto !important;
        margin: 0.05rem 0.08rem;
        padding: 0.25rem 0.4rem;
        font-size: 0.65rem;
    }
}

.table-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.table-actions .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.table-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--gray-500);
}

.table-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.action-buttons {
    display: inline-block;
    white-space: nowrap;
}

.action-buttons .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.85rem;
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    .table-container {
        padding: 1rem;
        font-size: 0.85rem;
    }

    th,
    td {
        padding: 0.75rem;
        font-size: 0.8rem;
    }

    .table-actions {
        flex-direction: column;
    }

    .table-actions .btn {
        width: 100%;
    }

    .action-buttons {
        flex-direction: column;
    }

    .action-buttons .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .table-container {
        padding: 0.75rem;
        font-size: 0.75rem;
    }

    th,
    td {
        padding: 0.5rem;
    }

    .table-title {
        font-size: 1rem;
    }
}

.json-data {
    background: var(--gray-50);
    border: 1px solid var(--gray-300);
    padding: 8px;
    border-radius: 3px;
    max-height: 100px;
    overflow: auto;
    font-size: 11px;
    font-family: monospace;
    white-space: pre-wrap;
}

.diff-section {
    margin: 5px 0;
}

.old-value {
    color: var(--danger-color);
    text-decoration: line-through;
}

.new-value {
    color: var(--success-color);
}

.table-responsive .data-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background-color: white !important;
    table-layout: auto !important;
    display: table !important;
}

.table-responsive .data-table thead {
    background-color: var(--primary-color) !important;
    color: white !important;
    display: table-header-group !important;
}

.table-responsive .data-table tbody {
    display: table-row-group !important;
}

.table-responsive .data-table tr {
    display: table-row !important;
}

.table-responsive .data-table th,
.table-responsive .data-table td {
    display: table-cell !important;
    padding: 0.75rem !important;
    text-align: left !important;
    vertical-align: middle !important;
}

.table-responsive .data-table th {
    background-color: var(--primary-color) !important;
    color: white !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    border-bottom: 2px solid var(--gray-400) !important;
}

.table-responsive .data-table td {
    border-bottom: 1px solid var(--gray-300) !important;
}

.table-responsive .data-table tbody tr:hover {
    background-color: var(--gray-100) !important;
}


.schema-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
}

.schema-tabs,
.tab-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--gray-200);
}

.schema-tab,
.tab {
    padding: 1rem 1.5rem;
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all var(--transition-base);
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
}

.schema-tab:hover,
.tab:hover {
    background: rgba(0, 100, 0, 0.05);
    border-bottom-color: var(--gray-300);
    color: var(--gray-800);
}

.schema-tab.active,
.tab.active {
    background: transparent;
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
}

.tab-content,
.tab-pane {
    display: none;
    padding: 2rem;
    background: white;
    border-radius: var(--radius-lg);
    animation: fadeIn var(--transition-base);
}

.tab-content.active,
.tab-pane.active {
    display: block;
}

@media (max-width: 768px) {
    .schema-tabs,
    .tab-group {
        flex-wrap: wrap;
        gap: 5px;
    }

    .schema-tab,
    .tab {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .tab-content,
    .tab-pane {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .schema-tabs,
    .tab-group {
        flex-direction: column;
    }

    .schema-tab,
    .tab {
        padding: 10px;
        text-align: left;
    }

    .tab-content,
    .tab-pane {
        padding: 10px;
    }
}



/* ==================================================
   SECTION 4: PAGE-SPECIFIC STYLES
   Auth pages, dashboards, profiles, curriculum
   ================================================== */

/* ================================
   AUTHENTICATION PAGE STYLES
   Login & Signup Pages
   ================================ */

/* ==================
   PAGE BODY
   ================== */

body.login-page,
body.signup-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-attachment: fixed;
}

/* ==================
   LOGIN PAGE
   ================== */

.login-page {
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.03) 0%, rgba(0, 68, 0, 0.05) 100%);
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 2rem;
}

.login-box {
    background: white;
    padding: 3rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-width: 420px;
    width: 100%;
    animation: slideIn var(--transition-base);
    border-top: 4px solid var(--primary-color);
}

.login-box h1 {
    font-size: var(--font-size-2xl);
    color: var(--primary-color);
    margin-bottom: 0.25rem;
    text-align: center;
    font-weight: var(--font-weight-bold);
}

/* ==================
   LOGO SECTION
   ================== */

.logo-section {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-wrapper {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px rgba(0, 100, 0, 0.2);
}

.logo-wrapper img {
    width: 65px;
    height: auto;
}

.logo-section h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.logo-section p {
    color: var(--gray-600);
    font-size: 16px;
    font-weight: 400;
}

/* ==================
   AUTH CONTAINERS
   ================== */

.login-container,
.signup-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.login-card,
.signup-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 50px 40px;
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: 500px;
}

/* ==================
   AUTH BUTTONS
   ================== */

/* Button styles are defined in components/buttons.css */
/* Auth pages can use .btn-auth, .login-button, or .signup-button classes */
/* All three are maintained in components/buttons.css for consistency */

/* ==================
   FORM FOOTER
   ================== */

.form-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

.form-footer p {
    color: var(--gray-600);
    font-size: 13px;
    margin-bottom: 8px;
}

.form-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.form-footer a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.security-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--gray-500);
    font-size: 12px;
    margin-top: 16px;
}

.security-footer i {
    color: var(--success-color);
}

/* ==================
   CAPTCHA SECTION
   ================== */

.captcha-section {
    background: linear-gradient(135deg, var(--gray-50) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.captcha-title {
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.captcha-question {
    background: white;
    padding: 14px 16px;
    border-radius: 6px;
    border: 1px solid var(--gray-200);
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
}

/* ==================
   ANIMATIONS
   ================== */

.login-card,
.signup-card {
    animation: slideDown 0.4s ease;
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    .login-container,
    .signup-container {
        padding: 16px;
        min-height: auto;
        margin: auto;
    }

    .login-card,
    .signup-card {
        padding: 40px 30px;
    }
}

@media (max-width: 480px) {
    .login-container,
    .signup-container {
        padding: 12px;
        min-height: 100vh;
    }

    .login-card,
    .signup-card {
        padding: 35px 24px;
        max-width: 100%;
    }

    .logo-section {
        margin-bottom: 30px;
    }

    .logo-section h1 {
        font-size: 24px;
    }

    .logo-wrapper {
        width: 60px;
        height: 60px;
    }

    .logo-wrapper img {
        width: 40px;
    }
}
}

.login-box p {
    text-align: center;
    color: var(--gray-500);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.login-btn {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

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

.password-hint {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

.signup-link {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--gray-600);
    font-size: 0.9rem;
}

.signup-link a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.signup-link a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ==================
   SIGNUP PAGE
   ================== */

.signup-page {
    background: linear-gradient(135deg, rgba(0, 68, 0, 0.05) 0%, rgba(0, 100, 0, 0.08) 100%);
}

.signup-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 2rem;
}

.signup-box {
    background: white;
    padding: 3rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-width: 500px;
    width: 100%;
    animation: slideIn 0.3s ease-out;
}

.signup-box h1 {
    font-size: 1.875rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    text-align: center;
}

.signup-box > p {
    text-align: center;
    color: var(--gray-500);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.role-selection {
    margin-bottom: 1.5rem;
}

.role-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.role-option {
    position: relative;
}

.role-option input[type="radio"] {
    display: none;
}

.role-option label {
    display: block;
    padding: 1rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--gray-50);
    margin-bottom: 0;
    font-weight: 600;
    color: var(--gray-700);
}

.role-option input[type="radio"]:checked + label {
    border-color: var(--primary-color);
    background: rgba(0, 100, 0, 0.05);
    color: var(--primary-color);
}

.signup-btn {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1.5rem;
}

.signup-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.login-link {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--gray-600);
    font-size: 0.9rem;
}

.login-link a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.login-link a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    .login-box,
    .signup-box {
        padding: 1.5rem;
    }

    .login-box h1,
    .signup-box h1 {
        font-size: 1.5rem;
    }

    .role-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .login-container,
    .signup-container {
        padding: 1rem;
    }

    .login-box,
    .signup-box {
        padding: 1.5rem;
    }

    .login-box h1,
    .signup-box h1 {
        font-size: 1.25rem;
    }

    .login-box p,
    .signup-box > p {
        font-size: 0.85rem;
    }

    .role-options {
        gap: 0.5rem;
    }

    .role-option label {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
}


.dashboard-header {
    margin-bottom: 3rem;
    padding: 2.5rem 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
    border-bottom: 1px solid #f0f0f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    animation: slideDown 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.dashboard-header h1 {
    font-size: var(--font-size-4xl);
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Dashboard icon helper: keeps icons aligned and pixel-perfect */
.dashboard-header h1 i,
.dashboard-cards .card h3 i,
.card h3 i,
.metric-label i {
    font-size: 1.25rem;
    vertical-align: -3px;
    margin-right: 0.5rem;
    color: var(--primary-color);
}

.dashboard-cards .card h3 i,
.card h3 i {
    font-size: 1rem;
    vertical-align: -2px;
}

/* Ensure quick action icons inside buttons are correctly sized */
.button-group .btn i,
.btn i {
    margin-right: 0.5rem;
    font-size: 1rem;
    vertical-align: middle;
}

.dashboard-subtext {
    color: var(--gray-600);
    font-size: var(--font-size-lg);
    margin: 0;
    font-weight: 500;
    letter-spacing: -0.3px;
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

/* Ensure cards can show their shadows/borders without being clipped */
.dashboard-cards .card {
    overflow: visible;
    align-self: start; /* avoid cards stretching and being clipped */
}

/* Make cards wrap and reflow more gracefully on narrow screens */
@media (max-width: 1024px) {
    .dashboard-cards {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .main-content-wrapper {
        margin-left: var(--sidebar-width-collapsed);
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .dashboard-cards {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 480px) {
    .main-content-wrapper {
        margin-left: var(--sidebar-width-mobile);
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .dashboard-cards {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* Dashboard Card Enhancements */
.dashboard-cards .card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1);
    background: white;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.dashboard-cards .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
}

.dashboard-cards .card-secondary {
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.05) 0%, rgba(255, 215, 0, 0.05) 100%);
    border-left: 4px solid var(--primary-color);
}

.metric-box {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
    border: 1px solid #f0f0f0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.metric-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.metric-label {
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.metric-label i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: -0.3px;
}

.metric-change {
    font-size: 0.85rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.metric-change.positive {
    color: var(--success-color);
}

.metric-change.positive i {
    color: var(--success-color);
}

.metric-change.negative {
    color: var(--danger-color);
}

.metric-change.negative i {
    color: var(--danger-color);
}

/* ==================
   QUICK STATS
   Use .stat for the quick-stats grid layout
   Note: See cards.css for alternative stat-card and stat-item classes
   ================== */

.quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Base Stat Display
   Use .stat for basic stat displays
   Use .stat--card or .stat-card for enhanced version with hover effects
   See components/cards.css for enhanced version
   ================== */

.stat {
    padding: 1rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--primary-color);
}

.stat.stat-secondary {
    border-left-color: var(--secondary-color);
}

.stat.stat-danger {
    border-left-color: var(--danger-color);
}

.stat.stat-warning {
    border-left-color: var(--warning-color);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--gray-600);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    .dashboard-header h1 {
        font-size: 1.75rem;
    }

    .dashboard-cards {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .card {
        padding: 1.25rem;
    }

    .card-icon {
        font-size: 2rem;
    }

    .big-number {
        font-size: 2rem;
    }

    .quick-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .dashboard-header {
        margin-bottom: 1.5rem;
    }

    .dashboard-header h1 {
        font-size: 1.5rem;
    }

    .dashboard-header p {
        font-size: 0.9rem;
    }

    .dashboard-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .card {
        padding: 1rem;
    }

    .card-icon {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }

    .card-icon i {
        width: 2.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
    }

    .big-number {
        font-size: 1.75rem;
    }

    .quick-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-section-title {
        font-size: 1.1rem;
    }
}


/* ================================
   CURRICULUM PAGE STYLES
   Curriculum Reports & Sections
   ================================ */

.summary-section {
    margin-bottom: 3rem;
}

.program-details {
    background-color: rgba(0, 100, 0, 0.05);
    border-left: 4px solid var(--primary-color);
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: var(--radius-lg);
}

.year-section {
    margin: 1.5rem 0;
}

.year-section h4 {
    color: var(--primary-color);
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 0.5rem;
    margin: 1rem 0 0.5rem 0;
    font-weight: var(--font-weight-semibold);
}

.semester-section {
    margin: 1rem 0;
}

.semester-section h5 {
    background-color: rgba(0, 100, 0, 0.05);
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
    margin: 0.5rem 0;
    font-weight: var(--font-weight-semibold);
}

.courses-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
}

.courses-table thead {
    background-color: var(--primary-color);
    color: white;
    font-weight: var(--font-weight-semibold);
}

.courses-table th {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
}

.courses-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--gray-300);
}

.courses-table tbody tr:hover {
    background-color: var(--gray-50);
}

.major-section.hidden {
    display: none;
}

.dept-section.all-hidden {
    display: none;
}

.verification-summary {
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.08) 0%, rgba(34, 139, 34, 0.06) 100%);
    border: 2px solid var(--primary-color);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    margin-top: 2rem;
}

.verification-summary h3 {
    color: var(--primary-color);
    margin-top: 0;
    font-weight: var(--font-weight-bold);
}

.verification-summary ul {
    list-style: none;
    padding: 0;
}

.verification-summary li {
    padding: 0.5rem 0;
    color: var(--gray-700);
}

.subtitle {
    color: var(--gray-600);
    font-style: italic;
}

/* ==================
   PRINT STYLES
   ================== */

@media print {
    body {
        background: white;
    }

    .container-main,
    .container {
        max-width: 100%;
    }

    .btn {
        display: none;
    }

    #dept-filter,
    #major-filter {
        display: none;
    }

    .curriculum-section,
    table {
        page-break-inside: avoid;
    }
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    .program-details {
        padding: 1rem;
        margin: 1.5rem 0;
    }

    .courses-table th,
    .courses-table td {
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    .verification-summary {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .year-section h4 {
        font-size: 1.1rem;
    }

    .semester-section h5 {
        font-size: 1rem;
    }

    .courses-table {
        font-size: 0.85rem;
    }

    .courses-table th,
    .courses-table td {
        padding: 0.25rem;
    }
}


/* ================================
   HOMEPAGE STYLES
   Index Page & Landing
   ================================ */

body {
    font-family: 'Inter', ui-sans-serif, system-ui;
}

/* ==================
   INDEX NAVBAR
   ================== */

.index-nav {
    background: linear-gradient(135deg, #006400 0%, #004d00 100%);
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 50;
}

.index-nav .nav-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5rem;
}

.index-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.index-nav-logo {
    height: 3rem;
    width: auto;
    max-width: 3rem;
}

.index-nav-title {
    font-size: 1.25rem;
    font-weight: bold;
    display: none;
}

@media (min-width: 640px) {
    .index-nav-title {
        display: inline;
    }
}

.index-nav-links {
    display: none;
    gap: 2rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .index-nav-links {
        display: flex;
    }
}

.index-nav-links a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.index-nav-links a:hover {
    color: #FFD700;
}

.index-nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.index-nav-login {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 2px solid #FFD700;
    color: #FFD700;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.index-nav-login:hover {
    background: #FFD700;
    color: #006400;
}

.index-nav-signup {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: #FFD700;
    color: #006400;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.index-nav-signup:hover {
    background: #FFC700;
}

.hero-overlay {
    background: linear-gradient(135deg, rgba(0,68,0,0.88) 0%, rgba(0,100,0,0.75) 60%, rgba(0,40,0,0.92) 100%);
}

.card-hover {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 100, 0, 0.15);
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-lg);
    color: white;
    font-size: 28px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-md);
}

.hero-section {
    background: linear-gradient(135deg, rgba(0,68,0,0.88) 0%, rgba(0,100,0,0.75) 60%, rgba(0,40,0,0.92) 100%);
    color: white;
    padding: 60px 20px;
    text-align: center;
    margin-bottom: 40px;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stats-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    .hero-section {
        padding: 40px 15px;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .stats-showcase {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 30px 10px;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .feature-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .stats-showcase {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-buttons .btn {
        width: 100%;
    }
}


/* ================================
   PROFILE PAGE STYLES
   User Profile & Settings Pages
   ================================ */

/* ==================
   PROFILE HEADER
   ================== */

.profile-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 2rem;
}

.profile-avatar {
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
    box-shadow: var(--shadow-lg);
    flex-shrink: 0;
}

.profile-info {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.profile-info h2 {
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.profile-role {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.profile-role.student {
    background: var(--secondary-color);
}

.profile-role.faculty {
    background: var(--accent-color);
}

.profile-role.admin {
    background: var(--danger-color);
}

.profile-detail {
    margin-bottom: 0.75rem;
    color: var(--gray-600);
    font-size: 0.95rem;
}

.profile-detail strong {
    color: var(--gray-700);
}

/* ==================
   PROFILE SECTIONS
   ================== */

.profile-card {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    border-left: 4px solid var(--primary-color);
}

.profile-card h3 {
    font-size: 1.1rem;
    color: var(--gray-800);
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-transform: capitalize;
}

.profile-form {
    width: 100%;
}

.profile-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

.profile-form .form-row .form-group {
    margin-bottom: 0;
    width: 100%;
}

.profile-form .form-row-full {
    grid-column: 1 / -1;
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .page-header h1,
    .page-header h2 {
        font-size: 1.5rem;
    }

    .page-header-actions {
        width: 100%;
    }

    .page-header-actions .btn {
        flex: 1;
        min-width: 100px;
    }

    .page-header-modern {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .page-header-content h1.page-title {
        font-size: 1.5rem;
    }

    .profile-header {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .profile-avatar {
        width: 120px;
        height: 120px;
        margin: 0 auto;
    }

    .profile-form .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .section-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .page-header h1,
    .page-header h2 {
        font-size: 1.25rem;
    }

    .section-title {
        font-size: 1rem;
    }

    .profile-avatar {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
    }

    .profile-info {
        padding: 1rem;
    }

    .profile-info h2 {
        font-size: 1.25rem;
    }

    .profile-detail {
        font-size: 0.85rem;
    }
}



/* ==================================================
   SECTION 5: UTILITIES
   Layout, typography, colors, animations, interactions
   ================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ==================
   ANIMATION UTILITIES
   ================== */

.animate-fade-in {
    animation: fadeIn var(--transition-base);
}

.animate-fade-in-up {
    animation: fadeInUp var(--transition-base);
}

.animate-fade-out {
    animation: fadeOut var(--transition-base);
}

.animate-slide-in {
    animation: slideIn var(--transition-base);
}

.animate-slide-in-left {
    animation: slideInLeft var(--transition-base);
}

.animate-slide-in-right {
    animation: slideInRight var(--transition-base);
}

.animate-slide-down {
    animation: slideDown var(--transition-base);
}

.animate-slide-up {
    animation: slideUp var(--transition-base);
}

.animate-pulse {
    animation: pulse var(--transition-slow) infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

/* ==================
   FORM ANIMATION UTILITIES
   ================== */

.animate-form-group {
    animation: slideDown 0.5s ease backwards;
}

.animate-form-group:nth-child(1) {
    animation-delay: 0.1s;
}

.animate-form-group:nth-child(2) {
    animation-delay: 0.15s;
}

.animate-form-group:nth-child(3) {
    animation-delay: 0.2s;
}

.animate-form-group:nth-child(4) {
    animation-delay: 0.25s;
}

.animate-form-group:nth-child(5) {
    animation-delay: 0.3s;
}

/* ==================
   OPACITY TRANSITIONS
   Animated opacity changes with transitions
   ================== */

.animate-opacity-0 {
    opacity: 0;
    transition: opacity var(--transition-base);
}

.animate-opacity-50 {
    opacity: 0.5;
    transition: opacity var(--transition-base);
}

.animate-opacity-100 {
    opacity: 1;
    transition: opacity var(--transition-base);
}

/* ==================
   TRANSITION UTILITIES
   ================== */

.transition-fast {
    transition: all var(--transition-fast);
}

.transition-base {
    transition: all var(--transition-base);
}

.transition-slow {
    transition: all var(--transition-slow);
}

.transition-colors {
    transition: background-color, border-color, color var(--transition-base);
}

.transition-transform {
    transition: transform var(--transition-base);
}

.transition-shadow {
    transition: box-shadow var(--transition-base);
}

/* ==================
   REDUCED MOTION
   ================== */

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


/* ================================
   BACKGROUND COLOR UTILITIES
   Light & Color-specific Backgrounds
   ================================ */

/* ==================
   NEUTRAL BACKGROUNDS
   ================== */

.bg-light {
    background-color: var(--gray-50);
}

.bg-lighter {
    background-color: var(--gray-100);
}

.bg-white {
    background-color: white;
}

/* ==================
   SEMANTIC COLOR BACKGROUNDS
   Light variations for context
   ================== */

.bg-info-light {
    background-color: rgba(37, 99, 235, 0.05);
}

.bg-success-light {
    background-color: rgba(0, 100, 0, 0.05);
}

.bg-warning-light {
    background-color: rgba(249, 115, 22, 0.05);
}

.bg-danger-light {
    background-color: rgba(239, 68, 68, 0.05);
}

.bg-secondary-light {
    background-color: rgba(255, 215, 0, 0.05);
}

.bg-gradient-gray {
    background: linear-gradient(to right, var(--gray-50), var(--gray-100));
}

.bg-gradient-subtle {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
}


.border {
    border: 1px solid var(--gray-200);
}

.border-top {
    border-top: 1px solid var(--gray-200);
}

.border-bottom {
    border-bottom: 1px solid var(--gray-200);
}

.border-left {
    border-left: 1px solid var(--gray-200);
}

.border-right {
    border-right: 1px solid var(--gray-200);
}

.border-light {
    border-color: var(--gray-200);
}

.border-lg {
    border-width: 2px;
}

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

.rounded-sm {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-xl);
}


.divider-sm {
    height: 1px;
    background-color: var(--gray-200);
    margin: var(--spacing-md) 0;
}

.divider-light {
    height: 1px;
    background-color: var(--gray-100);
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    .divider-sm {
        margin: var(--spacing-sm) 0;
    }
}


/* ================================
   FLEXBOX & LAYOUT UTILITIES
   Display, Alignment, & Layout Helpers
   ================================ */

/* ==================
   FLEXBOX UTILITIES
   ================== */

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }

.self-center { align-self: center; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-stretch { align-self: stretch; }

.gap-0 { gap: 0; }
.gap-1 { gap: var(--spacing-sm); }
.gap-2 { gap: var(--spacing-md); }
.gap-3 { gap: var(--spacing-lg); }
.gap-4 { gap: var(--spacing-xl); }
.gap-5 { gap: var(--spacing-2xl); }

/* ==================
   GRID UTILITIES
   ================== */

.grid { display: grid; }
.grid > * { min-width: 0; }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.grid-gap-1 { gap: var(--spacing-sm); }
.grid-gap-2 { gap: var(--spacing-md); }
.grid-gap-3 { gap: var(--spacing-lg); }
.grid-gap-4 { gap: var(--spacing-xl); }

/* ==================
   CARD COMPONENT
   ================== */

.card {
    width: 100%;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.card form {
    width: 100%;
}

.card form.grid {
    width: 100%;
}

/* ==================
   SIZING WITH UNITS
   ================== */

.min-w-max { min-width: max-content; }
.min-w-min { min-width: min-content; }

/* ==================
   ASPECT RATIO
   ================== */

/* Aspect ratios defined in utilities/layout-containers.css */

/* ==================
   FLEX HELPERS
   ================== */

.flex-inline {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

@media (max-width: 768px) {
    .flex-md-col { flex-direction: column; }
    .flex-md-row { flex-direction: row; }
    .gap-md-1 { gap: var(--spacing-sm); }
    .gap-md-2 { gap: var(--spacing-md); }
    .gap-md-3 { gap: var(--spacing-lg); }
    
    .grid-cols-md-1 { grid-template-columns: 1fr; }
    .grid-cols-md-2 { grid-template-columns: repeat(2, 1fr); }

    .flex-inline {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .flex-sm-col { flex-direction: column; }
    .flex-sm-row { flex-direction: row; }
    .gap-sm-1 { gap: var(--spacing-sm); }
    .gap-sm-2 { gap: var(--spacing-md); }
    
    .grid-cols-sm-1 { grid-template-columns: 1fr; }
    .w-sm-full { width: 100%; }

    .flex-inline {
        flex-wrap: wrap;
    }
}


*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="date"]:focus-visible,
input[type="time"]:focus-visible,
input[type="number"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
    /* Base outline from *:focus-visible inherited */
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 100, 0, 0.1);
    background-color: white;
    transition: all var(--transition-base);
}

/* Disabled form inputs - no focus */
input:disabled:focus,
textarea:disabled:focus,
select:disabled:focus {
    box-shadow: none;
    border-color: inherit;
}

/* ==================
   COMPONENT-SPECIFIC FOCUS
   Specialized focus states for custom components
   (See specific component files for full implementation)
   ================== */


/* ================================
   INTERACTIVE STATES & EFFECTS
   Hover, Focus, Active States
   ================================ */

/* ==================
   FOCUS STYLES
   ================== */
/* Focus styles are defined in component-specific files:
   - buttons.css for button focus states
   - forms.css for input/textarea/select focus states
   This prevents duplication and ensures consistency per component */

/* ==================
   BUTTON INTERACTIONS
   ================== */

button,
.btn {
    position: relative;
    overflow: hidden;
}

button:before,
.btn:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width var(--transition-base), height var(--transition-base);
}

button:active:before,
.btn:active:before {
    width: 300px;
    height: 300px;
}

button:not(:disabled):hover,
.btn:not(:disabled):hover {
    box-shadow: var(--shadow-lg);
}

/* ==================
   DISABLED STATES
   ================== */

button:disabled,
.btn:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* ==================
   CARD INTERACTIONS
   ================== */

.card,
.card-wrapper {
    position: relative;
}

/* Card shine effect is defined in cards.css using ::before
   Removed ::after shine effect to avoid conflicting hover animations */

/* ==================
   TABLE INTERACTIONS
   ================== */

table tbody tr {
    position: relative;
}

.data-table tbody tr::before {
    content: none !important;
}

/* ==================
   MODAL DISPLAY & STYLING
   Modern Professional Design
   ================== */

.modal-overlay.hidden {
    display: none !important;
}

.modal-overlay:not(.hidden) {
    display: flex !important;
}

/* Modern Modal Link Button */
.modal-link {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    padding: 0;
    font-size: inherit;
    transition: all 0.2s ease;
    position: relative;
}

.modal-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.modal-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.modal-link:hover {
    color: var(--primary-dark);
}

/* Enhanced Modal Content Styling */
.modal-content {
    padding: 0;
}

.modal-content .logo-section {
    padding: 2.5rem 2.5rem 1.5rem 2.5rem;
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
    border-bottom: 1px solid #f0f0f0;
}

.modal-content .logo-section .logo-wrapper {
    margin-bottom: 1.5rem;
    animation: slideDown 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.modal-content .logo-section .logo-wrapper img {
    height: 70px;
    width: auto;
    filter: drop-shadow(0 2px 8px rgba(0, 100, 0, 0.1));
}

.modal-content .logo-section h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 1rem 0 0.5rem 0;
    letter-spacing: -0.5px;
}

.modal-content .logo-section p {
    color: var(--gray-600);
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Form Section Inside Modal */
.modal-content form {
    padding: 2.5rem;
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

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

/* Enhanced Form Groups */
.modal-content .form-group {
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-content .form-group:nth-child(1) { animation-delay: 0.15s; }
.modal-content .form-group:nth-child(2) { animation-delay: 0.2s; }
.modal-content .form-group:nth-child(3) { animation-delay: 0.25s; }
.modal-content .form-group:nth-child(4) { animation-delay: 0.3s; }
.modal-content .form-group:nth-child(5) { animation-delay: 0.35s; }

.modal-content .form-group label {
    display: block;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    letter-spacing: -0.3px;
}

.modal-content .form-group label i {
    margin-right: 0.5rem;
    color: var(--primary-color);
}

/* Modern Input Fields */
.modal-content .form-group input,
.modal-content .form-group select,
.modal-content .form-group textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background: white;
    color: var(--gray-900);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.modal-content .form-group input:focus,
.modal-content .form-group select:focus,
.modal-content .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 100, 0, 0.1), 0 4px 12px rgba(0, 100, 0, 0.15);
    transform: translateY(-2px);
}

.modal-content .form-group input::placeholder {
    color: #999;
}

/* Form Row for Side-by-Side Inputs */
.modal-content .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.modal-content .form-row .form-group {
    margin-bottom: 0;
}

/* Form Hints */
.modal-content .form-hint {
    font-size: 0.8rem;
    color: #999;
    margin-top: 0.4rem;
    font-weight: 500;
}

/* Alert Styling Inside Modal */
.modal-content .alert {
    margin: 0 0 1.5rem 0;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    border-left: 4px solid;
    animation: slideInAlert 0.3s ease;
}

@keyframes slideInAlert {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.modal-content .alert i {
    margin-right: 0.75rem;
}

.modal-content .alert-danger {
    background-color: #fef2f2;
    color: #991b1b;
    border-left-color: #dc2626;
}

.modal-content .alert-success {
    background-color: #f0fdf4;
    color: #15803d;
    border-left-color: #22c55e;
}

.modal-content .alert-info {
    background-color: #eff6ff;
    color: #1e40af;
    border-left-color: #3b82f6;
}

.modal-content .alert-warning {
    background-color: #fffbeb;
    color: #92400e;
    border-left-color: #f59e0b;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
}

.modal-content .alert-warning-header {
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-content .alert-warning-content {
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.modal-content .alert-warning-line {
    margin-bottom: 0.5rem;
}

.modal-content .credential-code {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--primary-dark);
}

.modal-content .captcha-section {
    background: #f9f9f9;
    padding: 1rem;
    border-radius: 8px;
    border: 2px solid #e5e5e5;
}

.modal-content .captcha-title {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-content .captcha-title i {
    color: var(--primary-color);
}

.modal-content .captcha-question {
    background: white;
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    font-weight: 600;
    text-align: center;
    color: var(--gray-900);
    border: 2px solid var(--primary-color);
    font-family: 'Courier New', monospace;
}

.modal-content .login-button,
.modal-content .signup-button {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    letter-spacing: -0.3px;
    box-shadow: 0 4px 12px rgba(0, 100, 0, 0.2);
    background: linear-gradient(135deg, var(--primary-color) 0%, #005c00 100%);
    color: white;
}

.modal-content .login-button:hover,
.modal-content .signup-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 100, 0, 0.3);
}

.modal-content .login-button:active,
.modal-content .signup-button:active {
    transform: translateY(0);
}

.modal-content .form-footer {
    text-align: center;
    padding: 1.5rem 2.5rem;
    border-top: 1px solid #f0f0f0;
    background: #f9f9f9;
    margin-top: 0;
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.modal-content .form-footer p {
    margin: 0;
    color: var(--gray-700);
    font-size: 0.95rem;
}

.modal-content .form-footer a,
.modal-content .form-footer .modal-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.modal-content .form-footer a:hover,
.modal-content .form-footer .modal-link:hover {
    color: var(--primary-dark);
}

.modal-content .security-footer {
    text-align: center;
    padding: 1rem 2.5rem 1.5rem 2.5rem;
    color: var(--gray-600);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: white;
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

.modal-content .security-footer i {
    color: var(--success-color);
}

.demo-credentials-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.demo-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px solid;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    font-size: 0.9rem;
}

.demo-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.demo-btn:hover::before {
    left: 100%;
}

.demo-btn i {
    font-size: 1.5rem;
}

.demo-btn-admin {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: white;
    border-color: #991b1b;
}

.demo-btn-admin:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3);
}

.demo-btn-faculty {
    background: linear-gradient(135deg, #0369a1 0%, #003d7a 100%);
    color: white;
    border-color: #003d7a;
}

.demo-btn-faculty:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(3, 105, 161, 0.3);
}

/* Student Button */
.demo-btn-student {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: white;
    border-color: #5b21b6;
}

.demo-btn-student:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
}

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

@media (max-width: 768px) {
    .demo-credentials-buttons {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .demo-btn {
        padding: 0.875rem 0.5rem;
        font-size: 0.85rem;
    }

    .demo-btn i {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .demo-credentials-buttons {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .demo-btn {
        flex-direction: row;
        justify-content: center;
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    .demo-btn i {
        font-size: 1.25rem;
    }
}

.modal-content .form-group input.filled-auto,
.modal-content .form-group select.filled-auto {
    animation: fillFieldAnimation 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fillFieldAnimation {
    0% {
        background-color: white;
        border-color: #e5e5e5;
    }
    50% {
        background-color: rgba(0, 100, 0, 0.05);
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(0, 100, 0, 0.1), 0 4px 12px rgba(0, 100, 0, 0.15);
    }
    100% {
        background-color: white;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(0, 100, 0, 0.1), 0 4px 12px rgba(0, 100, 0, 0.15);
    }
}

@media (max-width: 768px) {
    .modal-content {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
    }

    .modal-content .logo-section {
        padding: 2rem 2rem 1.25rem 2rem;
    }

    .modal-content form {
        padding: 2rem;
    }

    .modal-content .form-footer,
    .modal-content .security-footer {
        padding: 1.25rem 2rem;
    }

    .modal-content .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .modal-overlay {
        padding: 0;
    }

    .modal-content {
        max-width: 100% !important;
        max-height: 100vh;
        border-radius: 16px 16px 0 0;
        overflow-y: auto;
    }

    .modal-content .logo-section {
        padding: 1.5rem;
    }

    .modal-content form {
        padding: 1.5rem;
    }

    .modal-content .form-footer,
    .modal-content .security-footer {
        padding: 1rem 1.5rem;
    }

    .modal-content .form-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .modal-content .login-button,
    .modal-content .signup-button {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        margin-top: 1rem;
    }
}

.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: #f9f9f9;
}

.modal-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary-color) 0%, #005c00 100%);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #005c00 0%, var(--primary-color) 100%);
    box-shadow: 0 0 8px rgba(0, 100, 0, 0.3);
}

.modal-content .login-button,
.modal-content .signup-button {
    width: 100%;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.modal-content .form-footer {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.modal-content .security-footer {
    text-align: center;
    margin-top: 1rem;
    color: var(--gray-600);
    font-size: 0.85rem;
}
table tbody tr:hover::before {
    opacity: 0.5;
}

input::placeholder,
textarea::placeholder {
    color: var(--gray-400);
    font-weight: var(--font-weight-normal);
}

.badge {
    position: relative;
}

.badge::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-base);
    border-radius: 50%;
    pointer-events: none;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--gray-50);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-lg);
    transition: background var(--transition-base);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

::selection {
    background-color: var(--primary-color);
    color: white;
}

::-moz-selection {
    background-color: var(--primary-color);
    color: white;
}

button,
.btn,
[role="button"],
a,
select,
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
}

input:disabled,
button:disabled,
textarea:disabled,
select:disabled {
    cursor: not-allowed;
}

.hover\:opacity-75:hover {
    opacity: 0.75;
}

.hover\:opacity-90:hover {
    opacity: 0.9;
}

.transform-gpu {
    transform: translateZ(0);
}

.scale-100 {
    transform: scale(1);
    transition: transform var(--transition-base);
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

.hover\:scale-110:hover {
    transform: scale(1.1);
}

.card-hover {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 100, 0, 0.15);
}

.translate-y-0 {
    transform: translateY(0);
    transition: transform var(--transition-base);
}

.hover\:translate-y-neg-1:hover {
    transform: translateY(-4px);
}

.hover\:translate-y-neg-2:hover {
    transform: translateY(-8px);
}


/* ================================
   CONTAINER UTILITIES
   Max-width constraint classes
   ================================ */

.container-md {
    max-width: 1000px;
    margin: 0 auto;
}

.w-600 {
    max-width: 600px;
    margin: 0 auto;
}

.w-500 {
    max-width: 500px;
    margin: 0 auto;
}

.w-full {
    width: 100%;
}

.w-screen {
    width: 100vw;
}

.max-w-none {
    max-width: none;
}

.max-w-sm {
    max-width: 24rem;
}

.max-w-md {
    max-width: 28rem;
}

.max-w-lg {
    max-width: 32rem;
}

.max-w-xl {
    max-width: 36rem;
}

.max-w-2xl {
    max-width: 42rem;
}

.x-center {
    margin: 0 auto;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-1_1 {
    aspect-ratio: 1 / 1;
}

.aspect-4_3 {
    aspect-ratio: 4 / 3;
}

.aspect-16_9 {
    aspect-ratio: 16 / 9;
}

.aspect-3_2 {
    aspect-ratio: 3 / 2;
}


@import '../core/variables.css';

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--gray-200);
    flex-wrap: wrap;
    gap: 1.5rem;
}

.page-header h1,
.page-header h2 {
    margin: 0;
    color: var(--gray-900);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.5px;
}

.page-header-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.page-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--gray-100);
}

.page-header-content h1.page-title {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.page-subtitle {
    font-size: var(--font-size-base);
    color: var(--gray-500);
    margin: 0;
    font-weight: var(--font-weight-normal);
}

/* ==================
   PAGE SECTIONS
   ================== */

.page-section {
    margin-bottom: 2rem;
}

.section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--gray-900);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--gray-200);
}

.section-subtitle {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    margin-bottom: 1rem;
    font-weight: var(--font-weight-normal);
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        gap: 1rem;
    }

    .page-header h1,
    .page-header h2 {
        font-size: var(--font-size-2xl);
    }

    .page-header-actions {
        width: 100%;
    }

    .page-header-modern {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
    }

    .page-header-content h1.page-title {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 480px) {
    .page-header {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .page-header h1,
    .page-header h2 {
        font-size: var(--font-size-2xl);
    }

    .section-title {
        font-size: var(--font-size-base);
    }
}


/* ================================
   OVERFLOW UTILITIES
   Scrollable & Hidden Containers
   ================================ */

@import '../core/variables.css';

/* ==================
   BASE OVERFLOW CLASSES
   ================== */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

/* Axis-specific overflow */
.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }

.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }

/* ==================
   EXTENDED OVERFLOW PROPERTIES
   Additional height constraints for common use cases
   ================== */

.overflow-auto-y {
    overflow-y: auto;
    max-height: 400px;
}

.overflow-auto-y-sm {
    overflow-y: auto;
    max-height: 200px;
}

.overflow-auto-y-lg {
    overflow-y: auto;
    max-height: 600px;
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    .overflow-auto-y {
        max-height: 300px;
    }
    
    .overflow-auto-y-lg {
        max-height: 400px;
    }
}


/* ================================
   VISUAL POLISH & REFINEMENTS
   Modern Design Enhancements
   ================================ */

@import '../core/variables.css';

/* ==================
   GRADIENT UTILITIES
   Color-based gradients using design system variables
   ================== */

.gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
}

.gradient-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%);
    color: #333;
}

.gradient-success {
    background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
    color: white;
}

.gradient-danger {
    background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
    color: white;
}

.gradient-warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%);
    color: white;
}

.gradient-info {
    background: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%);
    color: white;
}

/* ==================
   BACKDROP EFFECTS
   ================== */

.backdrop-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.backdrop-blur-lg {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ==================
   SEPARATOR & DIVIDER
   ================== */

hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gray-300), transparent);
    margin: 2rem 0;
}

.divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gray-200), transparent);
    margin: 1.5rem 0;
}

/* ==================
   UTILITY CLASSES
   Extracted from inline styles
   ================== */

/* Dashboard utilities */
.dashboard-chart-wrap {
    position: relative;
    height: 310px;
}

/* List utilities */
.help-list {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}

.help-list:last-of-type {
    margin-bottom: 15px;
}

/* Divider utilities */
.help-divider {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--gray-300);
}

/* Curriculum report utilities */
.curriculum-primary-text {
    color: var(--primary-color);
    margin-top: 0.5rem;
}

.table-header-row {
    background-color: var(--gray-100);
    font-weight: bold;
}

.curriculum-stats {
    color: var(--primary-color);
    font-size: 1.1em;
}

/* Message container utilities */
.message-success-box {
    background: linear-gradient(135deg, var(--success-lighter) 0%, var(--success-lightest) 100%);
    padding: 15px;
    border-radius: var(--radius-lg);
}

.message-success-heading {
    color: #155724;
    margin-top: 0;
    font-size: var(--font-size-lg);
}

.message-info-box {
    background: linear-gradient(135deg, var(--info-light) 0%, var(--info-lighter) 100%);
    padding: 15px;
    border-radius: var(--radius-lg);
}

.message-info-heading {
    color: var(--info-darktext);
    margin-top: 0;
    font-size: var(--font-size-lg);
}

.message-error-box {
    background: linear-gradient(135deg, var(--danger-light) 0%, var(--danger-lighter) 100%);
    padding: 10px;
    color: var(--danger-darktext);
}

.message-warning-box {
    background: linear-gradient(135deg, var(--warning-light) 0%, var(--warning-lighter) 100%);
    padding: 10px;
    color: var(--warning-darktext);
}

.message-success-button {
    background: var(--success-color);
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: var(--radius-lg);
    display: inline-block;
    transition: all var(--transition-base);
    font-weight: var(--font-weight-medium);
}

.message-success-button:hover {
    background: var(--success-dark);
    transform: translateY(-2px);
}

.message-success-button-lg {
    font-size: 16px;
    padding: 12px 24px;
}

.text-success {
    color: var(--success-color);
    font-weight: var(--font-weight-medium);
}

.text-success-large {
    color: var(--success-color);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
}
}

.divider-vertical {
    width: 1px;
    background: var(--gray-200);
    margin: 0 1rem;
}

/* ==================
   SHADOW EFFECTS
   ================== */

.shadow-none {
    box-shadow: none;
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

.shadow-2xl {
    box-shadow: var(--shadow-2xl);
}

.shadow-inner {
    box-shadow: var(--shadow-inner);
}

.shadow-subtle {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.hover\:shadow-lg:hover {
    box-shadow: var(--shadow-lg);
}

.hover\:shadow-xl:hover {
    box-shadow: var(--shadow-xl);
}

/* ==================
   GLOW EFFECTS
   ================== */

.glow-primary {
    box-shadow: 0 0 20px rgba(0, 100, 0, 0.3);
}

.glow-secondary {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.glow-danger {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.glow-success {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.glow-warning {
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
}

/* ==================
   RING/OUTLINE EFFECTS
   ================== */

.ring {
    box-shadow: 0 0 0 3px rgba(0, 100, 0, 0.1);
}

.ring-primary {
    box-shadow: 0 0 0 3px rgba(0, 100, 0, 0.2);
}

.ring-secondary {
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}

.ring-danger {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* ==================
   BLUR EFFECTS
   ================== */

.blur-sm {
    filter: blur(4px);
}

.blur-md {
    filter: blur(8px);
}

.blur-lg {
    filter: blur(12px);
}

.blur-xl {
    filter: blur(20px);
}

/* ==================
   BRIGHTNESS & CONTRAST
   ================== */

.brightness-75 {
    filter: brightness(0.75);
}

.brightness-90 {
    filter: brightness(0.9);
}

.brightness-110 {
    filter: brightness(1.1);
}

.brightness-125 {
    filter: brightness(1.25);
}

.contrast-75 {
    filter: contrast(0.75);
}

.contrast-100 {
    filter: contrast(1);
}

.contrast-125 {
    filter: contrast(1.25);
}

.contrast-150 {
    filter: contrast(1.5);
}

/* ==================
   SATURATION
   ================== */

.saturate-0 {
    filter: saturate(0);
}

.saturate-50 {
    filter: saturate(0.5);
}

.saturate-100 {
    filter: saturate(1);
}

.saturate-150 {
    filter: saturate(1.5);
}

.saturate-200 {
    filter: saturate(2);
}

/* ==================
   HUE ROTATION
   ================== */

.hue-rotate-15 {
    filter: hue-rotate(15deg);
}

.hue-rotate-30 {
    filter: hue-rotate(30deg);
}

.hue-rotate-90 {
    filter: hue-rotate(90deg);
}

.hue-rotate-180 {
    filter: hue-rotate(180deg);
}

/* ==================
   OPACITY MASKS
   ================== */

.mask-linear-gradient {
    mask-image: linear-gradient(to bottom, black, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
}

.mask-radial-gradient {
    mask-image: radial-gradient(circle, black, transparent);
    -webkit-mask-image: radial-gradient(circle, black, transparent);
}

/* ==================
   MODERN CORNERS
   ================== */

.rounded-sm {
    border-radius: var(--radius-sm);
}

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

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

.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-2xl {
    border-radius: var(--radius-2xl);
}

.rounded-full {
    border-radius: var(--radius-full);
}

/* ==================
   SMOOTH SCROLLING
   ================== */

html {
    scroll-behavior: smooth;
}

.scroll-smooth {
    scroll-behavior: smooth;
}

/* ==================
   POINTER EVENTS
   ================== */

.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}

/* ==================
   USER SELECT
   ================== */

.select-none {
    user-select: none;
    -webkit-user-select: none;
}

.select-text {
    user-select: text;
    -webkit-user-select: text;
}

.select-all {
    user-select: all;
    -webkit-user-select: all;
}

/* ==================
   ACCENT BORDERS
   ================== */

.border-accent {
    border-left: 4px solid var(--primary-color);
    padding-left: 1rem;
}

.border-accent-top {
    border-top: 4px solid var(--primary-color);
    padding-top: 1rem;
}

.border-accent-secondary {
    border-left: 4px solid var(--secondary-color);
    padding-left: 1rem;
}


/* ================================
   SPACING UTILITIES
   Margin & Padding Helpers
   ================================ */

@import '../core/variables.css';

/* ==================
   MARGINS
   ================== */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }
.mt-5 { margin-top: var(--spacing-2xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }
.mb-5 { margin-bottom: var(--spacing-2xl); }

.mx-auto { margin-left: auto; margin-right: auto; }
.mx-1 { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
.mx-2 { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
.mx-3 { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
.mx-4 { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-2 { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-3 { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.my-4 { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }
.my-5 { margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-2xl); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* ==================
   PADDING
   ================== */

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-sm); }
.p-2 { padding: var(--spacing-md); }
.p-3 { padding: var(--spacing-lg); }
.p-4 { padding: var(--spacing-xl); }
.p-5 { padding: var(--spacing-2xl); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--spacing-sm); }
.pt-2 { padding-top: var(--spacing-md); }
.pt-3 { padding-top: var(--spacing-lg); }
.pt-4 { padding-top: var(--spacing-xl); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--spacing-sm); }
.pb-2 { padding-bottom: var(--spacing-md); }
.pb-3 { padding-bottom: var(--spacing-lg); }
.pb-4 { padding-bottom: var(--spacing-xl); }

.px-1 { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-2 { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-3 { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px-4 { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }

.py-1 { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-2 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-3 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }

/* ==================
   ADDITIONAL SPACING
   ================== */

.padding-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    .mt-md-1 { margin-top: var(--spacing-sm); }
    .mt-md-2 { margin-top: var(--spacing-md); }
    .mt-md-3 { margin-top: var(--spacing-lg); }

    .mb-md-1 { margin-bottom: var(--spacing-sm); }
    .mb-md-2 { margin-bottom: var(--spacing-md); }
    .mb-md-3 { margin-bottom: var(--spacing-lg); }

    .p-md-2 { padding: var(--spacing-md); }
    .p-md-3 { padding: var(--spacing-lg); }
}

@media (max-width: 480px) {
    .mt-sm-1 { margin-top: var(--spacing-sm); }
    .mt-sm-2 { margin-top: var(--spacing-md); }

    .mb-sm-1 { margin-bottom: var(--spacing-sm); }
    .mb-sm-2 { margin-bottom: var(--spacing-md); }

    .p-sm-1 { padding: var(--spacing-sm); }
    .p-sm-2 { padding: var(--spacing-md); }
}


/* ================================
   TEXT UTILITIES
   Typography & Font Helpers
   ================================ */

@import '../core/variables.css';

/* ==================
   TEXT ALIGNMENT
   ================== */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-justify { text-align: justify; }

/* ==================
   TEXT COLORS
   ================== */

.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-success { color: var(--success-color); }
.text-danger { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }
.text-info { color: var(--info-color); }

.text-muted { color: var(--gray-500); }
.text-light { color: var(--gray-400); }
.text-dark { color: var(--gray-900); }
.text-white { color: white; }

/* ==================
   FONT SIZES
   ================== */

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

/* ==================
   FONT WEIGHT
   ================== */

.font-thin { font-weight: 100; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

/* ==================
   TEXT DECORATION
   ================== */

.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* ==================
   TEXT STYLES
   ================== */

.italic { font-style: italic; }
.oblique { font-style: oblique; }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==================
   LETTER SPACING
   ================== */

.tracking-tight { letter-spacing: -0.5px; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.5px; }

/* ==================
   LINE HEIGHT
   ================== */

.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

/* ==================
   WHITESPACE
   ================== */

.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* ==================
   CODE & MONOSPACE
   ================== */

.credential-code {
    background: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
}

/* ==================
   TEXT WEIGHT VARIANTS
   Semantic color + weight combinations (use only when needed)
   ================== */

.text-danger-bold {
    color: var(--danger-color);
    font-weight: var(--font-weight-bold);
}

.text-danger-medium {
    color: var(--danger-color);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

.text-info-bold {
    color: var(--info-color);
    font-weight: var(--font-weight-bold);
}

/* ==================
   TEXT HOVER STATES
   ================== */

.text-danger-hover:hover {
    color: var(--danger-dark);
}

/* ==================
   TEXT UTILITIES EXTENDED
   Deprecated: Use base classes instead
   ================== */

.text-muted-sm {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

.text-muted-md {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

/* ==================
   HEADING STYLES
   For semantic heading styling outside of h1-h6 tags
   ================== */

.heading-section {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-900);
    margin-bottom: var(--spacing-md);
}

.heading-subsection {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-900);
    margin-bottom: var(--spacing-sm);
}

/* ==================
   RESPONSIVE
   ================== */

@media (max-width: 768px) {
    .text-md-sm { font-size: var(--font-size-sm); }
    .text-md-base { font-size: var(--font-size-base); }
    .text-md-lg { font-size: var(--font-size-lg); }
}

@media (max-width: 480px) {
    .text-sm-xs { font-size: var(--font-size-xs); }
    .text-sm-sm { font-size: var(--font-size-sm); }
    .text-sm-base { font-size: var(--font-size-base); }
}


/* ================================
   VISIBILITY UTILITIES
   Display & Visibility Helpers
   ================================ */

@import '../core/variables.css';

/* ==================
   DISPLAY
   ================== */

.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* ==================
   VISIBILITY
   ================== */

.visible { display: block !important; }
.invisible { visibility: hidden; }
.hidden { display: none !important; }

/* ==================
   SCREEN READERS
   ================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ==================
   OPACITY
   ================== */

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ==================
   POINTER EVENTS
   ================== */

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ==================
   OVERFLOW
   Overflow utilities consolidated in utilities/overflow.css
   ================== */

/* ==================
   POSITION
   ================== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

/* ==================
   RESPONSIVE DISPLAY
   ================== */

@media (max-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-flex { display: flex !important; }
    .d-md-grid { display: grid !important; }
}

@media (max-width: 480px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-grid { display: grid !important; }

    .hidden-sm { display: none !important; }
    .visible-sm { display: block !important; }
}

/* ==================
   PRINT UTILITIES
   ================== */

@media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }
}

/* ================================
   ADMIN DASHBOARD STABILIZATION
   Scoped overrides to reduce framework conflicts
   ================================ */

.admin-shell {
    --admin-shell-gutter: clamp(0.2rem, 0.7vw, 0.65rem);
}

.admin-shell .container-main,
.admin-shell .admin-page-content {
    width: 100%;
    margin: 0;
    padding: 0;
}

.admin-shell .container-main > .container,
.admin-shell .admin-page-content > .container,
.admin-shell .admin-main > .container {
    width: 100%;
    max-width: 100%;
    margin: 1rem auto 1.5rem;
    padding-inline: var(--admin-shell-gutter);
}

.admin-shell .admin-main {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    width: 100%;
}

.admin-shell {
    background:
        radial-gradient(circle at 12% 8%, rgba(25, 135, 84, 0.11), transparent 35%),
        radial-gradient(circle at 88% 12%, rgba(255, 213, 79, 0.08), transparent 36%),
        linear-gradient(180deg, #f4f7f5 0%, #eef3ef 100%);
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.35rem var(--admin-shell-gutter) 0.5rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.85rem;
    background: linear-gradient(120deg, #0f5132 0%, #146c43 55%, #198754 100%);
    box-shadow: 0 14px 34px rgba(8, 36, 24, 0.34), 0 2px 0 rgba(255, 255, 255, 0.08) inset;
}

.admin-topbar-title-group {
    min-width: 0;
}

.admin-topbar-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 0.15rem;
}

.admin-topbar-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
}

.admin-topbar-subtitle {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 0.18rem;
}

.admin-topbar-controls {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin-topbar-search {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.62rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.16);
    min-width: min(320px, 38vw);
    backdrop-filter: blur(6px);
}

.admin-topbar-search i {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.86rem;
}

.admin-topbar-search input {
    border: none;
    outline: none;
    width: 100%;
    background: transparent;
    color: #ffffff;
    font-size: 0.84rem;
}

.admin-topbar-search input::placeholder {
    color: rgba(255, 255, 255, 0.78);
}

.admin-topbar-icon-btn {
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-topbar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.26);
}

.admin-topbar-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.22rem 0.46rem;
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.16);
}

.admin-topbar-avatar {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd54f 0%, #ffeb99 100%);
    color: #1b4332;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-topbar-profile-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.admin-topbar-profile-name {
    font-size: 0.74rem;
    font-weight: 600;
    color: #ffffff;
}

.admin-topbar-profile-role {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.78);
}

.admin-shell .dashboard-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.admin-shell .card {
    height: 100%;
    border-left: none !important;
    border: 1px solid #e3ebe5;
    border-radius: 0.9rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.11), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    padding: 1rem;
    background: linear-gradient(165deg, #ffffff 0%, #f7fbf8 100%);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-shell .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.17), 0 1px 0 rgba(255, 255, 255, 0.78) inset;
}

.admin-shell .card-wrapper,
.admin-shell .stat-card,
.admin-shell .stat--card,
.admin-shell .stat,
.admin-shell .profile-card {
    border-left: none !important;
    border: 1px solid #e3ebe5;
    border-radius: 0.9rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.11), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    background: linear-gradient(165deg, #ffffff 0%, #f7fbf8 100%);
}

.admin-shell .card.card-secondary,
.admin-shell .card.card-accent,
.admin-shell .card.card-info,
.admin-shell .card.card-danger,
.admin-shell .card.card-warning,
.admin-shell .card.card-success {
    border-left: none !important;
}

.admin-shell .button-group {
    width: 100%;
}

.admin-shell .button-group .btn {
    width: 100%;
    min-height: 2.5rem;
    white-space: normal;
}

.admin-shell .tab-content {
    width: 100%;
}

.admin-shell .help-content ul {
    list-style: disc;
    padding-left: 1.25rem;
}

.admin-shell .help-content li {
    margin-bottom: 0.5rem;
}

.admin-shell .page-header h1,
.admin-shell .page-header h2,
.admin-shell .dashboard-header {
    display: none;
}

.admin-shell .page-header {
    border: 1px solid #e6ece8;
    border-radius: 0.9rem;
    background: #fff;
    margin-bottom: 0.85rem;
    padding: 0.75rem 0.85rem;
    box-shadow: 0 9px 22px rgba(15, 23, 42, 0.09);
    background: linear-gradient(165deg, #ffffff 0%, #f9fcfa 100%);
}

.admin-shell .table-container,
.admin-shell .table-responsive,
.admin-shell .filter-section {
    border: 1px solid #e6ece8;
    border-radius: 0.9rem;
    background: #fff;
    padding: 0.9rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
    background: linear-gradient(165deg, #ffffff 0%, #f8fbf9 100%);
}

.admin-shell .filter-section {
    margin-bottom: 0.8rem;
}

.admin-shell .status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    white-space: nowrap;
    vertical-align: middle;
}

.admin-shell .status-pill i {
    width: 0.9rem;
    height: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.78rem;
    vertical-align: middle;
    flex-shrink: 0;
}

.admin-shell .status-pill-excellent {
    background: #dbeafe;
    color: #1e3a8a;
    border-color: #93c5fd;
}

.admin-shell .status-pill-pass {
    background: #dcfce7;
    color: #14532d;
    border-color: #86efac;
}

.admin-shell .status-pill-fail {
    background: #fee2e2;
    color: #7f1d1d;
    border-color: #fca5a5;
}

.admin-shell .status-pill-pending {
    background: #fef3c7;
    color: #78350f;
    border-color: #fcd34d;
}

.admin-shell .status-pill-muted {
    background: #e2e8f0;
    color: #334155;
    border-color: #cbd5e1;
}

.admin-shell .table-empty-state {
    padding: 1.35rem 0.85rem !important;
}

.admin-shell .table-empty-state i {
    display: block;
    font-size: 1.35rem;
    color: #64748b;
    margin-bottom: 0.35rem;
}

.admin-shell .table-empty-state span {
    display: block;
    font-weight: 600;
    color: #334155;
}

.admin-shell .table-empty-state small {
    display: block;
    margin-top: 0.22rem;
    color: #64748b;
}

/* Cross-page alignment normalization for table content */
.admin-shell .table-container td.text-center .status-pill,
.admin-shell .table-responsive td.text-center .status-pill {
    margin-inline: auto;
}

.admin-shell .table-container td .status-pill + .status-pill,
.admin-shell .table-responsive td .status-pill + .status-pill {
    margin-top: 0.3rem;
}

.admin-shell td.action-cell {
    white-space: nowrap;
    vertical-align: middle;
    text-align: right;
}

.admin-shell td.action-cell .action-buttons {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
}

/* Canonical scoped table contract (wins against legacy duplicates) */
.admin-shell .table-container,
.admin-shell .table-responsive {
    overflow-x: auto;
}

.admin-shell .table-container > table.data-table,
.admin-shell .table-responsive > table.data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.admin-shell .table-container > table.data-table thead,
.admin-shell .table-responsive > table.data-table thead {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.admin-shell .table-container > table.data-table th,
.admin-shell .table-container > table.data-table td,
.admin-shell .table-responsive > table.data-table th,
.admin-shell .table-responsive > table.data-table td {
    vertical-align: middle;
}

/* Form controls/buttons/icon baseline normalization */
.admin-shell .form-control,
.admin-shell .form-group input,
.admin-shell .form-group select,
.admin-shell .form-group textarea {
    min-height: 2.4rem;
    line-height: 1.25;
}

.admin-shell .btn,
.admin-shell .button-group .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    line-height: 1;
}

.admin-shell .btn i,
.admin-shell .button-group .btn i {
    width: 0.95rem;
    height: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    line-height: 1;
}

.admin-shell .table-container .btn i,
.admin-shell .table-responsive .btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    line-height: 1;
    vertical-align: middle;
    margin-right: 0.25rem;
}

.admin-shell .table-container form.d-inline,
.admin-shell .table-responsive form.d-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.admin-shell .table-container form.d-inline input[type="number"],
.admin-shell .table-container form.d-inline input[type="text"],
.admin-shell .table-container form.d-inline select,
.admin-shell .table-responsive form.d-inline input[type="number"],
.admin-shell .table-responsive form.d-inline input[type="text"],
.admin-shell .table-responsive form.d-inline select {
    min-height: 2rem;
    line-height: 1.2;
    vertical-align: middle;
}

.admin-shell .table-container form.d-inline .btn,
.admin-shell .table-responsive form.d-inline .btn {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

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

.bento-span-8 { grid-column: span 8; }
.bento-span-4 { grid-column: span 4; }
.bento-span-6 { grid-column: span 6; }
.bento-span-12 { grid-column: span 12; }

.dashboard-stat-card .big-number {
    font-size: 2rem;
    line-height: 1;
    margin: 0.45rem 0;
}

.dashboard-stat-card h3 {
    font-size: 0.9rem;
    margin: 0.45rem 0 0.1rem;
}

.dashboard-stat-card .card-description {
    font-size: 0.72rem;
    color: #64748b;
    margin-bottom: 0.6rem;
}

.dashboard-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.55rem;
    color: #0f5132;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.dashboard-quick-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
}

.dashboard-quick-grid .btn {
    width: 100% !important;
    min-height: 2.2rem;
    font-size: 0.78rem;
}

.admin-shell .btn-primary,
.admin-shell .btn-success,
.admin-shell .btn-info,
.admin-shell .btn-warning,
.admin-shell .btn-secondary {
    box-shadow: 0 7px 14px rgba(15, 23, 42, 0.16);
}

.admin-shell .btn-primary:hover,
.admin-shell .btn-success:hover,
.admin-shell .btn-info:hover,
.admin-shell .btn-warning:hover,
.admin-shell .btn-secondary:hover {
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.22);
    transform: translateY(-1px);
}

@media (max-width: 1024px) {
    .admin-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-topbar-controls {
        justify-content: space-between;
    }

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

    .bento-span-8,
    .bento-span-6,
    .bento-span-4 {
        grid-column: span 6;
    }

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

    .main-content-wrapper {
        margin-left: var(--sidebar-width-collapsed) !important;
    }
}

@media (max-width: 768px) {
    .admin-topbar {
        margin-top: 2.8rem;
    }

    .admin-topbar-search {
        min-width: 100%;
    }

    .admin-topbar-profile-info {
        display: none;
    }

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

    .bento-span-8,
    .bento-span-6,
    .bento-span-4,
    .bento-span-12 {
        grid-column: span 1;
    }

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

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

    .admin-shell .container-main > .container,
    .admin-shell .admin-page-content > .container,
    .admin-shell .admin-main > .container {
        margin-top: 0.75rem;
        margin-bottom: 1rem;
        padding-inline: 0.75rem;
    }
}

@media (max-width: 480px) {
    .admin-shell .dashboard-cards {
        grid-template-columns: 1fr;
    }

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

    .main-content-wrapper {
        margin-left: var(--sidebar-width-mobile) !important;
    }
}

/* ==========================================================================
   3) PRINT PREVIEW / REPORT STYLES (merged from print-styles.css)
   ========================================================================== */

/* ===========================
   Print Preview Styling
   =========================== */

.print-preview-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    display: none;
    overflow: auto;
    padding: 20px;
}

.print-preview-wrapper.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.print-preview-modal {
    background: white;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    max-height: 90vh;
    width: 1000px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.print-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: linear-gradient(135deg, #006400 0%, #004d00 100%);
    color: white;
}

.print-preview-header h2 {
    margin: 0;
    font-size: 18px;
}

.print-preview-actions {
    display: flex;
    gap: 10px;
}

.print-btn, .preview-btn, .download-btn, .close-btn {
    background: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.print-btn:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

.preview-btn {
    background: #006400;
    color: white;
}

.preview-btn:hover {
    background: #004d00;
}

.download-btn {
    background: #FFD700;
    color: #333;
}

.download-btn:hover {
    background: #ffc700;
}

.close-btn {
    background: transparent;
    color: white;
    border: 1px solid white;
    padding: 6px 14px;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.print-preview-content {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
    background: #fafafa;
}

.print-preview-content iframe {
    border: none;
    width: 100%;
    height: 100%;
}

/* ===========================
   Filter Display Styling
   =========================== */

.print-filters-panel {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 12px;
}

.filters-header h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-badge {
    background: #006400;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    min-width: 20px;
    text-align: center;
}

.filters-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-group input,
.filter-group select,
.filter-group textarea {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.filter-group input:focus,
.filter-group select:focus,
.filter-group textarea:focus {
    outline: none;
    border-color: #006400;
    box-shadow: 0 0 0 3px rgba(0, 100, 0, 0.1);
}

.filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.filter-actions button {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.apply-filters-btn {
    background: #006400;
    color: white;
    flex: 1;
}

.apply-filters-btn:hover {
    background: #004d00;
    box-shadow: 0 2px 8px rgba(0, 100, 0, 0.3);
}

.clear-filters-btn {
    background: #f5f5f5;
    color: #333;
    flex: 1;
}

.clear-filters-btn:hover {
    background: #efefef;
}

.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.filter-item {
    background: #e8f5e9;
    border: 1px solid #81c784;
    color: #2e7d32;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-item-remove {
    background: none;
    border: none;
    color: #2e7d32;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    margin-left: 4px;
}

.filter-item-remove:hover {
    opacity: 0.8;
}

/* ===========================
   Report Content Styling
   =========================== */

.report-container {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, #006400 0%, #004d00 100%);
    color: white;
}

.report-title-section h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.report-title-section p {
    margin: 4px 0 0 0;
    font-size: 13px;
    opacity: 0.9;
}

.report-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.stat-box {
    background: #f5f5f5;
    border-left: 4px solid #006400;
    padding: 15px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.stat-box:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.stat-label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #006400;
}

.stat-change {
    font-size: 11px;
    color: #999;
    margin-top: 5px;
}

/* ===========================
   Table Styling for Print
   =========================== */

.report-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.report-table thead {
    background: #006400;
    color: white;
}

.report-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid #005500;
    white-space: nowrap;
}

.report-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}

.report-table tbody tr {
    transition: background-color 0.2s ease;
}

.report-table tbody tr:hover {
    background: #f9f9f9;
}

.report-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.report-table tbody tr.highlight {
    background: #e8f5e9;
}

/* ===========================
   Print Media Query
   =========================== */

@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    body {
        background: white;
        margin: 0;
        padding: 0;
    }
    
    .print-preview-wrapper,
    .print-filters-panel,
    .print-preview-header,
    .print-preview-actions,
    .filter-actions,
    .page-header,
    nav,
    .sidebar,
    .no-print {
        display: none !important;
    }
    
    .print-preview-content,
    .report-container {
        box-shadow: none;
        border: none;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .print-preview-modal {
        box-shadow: none;
        border: none;
        max-width: 100%;
        max-height: 100%;
        width: 100%;
    }
    
    .report-header {
        page-break-after: avoid;
    }
    
    .report-table {
        page-break-inside: avoid;
    }
    
    .report-table thead {
        display: table-header-group;
        page-break-inside: avoid;
    }
    
    .report-table tbody tr {
        page-break-inside: avoid;
    }
    
    .stat-box {
        page-break-inside: avoid;
    }
    
    @page {
        size: A4;
        margin: 2cm;
    }
    
    @page :first {
        margin-top: 2cm;
    }
}

/* ===========================
   Responsive Design
   =========================== */

@media (max-width: 1200px) {
    .print-preview-modal {
        width: 95%;
    }
    
    .filters-content {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

@media (max-width: 768px) {
    .print-preview-modal {
        max-height: 95vh;
        width: 100%;
    }
    
    .print-preview-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .print-preview-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .print-btn,
    .preview-btn,
    .download-btn {
        flex: 1;
        min-width: 100px;
    }
    
    .filters-content {
        grid-template-columns: 1fr;
    }
    
    .report-stats {
        grid-template-columns: 1fr;
    }
    
    .report-table {
        font-size: 12px;
    }
    
    .report-table th,
    .report-table td {
        padding: 8px 6px;
    }
    
    .report-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===========================
   Accessibility & Animation
   =========================== */

.print-btn:focus,
.preview-btn:focus,
.download-btn:focus,
.clear-filters-btn:focus,
.apply-filters-btn:focus {
    outline: 2px solid #006400;
    outline-offset: 2px;
}

.print-preview-wrapper {
    transition: opacity 0.3s ease;
}

.print-preview-modal {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #006400;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}