/* The existing app owns layout and behavior. This layer only sets its visual tokens. */
:root, :host {
    --expert-ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --expert-ui-red: #dc2626;
    --expert-ui-red-dark: #b91c1c;
    --expert-ui-red-soft: #fef2f2;
    --expert-ui-bg: #fafafa;
    --expert-ui-surface: #ffffff;
    --expert-ui-ink: #18181b;
    --expert-ui-muted: #71717a;
    --expert-ui-line: #f0f0f2;
    --expert-ui-shadow: 0 2px 10px rgb(0 0 0 / 0.04);
}

:is(#root.expert-admin-ui, #acl-app-root.acl-dashboard-root, .acl-course-shell, .acl-course-landing, .acl-layout-agency, .acl-learn-page, .acl-auth-page, .acl-portal, #acl-dashboard-wrap, .acl-source-app) {
    font-family: var(--expert-ui-font) !important;
    -webkit-font-smoothing: antialiased;
    --font-sans: var(--expert-ui-font);
    --brand-font: var(--expert-ui-font);
    --acl-brand-font: var(--expert-ui-font);
    --acl-ai-font: var(--expert-ui-font);
    --acl-ai-border: 1px solid var(--expert-ui-line);
    --acl-ai-shadow: var(--expert-ui-shadow);
    --acl-ai-shadow-red: var(--expert-ui-shadow);
    --acl18-border: 1px solid var(--expert-ui-line);
    --acl18-shadow: var(--expert-ui-shadow);
    --acl18-shadow-small: var(--expert-ui-shadow);
    --acl-admin-shadow: var(--expert-ui-shadow);
}

:is(#root.expert-admin-ui, #acl-app-root.acl-dashboard-root, .acl-course-shell, .acl-course-landing, .acl-layout-agency, .acl-learn-page, .acl-auth-page, .acl-portal, #acl-dashboard-wrap, .acl-source-app)
    :where(h1,h2,h3,h4,h5,h6,p,a,button,input,textarea,select,label,span,small,strong,li,td,th,div):not(.material-symbols-outlined):not([class*='font-mono']) {
    font-family: var(--expert-ui-font) !important;
}

#root.expert-admin-ui :where(*):not(.material-symbols-outlined):not(code):not(pre):not(kbd):not([class*='font-mono']) {
    font-family: var(--expert-ui-font) !important;
}
#root.expert-admin-ui :is(code,pre,kbd,[class*='font-mono']) {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
}

:is(#root.expert-admin-ui, .acl-dashboard-root, .acl-source-app) :is(h1,h2,h3,h4) {
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.4;
}

#root.expert-admin-ui [data-component='layout.admin-shell'],
#root.expert-admin-ui [data-component='layout.admin-shell'] > div > main,
#acl-app-root.acl-dashboard-root,
.acl-dashboard-tw-wrapper {
    background: var(--expert-ui-bg) !important;
    background-image: none !important;
    color: var(--expert-ui-ink);
}

#root.expert-admin-ui :is(div,section,article)[class*='bg-white'][class*='rounded'],
.acl-dashboard-tw-wrapper :is(div,section,article)[class*='bg-white'][class*='rounded'],
:is(.acl-course-panel,.acl-agency-card,.acl-learn-card,.acl-learn-sidebar,.acl-module,.acl-stat-card,.acl-admin-card) {
    background: var(--expert-ui-surface) !important;
    border-color: var(--expert-ui-line) !important;
    border-width: 1px !important;
    border-radius: 16px !important;
    box-shadow: var(--expert-ui-shadow) !important;
}

#root.expert-admin-ui :is(div,section,article)[class*='shadow']:not([role='dialog']):not([class*='fixed']),
.acl-dashboard-tw-wrapper :is(.shadow-sm,.shadow-md,.shadow-lg) {
    box-shadow: var(--expert-ui-shadow) !important;
}

#root.expert-admin-ui [data-component='nav.sidebar'] {
    background: var(--expert-ui-bg) !important;
    background-image: none !important;
    color: #3f3f46 !important;
    border-color: #e4e4e7 !important;
    box-shadow: none !important;
}

#root.expert-admin-ui [data-component='nav.sidebar'] :is(div,button)[class*='bg-[#'],
#root.expert-admin-ui [data-component='nav.sidebar'] [class*='bg-white/'] {
    background: transparent !important;
    border-color: #e4e4e7 !important;
}
#root.expert-admin-ui [data-component='nav.sidebar'] :is(button,span,svg)[class*='text-'] {
    color: #52525b !important;
}
#root.expert-admin-ui [data-component='nav.sidebar'] :is(button,span,svg)[class*='text-white'] {
    color: #27272a !important;
}
#root.expert-admin-ui [data-component='nav.sidebar'] button:hover {
    background: #f4f4f5 !important;
    color: #27272a !important;
}
#root.expert-admin-ui [data-component='nav.sidebar'] button[aria-current='page'],
#root.expert-admin-ui [data-component='nav.sidebar'] button[data-active='true'],
#root.expert-admin-ui [data-component='nav.sidebar'] button[class*='bg-[#B81414]'],
.acl-dashboard-tw-wrapper .nav-link.active {
    background: var(--expert-ui-red-soft) !important;
    color: var(--expert-ui-red-dark) !important;
    box-shadow: none !important;
}
#root.expert-admin-ui [data-component='nav.sidebar'] button[aria-current='page'] :is(span,svg),
#root.expert-admin-ui [data-component='nav.sidebar'] button[data-active='true'] :is(span,svg),
#root.expert-admin-ui [data-component='nav.sidebar'] button[class*='bg-[#B81414]'] :is(span,svg),
.acl-dashboard-tw-wrapper .nav-link.active :is(span,svg) {
    color: var(--expert-ui-red-dark) !important;
}
#root.expert-admin-ui [data-component='nav.sidebar'] button[aria-current='page'] > span:first-child:not(:last-child) {
    background: var(--expert-ui-red) !important;
}
#root.expert-admin-ui [data-component='nav.sidebar'] input {
    background: var(--expert-ui-surface) !important;
    border: 1px solid #e4e4e7 !important;
    color: #27272a !important;
}
#root.expert-admin-ui [data-component='nav.sidebar'] input::placeholder { color: #71717a !important; }
#root.expert-admin-ui [data-component='nav.sidebar'] [class*='bg-white/10'] { background: #e4e4e7 !important; }
#root.expert-admin-ui [data-component='nav.sidebar'] [class*='border-[#'] { border-color: #e4e4e7 !important; }
#root.expert-admin-ui [data-component='nav.sidebar'] [class*='text-slate-600'] { color: #71717a !important; }

#root.expert-admin-ui :is(input,textarea,select) {
    border-color: #e4e4e7 !important;
    border-width: 1px !important;
    font-size: 14px;
}
#root.expert-admin-ui :is(input,textarea,select)::placeholder { color: #71717a; }
#root.expert-admin-ui button:not([class*='rounded-full']) { border-radius: 10px; }
#root.expert-admin-ui button:disabled { cursor: not-allowed; }
#root.expert-admin-ui [data-component='reports.kpi'] { container-type: inline-size; }
#root.expert-admin-ui [data-component='reports.kpi'] > div:nth-child(2) {
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
#root.expert-admin-ui [data-component='reports.kpi'][data-long-value='true'] > div:nth-child(2) {
    font-size: min(26px, 14cqw);
}
#root.expert-admin-ui [data-component='reports.kpi'] > div:first-child > span {
    font-weight: 600;
    font-size: 11px;
}
#root.expert-admin-ui :is(.bg-primary,.bg-red-600) { background: var(--expert-ui-red) !important; }
#root.expert-admin-ui :is(.text-primary,.text-red-600) { color: var(--expert-ui-red) !important; }
#root.expert-admin-ui :is(.text-slate-400,.text-gray-400,.text-slate-500,.text-gray-500) {
    color: var(--expert-ui-muted) !important;
}

:is(#root.expert-admin-ui, .acl-dashboard-root, .acl-course-shell, .acl-learn-page, .acl-source-app) :is(button,a,input,select,textarea):focus-visible {
    outline: 2px solid var(--expert-ui-red) !important;
    outline-offset: 3px;
}
:is(#root.expert-admin-ui, .acl-dashboard-root, .acl-source-app) {
    scrollbar-width: thin;
    scrollbar-color: #c4c4cc transparent;
}
:is(#root.expert-admin-ui, .acl-dashboard-root, .acl-source-app) * {
    scrollbar-width: thin;
    scrollbar-color: #c4c4cc transparent;
}

/* Source course templates keep their existing columns, sticky rails and tabs. */
.acl-source-app { background: var(--expert-ui-bg) !important; color: var(--expert-ui-ink); }
.acl-source-app :is(.rounded-xl,.rounded-2xl,.rounded-3xl)[class*='bg-white'] {
    border-color: var(--expert-ui-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--expert-ui-shadow) !important;
}
.acl-source-app :is(.bg-blue-600,.bg-emerald-600,.bg-indigo-600) { background: var(--expert-ui-red) !important; }
.acl-source-app :is(.text-blue-600,.text-emerald-600,.text-indigo-600) { color: var(--expert-ui-red) !important; }
.acl-source-app :is(.bg-blue-50,.bg-emerald-50,.bg-indigo-50) { background: var(--expert-ui-red-soft) !important; }
.acl-source-app :is(.shadow-xl,.shadow-2xl,.shadow-lg) { box-shadow: var(--expert-ui-shadow) !important; }

.expert-ui-local-preview .expert-preview-notice {
    position: fixed;
    right: 12px;
    bottom: 8px;
    z-index: 150;
    padding: 5px 9px;
    border: 1px solid #e4e4e7;
    border-radius: 6px;
    background: white;
    color: #71717a;
    font: 11px var(--expert-ui-font);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    :is(#root.expert-admin-ui, .acl-dashboard-root, .acl-source-app) *,
    :is(#root.expert-admin-ui, .acl-dashboard-root, .acl-source-app) *::before,
    :is(#root.expert-admin-ui, .acl-dashboard-root, .acl-source-app) *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 640px) {
    #root.expert-admin-ui [data-component='nav.topbar'] > div:first-child > div > div:first-child {
        display: none;
    }
}