/* CloudSchool College — Shared CSS Variables */
:root {
    --cs-header-from: #0f172a;
    --cs-header-to: #1e293b;
    --cs-primary: #3b82f6;
    --cs-primary-dark: #2563eb;
    --cs-accent: #10b981;
    --cs-surface: #ffffff;
    --cs-surface-dark: #1e293b;
    --cs-text: #1e293b;
    --cs-text-muted: #64748b;
    --cs-border: #e2e8f0;
}

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

.mud-table-container,
.mud-data-grid {
    overflow-x: auto;
}

.mud-input-control,
.mud-select,
.mud-picker {
    width: 100%;
}

@media (max-width: 1024px) {
    .mud-paper {
        border-radius: 0.75rem;
    }
}

@media (max-width: 640px) {
    .mud-table-cell,
    .mud-table-head .mud-table-cell {
        padding: 0.55rem 0.65rem;
        font-size: 0.825rem;
    }

    .mud-button,
    .mud-chip,
    .mud-typography {
        max-width: 100%;
    }
}

.staff-sidebar {
    width: 16rem;
}

@media (min-width: 1024px) {
    .staff-sidebar {
        transform: translateX(0) !important;
    }

    .staff-content {
        margin-left: 16rem;
    }

    .staff-overlay {
        display: none;
    }
}