/* Layered professional light theme — loaded last so Tailwind tokens and layout styles remap.
 * Floor is #e6e6e6. Surfaces go up (lighter + raised shadow) and down (darker + inset). */

:root {
    --light-bg: #e6e6e6;
    --light-sidebar: #ececec;
    --light-card: #f3f3f3;
    --light-well: #dcdcdc;
    --light-input: #fafafa;
    --light-hover: #ffffff;
    --light-border: #d0d0d0;
    --light-border-strong: #c4c4c4;
    --light-shadow-raised: 5px 6px 16px rgba(163, 163, 163, 0.36), -4px -5px 12px rgba(255, 255, 255, 0.92);
    --light-shadow-raised-lg: 8px 10px 24px rgba(163, 163, 163, 0.4), -6px -7px 16px rgba(255, 255, 255, 0.95);
    --light-shadow-inset: inset 3px 3px 7px rgba(163, 163, 163, 0.28), inset -3px -3px 7px rgba(255, 255, 255, 0.8);
    --light-page-gradient: linear-gradient(180deg, #efefef 0%, #e6e6e6 22%, #e6e6e6 78%, #d9d9d9 100%);
}

html:not(.dark) {
    color-scheme: light;
}

html:not(.dark) body.bg-white,
html:not(.dark) body.bg-gray-50,
html:not(.dark) body.bg-gray-100,
html:not(.dark) body.bg-slate-50,
html:not(.dark) body.bg-slate-100 {
    background-color: var(--light-bg) !important;
    background-image: var(--light-page-gradient);
    background-attachment: fixed;
}

/* Page / app background */
html:not(.dark) .bg-gray-50,
html:not(.dark) .bg-gray-100,
html:not(.dark) .bg-slate-50,
html:not(.dark) .bg-slate-100 {
    background-color: var(--light-bg) !important;
}

/* Sidebar — slightly raised above the page floor */
html:not(.dark) #sidebar,
html:not(.dark) #sidebar.bg-white,
html:not(.dark) .portal-sidebar {
    background-color: var(--light-sidebar) !important;
    border-color: var(--light-border) !important;
    box-shadow: 6px 0 18px rgba(163, 163, 163, 0.22), -2px 0 8px rgba(255, 255, 255, 0.55);
}

/* Primary cards, panels, modals — go up */
html:not(.dark) .bg-white,
html:not(.dark) .card,
html:not(.dark) .portal-card,
html:not(.dark) .fee-board-card,
html:not(.dark) .fee-board-page .fee-board-filters,
html:not(.dark) .fee-board-modal-panel,
html:not(.dark) .app-loading-panel {
    background-color: var(--light-card) !important;
}

html:not(.dark) .card,
html:not(.dark) .portal-card,
html:not(.dark) .bg-white.rounded-xl,
html:not(.dark) .bg-white.rounded-2xl,
html:not(.dark) .bg-white.rounded-lg,
html:not(.dark) .bg-white.shadow-sm,
html:not(.dark) .bg-white.shadow-md,
html:not(.dark) .bg-white.shadow-lg,
html:not(.dark) .bg-white.shadow-xl,
html:not(.dark) .fee-board-card,
html:not(.dark) .fee-board-page .fee-board-filters,
html:not(.dark) .fee-board-modal-panel,
html:not(.dark) .app-loading-panel {
    box-shadow: var(--light-shadow-raised) !important;
    border-color: var(--light-border) !important;
}

html:not(.dark) .card:hover,
html:not(.dark) .portal-card:hover,
html:not(.dark) .hover\:shadow-md:hover {
    box-shadow: var(--light-shadow-raised-lg) !important;
}

/* Nested wells, table headers, session chips — go down */
html:not(.dark) .bg-gray-50.sticky,
html:not(.dark) thead,
html:not(.dark) thead.bg-gray-50,
html:not(.dark) thead.bg-gray-100,
html:not(.dark) thead[class*="bg-gray"],
html:not(.dark) table thead tr,
html:not(.dark) table thead th,
html:not(.dark) thead.bg-gray-50 th,
html:not(.dark) thead.bg-gray-100 th,
html:not(.dark) thead th,
html:not(.dark) .sticky-thead thead th,
html:not(.dark) .fee-board-table thead,
html:not(.dark) .fee-board-table thead th,
html:not(.dark) #sidebar .bg-gray-100 {
    background-color: var(--light-well) !important;
    box-shadow: var(--light-shadow-inset);
}

html:not(.dark) body.bg-white,
html:not(.dark) body.bg-gray-50,
html:not(.dark) body.bg-gray-100 {
    background-color: var(--light-bg) !important;
}

/* Hover rows and interactive lifts — go up */
html:not(.dark) tbody tr:hover,
html:not(.dark) .hover\:bg-gray-50:hover,
html:not(.dark) .hover\:bg-gray-100:hover,
html:not(.dark) .hover\:bg-white:hover {
    background-color: var(--light-hover) !important;
}

html:not(.dark) #sidebar nav a:hover:not([class*="bg-primary-"]),
html:not(.dark) #sidebar nav button:hover:not([class*="bg-primary-"]) {
    background-color: var(--light-hover) !important;
}

html:not(.dark) .portal-sidebar-link:hover:not(.is-active) {
    background-color: var(--light-hover) !important;
}

/* Borders */
html:not(.dark) .border-gray-50,
html:not(.dark) .border-gray-100,
html:not(.dark) .border-gray-200,
html:not(.dark) .border-slate-200,
html:not(.dark) #sidebar,
html:not(.dark) #sidebar .border-b,
html:not(.dark) #sidebar .border-r,
html:not(.dark) #sidebar .border-l {
    border-color: var(--light-border) !important;
}

html:not(.dark) .border-gray-300,
html:not(.dark) .border-slate-300 {
    border-color: var(--light-border-strong) !important;
}

html:not(.dark) .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--light-border) !important;
}

/* Inputs sit in a shallow well, then lift on focus */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="hidden"]),
html:not(.dark) select,
html:not(.dark) textarea,
html:not(.dark) .form-input,
html:not(.dark) .form-select {
    background-color: var(--light-input) !important;
    border-color: var(--light-border) !important;
    box-shadow: var(--light-shadow-inset);
    color-scheme: light;
}

html:not(.dark) input:focus:not([type="checkbox"]):not([type="radio"]),
html:not(.dark) select:focus,
html:not(.dark) textarea:focus,
html:not(.dark) .form-input:focus,
html:not(.dark) .form-select:focus {
    background-color: var(--light-hover) !important;
    box-shadow: var(--light-shadow-raised), 0 0 0 3px rgba(7, 77, 217, 0.12) !important;
}

html:not(.dark) option {
    background-color: var(--light-input) !important;
}

html:not(.dark) input[type="file"] {
    background-color: var(--light-input) !important;
}

html:not(.dark) input[type="file"]::file-selector-button {
    background-color: var(--light-card) !important;
    border-color: var(--light-border) !important;
}

html:not(.dark) .btn-secondary {
    background-color: var(--light-well) !important;
    box-shadow: var(--light-shadow-inset);
}

html:not(.dark) .btn-secondary:hover {
    background-color: var(--light-card) !important;
    box-shadow: var(--light-shadow-raised);
}

html:not(.dark) .badge-gray {
    background-color: var(--light-well) !important;
}

html:not(.dark) .progress-bar,
html:not(.dark) .skeleton {
    background-color: var(--light-well) !important;
}

html:not(.dark) .skeleton {
    background-image: linear-gradient(90deg, #dcdcdc 25%, #ececec 50%, #dcdcdc 75%) !important;
    background-size: 200% 100%;
}

html:not(.dark) ::-webkit-scrollbar-track,
html:not(.dark) .custom-scrollbar::-webkit-scrollbar-track {
    background: var(--light-bg);
}

html:not(.dark) ::-webkit-scrollbar-thumb,
html:not(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--light-border-strong);
}

html:not(.dark) .shadow-sm {
    box-shadow: var(--light-shadow-raised) !important;
}

html:not(.dark) .shadow-md,
html:not(.dark) .hover\:shadow-md:hover {
    box-shadow: var(--light-shadow-raised-lg) !important;
}

html:not(.dark) .shadow-lg,
html:not(.dark) .shadow-xl {
    box-shadow: var(--light-shadow-raised-lg) !important;
}

/* Portal / teacher shells */
html:not(.dark) .portal-welcome-sheet,
html:not(.dark) .portal-role-card,
html:not(.dark) .portal-website-shell,
html:not(.dark) .portal-website-toolbar,
html:not(.dark) .portal-website-fallback-card {
    background-color: var(--light-card) !important;
    border-color: var(--light-border);
    box-shadow: var(--light-shadow-raised);
}

html:not(.dark) body.portal-explore-body,
html:not(.dark) .portal-website-frame,
html:not(.dark) .portal-website-fallback {
    background-color: var(--light-bg) !important;
}

html:not(.dark) .portal-website-iframe {
    background-color: var(--light-card) !important;
}

html:not(.dark) .att-class-row:hover,
html:not(.dark) .att-class-row.is-selected {
    background-color: var(--light-hover) !important;
}

html:not(.dark) .responsive-table tbody tr {
    background-color: var(--light-card) !important;
    border-color: var(--light-border) !important;
    box-shadow: var(--light-shadow-raised);
}

/* AI assistant surfaces */
html:not(.dark) .ai-panel,
html:not(.dark) .ai-chats,
html:not(.dark) .ai-msg-assistant,
html:not(.dark) .ai-composer,
html:not(.dark) .ai-fresh-card {
    background: var(--light-card) !important;
    border-color: var(--light-border) !important;
    box-shadow: var(--light-shadow-raised);
}

html:not(.dark) .ai-messages,
html:not(.dark) .ai-chats-head,
html:not(.dark) .ai-suggestions {
    background: var(--light-well) !important;
}

/* Fayda scanner */
html:not(.dark) {
    --fayda-surface: #f3f3f3;
    --fayda-surface-muted: #dcdcdc;
    --fayda-border: #d0d0d0;
    --fayda-shadow: 5px 6px 16px rgba(163, 163, 163, 0.36), -4px -5px 12px rgba(255, 255, 255, 0.92);
}

@media print {
    html:not(.dark) body,
    html:not(.dark) body.bg-white,
    html:not(.dark) body.bg-gray-50 {
        background: #fff !important;
        background-image: none !important;
    }
}