/* Shared LMS design foundation: compact, readable, and responsive. */
:root {
    --lms-ink: #172033;
    --lms-muted: #667085;
    --lms-border: #e5eaf1;
    --lms-surface: #fff;
    --lms-canvas: #f5f7fb;
    --lms-radius: 14px;
    --lms-shadow: 0 5px 18px rgba(16, 24, 40, .055);
}
html { color-scheme: light; }
body { color: var(--lms-ink); background: var(--lms-canvas); }
main { min-width: 0; }
main h1, main h2, main h3, main h4 { color: var(--lms-ink); letter-spacing: -.025em; }
main h1 { font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 750; }
main .card, main .modal-content, main .dropdown-menu {
    border: 1px solid var(--lms-border); border-radius: var(--lms-radius); box-shadow: var(--lms-shadow);
}
main .card-header { background: transparent; border-bottom-color: var(--lms-border); }
main .table { --bs-table-color: var(--lms-ink); --bs-table-border-color: var(--lms-border); }
main .table thead th { color: #596579; background: #f8f9fc; font-size: .76rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
main .form-control, main .form-select, main .select2-container--bootstrap-5 .select2-selection {
    min-height: 40px; border-color: #d8deea; border-radius: 9px;
}
main .form-control:focus, main .form-select:focus {
    border-color: var(--theme-primary); box-shadow: 0 0 0 .2rem var(--theme-primary-light);
}
main .btn { border-radius: 9px; font-weight: 600; }
main .btn-primary { background-color: var(--theme-primary); border-color: var(--theme-primary); }
main :focus-visible { outline: 3px solid rgba(var(--theme-primary-rgb), .36); outline-offset: 2px; }
.dataTables_wrapper, .table-responsive { max-width: 100%; }
@media (max-width: 767.98px) {
    main { padding: 1rem !important; }
    main .card-body { padding: 1rem; }
    main .table-responsive { overflow-x: auto; }
    main .btn { min-height: 38px; }
}