@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* Theme variables are in theme-light.css and theme-dark.css */

.text-muted {
    color: var(--text-muted) !important;
}

.text-main {
    color: var(--text-main) !important;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    background-image: none;
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 3px;
}

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

/* Layout Containers */
.main-wrapper {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    height: 100dvh;
    max-height: 100dvh;
    position: fixed;
    left: 0;
    top: 0;
    background: var(--sidebar-bg);
    backdrop-filter: blur(12px);
    border-right: 1px solid var(--glass-border);
    padding: 0.5rem 0.4rem;
    z-index: 1000;
    transition: width var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1), transform var(--transition-speed);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nav-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.content-area {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0; /* Critical for flex child overflow */
    transition: margin-left var(--transition-speed) ease;
    overflow-x: hidden;
}

.sidebar.collapsed ~ .content-area {
    margin-left: var(--sidebar-collapsed-width);
}

.header {
    height: var(--header-height);
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 900;
}

.header-user-text {
    color: inherit;
}

.header-user-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-speed);
}

.header-user-link:hover {
    color: var(--accent-secondary);
}


.page-container {
    padding: 0.5rem 1rem;
    flex: 1;
}

.footer {
    height: var(--footer-height);
    background: var(--glass-bg);
    border-top: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Sidebar Elements */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding: 0 0.25rem;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
}

.sidebar.collapsed .sidebar-title {
    display: none;
}

.nav-link-custom {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 0.15rem;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .nav-link-custom {
    padding: 0.6rem 0;
    justify-content: center;
}

.sidebar.collapsed .nav-link-custom span {
    display: none;
}

.sidebar.collapsed .nav-link-custom i {
    margin: 0 !important;
    font-size: 1.1rem;
}

.nav-link-custom:hover {
    background: var(--glass-bg);
    color: var(--text-main);
}

.nav-link-custom.active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
}

.sidebar-footer {
    margin-top: auto;
    margin-left: -0.4rem;
    margin-right: -0.4rem;
    margin-bottom: -0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sidebar-footer > #theme-toggle {
    border-top: 1px solid var(--glass-border);
    width: 100%;
}

.theme-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.2s;
}

.theme-toggle-container:hover {
    color: var(--text-main);
}

.sidebar.collapsed .theme-toggle-text,
.sidebar.collapsed .sidebar-footer span.small {
    display: none;
}
.sidebar.collapsed .sidebar-footer i {
    margin: 0 !important;
}

/* Sidebar Collapse Button */
.collapse-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.collapse-btn:hover {
    background: var(--glass-bg);
    color: var(--text-main);
}

/* ── Buttons ───────────────────────────────────────────────────────────────
   btn-primary  — flat emerald  — main CTA ("Grade now", "Add student")
   btn-premium  — gradient      — upgrade / premium upsell only
   btn-secondary — outline      — cancel / back / neutral
   btn-danger   — flat red      — destructive, always behind a confirm modal
   btn-xs       — size modifier — pair with any of the above
──────────────────────────────────────────────────────────────────────────── */

.btn-primary {
    background: #10B981;
    border: none;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-primary:hover {
    background: #0ea572;
    transform: translateY(-1px);
}

.btn-premium {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-premium:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-secondary:hover {
    background: rgba(148, 163, 184, 0.25);
    color: var(--text-main);
    border-color: var(--text-muted);
}

.btn-danger {
    background: #dc2626;
    border: none;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-danger:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

/* ── Badges ────────────────────────────────────────────────────────────────
   Subscription tiers and status indicators.
   All badges: display inline-block, pill shape (border-radius 20px).
──────────────────────────────────────────────────────────────────────────── */

.badge-cg {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
}

.badge-free {
    background: rgba(16, 185, 129, 0.12);
    color: #065f46;
}

.badge-plus {
    background: rgba(26, 54, 93, 0.1);
    color: #1A365D;
}

.badge-pro {
    background: #1A365D;
    color: #ffffff;
}

.badge-new {
    background: #10B981;
    color: #ffffff;
}

.badge-warn {
    background: #fef3c7;
    color: #92400e;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}


/* Cards and Tables */
.card-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

/* Plan options (My Account -> Plan & Usage): each add-on flows in a wrapping
   flex row - side by side when there's room, stacked when the screen is narrow -
   instead of a fixed two-column split. Sizing lives here (not inline) so the
   visibility callbacks that rewrite each option's inline style don't clobber it. */
.plan-option-col {
    flex: 1 1 260px;
    min-width: 0;
}

/* My Account tabs: cards flow in a wrapping flex row that fills the available
   width - as many columns as fit, then wrap - instead of a fixed two-column grid
   or a single centered column. The per-card flex sizing lives here (not inline)
   because several cards have their inline style rewritten by visibility callbacks,
   which would otherwise clobber it. */
.account-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    align-items: flex-start;
}
.account-card-grid > .account-tile {
    flex: 1 1 340px;
    max-width: 460px;
    min-width: 0;
}

h2,
h3,
h4,
h5 {
    margin-top: 0;
}

.mb-4 {
    margin-bottom: 0.75rem !important;
}

.mb-3 {
    margin-bottom: 0.5rem !important;
}

.mb-2 {
    margin-bottom: 0.25rem !important;
}

/* Global Compact Form Elements */
.form-control:not(textarea),
.form-input-custom,
.dbc-input,
.sidebar-dropdown-custom .Select-control {
    height: 30px !important;
    padding: 0.2rem 0.5rem !important;
    font-size: 1rem !important;
    border-radius: 6px !important;
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
}

/* Global placeholder readability — dark & light mode */
::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important; /* Firefox reduces opacity by default */
}

::-webkit-input-placeholder {
    color: var(--text-muted) !important;
}

::-moz-placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

:-ms-input-placeholder {
    color: var(--text-muted) !important;
}

/* Global Dash Dropdown Compactness */
.Select-control {
    height: 30px !important;
    min-height: 30px !important;
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    font-size: 1rem !important;
    color: var(--text-main) !important;
}

.Select-placeholder {
    line-height: 28px !important;
    color: var(--text-muted) !important;
}

.Select-value {
    line-height: 28px !important;
    color: var(--text-main) !important;
}

/* Premium Disabled Select Dropdown Styling */
.Select.is-disabled {
    opacity: 0.65 !important;
}

.Select.is-disabled .Select-control {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

.Select.is-disabled .Select-placeholder {
    color: var(--text-muted) !important;
}

.Select--single>.Select-control .Select-value {
    padding-left: 8px !important;
}

.has-value.Select--single>.Select-control .Select-value .Select-value-label, 
.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label {
    color: var(--text-main) !important;
}

.Select-input {
    height: 28px !important;
    font-size: 1rem !important;
}

.Select-menu-outer {
    background-color: var(--bg-color) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    z-index: 9999 !important;
}

.Select.is-open {
    z-index: 10050 !important;
}

/* Elevate parent containers when a dropdown is open to resolve backdrop-filter stacking context layering bugs */
.card-glass:has(.Select.is-open),
.col:has(.Select.is-open),
[class*="col-"]:has(.Select.is-open),
.table-dark-custom tbody tr:has(.Select.is-open) {
    z-index: 10060 !important;
    position: relative !important;
}

.Select-option {
    background-color: var(--bg-color) !important;
    color: var(--text-main) !important;
}

.Select-option.is-focused,
.Select-option.is-selected {
    background-color: var(--accent-primary) !important;
    color: white !important;
}

/* Native <select> (dbc.Select) option popups are drawn by the browser and
   inherit no app theme, so in dark mode white option text (from --text-main)
   landed on the browser's default white popup and was unreadable. Theme the
   <option>s explicitly. Chrome/Edge/Firefox honor these on the native popup;
   macOS/Safari draw an OS-themed popup and ignore them harmlessly. This only
   matches real native <option> elements, so it cannot affect dcc.Dropdown. */
select option {
    background-color: var(--bg-color) !important;
    color: var(--text-main) !important;
}

/* dcc.Dropdown (Dash 4) closed control: Dash defaults its box to a SOLID WHITE
   background with dark text, driven by its own tokens that ignore our theme, so
   in dark mode the box stayed white and the value text was unreadable. Same idea
   as the <select> options above -- give the base box a themed background so the
   dark page shows through, and let the text follow var(--text-main). Uses theme
   vars, so it is correct in both light and dark. */
.dash-dropdown {
    background-color: var(--glass-bg) !important;
    color: var(--text-main) !important;
}
.dash-dropdown-trigger-icon {
    color: var(--text-main) !important;
}

/* Dash 4 rewrote dcc.Dropdown with new `.dash-dropdown-*` class names, which
   broke all the react-select theming above. Mirror it here so menus keep a
   solid themed background and stay layered above tables/cards. */
/* Closed control (the box showing the selected value before the menu opens).
   Without this, .dash-dropdown-value below forces light theme text with no
   matching background, making the selected label invisible on light/white
   ancestors (e.g. a table header cell). */
.dash-dropdown-trigger {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    min-height: 30px !important;
}
.dash-dropdown-content {
    background-color: var(--bg-color) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    z-index: 10050 !important;
}
.dash-dropdown-option {
    background-color: var(--bg-color) !important;
    color: var(--text-main) !important;
}
.dash-dropdown-option:hover,
.dash-dropdown-option.active,
.dash-dropdown-option.selected {
    background-color: var(--accent-primary) !important;
    color: #fff !important;
}
.dash-dropdown-actions,
.dash-dropdown-action-button,
.dash-dropdown-search {
    color: var(--text-main) !important;
}
/* Trigger text: DROPDOWN_STYLE forces a dark inline color; keep it readable on
   the dark theme (mirrors the old .Select-value override). */
.dash-dropdown-value,
.dash-dropdown-value-item {
    color: var(--text-main) !important;
}
.dash-dropdown-placeholder {
    color: var(--text-muted) !important;
}
/* Elevate the container when a dropdown menu is open (backdrop-filter stacking
   fix), mirroring the .Select.is-open rule above. `.dash-dropdown-content` is
   only in the DOM while the menu is open. */
.card-glass:has(.dash-dropdown-content),
.col:has(.dash-dropdown-content),
[class*="col-"]:has(.dash-dropdown-content),
.table-dark-custom tbody tr:has(.dash-dropdown-content) {
    z-index: 10060 !important;
    position: relative !important;
}

/* Table Compact Styling */
.table-dark-custom {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-main);
    color: var(--text-main) !important;
    background: transparent !important;
    border-collapse: separate;
    border-spacing: 0;
}

.table-dark-custom thead th {
    --bs-table-bg: transparent;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--text-muted) !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 10px !important;
}

.table-dark-custom tbody td {
    --bs-table-bg: transparent;
    color: var(--text-main) !important;
    padding: 4px 10px !important;
    vertical-align: middle;
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.85rem;
    overflow: visible !important;
}

.table-dark-custom tbody tr {
    position: relative;
    z-index: 1;
}

.table-dark-custom tbody tr:hover {
    z-index: 2;
    background: rgba(255, 255, 255, 0.02) !important;
}

.table-dark-custom tbody tr:focus-within {
    z-index: 99;
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Compact Dropdown in Table */
.table-dark-custom .Select-control {
    height: 28px !important;
    min-height: 28px !important;
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    font-size: 0.8rem;
    color: var(--text-main) !important;
}

.table-dark-custom .Select-placeholder,
.table-dark-custom .Select-value {
    line-height: 26px !important;
    color: var(--text-main) !important;
}

.table-dark-custom .Select--single>.Select-control .Select-value {
    padding-left: 8px !important;
}

.btn-xs {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    border-radius: 4px;
}

/* Responsiveness */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: 260px !important;
    }

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

    /* On mobile, the desktop 'collapsed' state is irrelevant —
       only .open controls visibility. Without this fix, a collapsed
       desktop sidebar would stay hidden even after tapping the hamburger. */
    .sidebar.collapsed {
        transform: translateX(-100%);
    }

    .sidebar.open.collapsed {
        transform: translateX(0);
        width: 260px !important;
    }

    .content-area {
        margin-left: 0 !important;
    }

    .sidebar.collapsed ~ .content-area {
        margin-left: 0 !important;
    }

    /* Backdrop overlay — tap outside to close sidebar */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 999;
        backdrop-filter: blur(2px);
        animation: fadeInBackdrop 0.2s ease;
    }

    .sidebar-backdrop.active {
        display: block;
    }

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

    .stack.flex-row {
        flex-wrap: wrap !important;
    }
}

/* AI Diff View Styling */
ins {
    color: var(--bs-success) !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

del {
    color: var(--bs-danger) !important;
    font-weight: bold !important;
    text-decoration: line-through !important;
}