/*
 * SMKK final dark-theme readability layer.
 * Loaded after page Head sections so page-specific light-mode rules cannot
 * reintroduce dark-on-dark or pale-on-white combinations in a dark scheme.
 * Day/light themes never match these selectors.
 */

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) {
    --smkk-final-dark-bg: #0b1120;
    --smkk-final-dark-panel: #111827;
    --smkk-final-dark-panel-alt: #172033;
    --smkk-final-dark-raised: #1f2937;
    --smkk-final-dark-border: #64748b;
    --smkk-final-dark-border-strong: #94a3b8;
    --smkk-final-dark-text: #f8fafc;
    --smkk-final-dark-heading: #ffffff;
    --smkk-final-dark-muted: #d7dee8;
    --smkk-final-dark-link: #bfdbfe;
    --smkk-final-dark-control: #0f172a;
    background: var(--smkk-final-dark-bg) !important;
    color: var(--smkk-final-dark-text) !important;
    color-scheme: dark !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(
    .app-shell,
    .app-main,
    .app-card,
    .card,
    .panel,
    .form-card,
    .quick-card,
    .workspace-card,
    .dashboard-card,
    .summary-card,
    .metric-card,
    .stat-card,
    .filter-card,
    .detail-card,
    .timeline-card,
    .table-wrap,
    .table-shell,
    .table-responsive,
    .modal-content,
    .modal-card,
    .dropdown-menu,
    .dropdown-item,
    .popover,
    .sheet,
    dialog,
    [popover]
) {
    background: var(--smkk-final-dark-panel) !important;
    background-color: var(--smkk-final-dark-panel) !important;
    background-image: none !important;
    border-color: var(--smkk-final-dark-border) !important;
    color: var(--smkk-final-dark-text) !important;
    text-shadow: none !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(
    .app-card,
    .card,
    .panel,
    .form-card,
    .workspace-card,
    .dashboard-card,
    .modal-content,
    dialog
) :is(h1, h2, h3, h4, h5, h6, legend, label, strong) {
    color: var(--smkk-final-dark-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(
    .app-card,
    .card,
    .panel,
    .form-card,
    .workspace-card,
    .dashboard-card,
    .modal-content,
    dialog
) :is(p, small, em, .muted, .text-muted, .meta, .subtitle, .helper-text, .form-text) {
    color: var(--smkk-final-dark-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(input, select, textarea, .form-control, .form-select) {
    background: var(--smkk-final-dark-control) !important;
    background-color: var(--smkk-final-dark-control) !important;
    border-color: var(--smkk-final-dark-border-strong) !important;
    color: var(--smkk-final-dark-text) !important;
    caret-color: var(--smkk-final-dark-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(input, textarea, .form-control)::placeholder {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(table, .table, .dark-table) {
    background: var(--smkk-final-dark-panel) !important;
    border-color: var(--smkk-final-dark-border) !important;
    color: var(--smkk-final-dark-text) !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(table, .table, .dark-table) :is(th, td) {
    background: var(--smkk-final-dark-panel) !important;
    border-color: var(--smkk-final-dark-border) !important;
    color: var(--smkk-final-dark-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(table, .table, .dark-table) thead th {
    background: var(--smkk-final-dark-raised) !important;
    color: var(--smkk-final-dark-heading) !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(table, .table, .dark-table) tbody tr:nth-child(even) td {
    background: var(--smkk-final-dark-panel-alt) !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(a:not(.btn):not(.app-btn), .link-button) {
    color: var(--smkk-final-dark-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(.btn-primary, .app-btn.primary, button.primary) {
    background: #2563eb !important;
    border-color: #93c5fd !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(.btn-secondary, .btn-light, .app-btn.ghost, button.ghost) {
    background: #e5e7eb !important;
    border-color: #f8fafc !important;
    color: #111827 !important;
    -webkit-text-fill-color: currentColor !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(:focus-visible, input:focus, select:focus, textarea:focus) {
    outline-color: #fbbf24 !important;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.32) !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(.alert-success, .alert.success) {
    background: #123524 !important;
    border-color: #86efac !important;
    color: #dcfce7 !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(.alert-danger, .alert.error) {
    background: #3b1717 !important;
    border-color: #fca5a5 !important;
    color: #fee2e2 !important;
}

:is(
    html.smkk-readable-dark-theme,
    html[data-smkk-scheme="dark"],
    html[data-theme="dark"],
    html[data-theme="darkest"]
) body.kk-brand:is(.app-mode, .kk-site) :is(.alert-warning, .alert.warning) {
    background: #3d2b08 !important;
    border-color: #fcd34d !important;
    color: #fef3c7 !important;
}