/**
 * Universal theme contrast + responsive safety (loads last).
 * Ensures text/icons/buttons remain visible in light & dark modes on all pages.
 */

/* ── Typography ── */
body:not(.admin) h1,
body:not(.admin) h2,
body:not(.admin) h3,
body:not(.admin) h4,
body:not(.admin) h5,
body:not(.admin) h6,
body:not(.admin) .page-title,
body:not(.admin) .dash-title,
body:not(.admin) .section-title {
    color: var(--theme-heading, var(--heading-color, var(--page-shell-text))) !important;
}

body.admin h1,
body.admin h2,
body.admin h3,
body.admin h4,
body.admin h5,
body.admin h6,
body.admin .admin-page-title,
body.admin .page-box > h2,
body.admin .section > h2 {
    color: var(--admin-heading, var(--admin-text)) !important;
}

body:not(.admin) p,
body:not(.admin) li,
body:not(.admin) span:not(.button):not(.dash-btn),
body:not(.admin) label,
body:not(.admin) .muted,
body:not(.admin) .text-muted {
    color: inherit;
}

body:not(.admin) .muted,
body:not(.admin) .text-muted,
body:not(.admin) .dash-text-secondary {
    color: var(--muted, var(--dash-text-secondary, var(--dash-text-muted))) !important;
}

/* ── Admin sidebar (super admin) ── */
body.admin .admin-sidebar,
body.admin .admin-sidebar__brand,
body.admin .admin-sidebar__section,
body.admin .admin-sidebar__footer {
    color: var(--admin-sidebar-text, var(--admin-text)) !important;
}

body.admin .admin-sidebar__brand-name {
    color: var(--admin-heading, var(--admin-sidebar-text)) !important;
}

body.admin .admin-sidebar__item {
    color: var(--admin-sidebar-text, var(--admin-text)) !important;
}

body.admin .admin-sidebar__item > span:not(.admin-sidebar__icon),
body.admin .admin-sidebar__item > span:last-child,
body.admin .admin-sidebar__theme-btn > span:not(.admin-sidebar__icon),
body.admin .admin-sidebar__theme-btn [data-admin-theme-label] {
    color: inherit !important;
    opacity: 1 !important;
}

body.admin .admin-sidebar__item .admin-sidebar__icon,
body.admin .admin-sidebar__icon {
    color: var(--admin-sidebar-icon, var(--admin-accent)) !important;
    opacity: 1 !important;
}

body.admin .admin-sidebar__item:hover {
    color: var(--admin-heading, var(--admin-sidebar-text)) !important;
}

body.admin .admin-sidebar__item:hover .admin-sidebar__icon {
    color: var(--admin-accent-light, var(--admin-accent)) !important;
}

body.admin .admin-sidebar__item.active {
    color: var(--admin-sidebar-active-text, var(--admin-heading)) !important;
}

body.admin .admin-sidebar__item.active .admin-sidebar__icon {
    color: var(--admin-accent-light, var(--admin-accent)) !important;
}

body.admin .admin-sidebar__theme-btn {
    color: var(--admin-sidebar-text, var(--admin-text)) !important;
}

body.admin .admin-sidebar__theme-btn .admin-sidebar__icon {
    color: var(--admin-sidebar-icon, var(--admin-accent)) !important;
}

/* ── Site sidebar / dash nav ── */
.sidebar,
.dash-sidebar,
.sidebar a,
.dash-sidebar a {
    color: var(--sidebar-text, var(--page-shell-text)) !important;
}

.sidebar .sidebar-icon,
.dash-sidebar .sidebar-icon {
    color: var(--sidebar-icon, var(--primary-color)) !important;
}

/* ── Topbar / header links ── */
body:not(.admin) .topbar a:not(.brand__logo),
body:not(.admin) header.global-header a:not(.brand__logo),
body:not(.admin) .topbar__nav-link,
body:not(.admin) .topbar__user-name {
    color: var(--page-shell-text, var(--text-color)) !important;
}

body.admin .admin-topbar,
body.admin .admin-topbar__title,
body.admin .admin-topbar__user {
    color: var(--admin-text) !important;
}

/* ── Buttons (non-primary) ── */
body:not(.admin) .button:not(.button--primary):not(.dash-btn--primary),
body:not(.admin) .dash-btn:not(.dash-btn--primary),
body.admin .button:not(.button--primary) {
    color: var(--primary-color, var(--admin-accent)) !important;
    border-color: var(--border-color, var(--admin-card-border)) !important;
}

body:not(.admin) .button--secondary,
body.admin .button--secondary {
    background: var(--bg-card, var(--admin-card)) !important;
    color: var(--text-color, var(--admin-text)) !important;
}

/* ── Form placeholders ── */
input::placeholder,
textarea::placeholder,
select::placeholder {
    color: var(--muted, var(--dash-text-muted, var(--admin-text-muted))) !important;
    opacity: 0.85 !important;
}

/* ── Icons inherit readable color ── */
body:not(.admin) .fa,
body:not(.admin) .fas,
body:not(.admin) .far,
body:not(.admin) .fab,
body:not(.admin) svg:not([fill="none"]) {
    color: inherit;
}

body.admin .admin-sidebar__icon,
body.admin .admin-topbar .fa,
body.admin .admin-topbar .fas {
    color: inherit;
}

/* ── Tables readable ── */
table th,
table td,
.admin-table th,
.admin-table td,
.dash-table th,
.dash-table td {
    color: inherit !important;
}

/* ── Home / products ── */
body:not(.admin) .category-section-card,
body:not(.admin) .category-section-card__title,
body:not(.admin) .home-section-title,
body:not(.admin) .product-card,
body:not(.admin) .product-card__name,
body:not(.admin) .product-card__price {
    color: var(--product-name-color, var(--page-shell-text, var(--text-color))) !important;
}

body:not(.admin) .product-card__price {
    color: var(--success-color, var(--success)) !important;
}

/* ── Modals / overlays ── */
.modal-header,
.modal-body,
.modal-footer,
.popup-header,
.popup-body,
.overlay-content,
.note,
.alert,
.flash-message {
    color: var(--text-color, var(--text-color-token, var(--admin-text))) !important;
}

/* ── Prevent same-color text/bg on common utility classes ── */
.text-bg-same-fix {
    color: var(--page-shell-text) !important;
    background: var(--page-shell-bg) !important;
}

/* ── Responsive: no clip/crop of content ── */
html {
    overflow-x: clip;
}

body:not(.admin),
body.admin {
    overflow-x: clip;
    min-width: 0;
}

main.page,
.page,
.dash-page,
body.admin .admin-main,
body.admin .admin-content,
body.admin .page-box,
.admin-table-wrap,
.table-responsive {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

img,
video,
svg,
canvas {
    max-width: 100%;
    height: auto;
}

.admin-sidebar__item > span:last-child,
.topbar__brand-name,
.dash-header__title,
.page-title {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 768px) {
    body.admin .admin-layout,
    body.admin .admin-shell {
        min-width: 0;
    }

    body.admin .admin-sidebar {
        max-width: min(100vw, 320px);
    }

    .page-box,
    .card,
    .dash-card,
    .product-card {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    body:not(.admin) .topbar,
    body.admin .admin-topbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .button,
    .dash-btn {
        max-width: 100%;
    }
}

/* ── Light mode: keep chrome (header + side drawer) readable ── */
html.light body:not(.admin) :is(.topbar--user, .topbar--guest, header.global-header, .global-header),
html.theme-light body:not(.admin) :is(.topbar--user, .topbar--guest, header.global-header, .global-header) {
    background: linear-gradient(180deg, var(--chrome-bg-top, #3d4251) 0%, var(--chrome-bg-mid, #363b48) 100%) !important;
    color: var(--chrome-fg, #ffffff) !important;
}

html.light body:not(.admin) :is(.global-header__menu, .global-header__balance, .global-header__add, .global-header__back, .menu-button, .topbar-balance, .notif-bell, .global-header__notif, .global-header__avatar-placeholder),
html.theme-light body:not(.admin) :is(.global-header__menu, .global-header__balance, .global-header__add, .global-header__back, .menu-button, .topbar-balance, .notif-bell, .global-header__notif, .global-header__avatar-placeholder) {
    color: var(--chrome-fg, #ffffff) !important;
}

html.light body:not(.admin) .side-menu-drawer,
html.theme-light body:not(.admin) .side-menu-drawer {
    background: linear-gradient(180deg, var(--chrome-bg-top, #3d4251) 0%, var(--chrome-bg-mid, #363b48) 50%, var(--chrome-bg-bottom, #2d3142) 100%) !important;
    color: var(--chrome-fg, #f3f4f6) !important;
}

html.light body:not(.admin) .side-menu-drawer :is(.side-menu__user-name, .side-menu__balance, .side-menu__item, .side-menu__text, .side-menu__user-id-label, .side-menu__user-id-value, .side-menu-close, .side-menu__theme-toggle-label, .side-menu__locale-toggle-label),
html.theme-light body:not(.admin) .side-menu-drawer :is(.side-menu__user-name, .side-menu__balance, .side-menu__item, .side-menu__text, .side-menu__user-id-label, .side-menu__user-id-value, .side-menu-close, .side-menu__theme-toggle-label, .side-menu__locale-toggle-label) {
    color: var(--chrome-fg, #f3f4f6) !important;
}

html.light body:not(.admin) .side-menu-drawer .side-menu__item,
html.theme-light body:not(.admin) .side-menu-drawer .side-menu__item {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.light body:not(.admin) .side-menu-drawer .side-menu__icon,
html.theme-light body:not(.admin) .side-menu-drawer .side-menu__icon {
    color: var(--chrome-fg, #f3f4f6) !important;
    opacity: 1 !important;
}

/* Admin light mode: sidebar + topbar icons/text must stay visible */
body.admin.theme-light .admin-sidebar,
body.admin.theme-light .admin-sidebar__item,
body.admin.theme-light .admin-sidebar__brand-name,
body.admin.theme-light .admin-sidebar__theme-btn {
    color: var(--admin-sidebar-text, #4c1d95) !important;
}

body.admin.theme-light .admin-sidebar__icon {
    color: var(--admin-sidebar-icon, var(--admin-accent, #7c3aed)) !important;
    opacity: 1 !important;
}

body.admin.theme-light .admin-topbar__menu-btn,
body.admin.theme-light .admin-topbar__notif,
body.admin.theme-light .admin-topbar__theme,
body.admin.theme-light .admin-topbar__title,
body.admin.theme-light .admin-topbar__user {
    color: var(--admin-text, #4c1d95) !important;
}

body.admin.theme-light .admin-topbar__menu-icon,
body.admin.theme-light .admin-topbar__theme-icon {
    color: inherit !important;
    opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════
   UNIFIED TOKEN ENFORCEMENT — all pages, all themes
   Uses design-tokens.css canonical names
   ══════════════════════════════════════════════════════════════ */

/* ── Shell backgrounds ── */
body:not(.admin),
body:not(.admin) main.page,
body:not(.admin) .page,
body:not(.admin) .dash-page {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

body.admin,
body.admin main.page,
body.admin .admin-content,
body.admin .page-box,
body.admin .dash-page {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ── Cards / panels / boxes ── */
body:not(.admin) :is(.card, .page-box, .panel, .dash-card, .wallet-card, .order-card, .auth-card, .hero__card, .tg-card, .section):not(.telegram-bot-head) {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--card-border) !important;
}

body.admin :is(.card, .page-box, .panel, .dash-card, .admin-table-wrap, .bulk-categories-panel, .delete-all-modal-box, .modal-box, .modal-card) {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--card-border) !important;
}

/* ── Headings & body text ── */
body:not(.admin) :is(h1, h2, h3, h4, h5, h6, .dash-title, .section-title, .card__title) {
    color: var(--text-heading) !important;
}

body.admin :is(h1, h2, h3, h4, h5, h6, .admin-page-top h3, .page-box > h3) {
    color: var(--text-heading) !important;
}

body:not(.admin) :is(p, li, label, .form-field, .note, .hero__text, .empty-state) {
    color: var(--text-primary) !important;
}

body.admin :is(p, li, label, .form-field, .note, .hero__text, .empty-state, .form-hint) {
    color: var(--text-primary) !important;
}

body:not(.admin) :is(.muted, .text-muted, .form-hint, .dash-subtitle) {
    color: var(--text-muted) !important;
}

body.admin :is(.muted, .text-muted, .form-hint, .bulk-categories-meta) {
    color: var(--text-muted) !important;
}

/* ── Forms & inputs (site + admin, no .admin wrapper required) ── */
body:not(.admin) .form-field label,
body:not(.admin) label.form-field {
    color: var(--text-secondary) !important;
}

body.admin .form-field label,
body.admin label.form-field {
    color: var(--text-secondary) !important;
}

body:not(.admin) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    textarea,
    select,
    .search-input
) {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

body.admin :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    textarea,
    select,
    .search-input
) {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

/* ── Buttons ── */
body:not(.admin) .button--primary,
body:not(.admin) .dash-btn--primary,
body.admin .button--primary {
    background: var(--button-bg) !important;
    color: var(--button-text) !important;
    border-color: transparent !important;
}

body:not(.admin) .button--ghost,
body.admin .button--ghost {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body:not(.admin) .button--secondary,
body.admin .button--secondary {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* ── Links ── */
body:not(.admin) a:not(.button):not(.btn):not(.card__link):not(.brand):not(.side-menu__item) {
    color: var(--link-color) !important;
}

body.admin a:not(.button):not(.btn):not(.admin-sidebar__item):not(.admin-topbar__notif) {
    color: var(--link-color) !important;
}

/* ── Site side menu ── */
body:not(.admin) .side-menu-drawer,
body:not(.admin) .side-menu-drawer .side-menu__item,
body:not(.admin) .side-menu-drawer .side-menu__text,
body:not(.admin) .side-menu-drawer .side-menu__user-name,
body:not(.admin) .side-menu-drawer .side-menu__balance,
body:not(.admin) .side-menu-drawer .side-menu-close {
    color: var(--sidebar-text, var(--chrome-fg, #f3f4f6)) !important;
}

body:not(.admin) .side-menu-drawer .side-menu__icon {
    color: var(--sidebar-icon, var(--chrome-fg, #f3f4f6)) !important;
    opacity: 1 !important;
}

/* ── Modals / dialogs ── */
body:not(.admin) :is(.modal-overlay, .product-modal-overlay) [role="dialog"],
body:not(.admin) :is(.modal-content, .modal-card, .modal-box, .product-modal-card, .checkout-modal),
body.admin :is(#bulkCategoriesModal .bulk-categories-panel, .delete-all-modal-box, .modal-box, .modal-card, [role="dialog"]) {
    background: var(--modal-bg) !important;
    color: var(--modal-text) !important;
}

body:not(.admin) .modal-overlay,
body.admin .modal-overlay,
body.admin #bulkCategoriesModal.modal-overlay {
    background: var(--modal-overlay-bg, rgba(10, 6, 18, 0.82)) !important;
}

/* ── Tables ── */
body:not(.admin) :is(table, .admin-table, .dash-table, .table) {
    color: var(--table-text) !important;
    border-color: var(--table-border) !important;
}

body.admin :is(table, .admin-table, .dash-table, .table) {
    color: var(--table-text) !important;
    border-color: var(--table-border) !important;
}

body:not(.admin) :is(table th, .admin-table th, .dash-table th),
body.admin :is(table th, .admin-table th, .dash-table th) {
    background: var(--table-header-bg) !important;
    color: var(--text-heading) !important;
}

body:not(.admin) :is(table td, .admin-table td, .dash-table td),
body.admin :is(table td, .admin-table td, .dash-table td) {
    color: var(--text-primary) !important;
}

/* ── Alerts / messages ── */
body:not(.admin) .note,
body.admin .note {
    color: var(--text-primary) !important;
}

.alert--success, .badge--success, .note--success {
    background: var(--alert-success-bg) !important;
    color: var(--alert-success-text) !important;
}

.alert--error, .badge--error, .note--error, .bulk-categories-error {
    background: var(--alert-error-bg) !important;
    color: var(--alert-error-text) !important;
}

.alert--warning, .badge--warning {
    background: var(--alert-warning-bg) !important;
    color: var(--alert-warning-text) !important;
}

/* ── Icons ── */
body:not(.admin) :is(.side-menu__icon, .dash-header__icon, .global-header__menu, .notif-bell) {
    color: var(--icon-color) !important;
    opacity: 1 !important;
}

body.admin :is(.admin-sidebar__icon, .admin-topbar__menu-icon, .admin-topbar__theme-icon, .admin-topbar__notif-icon) {
    color: var(--icon-color) !important;
    opacity: 1 !important;
}

/* ── Override hardcoded white card backgrounds in dark mode ── */
html.dark body:not(.admin) :is([style*="background:#fff"], [style*="background: #fff"], [style*="background:#ffffff"], [style*="background: #ffffff"], [style*="background-color:#fff"], [style*="background-color: #fff"]),
html.theme-dark body:not(.admin) :is([style*="background:#fff"], [style*="background: #fff"], [style*="background:#ffffff"], [style*="background: #ffffff"]) {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

html.dark body.admin :is([style*="background:#fff"], [style*="background: #fff"], [style*="background:#ffffff"]),
html.theme-dark body.admin :is([style*="background:#fff"], [style*="background: #fff"], [style*="background:#ffffff"]) {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* ── Bulk categories / admin modals inner panels ── */
body.admin .bulk-categories-paste-box,
body.admin .bulk-categories-fields,
body.admin .bulk-categories-preview-list {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.admin .bulk-categories-paste-box h5 {
    color: var(--link-color) !important;
}

/* ── Admin permissions page ── */
body.admin .admin-permissions-page,
body.admin .admin-permissions__table,
body.admin .admin-permissions__routebox,
body.admin .admin-permissions__route-table {
    color: var(--text-primary) !important;
}

body.admin .admin-permissions__th,
body.admin .admin-permissions__route-table th {
    background: var(--table-header-bg) !important;
    color: var(--text-heading) !important;
}

body.admin .admin-permissions__td,
body.admin .admin-permissions__route-table td {
    color: var(--text-primary) !important;
    background: var(--card-bg) !important;
}

body.admin .admin-permissions__input,
body.admin .admin-permissions__select {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

/* ── Admin settings page ── */
body.admin .admin-settings-page,
body.admin .admin-settings-form,
body.admin .admin-settings-section {
    color: var(--admin-text) !important;
}

body.admin .admin-settings-page .form-field > span,
body.admin .admin-settings-page .form-field label,
body.admin .admin-settings-form .form-field > span {
    color: var(--admin-text-secondary) !important;
}

body.admin .admin-settings-page h5,
body.admin .admin-settings-page h6,
body.admin .admin-settings-section h5 {
    color: var(--admin-heading) !important;
}

body.admin .admin-page-color-panel,
body.admin .admin-page-color-panel summary {
    color: var(--admin-text) !important;
}

body.admin .admin-page-color-panel summary span {
    color: var(--admin-heading) !important;
}

/* ── API SYRIA + ShamCash admin pages ── */
body.admin .api-syria-admin label.form-field,
body.admin .api-syria-admin .form-field,
body.admin .shamcash-admin label.form-field {
    color: var(--admin-text-secondary) !important;
}

body.admin .api-syria-admin .form-field input,
body.admin .api-syria-admin .form-field select,
body.admin .api-syria-admin .form-field textarea,
body.admin .api-syria-admin input,
body.admin .api-syria-admin select,
body.admin .api-syria-admin textarea,
body.admin .api-syria-admin pre.api-syria-result-box {
    background: var(--admin-input-bg) !important;
    color: var(--admin-text) !important;
    border-color: var(--admin-input-border) !important;
}

body.admin .api-syria-admin .admin-table th,
body.admin .api-syria-admin .admin-table td {
    color: var(--admin-text) !important;
    border-bottom-color: var(--admin-card-border) !important;
}

body.admin .api-syria-admin .admin-table th {
    background: var(--admin-bg-subtle) !important;
    color: var(--admin-text-secondary) !important;
}

/* ── Code blocks ── */
body:not(.admin) code,
body.admin code {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
}

body.admin .api-syria-admin code,
body.admin .shamcash-admin .shamcash-code {
    background: var(--admin-bg-subtle) !important;
    color: var(--admin-accent-light, var(--admin-accent)) !important;
}

/* ── Theme-validated runtime fixes (theme-validation.js) ── */
[data-theme-validated] {
    transition: color 0.1s ease, background-color 0.1s ease;
}