/*
 * Sadid Design System v2
 * The final visual layer shared by public, authentication and dashboard pages.
 */

:root {
    --sadid-ink: #14213d;
    --sadid-ink-soft: #374869;
    --sadid-muted: #6b7a99;
    --sadid-primary: #2563eb;
    --sadid-primary-hover: #1d4ed8;
    --sadid-primary-soft: #eaf2ff;
    --sadid-accent: #0ea5e9;
    --sadid-canvas: #f2f7ff;
    --sadid-surface: #ffffff;
    --sadid-surface-alt: #f8fbff;
    --sadid-line: #dbe7f5;
    --sadid-line-strong: #c6d8ec;
    --sadid-danger: #bd514c;
    --sadid-warning: #a36c28;
    --sadid-info: #0284c7;
    --sadid-success: #16a34a;
    --sadid-radius-sm: 10px;
    --sadid-radius-md: 14px;
    --sadid-radius-lg: 20px;
    --sadid-radius-xl: 26px;
    --sadid-shadow-xs: 0 1px 2px rgba(20, 33, 61, 0.035);
    --sadid-shadow-sm: 0 9px 28px rgba(20, 33, 61, 0.065);
    --sadid-shadow-md: 0 20px 55px rgba(20, 33, 61, 0.11);
    --sadid-focus: 0 0 0 4px rgba(37, 99, 235, 0.11);
}

html[data-bs-theme="dark"] {
    --sadid-ink: #edf4ff;
    --sadid-ink-soft: #cedbf0;
    --sadid-muted: #94a3b8;
    --sadid-primary: #60a5fa;
    --sadid-primary-hover: #93c5fd;
    --sadid-primary-soft: rgba(96, 165, 250, 0.14);
    --sadid-canvas: #081329;
    --sadid-surface: #0f1d36;
    --sadid-surface-alt: #172642;
    --sadid-line: rgba(255, 255, 255, 0.08);
    --sadid-line-strong: rgba(255, 255, 255, 0.14);
    --sadid-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
    --sadid-shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.2);
    --sadid-shadow-md: 0 22px 58px rgba(0, 0, 0, 0.3);
}

body.sadid-ui {
    --bs-primary: var(--sadid-primary);
    --bs-primary-rgb: 37, 99, 235;
    --bs-secondary: var(--sadid-accent);
    --bs-secondary-rgb: 14, 165, 233;
    --bs-success: var(--sadid-success);
    --bs-success-rgb: 22, 163, 74;
    --bs-info: var(--sadid-info);
    --bs-info-rgb: 2, 132, 199;
    --bs-warning: var(--sadid-warning);
    --bs-warning-rgb: 163, 108, 40;
    --bs-danger: var(--sadid-danger);
    --bs-danger-rgb: 189, 81, 76;
    --bs-link-color: var(--sadid-primary);
    --bs-link-hover-color: var(--sadid-primary-hover);
    min-width: 320px;
    color: var(--sadid-ink);
    font-family: IRANYekanX, sans-serif !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.sadid-ui :is(button, input, select, textarea, .select2-container, .dropdown-menu, .tooltip, .popover) {
    font-family: IRANYekanX, sans-serif !important;
}

body.sadid-ui :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.3);
    outline-offset: 3px;
}

body.sadid-ui :is(.text-primary, a.text-primary) {
    color: var(--sadid-primary) !important;
}

body.sadid-ui :is(.bg-primary, .text-bg-primary) {
    background-color: var(--sadid-primary) !important;
}

body.sadid-ui .bg-primary-subtle {
    color: var(--sadid-primary) !important;
    background-color: var(--sadid-primary-soft) !important;
}

/* Public pages outside the full landing and authentication flows */
body.sadid-ui:not([data-dashboard-ui="modern"]):not(.auth-surface):not(:has(.sd-landing)) {
    background:
        radial-gradient(circle at 82% 0%, rgba(37, 99, 235, 0.06), transparent 25rem),
        var(--sadid-canvas);
}

body.sadid-ui:not([data-dashboard-ui="modern"]):not(.auth-surface):not(:has(.sd-landing)) #main {
    width: min(1120px, calc(100% - 32px));
    margin: 32px auto;
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: var(--sadid-radius-xl);
    background: var(--sadid-surface);
    box-shadow: var(--sadid-shadow-md);
}

/* Landing: same calm, editorial palette */
body.sadid-ui .sd-landing {
    --sd-ink: var(--sadid-ink);
    --sd-muted: var(--sadid-muted);
    --sd-line: var(--sadid-line);
    --sd-paper: var(--sadid-surface-alt);
    --sd-white: #ffffff;
    --sd-blue: var(--sadid-primary);
    --sd-blue-dark: var(--sadid-primary-hover);
    --sd-violet: var(--sadid-accent);
    --sd-green: var(--sadid-success);
    --sd-orange: var(--sadid-accent);
    --sd-navy: #08162d;
    --sd-navy-soft: #10284a;
    background: var(--sadid-surface);
}

body.sadid-ui .sd-brand__mark,
body.sadid-ui .sd-button,
body.sadid-ui .sd-button--hero {
    background: linear-gradient(145deg, #3b82f6, #1d4ed8);
    box-shadow: 0 11px 26px rgba(37, 99, 235, 0.2);
}

body.sadid-ui .sd-header.is-scrolled {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(20, 33, 61, 0.06);
    box-shadow: 0 10px 34px rgba(20, 33, 61, 0.07);
}

body.sadid-ui .sd-hero {
    background:
        radial-gradient(circle at 73% 28%, rgba(14, 165, 233, 0.14), transparent 24rem),
        radial-gradient(circle at 15% 84%, rgba(14, 165, 233, 0.09), transparent 23rem),
        linear-gradient(145deg, #0b1733 0%, #102f55 56%, #08162d 100%);
}

body.sadid-ui .sd-hero::after {
    background: linear-gradient(to top, rgba(8, 22, 45, 0.3), transparent);
}

body.sadid-ui .sd-hero__glow--one,
body.sadid-ui .sd-hero__glow--two {
    background: rgba(59, 130, 246, 0.14);
}

body.sadid-ui :is(.sd-eyebrow, .sd-section-kicker, .sd-card-kicker) {
    color: #60a5fa;
}

body.sadid-ui .sd-eyebrow {
    color: #b7cec5;
    background: rgba(96, 165, 250, 0.1);
}

body.sadid-ui .sd-eyebrow__pulse {
    background: #93c5fd;
}

body.sadid-ui .sd-hero h1 span {
    background: linear-gradient(100deg, #bfdbfe 5%, #93c5fd 82%);
    background-clip: text;
    -webkit-background-clip: text;
}

body.sadid-ui .sd-dashboard {
    background: #f1f6ff;
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 34px 75px rgba(6, 18, 38, 0.3);
}

body.sadid-ui .sd-dashboard__sidebar,
body.sadid-ui .sd-grading-ui__toolbar {
    background: #101d35;
}

body.sadid-ui .sd-dashboard__sidebar span.active {
    color: #bfdbfe;
    background: rgba(96, 165, 250, 0.16);
}

body.sadid-ui :is(.sd-mini-logo, .sd-question-ui__footer button, .sd-question-ui__option.is-selected i) {
    background: var(--sadid-primary);
}

body.sadid-ui .sd-dashboard__avatar {
    background: linear-gradient(135deg, #0ea5e9, #0ea5e9) !important;
}

body.sadid-ui .sd-metric__icon--blue,
body.sadid-ui .sd-metric__icon--violet,
body.sadid-ui .sd-metric__icon--orange {
    color: var(--sadid-primary);
    background: var(--sadid-primary-soft);
}

body.sadid-ui .sd-chart__bars span.is-active {
    background: linear-gradient(to top, #2563eb, #60a5fa);
}

body.sadid-ui .sd-donut {
    background: conic-gradient(#2563eb 0 68%, #0ea5e9 68% 84%, #dce8f7 84%);
}

body.sadid-ui .sd-progress-legend :is(.is-blue, .is-purple) {
    background: var(--sadid-primary);
}

body.sadid-ui .sd-bento-section {
    background: linear-gradient(180deg, #ffffff, #f4f8ff);
}

body.sadid-ui .sd-bento-card {
    border-color: var(--sadid-line);
    background: var(--sadid-surface-alt);
}

body.sadid-ui .sd-bento-card--blue,
body.sadid-ui .sd-bento-card--violet,
body.sadid-ui .sd-bento-card--light {
    border-color: var(--sadid-line);
    background:
        radial-gradient(circle at 95% 0%, rgba(37, 99, 235, 0.06), transparent 16rem),
        linear-gradient(145deg, #fbfdff, #f2f7ff);
}

body.sadid-ui .sd-bento-card--dark {
    border-color: rgba(255, 255, 255, 0.07);
    background:
        radial-gradient(circle at 90% 5%, rgba(96, 165, 250, 0.12), transparent 17rem),
        #101d35;
}

body.sadid-ui :is(.sd-feature-icon, .sd-feature-icon--green, .sd-feature-icon--violet) {
    color: var(--sadid-primary);
    border-color: rgba(37, 99, 235, 0.1);
    background: var(--sadid-primary-soft);
}

body.sadid-ui .sd-question-ui__option.is-selected {
    border-color: #7dd3fc;
    background: var(--sadid-primary-soft);
}

body.sadid-ui .sd-report-ui__head > span,
body.sadid-ui .sd-report-ui__insight {
    color: var(--sadid-primary);
    background: var(--sadid-primary-soft);
}

body.sadid-ui .sd-report-ui__row > span i {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

body.sadid-ui .sd-workflow {
    background:
        radial-gradient(circle at 8% 28%, rgba(96, 165, 250, 0.1), transparent 29%),
        radial-gradient(circle at 90% 85%, rgba(14, 165, 233, 0.08), transparent 32%),
        #0b1733;
}

body.sadid-ui .sd-section-kicker--light,
body.sadid-ui .sd-step__icon {
    color: #bfdbfe;
}

body.sadid-ui .sd-step__icon {
    border-color: rgba(96, 165, 250, 0.14);
    background: rgba(96, 165, 250, 0.1);
}

body.sadid-ui .sd-step::before {
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.12), transparent);
}

body.sadid-ui .sd-step:hover,
body.sadid-ui .sd-step.is-active {
    border-color: rgba(96, 165, 250, 0.18);
    background: rgba(96, 165, 250, 0.08);
}

body.sadid-ui .sd-roles,
body.sadid-ui .sd-cta {
    background: var(--sadid-surface);
}

body.sadid-ui .sd-role-card {
    border-color: var(--sadid-line);
    background: var(--sadid-surface);
    box-shadow: var(--sadid-shadow-xs);
}

body.sadid-ui .sd-role-card:hover,
body.sadid-ui .sd-role-card--featured {
    border-color: #93c5fd;
    box-shadow: var(--sadid-shadow-md);
}

body.sadid-ui .sd-role-card__icon--blue,
body.sadid-ui .sd-role-card__icon--violet,
body.sadid-ui .sd-role-card__icon--green {
    color: var(--sadid-primary);
    background: var(--sadid-primary-soft);
}

body.sadid-ui .sd-role-card__tag {
    color: var(--sadid-muted);
    background: var(--sadid-surface-alt);
}

body.sadid-ui .sd-faq {
    border-color: var(--sadid-line);
    background: var(--sadid-canvas);
}

body.sadid-ui .sd-accordion {
    border-color: var(--sadid-line);
    background: var(--sadid-surface);
    box-shadow: var(--sadid-shadow-sm);
}

body.sadid-ui .sd-accordion__item + .sd-accordion__item {
    border-color: var(--sadid-line);
}

body.sadid-ui .sd-accordion__item button > i {
    color: var(--sadid-primary);
    background: var(--sadid-primary-soft);
}

body.sadid-ui .sd-accordion__item.is-open button > i {
    color: #fff;
    background: var(--sadid-primary);
}

body.sadid-ui .sd-cta__card {
    background:
        radial-gradient(circle at 88% 20%, rgba(14, 165, 233, 0.18), transparent 30%),
        linear-gradient(130deg, #123d72, #2563eb 54%, #14345f);
    box-shadow: 0 30px 72px rgba(10, 38, 48, 0.2);
}

body.sadid-ui .sd-cta__glow {
    background: rgba(96, 165, 250, 0.2);
}

body.sadid-ui .sd-button--white {
    color: var(--sadid-primary) !important;
    background: #ffffff;
}

body.sadid-ui .sd-footer {
    color: rgba(219, 234, 254, 0.66);
    background: #09162d;
}

body.sadid-ui .sd-footer__bottom i {
    color: #7dd3fc;
}

/* Dashboard foundation */
body.sadid-ui[data-dashboard-ui="modern"] {
    --dm-navy-950: #09162d;
    --dm-navy-900: #101d35;
    --dm-ink: var(--sadid-ink);
    --dm-muted: var(--sadid-muted);
    --dm-primary: var(--sadid-primary);
    --dm-primary-soft: var(--sadid-primary-soft);
    --dm-success: var(--sadid-success);
    --dm-surface: var(--sadid-surface);
    --dm-canvas: var(--sadid-canvas);
    --dm-line: var(--sadid-line);
    --dm-line-strong: var(--sadid-line-strong);
    --dm-shadow-xs: var(--sadid-shadow-xs);
    --dm-shadow-sm: var(--sadid-shadow-sm);
    --dm-shadow-md: var(--sadid-shadow-md);
    --dm-focus: var(--sadid-focus);
    --ux-blue: var(--sadid-primary);
    --ux-blue-deep: var(--sadid-primary-hover);
    --ux-purple: var(--sadid-accent);
    --ux-cyan: var(--sadid-info);
    --ux-green: var(--sadid-success);
    --ux-orange: var(--sadid-warning);
    background: var(--sadid-canvas);
}

html[data-bs-theme="dark"] body.sadid-ui[data-dashboard-ui="modern"] {
    --dm-ink: var(--sadid-ink);
    --dm-muted: var(--sadid-muted);
    --dm-primary: var(--sadid-primary);
    --dm-primary-soft: var(--sadid-primary-soft);
    --dm-surface: var(--sadid-surface);
    --dm-canvas: var(--sadid-canvas);
    --dm-line: var(--sadid-line);
    --dm-line-strong: var(--sadid-line-strong);
}

body.sadid-ui[data-dashboard-ui="modern"] #main-wrapper {
    gap: 16px;
    background:
        radial-gradient(circle at 78% 0%, rgba(37, 99, 235, 0.055), transparent 24rem),
        var(--sadid-canvas);
}

body.sadid-ui[data-dashboard-ui="modern"] .left-sidebar {
    color: #dbeafe;
    background:
        radial-gradient(circle at 15% 3%, rgba(96, 165, 250, 0.11), transparent 15rem),
        linear-gradient(180deg, #101f3d, #09162d);
    border-color: rgba(255, 255, 255, 0.055);
    box-shadow: 0 20px 52px rgba(8, 22, 45, 0.22);
}

body.sadid-ui[data-dashboard-ui="modern"] :is(.app-brand__mark, .app-footer__mark) {
    background: linear-gradient(145deg, #3b82f6, #2563eb);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 9px 20px rgba(8, 22, 45, 0.28);
}

body.sadid-ui[data-dashboard-ui="modern"] .left-sidebar .nav-small-cap {
    color: rgba(219, 234, 254, 0.4);
}

body.sadid-ui[data-dashboard-ui="modern"] .left-sidebar .nav-small-cap-icon {
    color: rgba(96, 165, 250, 0.55);
}

body.sadid-ui[data-dashboard-ui="modern"] .left-sidebar .sidebar-nav ul .sidebar-item > .sidebar-link {
    color: rgba(219, 234, 254, 0.72);
}

body.sadid-ui[data-dashboard-ui="modern"] .left-sidebar .sidebar-nav ul .sidebar-item > .sidebar-link:hover,
body.sadid-ui[data-dashboard-ui="modern"] .left-sidebar .sidebar-nav ul .sidebar-item > .sidebar-link.is-current {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.045);
}

body.sadid-ui[data-dashboard-ui="modern"] .left-sidebar .sidebar-nav ul .sidebar-item > .sidebar-link.active {
    color: #fff;
    background: linear-gradient(120deg, #3b82f6, #2563eb);
    border-color: rgba(147, 197, 253, 0.2);
    box-shadow: 0 9px 22px rgba(7, 25, 52, 0.28);
}

body.sadid-ui[data-dashboard-ui="modern"] .left-sidebar .sidebar-link .aside-icon {
    color: #93c5fd;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.04);
}

body.sadid-ui[data-dashboard-ui="modern"] .page-wrapper {
    min-width: 0;
}

body.sadid-ui[data-dashboard-ui="modern"] .body-wrapper > .container-fluid {
    width: 100%;
    max-width: 1600px;
    padding-right: 0;
}

body.sadid-ui[data-dashboard-ui="modern"] .app-topbar {
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: var(--sadid-radius-lg);
    background: color-mix(in srgb, var(--sadid-surface) 92%, transparent) !important;
    box-shadow: var(--sadid-shadow-sm);
}

body.sadid-ui[data-dashboard-ui="modern"] .app-topbar .nav-link:hover {
    color: var(--sadid-primary);
    background: var(--sadid-primary-soft);
}

body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero {
    --hero-accent: var(--sadid-primary) !important;
    --hero-accent-deep: var(--sadid-primary-hover) !important;
    overflow: hidden;
    min-height: 126px;
    margin-bottom: 18px;
    border: 1px solid var(--sadid-line);
    border-radius: var(--sadid-radius-xl);
    color: var(--sadid-ink);
    background:
        radial-gradient(circle at 95% 0%, rgba(37, 99, 235, 0.08), transparent 18rem),
        linear-gradient(135deg, var(--sadid-surface), var(--sadid-surface-alt));
    box-shadow: var(--sadid-shadow-sm);
}

body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero[data-tone] {
    --hero-accent: var(--sadid-primary) !important;
    --hero-accent-deep: var(--sadid-primary-hover) !important;
}

body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero::before,
body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero::after {
    border-color: rgba(37, 99, 235, 0.09);
    background: transparent;
}

body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero .app-page-heading__icon {
    color: var(--sadid-primary);
    background: var(--sadid-primary-soft);
    border-color: rgba(37, 99, 235, 0.1);
}

body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero h1 {
    color: var(--sadid-ink);
}

body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero .app-page-heading__eyebrow,
body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero__copy p {
    color: var(--sadid-muted) !important;
}

body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero .app-page-heading__eyebrow i,
body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero__status i {
    background: var(--sadid-primary);
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero__status {
    color: var(--sadid-primary) !important;
    border-color: rgba(37, 99, 235, 0.12);
    background: var(--sadid-primary-soft);
}

body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero .app-breadcrumb {
    border-color: var(--sadid-line);
    background: rgba(255, 255, 255, 0.68);
}

body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero .breadcrumb-item,
body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero .breadcrumb-item.active,
body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero .breadcrumb-item a,
body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero .breadcrumb-item::before {
    color: var(--sadid-muted) !important;
}

body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero .breadcrumb-item.active {
    color: var(--sadid-ink) !important;
}

/* Content rhythm and cards */
body.sadid-ui[data-dashboard-ui="modern"] #admin-content-area {
    min-width: 0;
}

body.sadid-ui[data-dashboard-ui="modern"] #admin-content-area > .app-content-root {
    margin-bottom: 18px;
}

body.sadid-ui[data-dashboard-ui="modern"] #admin-content-area .card {
    overflow: hidden;
    border: 1px solid var(--sadid-line) !important;
    border-radius: var(--sadid-radius-lg) !important;
    background: var(--sadid-surface);
    box-shadow: var(--sadid-shadow-xs);
}

body.sadid-ui[data-dashboard-ui="modern"] #admin-content-area .card:hover {
    border-color: var(--sadid-line-strong) !important;
    box-shadow: var(--sadid-shadow-sm);
}

body.sadid-ui[data-dashboard-ui="modern"] #admin-content-area .card-header {
    min-height: 58px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sadid-line);
    color: var(--sadid-ink);
    background: var(--sadid-surface-alt) !important;
}

body.sadid-ui[data-dashboard-ui="modern"] #admin-content-area .card-header.app-section-heading {
    background: linear-gradient(105deg, var(--sadid-primary-soft), var(--sadid-surface-alt)) !important;
}

body.sadid-ui[data-dashboard-ui="modern"] #admin-content-area .card-header.app-section-heading::before {
    background: var(--sadid-primary);
}

body.sadid-ui[data-dashboard-ui="modern"] #admin-content-area .card-header.app-card-header--actionable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

body.sadid-ui[data-dashboard-ui="modern"] #admin-content-area .card-body {
    padding: clamp(17px, 2.2vw, 24px);
}

body.sadid-ui[data-dashboard-ui="modern"] #admin-content-area .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

/* Forms */
body.sadid-ui :is(.form-label, label.control-label) {
    margin-bottom: 7px;
    color: var(--sadid-ink-soft);
    font-size: 0.78rem;
    font-weight: 800;
}

body.sadid-ui :is(.form-control, .form-select, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple) {
    min-height: 44px;
    border: 1px solid var(--sadid-line-strong) !important;
    border-radius: var(--sadid-radius-md) !important;
    color: var(--sadid-ink);
    background-color: var(--sadid-surface) !important;
    box-shadow: var(--sadid-shadow-xs);
}

body.sadid-ui :is(.form-control, .form-select):hover {
    border-color: color-mix(in srgb, var(--sadid-primary) 45%, var(--sadid-line)) !important;
}

body.sadid-ui :is(.form-control, .form-select):focus,
body.sadid-ui .select2-container--focus .select2-selection,
body.sadid-ui .select2-container--open .select2-selection {
    border-color: var(--sadid-primary) !important;
    box-shadow: var(--sadid-focus) !important;
    outline: 0;
}

body.sadid-ui .form-control::placeholder {
    color: #94a3b8 !important;
}

body.sadid-ui textarea.form-control {
    min-height: 118px;
    line-height: 1.85;
}

body.sadid-ui :is(.input-group-text, .input-group .btn) {
    border-color: var(--sadid-line-strong);
    background: var(--sadid-surface-alt);
}

body.sadid-ui :is(.invalid-feedback, .help-block-error, .app-field-error) {
    margin-top: 6px;
    color: var(--sadid-danger);
    font-size: 0.72rem;
    font-weight: 700;
}

body.sadid-ui .form-text {
    color: var(--sadid-muted);
    font-size: 0.7rem;
}

/* Buttons and actions */
body.sadid-ui .btn {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 12px !important;
    font-size: 0.78rem;
    font-weight: 800;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

body.sadid-ui .btn:hover {
    transform: translateY(-1px);
}

body.sadid-ui .btn-primary {
    border-color: var(--sadid-primary) !important;
    color: #fff !important;
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.16);
}

body.sadid-ui .btn-primary:hover,
body.sadid-ui .btn-primary:focus {
    border-color: var(--sadid-primary-hover) !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
}

body.sadid-ui :is(.btn-light, .btn-outline-secondary) {
    border-color: var(--sadid-line-strong);
    color: var(--sadid-ink-soft);
    background: var(--sadid-surface);
}

body.sadid-ui .btn-outline-primary {
    border-color: color-mix(in srgb, var(--sadid-primary) 60%, var(--sadid-line));
    color: var(--sadid-primary);
    background: transparent;
}

body.sadid-ui .btn-outline-primary:hover {
    border-color: var(--sadid-primary);
    color: #fff;
    background: var(--sadid-primary);
}

body.sadid-ui .app-button-group {
    gap: 5px;
    padding: 4px;
    border: 1px solid var(--sadid-line);
    border-radius: 14px;
    background: var(--sadid-surface-alt);
}

body.sadid-ui .app-button-group > .btn {
    border-radius: 9px !important;
}

/* Data surfaces */
body.sadid-ui .app-table-scroll,
body.sadid-ui .table-responsive {
    overflow: auto;
    border: 1px solid var(--sadid-line);
    border-radius: 15px;
    scrollbar-width: thin;
    scrollbar-color: #b8c2bc transparent;
}

body.sadid-ui table.table {
    min-width: 720px;
    margin-bottom: 0;
    color: var(--sadid-ink);
    border-color: var(--sadid-line);
}

body.sadid-ui table.table > thead > tr > th {
    min-height: 48px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sadid-line-strong);
    color: var(--sadid-muted);
    background: var(--sadid-surface-alt) !important;
    font-size: 0.7rem;
    font-weight: 850;
    white-space: nowrap;
}

body.sadid-ui table.table > tbody > tr > td {
    padding: 12px 14px;
    border-color: var(--sadid-line);
    color: var(--sadid-ink-soft);
    background: var(--sadid-surface) !important;
    font-size: 0.74rem;
    vertical-align: middle;
}

body.sadid-ui table.table > tbody > tr:nth-child(even) > td {
    background: color-mix(in srgb, var(--sadid-surface-alt) 58%, var(--sadid-surface)) !important;
}

body.sadid-ui table.table > tbody > tr:hover > td {
    background: var(--sadid-primary-soft) !important;
}

body.sadid-ui .app-action-cell {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 128px;
    box-shadow: 8px 0 18px rgba(20, 33, 61, 0.04);
}

body.sadid-ui .app-action-cell .btn {
    min-width: 34px;
    min-height: 34px;
    padding: 6px 9px;
}

body.sadid-ui :is(.summary, .app-result-summary) {
    border-color: var(--sadid-line);
    color: var(--sadid-muted);
    background: var(--sadid-surface-alt);
}

body.sadid-ui :is(.pagination, .yiiPager) {
    gap: 5px;
    flex-wrap: wrap;
}

body.sadid-ui .page-link {
    min-width: 36px;
    min-height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--sadid-line);
    border-radius: 10px !important;
    color: var(--sadid-ink-soft);
    background: var(--sadid-surface);
}

body.sadid-ui .page-item.active .page-link {
    border-color: var(--sadid-primary);
    color: #fff;
    background: var(--sadid-primary);
}

/* Tabs, accordions and navigation */
body.sadid-ui .app-tabs,
body.sadid-ui .nav-tabs {
    gap: 5px;
    padding: 5px;
    border: 1px solid var(--sadid-line);
    border-radius: 14px;
    background: var(--sadid-surface-alt);
}

body.sadid-ui .nav-tabs .nav-link {
    min-height: 39px;
    padding: 8px 13px;
    border: 0 !important;
    border-radius: 10px;
    color: var(--sadid-muted);
    font-size: 0.75rem;
    font-weight: 800;
}

body.sadid-ui .nav-tabs .nav-link.active {
    color: var(--sadid-primary);
    background: var(--sadid-surface);
    box-shadow: var(--sadid-shadow-xs);
}

body.sadid-ui .accordion-item {
    overflow: hidden;
    margin-bottom: 8px;
    border: 1px solid var(--sadid-line);
    border-radius: 14px !important;
    background: var(--sadid-surface);
}

body.sadid-ui .accordion-button {
    color: var(--sadid-ink);
    background: var(--sadid-surface);
    font-weight: 800;
}

body.sadid-ui .accordion-button:not(.collapsed) {
    color: var(--sadid-primary);
    background: var(--sadid-primary-soft);
    box-shadow: none;
}

/* Status and feedback */
body.sadid-ui .badge {
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
}

body.sadid-ui .alert {
    border-width: 1px;
    border-radius: 15px;
    box-shadow: var(--sadid-shadow-xs);
    font-size: 0.76rem;
    line-height: 1.8;
}

body.sadid-ui .alert-info {
    border-color: rgba(2, 132, 199, 0.2);
    color: #12677c;
    background: #eaf7fa;
}

body.sadid-ui .alert-success {
    border-color: rgba(22, 163, 74, 0.2);
    color: #166534;
    background: #effaf3;
}

body.sadid-ui .alert-warning {
    border-color: rgba(163, 108, 40, 0.2);
    color: #81541e;
    background: #faf3e8;
}

body.sadid-ui .alert-danger {
    border-color: rgba(189, 81, 76, 0.2);
    color: #963e3a;
    background: #fbefee;
}

/* Menus, modals and overlays */
body.sadid-ui .dropdown-menu {
    padding: 7px;
    border: 1px solid var(--sadid-line);
    border-radius: 16px;
    background: var(--sadid-surface);
    box-shadow: var(--sadid-shadow-md);
}

body.sadid-ui .dropdown-item {
    min-height: 39px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    color: var(--sadid-ink-soft);
    font-size: 0.75rem;
}

body.sadid-ui .dropdown-item:hover,
body.sadid-ui .dropdown-item:focus {
    color: var(--sadid-primary);
    background: var(--sadid-primary-soft);
}

body.sadid-ui .modal-content {
    overflow: hidden;
    border: 1px solid var(--sadid-line);
    border-radius: 22px;
    background: var(--sadid-surface);
    box-shadow: 0 30px 90px rgba(10, 38, 48, 0.24);
}

body.sadid-ui .modal-header,
body.sadid-ui .modal-footer {
    border-color: var(--sadid-line);
    background: var(--sadid-surface-alt);
}

body.sadid-ui .modal-title {
    color: var(--sadid-ink);
    font-weight: 900;
}

body.sadid-ui .select2-dropdown {
    overflow: hidden;
    border: 1px solid var(--sadid-line-strong) !important;
    border-radius: 14px !important;
    background: var(--sadid-surface);
    box-shadow: var(--sadid-shadow-md);
}

body.sadid-ui .select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: #fff !important;
    background: var(--sadid-primary) !important;
}

body.sadid-ui .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 0 !important;
    color: #fff !important;
    background: var(--sadid-primary) !important;
}

/* Empty states and detail lists */
body.sadid-ui .app-empty-state {
    padding: 44px 20px !important;
    color: var(--sadid-muted);
    background: var(--sadid-surface-alt) !important;
}

body.sadid-ui .app-empty-state__icon {
    color: var(--sadid-primary);
    background: var(--sadid-primary-soft);
}

body.sadid-ui .detail-view th {
    width: min(230px, 34%);
    color: var(--sadid-muted);
    background: var(--sadid-surface-alt) !important;
}

body.sadid-ui .list-group-item {
    border-color: var(--sadid-line);
    color: var(--sadid-ink-soft);
    background: var(--sadid-surface);
}

/* Route-specific workflows: keep every product area inside the same visual language. */
body.sadid-ui[data-dashboard-ui="modern"][data-route] {
    --wf-purple: var(--sadid-primary);
    --wf-cyan: var(--sadid-primary);
    --wf-amber: var(--sadid-accent);
    --wf-danger: var(--sadid-danger);
}

body.sadid-ui[data-dashboard-ui="modern"][data-route="exam/index"] #admin-content-area .app-filter-card::before,
body.sadid-ui[data-dashboard-ui="modern"][data-route="exam/index"] #admin-content-area .exam-card::before {
    background: linear-gradient(90deg, var(--sadid-primary), var(--sadid-primary-hover));
}

body.sadid-ui[data-dashboard-ui="modern"][data-route="exam/index"] #admin-content-area .exam-filter-card {
    border-color: color-mix(in srgb, var(--sadid-primary) 18%, var(--sadid-line)) !important;
    box-shadow: var(--sadid-shadow-sm) !important;
}

body.sadid-ui[data-dashboard-ui="modern"][data-route="exam/index"] #admin-content-area .exam-filter-card .card-header {
    background: linear-gradient(110deg, var(--sadid-primary-soft), transparent) !important;
}

body.sadid-ui[data-dashboard-ui="modern"][data-route="exam/index"] #admin-content-area .exam-filter-card__icon {
    color: var(--sadid-primary);
    background: var(--sadid-primary-soft);
    border-color: color-mix(in srgb, var(--sadid-primary) 20%, var(--sadid-line));
}

body.sadid-ui[data-dashboard-ui="modern"][data-route="exam/index"] #admin-content-area .exam-card {
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--sadid-primary) 8%, transparent), transparent 10rem),
        var(--sadid-surface);
}

body.sadid-ui[data-dashboard-ui="modern"][data-route="exam/index"] #admin-content-area .exam-card:hover {
    border-color: color-mix(in srgb, var(--sadid-primary) 30%, var(--sadid-line));
}

body.sadid-ui[data-dashboard-ui="modern"][data-route="admin-panel/roles"] #admin-content-area #roles-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--sadid-primary), var(--sadid-primary-hover));
    box-shadow: 0 7px 17px rgba(37, 99, 235, 0.2);
}

body.sadid-ui[data-dashboard-ui="modern"][data-route^="question/"] #admin-content-area .question-form-card,
body.sadid-ui[data-dashboard-ui="modern"][data-route^="question-bank/"] #admin-content-area .question-form-card {
    background:
        radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--sadid-primary) 8%, transparent), transparent 16rem),
        var(--sadid-surface);
}

body.sadid-ui[data-dashboard-ui="modern"][data-route^="question/"] #admin-content-area .question-form-card > .card-body > .d-flex:first-child {
    background: linear-gradient(105deg, var(--sadid-primary-soft), transparent);
}

body.sadid-ui[data-dashboard-ui="modern"][data-route^="question/"] #admin-content-area .question-authoring-guide {
    background:
        linear-gradient(120deg, var(--sadid-primary-soft), color-mix(in srgb, var(--sadid-primary) 3%, transparent)),
        var(--sadid-surface);
    border-color: color-mix(in srgb, var(--sadid-primary) 18%, var(--sadid-line));
}

body.sadid-ui[data-dashboard-ui="modern"][data-route^="question/"] #admin-content-area .question-authoring-guide__icon {
    background: linear-gradient(135deg, var(--sadid-primary), var(--sadid-primary-hover));
    box-shadow: 0 9px 20px rgba(37, 99, 235, 0.2);
}

body.sadid-ui[data-dashboard-ui="modern"][data-route^="question/"] #admin-content-area .question-authoring-guide__steps li > span {
    color: var(--sadid-primary);
    background: var(--sadid-primary-soft);
}

body.sadid-ui[data-dashboard-ui="modern"][data-route^="admin-panel/"] #admin-content-area .card-body > .d-flex.justify-content-between.mb-3 {
    background:
        linear-gradient(110deg, color-mix(in srgb, var(--sadid-primary) 7%, transparent), transparent),
        var(--sadid-surface-alt);
}

body.sadid-ui[data-dashboard-ui="modern"][data-route$="scan-uploads"] #admin-content-area > .app-content-root > .row > .col-12 > .row.g-3.mb-4 .card::after {
    background: color-mix(in srgb, var(--sadid-primary) 7%, transparent);
}

body.sadid-ui[data-dashboard-ui="modern"][data-route$="scan-uploads"] #admin-content-area .request-progress-bar {
    box-shadow: 0 0 12px color-mix(in srgb, var(--sadid-primary) 24%, transparent);
}

body.sadid-ui[data-dashboard-ui="modern"][data-route="exam-analysis-dashboard/index"] #admin-content-area .exam-analysis-dashboard > .card:first-child {
    background:
        radial-gradient(circle at 10% 5%, color-mix(in srgb, var(--sadid-primary) 15%, transparent), transparent 16rem),
        linear-gradient(125deg, var(--sadid-primary-soft), var(--sadid-surface));
    border-color: color-mix(in srgb, var(--sadid-primary) 18%, var(--sadid-line));
}

body.sadid-ui[data-dashboard-ui="modern"][data-route="wallet/index"] #admin-content-area .app-content-root > .row:first-child > div:first-child .card {
    background:
        radial-gradient(circle at 8% 20%, rgba(255, 255, 255, 0.2), transparent 10rem),
        linear-gradient(120deg, var(--sadid-primary-hover), var(--sadid-primary));
}

body.sadid-ui[data-dashboard-ui="modern"][data-route="wallet/index"] #admin-content-area .app-content-root > .row:first-child > div:last-child .card {
    background:
        radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--sadid-primary) 9%, transparent), transparent 10rem),
        linear-gradient(120deg, var(--sadid-surface-alt), var(--sadid-surface));
}

body.sadid-ui[data-dashboard-ui="modern"][data-route^="package/"] #admin-content-area .package-admin-overview {
    background:
        radial-gradient(circle at 7% 15%, rgba(255, 255, 255, 0.17), transparent 13rem),
        linear-gradient(120deg, var(--sadid-primary-hover), var(--sadid-primary));
    box-shadow: 0 17px 40px rgba(37, 99, 235, 0.2);
}

body.sadid-ui[data-dashboard-ui="modern"][data-route^="package/"] #admin-content-area .package-admin-overview .btn-primary {
    border-color: #fff !important;
    color: var(--sadid-primary-hover) !important;
    background: #fff !important;
    box-shadow: none;
}

/* Responsive layout */
@media (max-width: 1199.98px) {
    body.sadid-ui[data-dashboard-ui="modern"] #main-wrapper {
        padding: 10px;
    }

    body.sadid-ui[data-dashboard-ui="modern"] .body-wrapper > .container-fluid {
        padding-inline: 0;
    }

    body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero {
        min-height: 112px;
    }
}

@media (max-width: 767.98px) {
    body.sadid-ui[data-dashboard-ui="modern"] #main-wrapper {
        padding: 8px;
    }

    body.sadid-ui[data-dashboard-ui="modern"] .app-topbar {
        border-radius: 16px;
    }

    body.sadid-ui[data-dashboard-ui="modern"] .app-page-hero {
        margin-bottom: 13px;
        border-radius: 18px;
    }

    body.sadid-ui[data-dashboard-ui="modern"] #admin-content-area .card {
        border-radius: 16px !important;
    }

    body.sadid-ui[data-dashboard-ui="modern"] #admin-content-area .card-header {
        padding: 12px 14px;
    }

    body.sadid-ui[data-dashboard-ui="modern"] #admin-content-area .card-body {
        padding: 14px;
    }

    body.sadid-ui .btn {
        min-height: 42px;
    }

    body.sadid-ui .app-card-header--actionable > :is(.btn, .btn-group, form) {
        width: 100%;
    }

    body.sadid-ui .app-card-header--actionable .btn {
        flex: 1;
    }

    body.sadid-ui .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.sadid-ui table.table {
        min-width: 660px;
    }

    body.sadid-ui .sd-container {
        width: min(100% - 28px, 1180px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.sadid-ui *,
    body.sadid-ui *::before,
    body.sadid-ui *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}