:root {
            --primary-color: #0f3557;
            --secondary-color: #1f5e8f;
            --accent-color: #f2a83b;
            --light-bg: #eef3f9;
            --surface-bg: #ffffff;
            --text-dark: #1f2d3d;
            --text-muted: #5e6e80;
            --success-color: #2f9e68;
            --danger-color: #d9534f;
            --border-soft: #d9e2ec;
            --shadow-sm: 0 2px 8px rgba(15, 53, 87, 0.08);
            --shadow-md: 0 8px 16px rgba(15, 53, 87, 0.12);
            --shadow-lg: 0 16px 32px rgba(15, 53, 87, 0.16);
            --transition-fast: 0.15s ease-in-out;
            --transition-base: 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
            --transition-slow: 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
            --btn-radius: 10px;
            --btn-radius-sm: 10px;
            --btn-min-height: 42px;
            --btn-min-height-sm: 36px;
            --success-strong: #2f9e68;
            --success-soft: #48b37d;
            --danger-strong: #c84440;
            --danger-soft: #e06761;
            --warning-strong: #d79324;
            --warning-soft: #f2b347;
            --info-strong: #257ea2;
            --info-soft: #3da7c8;
            --dark-strong: #1f2d3d;
            --dark-soft: #3c4f65;
            --secondary-strong: #3f5974;
            --secondary-soft: #6f87a0;
            --light-strong: #f9fbfe;
            --light-soft: #e7eef6;
            --focus-ring: 0 0 0 0.28rem rgba(31, 94, 143, 0.18);
            --surface-strong: #ffffff;
            --surface-soft: #f8fbff;
            --surface-muted: #eef4fb;
            --field-border: #cfd9e6;
            --field-border-strong: #bfd0e2;
            --table-head-border: #d1ddeb;
            --table-row-border: #eef3f8;
        }

        a,
        button,
        .btn,
        .nav-link,
        .card,
        .alert,
        .form-control,
        .form-select,
        .list-group-item,
        .dropdown-item,
        .btn-close,
        .sidebar .nav-link,
        .brand-title i {
            transition:
                color var(--transition-fast),
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-base),
                transform var(--transition-base),
                opacity var(--transition-fast);
        }

        html {
            scroll-behavior: smooth;
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *,
            *::before,
            *::after {
                animation: none !important;
                transition-duration: 0.01ms !important;
                transition-delay: 0ms !important;
                scroll-behavior: auto !important;
            }
        }

        body {
            font-family: 'Manrope', sans-serif;
            background:
                radial-gradient(circle at 10% 15%, rgba(31, 94, 143, 0.12), transparent 28%),
                radial-gradient(circle at 85% 6%, rgba(242, 168, 59, 0.15), transparent 24%),
                linear-gradient(180deg, #f8fbff 0%, #eef3f9 55%, #e9f0f8 100%);
            background-attachment: fixed;
            color: var(--text-dark);
            min-height: 100vh;
            width: 100%;
            overflow-x: hidden;
            line-height: 1.55;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

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

        img,
        svg,
        video,
        canvas {
            max-width: 100%;
            height: auto;
        }

        button,
        input,
        select,
        textarea {
            font: inherit;
        }

        a {
            text-underline-offset: 0.16em;
            text-decoration-thickness: 0.08em;
        }

        ::selection {
            background: rgba(31, 94, 143, 0.22);
            color: var(--text-dark);
        }

        h1, h2, h3, h4, h5, h6,
        .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
            font-family: 'Manrope', sans-serif;
            font-weight: 600;
            line-height: 1.18;
            letter-spacing: -0.02em;
            text-wrap: balance;
        }

        p,
        li,
        .form-label,
        .form-text,
        .table,
        .dropdown-item,
        .alert,
        .breadcrumb,
        .list-group-item {
            line-height: 1.5;
        }

        p,
        li,
        .table,
        .list-group-item {
            color: var(--text-dark);
        }

        .schedule-day-date {
            color: #fff !important;
        }

        .group-count-note {
            font-size: 0.82rem;
        }

        small,
        .small,
        .text-muted,
        .form-text,
        ::placeholder {
            color: var(--text-muted) !important;
        }

        @media (max-width: 768px) {
            body {
                background-attachment: scroll;
                background:
                    linear-gradient(180deg, #f8fbff 0%, #edf3f9 62%, #e8eff7 100%);
            }
        }

        .brand-title {
            font-family: 'Manrope', sans-serif;
            letter-spacing: 0.5px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.7rem;
        }

        .brand-title i {
            transition: all var(--transition-base);
        }

        .main-shell {
            margin-top: 2rem;
            margin-bottom: 1.5rem;
        }

        .page-fade {
            animation: fadeUp 0.35s ease-out both;
            will-change: opacity, transform;
        }

        /* ===== ANIMATIONS ===== */
        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(15px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

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

        @keyframes glow {
            0%, 100% {
                box-shadow: 0 0 20px rgba(242, 168, 59, 0.2);
            }
            50% {
                box-shadow: 0 0 30px rgba(242, 168, 59, 0.4);
            }
        }

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

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

        @keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes shimmer {
            0% {
                background-position: -1000px 0;
            }
            100% {
                background-position: 1000px 0;
            }
        }
        
        /* ===== NAVBAR ===== */
        .navbar-custom {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            box-shadow: var(--shadow-md);
            padding: 0.8rem 0;
            backdrop-filter: saturate(120%) blur(10px);
            overflow: visible;
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .navbar-brand {
            font-size: clamp(0.88rem, 1.1vw, 1.15rem);
            font-weight: 700;
            color: white !important;
            letter-spacing: 0.5px;
            max-width: min(56vw, 860px);
            white-space: normal;
            line-height: 1.2;
            overflow-wrap: anywhere;
            transition: all var(--transition-base);
        }
        
        .navbar-brand:hover {
            transform: scale(1.02);
        }

        .nav-link {
            color: rgba(255,255,255,0.85) !important;
            margin: 0 0.5rem;
            border-radius: 8px;
            padding: 0.55rem 0.85rem !important;
            transition: all var(--transition-base);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            white-space: nowrap;
            position: relative;
            overflow: hidden;
        }

        .nav-link:focus-visible,
        .dropdown-item:focus-visible,
        .btn:focus-visible,
        .btn-close:focus-visible,
        .form-control:focus-visible,
        .form-select:focus-visible,
        .navbar-toggler:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
        }

        .nav-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.1);
            transition: left var(--transition-base);
            z-index: -1;
        }

        .nav-link:hover::before {
            left: 0;
        }

        .navbar-nav {
            align-items: center;
        }

        .navbar-nav .nav-item {
            display: flex;
            align-items: center;
        }

        .navbar-nav .nav-link i {
            flex: 0 0 auto;
            line-height: 1;
            transition: transform var(--transition-base);
        }

        .nav-link:hover i {
            transform: translateY(-2px);
        }
        
        .nav-link:hover {
            color: white !important;
            background-color: rgba(255, 255, 255, 0.15);
        }
        
        .nav-link.active {
            color: var(--accent-color) !important;
            background-color: rgba(255, 255, 255, 0.2);
            box-shadow: inset 0 0 12px rgba(0,0,0,0.15);
        }

        #userMenu {
            max-width: 280px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            vertical-align: middle;
        }

        .navbar-custom .container-fluid,
        .navbar-custom .navbar-collapse {
            overflow: visible;
        }

        .dropdown-menu {
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            box-shadow: var(--shadow-lg);
            background: white;
            margin-top: 0.5rem !important;
        }

        .dropdown-item {
            color: var(--text-dark);
            transition: all var(--transition-fast);
        }

        .dropdown-item:hover {
            background-color: var(--light-bg);
            color: var(--secondary-color);
            padding-left: 1.75rem;
        }
        
        /* ===== SIDEBAR ===== */
        .sidebar {
            background: white;
            border-right: 2px solid #f0f3f7;
            padding: 2rem 0;
        }
        
        .sidebar .nav-link {
            color: var(--text-dark);
            padding: 0.8rem 1.5rem;
            border-left: 4px solid transparent;
            transition: all var(--transition-base);
            position: relative;
            margin: 0.25rem 0;
        }

        .sidebar .nav-link i {
            margin-right: 0.7rem;
            transition: transform var(--transition-base);
        }
        
        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            background: linear-gradient(90deg, var(--light-bg) 0%, transparent 100%);
            color: var(--secondary-color);
            border-left-color: var(--secondary-color);
            padding-left: 1.7rem;
        }

        .sidebar .nav-link:hover i,
        .sidebar .nav-link.active i {
            transform: translateX(3px);
        }
        
        /* ===== MAIN CONTENT ===== */
        .main-content {
            background-color: var(--surface-bg);
            border: 1px solid var(--border-soft);
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 12px 28px rgba(15, 53, 87, 0.09);
            margin-top: 2rem;
        }
        
        /* ===== CARDS ===== */
        .card {
            border: 1px solid #e2eaf3;
            border-radius: 14px;
            box-shadow: var(--shadow-sm);
            background: white;
            overflow: hidden;
        }

        @media (hover: hover) and (pointer: fine) {
            .card:hover {
                box-shadow: 0 14px 30px rgba(15, 53, 87, 0.14);
                transform: translateY(-2px);
                border-color: rgba(31, 94, 143, 0.45);
            }
        }
        
        .card-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            border: none;
            padding: 1.35rem 1.5rem;
            font-weight: 600;
            letter-spacing: 0.3px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .card-body {
            padding: 1.5rem;
        }

        .card-body > :last-child {
            margin-bottom: 0;
        }
        
        /* ===== BUTTONS ===== */
        .btn {
            border: 1px solid transparent;
            border-radius: var(--btn-radius);
            font-weight: 600;
            padding: 0.6rem 1.4rem;
            transition: all var(--transition-base);
            position: relative;
            overflow: hidden;
            letter-spacing: 0.3px;
            min-height: var(--btn-min-height);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            line-height: 1.2;
            text-decoration: none;
            isolation: isolate;
        }

        .btn:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
        }

        .btn:disabled,
        .btn.disabled {
            opacity: 0.65;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: none !important;
            filter: saturate(0.85);
        }

        .btn-sm {
            min-height: var(--btn-min-height-sm);
            border-radius: var(--btn-radius-sm);
            padding: 0.45rem 0.9rem;
        }

        .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 0.6s, height 0.6s;
        }

        .btn:active::before {
            width: 300px;
            height: 300px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(15, 53, 87, 0.2);
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #0d304f 0%, #1b5380 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(15, 53, 87, 0.3);
        }

        .btn-primary:active {
            transform: translateY(0);
            box-shadow: 0 2px 10px rgba(15, 53, 87, 0.2);
        }

        .btn-outline-secondary {
            border: 2px solid var(--secondary-color);
            color: var(--secondary-color);
            font-weight: 600;
            transition: all var(--transition-base);
        }

        .btn-outline-primary {
            border: 2px solid var(--secondary-color);
            color: var(--secondary-color);
            background-color: transparent;
            font-weight: 600;
        }

        .btn-secondary,
        .btn-outline-secondary,
        .btn-outline-primary {
            border-radius: var(--btn-radius);
            padding-inline: 1.05rem;
        }

        .btn-success,
        .btn-danger,
        .btn-warning,
        .btn-info,
        .btn-dark,
        .btn-light,
        .btn-secondary {
            border-width: 1px;
        }

        .btn-outline-primary:hover {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(31, 94, 143, 0.25);
        }

        .btn-outline-secondary:hover {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(31, 94, 143, 0.25);
        }

        .btn-view-pair {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border: 1px solid rgba(15, 53, 87, 0.15);
            color: #ffffff;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(15, 53, 87, 0.2);
            transition: all var(--transition-base);
        }

        .btn-view-pair:hover {
            background: linear-gradient(135deg, #0d304f 0%, #1b5380 100%);
            border-color: rgba(15, 53, 87, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(15, 53, 87, 0.3);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #eef4fb 0%, #dbe8f4 100%);
            border: 2px solid #c6d7e8;
            color: var(--primary-color);
            box-shadow: 0 4px 14px rgba(15, 53, 87, 0.1);
            transition: all var(--transition-base);
        }

        .btn-secondary:hover {
            background: linear-gradient(135deg, #f8fbff 0%, #d3e1ee 100%);
            border-color: #aec4d9;
            color: #0d304f;
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(15, 53, 87, 0.16);
        }

        .btn-secondary:active {
            transform: translateY(0);
            box-shadow: 0 3px 10px rgba(15, 53, 87, 0.1);
        }

        .btn-success {
            background: linear-gradient(135deg, var(--success-strong) 0%, var(--success-soft) 100%);
            border-color: var(--success-strong);
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(47, 158, 104, 0.22);
        }

        .btn-success:hover {
            background: linear-gradient(135deg, #27885a 0%, #3da16f 100%);
            border-color: #27885a;
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(47, 158, 104, 0.28);
        }

        .btn-danger {
            background: linear-gradient(135deg, var(--danger-strong) 0%, var(--danger-soft) 100%);
            border-color: var(--danger-strong);
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(216, 83, 79, 0.22);
        }

        .btn-danger:hover {
            background: linear-gradient(135deg, #b53a37 0%, #d65a55 100%);
            border-color: #b53a37;
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(216, 83, 79, 0.28);
        }

        .btn-warning {
            background: linear-gradient(135deg, var(--warning-strong) 0%, var(--warning-soft) 100%);
            border-color: var(--warning-strong);
            color: #1f2d3d;
            box-shadow: 0 4px 15px rgba(242, 168, 59, 0.24);
        }

        .btn-warning:hover {
            background: linear-gradient(135deg, #c88418 0%, #e4a233 100%);
            border-color: #c88418;
            color: #15202c;
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(242, 168, 59, 0.28);
        }

        .btn-info {
            background: linear-gradient(135deg, var(--info-strong) 0%, var(--info-soft) 100%);
            border-color: var(--info-strong);
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(37, 126, 162, 0.22);
        }

        .btn-info:hover {
            background: linear-gradient(135deg, #1f6c8b 0%, #3095b5 100%);
            border-color: #1f6c8b;
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(37, 126, 162, 0.28);
        }

        .btn-dark {
            background: linear-gradient(135deg, var(--dark-strong) 0%, var(--dark-soft) 100%);
            border-color: var(--dark-strong);
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(31, 45, 61, 0.22);
        }

        .btn-dark:hover {
            background: linear-gradient(135deg, #16212d 0%, #314154 100%);
            border-color: #16212d;
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(31, 45, 61, 0.28);
        }

        .btn-light {
            background: linear-gradient(135deg, var(--light-strong) 0%, var(--light-soft) 100%);
            border-color: #d4e0ee;
            color: var(--primary-color);
            box-shadow: 0 4px 14px rgba(15, 53, 87, 0.08);
        }

        .btn-light:hover {
            background: linear-gradient(135deg, #f8fbff 0%, #e4edf7 100%);
            border-color: #bfd0e2;
            color: #0d304f;
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(15, 53, 87, 0.12);
        }

        .btn-link {
            min-height: auto;
            padding: 0;
            border: none;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: var(--secondary-color);
            font-weight: 700;
            text-decoration: none;
            letter-spacing: 0;
        }

        .btn-link::before {
            display: none;
        }

        .btn-link:hover,
        .btn-link:focus-visible {
            background: transparent;
            color: var(--primary-color);
            text-decoration: underline;
            transform: none;
            box-shadow: none;
        }

        .btn-outline-success,
        .btn-outline-danger,
        .btn-outline-warning,
        .btn-outline-info,
        .btn-outline-secondary,
        .btn-outline-light,
        .btn-outline-dark {
            background-color: rgba(255, 255, 255, 0.82);
            font-weight: 600;
            transition: all var(--transition-base);
            border-width: 2px;
            box-shadow: 0 3px 10px rgba(15, 53, 87, 0.06);
        }

        .btn-outline-success {
            border-color: var(--success-strong);
            color: var(--success-strong);
            background: linear-gradient(135deg, rgba(47, 158, 104, 0.08) 0%, rgba(72, 179, 125, 0.03) 100%);
        }

        .btn-outline-danger {
            border-color: var(--danger-strong);
            color: var(--danger-strong);
            background: linear-gradient(135deg, rgba(200, 68, 64, 0.08) 0%, rgba(224, 103, 97, 0.03) 100%);
        }

        .btn-outline-warning {
            border-color: var(--warning-strong);
            color: #a56d11;
            background: linear-gradient(135deg, rgba(215, 147, 36, 0.1) 0%, rgba(242, 179, 71, 0.04) 100%);
        }

        .btn-outline-info {
            border-color: var(--info-strong);
            color: var(--info-strong);
            background: linear-gradient(135deg, rgba(37, 126, 162, 0.09) 0%, rgba(61, 167, 200, 0.03) 100%);
        }

        .btn-outline-secondary {
            border-color: var(--secondary-color);
            color: var(--secondary-color);
            background: linear-gradient(135deg, rgba(31, 94, 143, 0.08) 0%, rgba(63, 89, 116, 0.03) 100%);
        }

        .btn-outline-dark {
            border-color: var(--dark-strong);
            color: var(--dark-strong);
            background: linear-gradient(135deg, rgba(31, 45, 61, 0.09) 0%, rgba(60, 79, 101, 0.03) 100%);
        }

        .btn-outline-light {
            border-color: rgba(255, 255, 255, 0.82);
            color: #ffffff;
        }

        .btn-outline-light:hover {
            background: rgba(255, 255, 255, 0.14);
            border-color: #ffffff;
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 255, 255, 0.14);
        }

        .btn-outline-success:hover {
            background: linear-gradient(135deg, var(--success-strong) 0%, var(--success-soft) 100%);
            border-color: var(--success-strong);
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(47, 158, 104, 0.24);
        }

        .btn-outline-danger:hover {
            background: linear-gradient(135deg, var(--danger-strong) 0%, var(--danger-soft) 100%);
            border-color: var(--danger-strong);
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(216, 83, 79, 0.24);
        }

        .btn-outline-warning:hover {
            background: linear-gradient(135deg, var(--warning-strong) 0%, var(--warning-soft) 100%);
            border-color: var(--warning-strong);
            color: #1f2d3d;
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(242, 168, 59, 0.24);
        }

        .btn-outline-info:hover {
            background: linear-gradient(135deg, var(--info-strong) 0%, var(--info-soft) 100%);
            border-color: var(--info-strong);
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(37, 126, 162, 0.24);
        }

        .btn-outline-dark:hover {
            background: linear-gradient(135deg, var(--dark-strong) 0%, var(--dark-soft) 100%);
            border-color: var(--dark-strong);
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(31, 45, 61, 0.24);
        }

        .btn-outline-secondary:hover {
            background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-strong) 100%);
            border-color: var(--secondary-color);
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(31, 94, 143, 0.24);
        }

        @media (hover: none), (pointer: coarse) {
            .btn:hover,
            .btn-view-pair:hover,
            .btn-view-hw:hover,
            .nav-link:hover i,
            .sidebar .nav-link:hover i,
            .alert-dismissible .btn-close:hover {
                transform: none;
            }
        }

        .workspace-page-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .workspace-page-copy {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            gap: 0.2rem;
        }

        .workspace-page-title {
            margin: 0;
            font-size: clamp(1.7rem, 2vw, 2.2rem);
            line-height: 1.15;
        }

        .workspace-page-subtitle,
        .workspace-page-meta {
            margin: 0;
            color: var(--text-muted);
        }

        .workspace-page-meta {
            font-size: 0.95rem;
        }

        .workspace-tabs-wrap {
            background: linear-gradient(135deg, #eef4fb 0%, #dfeaf7 100%);
            border-radius: 16px;
            padding: 12px;
            border: 1px solid #d4e0ee;
            box-shadow: var(--shadow-sm);
        }

        .workspace-tabs-wrap .nav-pills {
            gap: 10px;
            align-items: stretch;
        }

        .workspace-tabs-wrap .nav-item {
            display: flex;
        }

        .workspace-tabs-wrap .nav-link {
            background-color: #1a3a52;
            color: #ffffff !important;
            border-radius: 12px;
            font-weight: 700;
            padding: 0.85rem 1rem;
            border: 1px solid rgba(255, 255, 255, 0.15);
            width: 100%;
            min-height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
        }

        .workspace-tabs-wrap .nav-link:hover,
        .workspace-tabs-wrap .nav-link:focus {
            background-color: #2d5a8c;
            color: #ffffff !important;
            transform: translateY(-1px);
        }

        .workspace-tabs-wrap .nav-link.active,
        .workspace-tabs-wrap .nav-link[aria-current='page'] {
            background: linear-gradient(135deg, #2d5a8c 0%, #1f4b74 100%);
            color: #ffffff !important;
            border-color: rgba(255, 255, 255, 0.28);
            box-shadow: 0 8px 18px rgba(31, 75, 116, 0.28);
        }

        .workspace-toolbar {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: center;
            gap: 0.5rem;
        }

        .workspace-toolbar .btn {
            flex: 0 1 auto;
        }

        .table th {
            text-align: left;
            vertical-align: middle;
        }

        .table td {
            vertical-align: middle;
        }

        .table th.text-start,
        .table td.text-start {
            text-align: left !important;
        }

        .table th.text-center,
        .table td.text-center {
            text-align: center !important;
        }

        .table th.text-end,
        .table td.text-end {
            text-align: right !important;
        }

        .workspace-filter-card {
            border: 1px solid var(--border-soft);
            box-shadow: var(--shadow-sm);
            background: rgba(255, 255, 255, 0.96);
        }

        .schedule-day-card {
            overflow: hidden;
            border: 1px solid var(--border-soft);
            box-shadow: var(--shadow-sm);
        }

        .schedule-day-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.75rem;
            padding: 0.95rem 1rem;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: #ffffff;
        }

        .schedule-day-header,
        .schedule-day-header * {
            color: #ffffff !important;
        }

        .schedule-day-header .small {
            color: #ffffff !important;
        }

        .schedule-day-body {
            padding: 0.75rem 1rem;
        }

        .schedule-lesson-item {
            border-bottom: 1px solid #d9e2ec;
            padding: 0.75rem 0.25rem;
        }

        .schedule-lesson-item:last-child {
            border-bottom: none;
            padding-bottom: 0.25rem;
        }

        .schedule-lesson-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 0.9rem;
        }

        .schedule-lesson-time {
            font-size: 1.02rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
            color: var(--primary-color);
        }

        .schedule-lesson-title {
            font-size: 1.35rem;
            font-weight: 700;
            line-height: 1.22;
            margin-bottom: 0.25rem;
        }

        .schedule-lesson-meta,
        .schedule-lesson-extra {
            color: var(--text-muted);
            line-height: 1.35;
        }

        .schedule-lesson-meta {
            margin-bottom: 0.3rem;
        }

        .schedule-lesson-extra {
            margin-bottom: 0.2rem;
        }

        .schedule-actions {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.55rem;
            min-width: 172px;
        }

        .schedule-action-btn {
            min-width: 168px;
            white-space: normal;
            line-height: 1.2;
        }
        
        /* ===== FORMS ===== */
        .form-control,
        .form-select {
            border-radius: 10px;
            border: 1.5px solid var(--field-border);
            padding: 0.7rem 1rem;
            transition: all var(--transition-base);
            background: linear-gradient(180deg, var(--surface-strong) 0%, #fbfdff 100%);
            min-height: 46px;
            color: var(--text-dark);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
        }

        select.form-select,
        select.form-control {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m2 5 6 6 6-6' fill='none' stroke='%2331556e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3C/svg%3E");
            background-position: right 1rem center;
            background-repeat: no-repeat;
            background-size: 1rem 1rem;
            padding-right: 3rem;
        }

        select.form-select[multiple],
        select.form-control[multiple] {
            background-image: none;
            padding-right: 1rem;
        }

        .form-control-lg,
        .form-select-lg {
            min-height: 54px;
            border-radius: 12px;
            padding: 0.85rem 1.1rem;
        }

        .input-group {
            border-radius: 12px;
        }

        .input-group > .form-control,
        .input-group > .form-select,
        .input-group > .input-group-text,
        .input-group > .btn {
            min-height: 46px;
        }

        .input-group-text {
            border: 1.5px solid var(--field-border);
            border-radius: 10px;
            background: linear-gradient(180deg, var(--surface-soft) 0%, var(--surface-muted) 100%);
            color: var(--primary-color);
            font-weight: 600;
            padding: 0.7rem 0.95rem;
        }

        .input-group .form-control:not(:first-child),
        .input-group .form-select:not(:first-child) {
            border-left-width: 0;
        }

        .input-group .input-group-text + .form-control,
        .input-group .input-group-text + .form-select {
            border-left-width: 0;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 0.3rem rgba(31, 94, 143, 0.15);
            background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
        }

        .form-control:hover,
        .form-select:hover,
        .input-group-text:hover {
            border-color: var(--field-border-strong);
        }

        .form-control:disabled,
        .form-select:disabled,
        .form-control[readonly] {
            background: linear-gradient(180deg, #f5f8fc 0%, #eef4fb 100%);
            color: #6d7e90;
            border-color: #d9e4ef;
            box-shadow: none;
        }

        .form-text {
            color: var(--text-muted);
            font-size: 0.88rem;
        }

        .form-control::placeholder {
            color: #9ca3af;
            font-weight: 500;
        }
        
        .form-label {
            color: var(--text-dark);
            font-weight: 600;
            margin-bottom: 0.6rem;
            display: flex;
            align-items: center;
            gap: 0.35rem;
            letter-spacing: 0.2px;
        }

        .form-label.required::after {
            content: '*';
            color: var(--danger-color);
        }
        
        /* ===== ALERTS ===== */
        .alert {
            border: none;
            border-radius: 12px;
            border-left: 4px solid;
            padding: 1rem 1.35rem;
            box-shadow: 0 8px 18px rgba(15, 53, 87, 0.07);
        }

        .alert-success {
            background: linear-gradient(135deg, #dff5e5 0%, #eefaf1 100%);
            color: #155724;
            border-left-color: #28a745;
        }
        
        .alert-danger {
            background: linear-gradient(135deg, #fde2e4 0%, #fff1f2 100%);
            color: #721c24;
            border-left-color: #dc3545;
        }
        
        .alert-info {
            background: linear-gradient(135deg, #dff3f8 0%, #eef8fd 100%);
            color: #0c5460;
            border-left-color: #17a2b8;
        }

        .alert-warning {
            background: linear-gradient(135deg, #fff3d8 0%, #fff8ea 100%);
            color: #856404;
            border-left-color: #ffc107;
        }

        .alert-secondary {
            background: linear-gradient(135deg, #edf2f7 0%, #f8fbff 100%);
            color: #44576a;
            border-left-color: #7b8fa4;
        }

        .alert-light {
            background: linear-gradient(135deg, #ffffff 0%, #f6f9fc 100%);
            color: #485869;
            border-left-color: #d2dee9;
            border-top: 1px solid #ebf1f7;
            border-right: 1px solid #ebf1f7;
            border-bottom: 1px solid #ebf1f7;
        }

        .alert a {
            color: inherit;
            font-weight: 700;
        }

        .alert-dismissible {
            padding-right: 4rem;
        }
        
        .alert-dismissible .btn-close {
            position: absolute;
            top: 50%;
            right: 0.9rem;
            transform: translateY(-50%);
            width: 1.75rem;
            height: 1.75rem;
            padding: 0.4rem;
            border-radius: 50%;
            background-size: 0.8rem;
            transition: all var(--transition-fast);
        }

        .alert-dismissible .btn-close:hover {
            transform: translateY(-50%) rotate(90deg);
        }

        @media (hover: none) {
            .alert-dismissible .btn-close:hover {
                transform: translateY(-50%);
            }
        }

        .alert i {
            margin-right: 0.6rem;
        }

        .expandable-text {
            display: block;
            white-space: pre-line;
            word-break: break-word;
        }

        .expandable-text.is-collapsed {
            display: -webkit-box;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

        .expandable-toggle {
            margin-top: 0.5rem;
            padding: 0;
            border: none;
            background: none;
            color: var(--primary-color);
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 0.18rem;
        }

        .expandable-toggle:hover {
            color: #0f3557;
        }
        
        /* ===== TABLES ===== */
        .table {
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 2rem;
            background: var(--surface-strong);
            border: 1px solid var(--table-row-border);
            font-size: 0.94rem;
            box-shadow: 0 10px 22px rgba(15, 53, 87, 0.06);
            table-layout: auto;
            width: 100%;
        }

        .table-responsive {
            border-radius: 10px;
            margin-bottom: 2rem;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            position: relative;
        }

        .table-wrapper {
            overflow-x: auto;
            border-radius: 10px;
            -webkit-overflow-scrolling: touch;
            background: var(--surface-strong);
        }
        
        .table-hover tbody tr {
            transition: all 0.2s ease;
        }

        .table-hover tbody tr:hover {
            background: linear-gradient(90deg, rgba(31, 94, 143, 0.06) 0%, rgba(255, 255, 255, 0.96) 18%);
            box-shadow: inset 3px 0 0 var(--secondary-color);
        }
        
        .table thead th {
            background: linear-gradient(180deg, #eef3f9 0%, #e3ebf5 100%);
            color: #0f3557;
            border-top: 1px solid var(--table-head-border);
            border-bottom: 2px solid var(--table-head-border);
            border-right: 1px solid #dbe4ef;
            text-transform: uppercase;
            font-size: 0.75rem;
            font-weight: 700;
            padding: 0.72rem 0.72rem;
            letter-spacing: 0.7px;
            white-space: normal;
            word-break: normal;
            overflow-wrap: normal;
            vertical-align: middle;
            position: sticky;
            top: 0;
            z-index: 10;
            box-shadow: inset 0 -1px 0 #c7d6e8;
        }

        .table thead th:first-child {
            border-radius: 10px 0 0 0;
            border-left: 1px solid var(--table-head-border);
        }

        .table thead th:last-child {
            border-radius: 0 10px 0 0;
        }

        .table tbody td {
            vertical-align: middle;
            padding: 0.7rem 0.72rem;
            border: none;
            border-bottom: 1px solid var(--table-row-border);
            font-size: 0.92rem;
            line-height: 1.35;
            word-break: break-word;
            color: #3d4a5e;
            overflow-wrap: break-word;
        }

        .table th,
        .table td {
            width: auto !important;
            min-width: 0 !important;
        }

        .table tbody td strong {
            color: #0f3557;
            font-weight: 600;
        }

        .table td:last-child .student-journal-pair-link {
            width: 7rem;
            min-width: 7rem;
            text-align: center;
            line-height: 1.2;
            white-space: normal;
            word-break: keep-all;
            overflow-wrap: normal;
        }

        .table tbody tr {
            border-bottom: 1px solid var(--table-row-border);
            transition: all 0.2s ease;
            background: var(--surface-strong);
            position: relative;
        }

        .table-striped > tbody > tr:nth-of-type(odd) > * {
            background-color: rgba(248, 251, 255, 0.72);
            color: inherit;
        }

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

        .table tbody tr:last-child td:first-child {
            border-bottom-left-radius: 10px;
        }

        .table tbody tr:last-child td:last-child {
            border-bottom-right-radius: 10px;
        }

        /* Unified table alignment: avoid large empty offsets before content */
        .table thead th,
        .table tbody td {
            text-align: left;
        }

        .table td:last-child {
            white-space: nowrap;
        }

        .table td:last-child .d-flex,
        .table td:last-child .btn-group,
        .table td:last-child .btn-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            align-items: center;
        }

        .table td:last-child .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            white-space: normal;
            padding: 0.4rem 0.75rem;
            font-size: 0.8125rem;
            font-weight: 600;
            line-height: 1.2;
            min-height: 36px;
            max-width: 100%;
            border-radius: var(--btn-radius);
        }

        /* Badge styles in tables */
        .table .badge {
            font-size: 0.75rem;
            padding: 0.4rem 0.85rem;
            border-radius: 16px;
            font-weight: 600;
            letter-spacing: 0.2px;
            box-shadow: none;
        }

        .table .badge-success {
            background: linear-gradient(135deg, rgba(47, 158, 104, 0.18) 0%, rgba(72, 179, 125, 0.12) 100%);
            color: #19663a;
        }

        .table .badge-danger {
            background: linear-gradient(135deg, rgba(200, 68, 64, 0.16) 0%, rgba(224, 103, 97, 0.12) 100%);
            color: #8b2320;
        }

        .table .badge-warning {
            background: linear-gradient(135deg, rgba(242, 179, 71, 0.24) 0%, rgba(215, 147, 36, 0.14) 100%);
            color: #8a5a0b;
        }

        .table .badge-info {
            background: linear-gradient(135deg, rgba(61, 167, 200, 0.18) 0%, rgba(37, 126, 162, 0.12) 100%);
            color: #1d617b;
        }

        /* Mobile optimization */
        @media (max-width: 768px) {
            .table {
                font-size: 0.85rem;
                margin-bottom: 1.5rem;
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
                table-layout: auto;
            }

            .table thead th {
                font-size: 0.65rem;
                padding: 0.6rem 0.4rem;
                letter-spacing: 0.2px;
            }

            .table tbody td {
                padding: 0.8rem 0.4rem;
                font-size: 0.85rem;
            }

            .table th:nth-child(1),
            .table td:nth-child(1) {
                width: auto;
                min-width: 70px;
                text-align: left;
            }

            .table th:nth-child(2),
            .table td:nth-child(2) {
                width: auto;
                min-width: 60px;
                text-align: left;
            }

            .table th:nth-child(3),
            .table td:nth-child(3) {
                width: auto;
                min-width: 100px;
                text-align: left;
            }

            .table th:nth-child(7),
            .table td:nth-child(7) {
                width: auto;
                min-width: 60px;
                text-align: left;
            }

            .table-hover tbody tr:hover {
                border-left: 3px solid #1f5e8f;
            }

            .table-responsive {
                margin-bottom: 1.35rem;
            }

            .table-responsive::before,
            .table-responsive::after {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                width: 12px;
                pointer-events: none;
                z-index: 3;
            }

            .table-responsive::before {
                left: 0;
                background: linear-gradient(90deg, rgba(238, 243, 249, 0.9) 0%, rgba(238, 243, 249, 0) 100%);
            }

            .table-responsive::after {
                right: 0;
                background: linear-gradient(270deg, rgba(238, 243, 249, 0.9) 0%, rgba(238, 243, 249, 0) 100%);
            }
        }
        
        /* ===== FOOTER ===== */
        .footer {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: #f5f7fb;
            padding: 3.4rem 0 2.7rem;
            margin-top: 4rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .footer::before {
            content: none;
            pointer-events: none;
        }

        .footer::after {
            content: none;
        }

        .footer-shell,
        .footer p {
            position: relative;
            z-index: 1;
        }

        .footer-shell {
            display: grid;
            grid-template-columns: minmax(280px, 440px) minmax(320px, 1fr);
            align-items: center;
            justify-content: center;
            gap: 2rem;
        }

        .footer-brand {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.1rem;
        }

        .footer-logo-frame {
            width: auto;
            height: auto;
            display: block;
        }

        .footer-logo {
            width: 168px;
            max-width: 100%;
            height: auto;
            display: block;
            filter: none;
        }

        .footer-copy {
            max-width: 680px;
            text-align: center;
        }

        .footer-copy p {
            margin-bottom: 0.35rem;
        }

        .footer-copy .footer-heading {
            font-family: 'Manrope', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #ffffff;
        }

        .footer-copy .footer-subheading {
            font-size: 0.92rem;
            color: rgba(225, 232, 240, 0.82);
        }

        .footer-copy .footer-rights {
            font-size: 0.98rem;
            color: #ffffff;
        }

        .footer-copy .footer-note {
            font-size: 0.95rem;
            color: rgba(225, 232, 240, 0.92);
        }

        .footer-contacts {
            width: min(100%, 360px);
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.65rem;
            margin-top: 0;
            justify-self: center;
            transform: translateX(54px);
        }

        .footer-contact-item {
            width: 100%;
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;
            text-align: left;
            padding: 0.72rem 0.8rem;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        .footer-contact-icon {
            width: 2rem;
            height: 2rem;
            flex: 0 0 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.14);
            color: #ffffff;
            font-size: 0.86rem;
        }

        .footer-contact-text {
            min-width: 0;
        }

        .footer-contact-label {
            margin-bottom: 0.12rem;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(225, 232, 240, 0.78);
        }

        .footer-contact-value,
        .footer-contact-value a {
            margin: 0;
            color: #ffffff;
            font-size: 0.84rem;
            font-weight: 600;
            line-height: 1.35;
            text-decoration: none;
            word-break: break-word;
        }

        .footer-contact-value a:hover,
        .footer-contact-value a:focus-visible {
            color: #d8ecff;
        }

        @media (max-width: 991.98px) {
            .footer-shell {
                grid-template-columns: 1fr;
                gap: 1.4rem;
            }

            .footer-brand {
                gap: 0.95rem;
            }

            .footer-contacts {
                width: min(100%, 520px);
                transform: none;
            }
        }

        @media (max-width: 767.98px) {
            .footer {
                padding: 2.75rem 0 2.2rem;
            }

            .footer-logo-frame {
                width: auto;
                height: auto;
            }

            .footer-logo {
                width: 136px;
            }

            .footer-copy .footer-heading {
                font-size: 0.9rem;
                line-height: 1.45;
            }

            .footer-copy .footer-subheading,
            .footer-copy .footer-rights,
            .footer-copy .footer-note {
                font-size: 0.9rem;
            }

            .footer-contacts {
                width: 100%;
                gap: 0.7rem;
                transform: none;
            }

            .footer-contact-item {
                padding: 0.75rem 0.8rem;
            }

            .footer-contact-value,
            .footer-contact-value a {
                font-size: 0.84rem;
            }
        }

        /* ===== AUTH & HERO ===== */
        .auth-shell,
        .hero-shell,
        .error-shell {
            min-height: 68vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .auth-card {
            max-width: 560px;
            width: 100%;
            box-shadow: 0 8px 24px rgba(15, 53, 87, 0.12);
            border-radius: 14px;
            border: 1px solid #e2eaf3;
        }

        .brand-emoji {
            font-size: 3.5rem;
            line-height: 1;
        }

        .credentials-box {
            background: linear-gradient(135deg, #f8fbff 0%, #eef4fb 100%);
            border: 2px dashed #bfd0e2;
            border-radius: 12px;
            padding: 1.1rem;
        }

        .credentials-box p,
        .credentials-box code,
        .footer p {
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .hero-card {
            max-width: 980px;
            width: 100%;
        }

        .role-card {
            border: 1px solid #e2eaf3;
            background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
            border-radius: 12px;
        }

        .feature-list i {
            color: var(--success-color);
            margin-right: 0.6rem;
            font-size: 1.1rem;
        }

        .error-wrap {
            max-width: 620px;
            width: 100%;
            text-align: center;
        }

        .error-icon {
            font-size: 4.5rem;
            margin-bottom: 1.5rem;
        }

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

        .error-icon-warning {
            color: #f0ad3f;
        }

        .error-icon-danger {
            color: var(--danger-color);
        }

        /* ===== STATS & ICONS ===== */
        .stat-icon {
            font-size: 2rem;
            line-height: 1;
            transition: all var(--transition-base);
        }

        .stat-icon-sm {
            font-size: 1.8rem;
            line-height: 1;
        }

        .stat-icon-success {
            color: var(--success-color);
        }

        .stat-icon-info {
            color: #2f8faf;
        }

        .stat-icon-warning {
            color: #d99a2d;
        }

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

        .stat-icon-muted {
            color: #697a8d;
        }

        .card-header-accent {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: #fff;
        }

        .report-card-icon {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
            transition: all var(--transition-base);
        }

        .report-card-icon:hover {
            transform: scale(1.15) rotate(5deg);
        }

        .scroll-area-sm {
            max-height: 300px;
            overflow-y: auto;
        }

        .alert-compact {
            font-size: 0.875rem;
        }

        .action-result-list {
            margin: 0;
            padding-left: 1.15rem;
        }

        .action-result-list li + li {
            margin-top: 0.45rem;
        }

        /* ===== UTILITY CLASSES ===== */
        .minw-100 { min-width: 100px; }
        .minw-110 { min-width: 110px; }
        .minw-140 { min-width: 140px; }
        .minw-150 { min-width: 150px; }
        .minw-170 { min-width: 170px; }
        .minw-180 { min-width: 180px; }
        .minw-200 { min-width: 200px; }
        .minw-210 { min-width: 210px; }
        .minw-220 { min-width: 220px; }
        .maxw-150 { max-width: 150px; }
        .maxw-430 { max-width: 430px; }

        /* ===== BADGES ===== */
        .badge {
            padding: 0.5rem 0.85rem;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.85rem;
            letter-spacing: 0.2px;
            transition: all var(--transition-fast);
            box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.16);
        }

        .badge:hover {
            transform: translateY(-1px);
        }
        
        .badge-success {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
        }
        
        .badge-danger {
            background: linear-gradient(135deg, #dc3545 0%, #ff6b6b 100%);
            color: white;
        }
        
        .badge-warning {
            background: linear-gradient(135deg, #ffc107 0%, #ffa500 100%);
            color: #000;
        }
        
        .badge-info {
            background: linear-gradient(135deg, #17a2b8 0%, #00bcd4 100%);
            color: white;
        }

        .badge.bg-primary {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
            color: #ffffff;
        }

        .badge.bg-secondary {
            background: linear-gradient(135deg, #5a6b7d 0%, #7b8fa4 100%) !important;
            color: #ffffff;
        }

        .badge.bg-success {
            background: linear-gradient(135deg, var(--success-strong) 0%, var(--success-soft) 100%) !important;
            color: #ffffff;
        }

        .badge.bg-danger {
            background: linear-gradient(135deg, var(--danger-strong) 0%, var(--danger-soft) 100%) !important;
            color: #ffffff;
        }

        .badge.bg-warning {
            background: linear-gradient(135deg, var(--warning-strong) 0%, var(--warning-soft) 100%) !important;
            color: #1f2d3d;
        }

        .badge.bg-info {
            background: linear-gradient(135deg, var(--info-strong) 0%, var(--info-soft) 100%) !important;
            color: #ffffff;
        }

        .badge.bg-dark {
            background: linear-gradient(135deg, var(--dark-strong) 0%, var(--dark-soft) 100%) !important;
            color: #ffffff;
        }

        .badge.bg-light {
            background: linear-gradient(135deg, #ffffff 0%, #eef4fb 100%) !important;
            color: var(--text-dark) !important;
            border: 1px solid #d4e0ee;
            box-shadow: inset 0 -1px 0 rgba(15, 53, 87, 0.04);
        }

        .badge.border {
            border-color: #c9d7e6 !important;
        }

        .modal-content {
            border: 1px solid #dbe6f2;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 22px 48px rgba(15, 53, 87, 0.18);
        }

        .modal-header {
            background: linear-gradient(135deg, #f8fbff 0%, #eef4fb 100%);
            border-bottom: 1px solid #d9e3ef;
            padding: 1rem 1.15rem;
        }

        .modal-title {
            color: var(--primary-color);
            font-weight: 700;
        }

        .modal-body {
            padding: 1.1rem 1.15rem;
        }

        .modal-footer {
            border-top: 1px solid #e1eaf4;
            padding: 0.95rem 1.15rem 1.1rem;
            gap: 0.55rem;
        }

        /* ===== PAGINATION ===== */
        .pagination {
            gap: 0.35rem;
        }
        
        .page-link {
            color: var(--secondary-color);
            border-color: #dee2e6;
            border-radius: 8px;
            transition: all var(--transition-base);
        }
        
        .page-link:hover {
            background-color: var(--light-bg);
            color: var(--primary-color);
            transform: translateY(-2px);
        }
        
        .page-link.active {
            background: linear-gradient(135deg, var(--secondary-color), #1b5380);
            border-color: var(--secondary-color);
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .workspace-page-header {
                flex-direction: column;
                align-items: stretch;
            }

            .workspace-page-copy {
                width: 100%;
            }

            .brand-title {
                align-items: flex-start;
                gap: 0.45rem;
            }

            .workspace-tabs-wrap {
                padding: 8px;
                border-radius: 12px;
            }

            .workspace-tabs-wrap .nav-link {
                min-height: 44px;
                font-size: 0.88rem;
                padding: 0.72rem 0.85rem;
                justify-content: flex-start;
            }

            .workspace-toolbar {
                width: 100%;
                justify-content: flex-start;
                align-items: stretch;
            }

            .workspace-toolbar .btn {
                flex: 1 1 100%;
                width: 100%;
            }

            .schedule-day-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .schedule-day-body {
                padding: 0.6rem 0.75rem;
            }

            .schedule-lesson-top {
                flex-direction: column;
            }

            .schedule-lesson-title {
                font-size: 1.08rem;
            }

            .schedule-actions {
                width: 100%;
                min-width: 0;
                align-items: stretch;
            }

            .schedule-action-btn {
                width: 100%;
                min-width: 0;
            }

            .sidebar {
                display: none;
            }

            .container.mt-4 > .d-flex.justify-content-between.align-items-center,
            .main-content > .d-flex.justify-content-between.align-items-center {
                flex-wrap: wrap;
                gap: 0.75rem;
            }

            .container,
            .container-fluid {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
            }
            
            .main-content {
                margin-top: 1rem;
                padding: 1rem;
                overflow-x: hidden;
            }

            .card-body {
                padding: 1rem;
                overflow-x: hidden;
            }

            .table-wrapper {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
                border-radius: 0;
                max-width: 100%;
                margin-top: 0;
                margin-bottom: 1.5rem;
            }

            .table {
                margin-bottom: 0;
            }

            .table thead th,
            .table tbody td {
                font-size: 0.82rem;
                padding: 0.8rem 0.9rem;
            }

            .table td:last-child .btn:not(.student-journal-pair-link) {
                width: 100%;
            }

            .table thead th {
                font-size: 0.75rem;
            }

            .navbar-brand {
                flex: 1 1 auto;
                min-width: 0;
                font-size: clamp(0.68rem, 3.5vw, 0.9rem);
                max-width: calc(100% - 56px);
                white-space: nowrap;
                line-height: 1.2;
                letter-spacing: 0;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .main-shell {
                margin-top: 1rem;
            }

            .auth-card .card-body,
            .hero-card .card-body {
                padding: 1.25rem !important;
            }

            .btn {
                min-height: 44px;
                padding: 0.55rem 0.95rem;
                font-size: 0.92rem;
            }

            .btn-sm {
                min-height: 44px;
                padding: 0.45rem 0.8rem;
                font-size: 0.875rem;
            }

            .btn-lg {
                min-height: 48px;
            }

            .page-link {
                min-width: 44px;
                min-height: 44px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .alert-dismissible .btn-close {
                width: 2.75rem;
                height: 2.75rem;
            }

            .alert {
                padding: 0.8rem 1rem;
            }

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

        @media (max-width: 576px) {
            .auth-shell,
            .hero-shell,
            .error-shell {
                min-height: auto;
                width: 100%;
                min-width: 0;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                padding-left: 0.25rem;
                padding-right: 0.25rem;
            }

            .auth-card,
            .hero-card,
            .error-wrap {
                width: 100%;
                min-width: 0;
                max-width: 100%;
            }

            .auth-card h1,
            .auth-card h2,
            .auth-card p,
            .hero-card h1,
            .hero-card h2,
            .hero-card p,
            .error-wrap h1,
            .error-wrap h2,
            .error-wrap p {
                overflow-wrap: anywhere;
                white-space: normal;
                text-wrap: wrap;
                max-width: 100%;
            }

            .auth-card h2,
            .hero-card h1 {
                font-size: 1.28rem;
            }

            .hero-shell .btn-lg,
            .error-shell .btn {
                width: 100%;
            }

            .auth-card form > .btn {
                width: 100%;
            }

            .auth-card .card-body,
            .hero-card .card-body {
                padding: 1rem !important;
            }

            .credentials-box {
                padding: 0.9rem;
            }

            .credentials-box p {
                margin-bottom: 0.6rem;
            }

            .credentials-box p:last-child {
                margin-bottom: 0;
            }

            .navbar-custom {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            .navbar-collapse {
                margin-top: 0.5rem;
            }
        }

        @media (max-width: 1399.98px) {
            .navbar-brand {
                max-width: min(50vw, 700px);
                font-size: clamp(0.82rem, 1vw, 1rem);
            }
        }

        @media (max-width: 1199.98px) {
            .navbar-custom > .container-fluid {
                flex-wrap: wrap;
                align-items: center;
                min-width: 0;
            }

            .navbar-toggler {
                flex: 0 0 auto;
                margin-left: 0.5rem;
                min-width: 44px;
                min-height: 44px;
                padding: 0.45rem 0.65rem;
                border-radius: 10px;
                border-color: rgba(255, 255, 255, 0.45);
            }

            .navbar-brand {
                flex: 1 1 0;
                min-width: 0;
                max-width: calc(100% - 4rem);
                padding-right: 0.25rem;
                white-space: nowrap;
                overflow: hidden;
                overflow-wrap: normal;
                text-overflow: ellipsis;
            }

            .navbar-brand:hover {
                transform: none;
            }

            .navbar-collapse {
                flex: 1 0 100%;
                min-width: 0;
                margin-top: 0.45rem;
                overflow: visible !important;
            }

            .navbar-nav {
                align-items: center;
                flex-direction: column;
                flex-wrap: nowrap;
                width: 100%;
                min-width: 0;
                margin-left: 0 !important;
            }

            .navbar-nav .nav-item {
                display: flex;
                flex: 0 0 auto;
                width: auto;
                justify-content: center;
            }

            .navbar-nav .nav-link {
                width: auto;
                min-height: 44px;
                margin: 0.12rem 0;
                white-space: normal;
                justify-content: center;
                text-align: center;
            }

            #userMenu {
                max-width: min(90vw, 280px);
            }

            .navbar-nav .dropdown-menu {
                position: static;
                float: none;
                width: max-content;
                max-width: 90vw;
                margin-top: 0.4rem !important;
                margin-right: auto;
                margin-left: auto;
                border-radius: 10px;
            }

            .dropdown-item {
                min-height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
            }
        }

        @media (min-width: 992px) {
            .navbar-nav .dropdown-menu {
                right: 0;
                left: auto;
            }
        }

        /* ===== SCROLLBAR ===== */
        html {
            scrollbar-width: thin;
            scrollbar-color: var(--primary-color) #f1f5f9;
        }

        ::-webkit-scrollbar {
            width: 7px;
            height: 7px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 999px;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
            border-radius: 999px;
            border: 1px solid #f1f5f9;
            transition: all var(--transition-fast);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-color);
        }

        /* ===== HOMEWORK MODAL ===== */
        .hw-text {
            display: inline-block;
            max-width: 70%;
            word-break: break-word;
            color: #3d4a5e;
        }

        .btn-view-hw {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border: 1px solid rgba(15, 53, 87, 0.15);
            color: white;
            padding: 0.4rem 0.85rem;
            border-radius: var(--btn-radius-sm);
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-base);
            display: inline-block;
            margin-left: 0.5rem;
            min-height: var(--btn-min-height-sm);
        }

        .btn-view-hw:hover {
            background: linear-gradient(135deg, #0d304f 0%, #1b5380 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(15, 53, 87, 0.25);
        }

        .hw-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            animation: fadeIn 0.2s ease-in;
        }

        .hw-modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }

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

        .hw-modal-content {
            background-color: white;
            padding: 2rem;
            border-radius: 12px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            animation: slideUp 0.3s ease-out;
            position: relative;
        }

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

        .hw-modal-header {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .hw-modal-close {
            background: none;
            border: none;
            font-size: 1.75rem;
            color: #999;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all var(--transition-fast);
        }

        .hw-modal-close:hover {
            background-color: #f0f0f0;
            color: var(--primary-color);
        }

        .hw-modal-body {
            color: #3d4a5e;
            line-height: 1.6;
            font-size: 0.95rem;
            word-wrap: break-word;
            white-space: pre-wrap;
            max-height: 400px;
            overflow-y: auto;
        }

        /* Shared visual refresh */
        :root {
            --primary-color: #123a5a;
            --secondary-color: #236b99;
            --accent-color: #e5a43b;
            --light-bg: #f1f5f9;
            --surface-bg: #ffffff;
            --text-dark: #1c2b3a;
            --text-muted: #5d6d7d;
            --border-soft: #dbe4ed;
            --shadow-sm: 0 2px 8px rgba(20, 44, 66, 0.06);
            --shadow-md: 0 8px 22px rgba(20, 44, 66, 0.09);
            --shadow-lg: 0 18px 42px rgba(20, 44, 66, 0.14);
            --focus-ring: 0 0 0 0.22rem rgba(35, 107, 153, 0.2);
            --field-border: #cbd7e2;
            --table-head-border: #d5e0eb;
            --table-row-border: #e9eff5;
        }

        body {
            background:
                radial-gradient(circle at 92% 0%, rgba(35, 107, 153, 0.06), transparent 25rem),
                linear-gradient(180deg, #f7f9fc 0%, #f0f4f8 100%);
        }

        .navbar-custom {
            background: linear-gradient(115deg, #12324e 0%, #1c5278 100%);
            box-shadow: 0 5px 18px rgba(16, 44, 66, 0.16);
            backdrop-filter: none;
        }

        .card,
        .workspace-filter-card,
        .schedule-day-card {
            border-color: var(--border-soft);
            border-radius: 16px;
            box-shadow: var(--shadow-sm);
        }

        .card-header {
            color: #ffffff;
            background: linear-gradient(115deg, #12324e 0%, #1c5278 100%);
            border-bottom-color: transparent;
            font-weight: 700;
        }

        .card-header.profile-detail-card-header {
            color: #334155;
            background-color: #fff7e6 !important;
            background-image: none !important;
            border-bottom: 1px solid #f1d89e;
        }

        .card-header.profile-detail-card-header > span,
        .card-header.profile-detail-card-header strong {
            color: #334155;
        }

        .card-header.bg-info,
        .card-header.bg-warning {
            background-image: none !important;
        }

        .card-header.schedule-day-header,
        .card-header.schedule-day-header * {
            color: #ffffff !important;
        }

        .card-header.schedule-day-header {
            background: linear-gradient(115deg, #12324e 0%, #1c5278 100%);
            border-bottom-color: transparent;
        }

        .btn:not(.btn-link) {
            --btn-raise: 0 1px 2px rgba(15, 53, 87, 0.1);
            --btn-raise-hover: 0 8px 16px rgba(15, 53, 87, 0.16);
            border-width: 1.5px;
            border-radius: var(--btn-radius);
            font-weight: 600;
            letter-spacing: 0;
            box-shadow: var(--btn-raise);
        }

        .btn::before,
        .btn:active::before {
            content: none;
            display: none;
        }

        .btn-sm:not(.btn-link) {
            min-height: var(--btn-min-height-sm);
            border-radius: var(--btn-radius);
            padding: 0.4rem 0.8rem;
            font-size: 0.875rem;
        }

        .btn-primary:not(.btn-link),
        .btn-view-pair:not(.btn-link),
        .btn-view-hw:not(.btn-link) {
            --btn-raise: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 0 rgba(12, 40, 64, 0.28), 0 6px 14px rgba(15, 53, 87, 0.16);
            background: #236b99;
            border-color: #1d5e87;
            color: #ffffff;
        }

        .btn-primary:hover,
        .btn-primary:focus-visible,
        .btn-view-pair:hover,
        .btn-view-pair:focus-visible,
        .btn-view-hw:hover,
        .btn-view-hw:focus-visible {
            background: #195779;
            border-color: #154c66;
            color: #ffffff;
            box-shadow: var(--focus-ring);
        }

        .btn-secondary {
            background: #eef4fb;
            border-color: #c5d5e6;
            color: #123a5a;
        }

        .btn-secondary:hover,
        .btn-secondary:focus-visible,
        .btn-secondary:active {
            background: #e2edf7;
            border-color: #236b99;
            color: #123a5a;
            box-shadow: var(--focus-ring);
        }

        .btn-success:not(.btn-link) {
            --btn-raise: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 0 rgba(16, 64, 40, 0.28), 0 6px 14px rgba(31, 109, 71, 0.16);
            background: var(--success-strong);
            border-color: #27885a;
            color: #ffffff;
        }

        .btn-success:hover,
        .btn-success:focus-visible {
            background: #27885a;
            border-color: #1f6d47;
            color: #ffffff;
            box-shadow: var(--focus-ring);
        }

        .btn-danger:not(.btn-link) {
            --btn-raise: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 0 rgba(90, 24, 22, 0.28), 0 6px 14px rgba(154, 51, 47, 0.16);
            background: var(--danger-strong);
            border-color: #b53a37;
            color: #ffffff;
        }

        .btn-danger:hover,
        .btn-danger:focus-visible {
            background: #b53a37;
            border-color: #8f2e2b;
            color: #ffffff;
            box-shadow: var(--focus-ring);
        }

        .btn-warning:not(.btn-link) {
            --btn-raise: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 0 rgba(120, 72, 8, 0.22), 0 5px 12px rgba(154, 104, 16, 0.14);
            background: var(--warning-strong);
            border-color: #c48416;
            color: #1f2d3d;
        }

        .btn-warning:hover,
        .btn-warning:focus-visible {
            background: #c48416;
            border-color: #9a6810;
            color: #15202c;
            box-shadow: var(--focus-ring);
        }

        .btn-info:not(.btn-link) {
            --btn-raise: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 0 rgba(12, 48, 64, 0.28), 0 6px 14px rgba(21, 79, 102, 0.16);
            background: var(--info-strong);
            border-color: #1c6884;
            color: #ffffff;
        }

        .btn-info:hover,
        .btn-info:focus-visible {
            background: #1c6884;
            border-color: #154f66;
            color: #ffffff;
            box-shadow: var(--focus-ring);
        }

        .btn-dark:not(.btn-link) {
            --btn-raise: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 0 rgba(8, 12, 18, 0.4), 0 6px 14px rgba(15, 23, 32, 0.18);
            background: var(--dark-strong);
            border-color: #16212d;
            color: #ffffff;
        }

        .btn-dark:hover,
        .btn-dark:focus-visible {
            background: #16212d;
            border-color: #0e1620;
            color: #ffffff;
            box-shadow: var(--focus-ring);
        }

        .btn-light {
            background: #f7fafd;
            border-color: #d4e0ee;
            color: #123a5a;
        }

        .btn-light:hover,
        .btn-light:focus-visible {
            background: #e8f0f8;
            border-color: #236b99;
            color: #123a5a;
            box-shadow: var(--focus-ring);
        }

        .btn-outline-primary:not(.btn-link),
        .btn-outline-secondary:not(.btn-link) {
            --btn-raise: none;
            background: #ffffff;
            border-color: #236b99;
            color: #195779;
        }

        .btn-outline-success:not(.btn-link) {
            --btn-raise: none;
            background: #ffffff;
            border-color: var(--success-strong);
            color: #1f6d47;
        }

        .btn-outline-danger:not(.btn-link) {
            --btn-raise: none;
            background: #ffffff;
            border-color: var(--danger-strong);
            color: #9a332f;
        }

        .btn-outline-warning:not(.btn-link) {
            --btn-raise: none;
            background: #ffffff;
            border-color: #c48416;
            color: #8a5d0e;
        }

        .btn-outline-info:not(.btn-link) {
            --btn-raise: none;
            background: #ffffff;
            border-color: var(--info-strong);
            color: #154f66;
        }

        .btn-outline-dark:not(.btn-link) {
            --btn-raise: none;
            background: #ffffff;
            border-color: var(--dark-strong);
            color: var(--dark-strong);
        }

        .btn-outline-primary:hover,
        .btn-outline-primary:focus-visible,
        .btn-outline-secondary:hover,
        .btn-outline-secondary:focus-visible {
            background: #236b99;
            border-color: #195779;
            color: #ffffff;
            box-shadow: var(--focus-ring);
        }

        .btn-outline-success:hover,
        .btn-outline-success:focus-visible {
            background: var(--success-strong);
            border-color: #1f6d47;
            color: #ffffff;
            box-shadow: var(--focus-ring);
        }

        .btn-outline-danger:hover,
        .btn-outline-danger:focus-visible {
            background: var(--danger-strong);
            border-color: #8f2e2b;
            color: #ffffff;
            box-shadow: var(--focus-ring);
        }

        .btn-outline-warning:hover,
        .btn-outline-warning:focus-visible {
            background: var(--warning-strong);
            border-color: #9a6810;
            color: #15202c;
            box-shadow: var(--focus-ring);
        }

        .btn-outline-info:hover,
        .btn-outline-info:focus-visible {
            background: var(--info-strong);
            border-color: #154f66;
            color: #ffffff;
            box-shadow: var(--focus-ring);
        }

        .btn-outline-dark:hover,
        .btn-outline-dark:focus-visible {
            background: var(--dark-strong);
            border-color: #0e1620;
            color: #ffffff;
            box-shadow: var(--focus-ring);
        }

        @media (hover: hover) and (pointer: fine) {
            .btn:not(.btn-link):not(:disabled):hover {
                transform: translateY(-1px);
                box-shadow: var(--focus-ring), var(--btn-raise-hover);
            }
        }

        .btn:not(.btn-link):not(:disabled):active {
            transform: translateY(1px);
            box-shadow: inset 0 2px 4px rgba(15, 40, 64, 0.22);
        }

        .btn:not(.btn-link):disabled,
        .btn:not(.btn-link).disabled {
            transform: none;
            box-shadow: none;
        }

        .form-control,
        .form-select,
        .input-group-text {
            border-color: var(--field-border);
            border-radius: 10px;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #5d9ac0;
            box-shadow: var(--focus-ring);
        }

        .table-responsive {
            max-width: 100%;
            border: 1px solid #e1e8ef;
            border-radius: 12px;
            background: #fff;
            scrollbar-color: #a8bdce #f1f5f8;
            scrollbar-width: thin;
        }

        .table-responsive:focus-visible {
            outline: 3px solid rgba(35, 107, 153, 0.35);
            outline-offset: 2px;
        }

        .table {
            margin-bottom: 0;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            font-size: 0.91rem;
        }

        .table thead th {
            color: #24425d;
            background: #f1f5f9;
            border-bottom: 1px solid #dbe4ed;
            box-shadow: none;
            font-size: 0.76rem;
            font-weight: 750;
            letter-spacing: 0.035em;
            text-transform: none;
        }

        .table tbody tr:nth-child(even) > * {
            background-color: #fbfcfe;
        }

        .table-hover tbody tr:hover > * {
            background-color: #f1f7fb;
        }

        @media (max-width: 768px) {
            .table-responsive {
                margin-bottom: 1rem;
                border-radius: 10px;
            }

            .table {
                width: max-content;
                min-width: 100%;
                font-size: 0.875rem;
            }

            .table th,
            .table td {
                max-width: 18rem;
                padding: 0.65rem 0.7rem;
                vertical-align: top;
                overflow-wrap: anywhere;
            }

            .table th {
                white-space: normal;
            }

            .table td .form-select,
            .table td .form-control {
                min-width: 8rem;
                max-width: 14rem;
            }

            .table td:last-child {
                white-space: normal;
            }

            .table td .btn,
            .table td:last-child .btn {
                min-width: 0;
                max-width: none;
                white-space: normal;
            }

            .table td:last-child .d-flex,
            .table td:last-child .btn-group,
            .table td:last-child .btn-toolbar {
                flex-direction: column;
                align-items: stretch;
                width: 100%;
            }

            .table td:last-child .btn {
                width: 100%;
            }

            .form-control,
            .form-select,
            .form-control-sm,
            .form-select-sm {
                min-height: 44px;
                font-size: 16px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .page-fade {
                animation: none;
            }
        }