/* ELMS Global Unified Styles — Academic Playground Design */

:root {
    /* Brand Colors (from design.md) */
    --brand-primary: rgb(var(--brand-500));    /* Quizlet Violet */
    --brand-hover: rgb(var(--brand-600));      /* Night Violet */
    --brand-soft: rgb(var(--brand-50));       /* Soft Violet Background */
    --brand-accent-sky: #98e3ff; /* Sky Study */
    --brand-accent-pink: #eeaaff; /* Flashcard Pink */
    --brand-accent-orange: #ffc38c; /* Practice Orange */
    
    /* Text Colors */
    --navy-900: #282e3e;         /* Stormcloud Ink */
    --slate-500: #586380;        /* Slate Text */
    --slate-400: #939bb4;        /* Light Slate */
    --slate-200: #d9dde8;        /* Ash Border */
    
    /* Backgrounds */
    --page-bg: #f6f7fb;          /* Page Background */
    --card-bg: #ffffff;          /* Pure White */

    /* Shapes */
    --radius-cards: 8px;
    --radius-inputs: 4px;
    --radius-buttons: 200px;
    --radius-general: 4px;

    /* Shadows */
    --shadow-md: rgba(40, 46, 62, 0.1) 0px 4px 16px 0px;
    --shadow-sm: rgba(40, 46, 62, 0.1) 0px 2px 4px 0px;
    --shadow-subtle: rgba(0, 0, 0, 0.3) 0px 0px 1px 0px inset;
}

body {
    background-color: var(--page-bg);
    color: var(--navy-900);
    font-family: 'Be Vietnam Pro', sans-serif;
}

/* Input, Button, nhãn nút, nút hành động trong bảng (.elms-input/.elms-btn/.elms-label/.elms-file-*/.elms-action-btn/.elms-ui-button-label*)
   đã chuyển sang wwwroot/css/components.css (dùng design token). */

/* Modern Utility Classes */
.gradient-brand {
    background: linear-gradient(135deg, var(--navy-900) 0%, var(--brand-primary) 100%);
}

.shadow-soft {
    box-shadow: var(--shadow-md);
}

.shadow-card {
    box-shadow: var(--shadow-md);
}

.rounded-3xl {
    border-radius: 24px !important;
}

/* Responsive Filter Forms */
.elms-filter-form {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    align-items: end !important;
}

.elms-filter-field,
.elms-filter-actions {
    min-width: 0 !important;
    width: 100% !important;
}

.elms-filter-field {
    grid-column: span 12 / span 12 !important;
}

.elms-filter-field > input,
.elms-filter-field > select,
.elms-filter-field .relative,
.elms-filter-field .relative > input,
.elms-filter-field .relative > select {
    width: 100% !important;
    min-width: 0 !important;
}

.elms-filter-actions {
    grid-column: span 12 / span 12 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    align-items: center !important;
}

.elms-filter-actions > button,
.elms-filter-actions > a,
.elms-filter-actions > label {
    min-height: 42px !important;
}

@media (min-width: 640px) {
    .elms-filter-field {
        grid-column: span 6 / span 6 !important;
    }

    .elms-filter-field--wide {
        grid-column: span 12 / span 12 !important;
    }

    .elms-filter-field--narrow {
        grid-column: span 3 / span 3 !important;
    }
}

@media (min-width: 1024px) {
    .elms-filter-field {
        grid-column: span 3 / span 3 !important;
    }

    .elms-filter-field--wide {
        grid-column: span 4 / span 4 !important;
    }

    .elms-filter-field--search {
        grid-column: span 2 / span 2 !important;
    }

    .elms-filter-field--narrow {
        grid-column: span 1 / span 1 !important;
    }
}

@media (max-width: 639px) {
    .elms-filter-actions {
        flex-direction: column !important;
    }

    .elms-filter-actions > button,
    .elms-filter-actions > a,
    .elms-filter-actions > label {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Notification confirmation popup */
.notif-confirm-modal {
    max-width: min(28rem, calc(100vw - 2rem)) !important;
}

.notif-confirm-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 1rem !important;
    align-items: stretch !important;
    width: 100% !important;
}

.notif-confirm-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 3.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.95rem 1.25rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: normal !important;
}

.notif-confirm-action {
    min-width: 0 !important;
    min-height: 3.5rem !important;
    font-size: 0.875rem !important;
}

@media (max-width: 520px) {
    .notif-confirm-actions {
        grid-template-columns: 1fr !important;
    }
}

/* Custom Scrollbar for Previews */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--page-bg);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--slate-200);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--slate-400);
}