:root {
    color-scheme: dark;
    --theme-page: #0b1020;
    --theme-surface: #121a33;
    --theme-surface-raised: #1e293b;
    --theme-border: #334155;
    --theme-text: #e2e8f0;
    --theme-text-muted: #94a3b8;
    --theme-accent: #3b82f6;
    --admin-page-padding: 24px;
    --admin-page-padding-mobile: 16px;
    --admin-section-gap: 24px;
    --admin-grid-gap: 16px;
    --admin-card-radius: 12px;
    --admin-card-shadow: 0 1px 3px rgba(2, 6, 23, 0.28), 0 8px 24px rgba(2, 6, 23, 0.12);
    --admin-control-height: 40px;
    --admin-control-radius: 8px;
    --admin-dialog-action-width: 88px;
    --admin-control-placeholder: #64748b;
    --admin-focus-ring: rgba(59, 130, 246, 0.22);
    --admin-title-icon-bg: #2563eb;
    --admin-title-icon-border: #1d4ed8;
    --admin-title-icon-text: #ffffff;
    /* Shared action palette. Values are selected against the light theme first. */
    --admin-button-primary: #2563eb;
    --admin-button-primary-hover: #1d4ed8;
    --admin-button-success: #15803d;
    --admin-button-success-hover: #166534;
    --admin-button-danger: #dc2626;
    --admin-button-danger-hover: #b91c1c;
    --admin-button-warning: #c2410c;
    --admin-button-warning-hover: #9a3412;
    --admin-button-purple: #7e22ce;
    --admin-button-purple-hover: #6b21a8;
    --admin-button-info: #0e7490;
    --admin-button-info-hover: #155e75;
    --admin-switch-off: #64748b;
    --admin-switch-on: var(--admin-button-success);
    --admin-switch-thumb: #ffffff;
    --admin-button-neutral-bg: #182b4a;
    --admin-button-neutral-border: #48678e;
    --admin-button-neutral-text: #dbeafe;
    --admin-button-neutral-hover-bg: #213d67;
    --admin-button-neutral-hover-border: #7db3f5;
    --admin-button-neutral-hover-text: #eff6ff;
    --admin-button-disabled-bg: #334155;
    --admin-button-disabled-border: #64748b;
    --admin-button-disabled-text: #cbd5e1;
    --admin-button-success-soft-bg: #14532d;
    --admin-button-success-soft-border: #22c55e;
    --admin-button-success-soft-text: #dcfce7;
    --admin-button-danger-soft-bg: #450a0a;
    --admin-button-danger-soft-border: #ef4444;
    --admin-button-danger-soft-text: #fee2e2;
    --admin-accent-hover: var(--admin-button-primary-hover);
    --admin-success: var(--admin-button-success);
    --admin-success-hover: var(--admin-button-success-hover);
    --admin-danger: var(--admin-button-danger);
    --admin-danger-hover: var(--admin-button-danger-hover);
    --admin-orange: var(--admin-button-warning);
    --admin-orange-hover: var(--admin-button-warning-hover);
    --admin-nav-icon-1: #60a5fa;
    --admin-nav-icon-2: #4ade80;
    --admin-nav-icon-3: #fbbf24;
    --admin-nav-icon-4: #c084fc;
    --admin-nav-icon-5: #22d3ee;
    --admin-nav-icon-6: #fb7185;
    --admin-nav-icon-7: #fb923c;
    --admin-nav-icon-8: #2dd4bf;
}

/* Native notices and confirmations use the same themes as the management UI. */
.admin-notice {
    position: fixed; z-index: 10020; left: 50%; bottom: 32px; transform: translateX(-50%);
    max-width: calc(100vw - 32px); padding: 16px 20px;
    background: var(--theme-surface-raised); color: var(--theme-text);
    border: 1px solid var(--theme-border); border-radius: var(--admin-card-radius);
    box-shadow: var(--admin-card-shadow); font: 14px/1.6 sans-serif;
}
.admin-busy-overlay { position: fixed; inset: 0; z-index: 10010; display: grid; place-items: center; background: rgba(15,23,42,.35); }
.admin-busy-label { padding: 20px; background: var(--theme-surface-raised); color: var(--theme-text); border-radius: var(--admin-card-radius); }
.admin-confirm-dialog {
    width: min(420px, calc(100vw - 32px)); box-sizing: border-box; padding: 24px;
    background: var(--theme-surface-raised); color: var(--theme-text);
    border: 1px solid var(--theme-border); border-radius: var(--admin-card-radius);
    box-shadow: var(--admin-card-shadow);
}
.admin-confirm-dialog::backdrop { background: rgba(15,23,42,.5); }
.admin-confirm-dialog h3 { margin: 0 0 16px; font-size: 18px; font-weight: 600; }
.admin-confirm-dialog p { margin: 0 0 24px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.admin-dialog-actions { display: flex; justify-content: flex-end; gap: 12px; }
.admin-dialog-actions .admin-button { min-width: var(--admin-dialog-action-width); }

/* Keep sidebar icons visually distinct while preserving readable labels. */
html[data-theme] .menu-item > i.menu-nav-icon,
html[data-theme] .submenu-item > i.menu-nav-icon {
    color: var(--admin-nav-icon-1) !important;
}

html[data-theme] .menu-item > i.menu-nav-icon-1,
html[data-theme] .submenu-item > i.menu-nav-icon-1 { color: var(--admin-nav-icon-1) !important; }
html[data-theme] .menu-item > i.menu-nav-icon-2,
html[data-theme] .submenu-item > i.menu-nav-icon-2 { color: var(--admin-nav-icon-2) !important; }
html[data-theme] .menu-item > i.menu-nav-icon-3,
html[data-theme] .submenu-item > i.menu-nav-icon-3 { color: var(--admin-nav-icon-3) !important; }
html[data-theme] .menu-item > i.menu-nav-icon-4,
html[data-theme] .submenu-item > i.menu-nav-icon-4 { color: var(--admin-nav-icon-4) !important; }
html[data-theme] .menu-item > i.menu-nav-icon-5,
html[data-theme] .submenu-item > i.menu-nav-icon-5 { color: var(--admin-nav-icon-5) !important; }
html[data-theme] .menu-item > i.menu-nav-icon-6,
html[data-theme] .submenu-item > i.menu-nav-icon-6 { color: var(--admin-nav-icon-6) !important; }
html[data-theme] .menu-item > i.menu-nav-icon-7,
html[data-theme] .submenu-item > i.menu-nav-icon-7 { color: var(--admin-nav-icon-7) !important; }
html[data-theme] .menu-item > i.menu-nav-icon-8,
html[data-theme] .submenu-item > i.menu-nav-icon-8 { color: var(--admin-nav-icon-8) !important; }

html[data-theme="light"] {
    --admin-nav-icon-1: #2563eb;
    --admin-nav-icon-2: #15803d;
    --admin-nav-icon-3: #b45309;
    --admin-nav-icon-4: #7e22ce;
    --admin-nav-icon-5: #0e7490;
    --admin-nav-icon-6: #be123c;
    --admin-nav-icon-7: #c2410c;
    --admin-nav-icon-8: #0f766e;
}

html[data-theme] iframe {
    background: var(--theme-page) !important;
}

iframe.theme-managed-frame:not(.theme-frame-ready) {
    visibility: hidden !important;
    opacity: 0 !important;
}

iframe.theme-managed-frame.theme-frame-ready {
    visibility: visible !important;
    opacity: 1 !important;
}

html.theme-frame-initializing *,
html.theme-frame-initializing *::before,
html.theme-frame-initializing *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

/* Shared modal close control, including buttons rendered inside managed frames. */
html[data-theme] :where(
    button#btnCloseModal,
    button[id^="btnClose"],
    button[id^="close"][class*="text-slate"],
    button.icon-button-close,
    button.purchase-close,
    button[aria-label="\5173\95ed"],
    button[title="\5173\95ed"],
    button[onclick*="closeModal"]:has(> .fa-times)
) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid #475569 !important;
    border-radius: 6px !important;
    background: #1e293b !important;
    color: #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.28) !important;
    cursor: pointer;
    line-height: 1 !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.08s ease !important;
}

html[data-theme] :where(
    button#btnCloseModal,
    button[id^="btnClose"],
    button[id^="close"][class*="text-slate"],
    button.icon-button-close,
    button.purchase-close,
    button[aria-label="\5173\95ed"],
    button[title="\5173\95ed"],
    button[onclick*="closeModal"]:has(> .fa-times)
) > .fa {
    color: inherit !important;
    font-size: 18px !important;
    line-height: 1 !important;
    pointer-events: none;
}

html[data-theme] :where(
    button#btnCloseModal,
    button[id^="btnClose"],
    button[id^="close"][class*="text-slate"],
    button.icon-button-close,
    button.purchase-close,
    button[aria-label="\5173\95ed"],
    button[title="\5173\95ed"],
    button[onclick*="closeModal"]:has(> .fa-times)
):hover {
    border-color: #ef4444 !important;
    background: #7f1d1d !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.24) !important;
}

html[data-theme="light"] :where(
    button#btnCloseModal,
    button[id^="btnClose"],
    button[id^="close"][class*="text-slate"],
    button.icon-button-close,
    button.purchase-close,
    button[aria-label="\5173\95ed"],
    button[title="\5173\95ed"],
    button[onclick*="closeModal"]:has(> .fa-times)
) {
    border-color: #94a3b8 !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] :where(
    button#btnCloseModal,
    button[id^="btnClose"],
    button[id^="close"][class*="text-slate"],
    button.icon-button-close,
    button.purchase-close,
    button[aria-label="\5173\95ed"],
    button[title="\5173\95ed"],
    button[onclick*="closeModal"]:has(> .fa-times)
):hover {
    border-color: #dc2626 !important;
    background: #fee2e2 !important;
    color: #991b1b !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.18) !important;
}

html[data-theme] :where(
    button#btnCloseModal,
    button[id^="btnClose"],
    button[id^="close"][class*="text-slate"],
    button.icon-button-close,
    button.purchase-close,
    button[aria-label="\5173\95ed"],
    button[title="\5173\95ed"],
    button[onclick*="closeModal"]:has(> .fa-times)
):focus-visible {
    outline: 2px solid #2563eb !important;
    outline-offset: 2px !important;
}

html[data-theme] :where(
    button#btnCloseModal,
    button[id^="btnClose"],
    button[id^="close"][class*="text-slate"],
    button.icon-button-close,
    button.purchase-close,
    button[aria-label="\5173\95ed"],
    button[title="\5173\95ed"],
    button[onclick*="closeModal"]:has(> .fa-times)
):active {
    transform: translateY(1px);
}

html[data-theme] .overflow-x-auto > table {
    min-width: max(100%, 1120px);
}

html[data-theme] .overflow-x-auto > table th,
html[data-theme] .overflow-x-auto > table td {
    white-space: nowrap;
    vertical-align: middle;
}

.mobile-table-scrollbar {
    display: none;
}

/* Shared admin layout and controls. Pages own layout; this file owns appearance. */
html[data-theme] body.admin-page-shell {
    box-sizing: border-box;
    min-height: 100vh;
    margin: 0;
    padding: var(--admin-page-padding) !important;
    background: var(--theme-page) !important;
    color: var(--theme-text) !important;
}

html[data-theme] .admin-card,
html[data-theme] .admin-page-shell .glass,
html[data-theme] .admin-page-shell .card,
html[data-theme] .admin-page-shell .panel,
html[data-theme] .admin-page-shell .surface,
html[data-theme] .admin-page-title-card {
    box-sizing: border-box;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--admin-card-radius) !important;
    background: var(--theme-surface) !important;
    box-shadow: var(--admin-card-shadow) !important;
}

html[data-theme] :is(
    .admin-control,
    .admin-page-shell .input,
    .admin-page-shell .select,
    .admin-page-shell .textarea,
    .admin-page-shell input.field,
    .admin-page-shell select.field,
    .admin-page-shell textarea.field
) {
    box-sizing: border-box;
    max-width: 100%;
    min-height: var(--admin-control-height);
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--admin-control-radius) !important;
    background: var(--theme-surface-raised) !important;
    color: var(--theme-text) !important;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

html[data-theme] :is(
    .admin-control,
    .admin-page-shell .input,
    .admin-page-shell .select,
    .admin-page-shell .textarea,
    .admin-page-shell input.field,
    .admin-page-shell select.field,
    .admin-page-shell textarea.field
)::placeholder {
    color: var(--admin-control-placeholder) !important;
    opacity: 1;
}

html[data-theme] :is(
    .admin-control,
    .admin-page-shell .input,
    .admin-page-shell .select,
    .admin-page-shell .textarea,
    .admin-page-shell input.field,
    .admin-page-shell select.field,
    .admin-page-shell textarea.field
):focus {
    border-color: var(--theme-accent) !important;
    box-shadow: 0 0 0 3px var(--admin-focus-ring) !important;
}

html[data-theme] :is(.admin-button, .admin-page-shell .button) {
    box-sizing: border-box;
    display: inline-flex;
    min-height: var(--admin-control-height);
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--admin-button-neutral-border) !important;
    border-radius: var(--admin-control-radius) !important;
    background: var(--admin-button-neutral-bg) !important;
    color: var(--admin-button-neutral-text) !important;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

html[data-theme] :is(.admin-button, .admin-page-shell .button):hover:not(:disabled) {
    border-color: var(--admin-button-neutral-hover-border) !important;
    background: var(--admin-button-neutral-hover-bg) !important;
    color: var(--admin-button-neutral-hover-text) !important;
}

html[data-theme] :is(.admin-button-primary, .admin-page-shell .button-primary) {
    border-color: var(--admin-button-primary-hover) !important;
    background: var(--admin-button-primary) !important;
    color: #ffffff !important;
}

html[data-theme] :is(.admin-button-primary, .admin-page-shell .button-primary):hover:not(:disabled) {
    border-color: var(--admin-button-primary-hover) !important;
    background: var(--admin-button-primary-hover) !important;
    color: #ffffff !important;
}

html[data-theme] :is(.admin-button-success, .admin-page-shell .button-success) {
    border-color: var(--admin-button-success-hover) !important;
    background: var(--admin-button-success) !important;
    color: #ffffff !important;
}

html[data-theme] :is(.admin-button-success, .admin-page-shell .button-success):hover:not(:disabled) {
    border-color: var(--admin-button-success-hover) !important;
    background: var(--admin-button-success-hover) !important;
    color: #ffffff !important;
}

html[data-theme] :is(.admin-button-danger, .admin-page-shell .button-danger) {
    border-color: var(--admin-button-danger-hover) !important;
    background: var(--admin-button-danger) !important;
    color: #ffffff !important;
}

html[data-theme] :is(.admin-button-danger, .admin-page-shell .button-danger):hover:not(:disabled) {
    border-color: var(--admin-button-danger-hover) !important;
    background: var(--admin-button-danger-hover) !important;
    color: #ffffff !important;
}

html[data-theme] :is(.admin-button, .admin-page-shell .button):disabled {
    border-color: var(--admin-button-disabled-border) !important;
    background: var(--admin-button-disabled-bg) !important;
    color: var(--admin-button-disabled-text) !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* Shared title card used by every top-level admin management page. */
html[data-theme] .admin-page-title-card {
    min-height: 98px;
    margin-bottom: var(--admin-section-gap) !important;
    padding: var(--admin-page-padding) !important;
}

html[data-theme] .admin-page-title-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 16px !important;
}

html[data-theme] .admin-page-title-icon {
    display: inline-flex !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    flex: 0 0 48px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--admin-title-icon-border) !important;
    border-radius: 12px !important;
    background: var(--admin-title-icon-bg) !important;
    background-image: none !important;
    color: var(--admin-title-icon-text) !important;
    box-shadow: none !important;
}

html[data-theme] .admin-page-title-icon .fa {
    color: inherit !important;
    font-size: 24px !important;
    line-height: 1 !important;
}

html[data-theme] .admin-page-title-copy {
    min-width: 0;
}

html[data-theme] .admin-page-title-copy h1 {
    margin: 0 !important;
    color: var(--theme-text) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
}

html[data-theme] .admin-page-title-copy > p:first-of-type {
    margin: 4px 0 0 !important;
    color: var(--theme-text-muted) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

@media (max-width: 767px) {
    html[data-theme] body.admin-page-shell {
        padding: var(--admin-page-padding-mobile) !important;
    }

    html[data-theme] .admin-page-title-card {
        min-height: 82px;
        margin-bottom: var(--admin-page-padding-mobile) !important;
        padding: var(--admin-page-padding-mobile) !important;
    }

    html[data-theme] .admin-page-title-copy h1 {
        font-size: 20px !important;
        line-height: 28px !important;
    }
}

@media (max-width: 1024px) {
    .responsive-toolbar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch !important;
        gap: 10px !important;
    }

    .responsive-toolbar > * {
        min-width: 0;
        max-width: 100%;
    }

    .responsive-toolbar > input:not([type="checkbox"]):not([type="radio"]),
    .responsive-toolbar > select,
    .responsive-toolbar > .responsive-field,
    .responsive-toolbar > .responsive-group,
    .responsive-toolbar > .responsive-wide,
    .responsive-toolbar > .responsive-wide-action,
    .responsive-toolbar > .table-export-button {
        grid-column: 1 / -1;
    }

    .responsive-toolbar .responsive-field,
    .responsive-toolbar .responsive-half-field,
    .responsive-toolbar .responsive-compact-field {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 8px !important;
    }

    .responsive-toolbar .responsive-field input:not([type="checkbox"]):not([type="radio"]),
    .responsive-toolbar .responsive-field select,
    .responsive-toolbar .responsive-half-field input:not([type="checkbox"]):not([type="radio"]),
    .responsive-toolbar .responsive-half-field select,
    .responsive-toolbar .responsive-compact-field input:not([type="checkbox"]):not([type="radio"]),
    .responsive-toolbar > input:not([type="checkbox"]):not([type="radio"]),
    .responsive-toolbar > select {
        width: 100% !important;
        min-width: 0 !important;
    }

    .responsive-toolbar > button {
        width: 100%;
        min-height: 40px;
        margin-left: 0 !important;
        white-space: nowrap;
    }

    .responsive-toolbar .responsive-group {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px !important;
    }

    .responsive-page-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch !important;
        gap: 12px !important;
    }

    .responsive-page-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 10px !important;
    }

    .responsive-page-actions > button,
    .responsive-page-actions > select,
    .responsive-page-actions > a {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        justify-content: center;
        white-space: nowrap;
    }

    .responsive-page-actions > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

}

@media (min-width: 769px) and (max-width: 1599px) {
    .card-management-toolbar {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: center !important;
        gap: 10px !important;
    }

    .card-management-toolbar > * {
        min-width: 0;
        max-width: 100%;
        margin-left: 0 !important;
    }

    .card-management-toolbar .card-days-control {
        grid-column: 1 / 4;
        grid-row: 1;
    }

    .card-management-toolbar .card-count-control {
        grid-column: 4 / 7;
        grid-row: 1;
    }

    .card-management-toolbar .card-generate-action {
        grid-column: 7 / 10;
        grid-row: 1;
    }

    .card-management-toolbar .card-reset-action {
        grid-column: 10 / 13;
        grid-row: 1;
    }

    .card-management-toolbar .card-search-control {
        grid-column: 1 / 10;
        grid-row: 2;
    }

    .card-management-toolbar .card-search-action {
        grid-column: 10 / 13;
        grid-row: 2;
    }

    .card-management-toolbar .card-status-control {
        grid-column: 1 / 7;
        grid-row: 3;
    }

    .card-management-toolbar .card-batch-action {
        grid-column: 7 / 10;
        grid-row: 3;
    }

    .card-management-toolbar .card-export-action {
        grid-column: 10 / 13;
        grid-row: 3;
    }

    .card-management-toolbar :is(.card-days-control, .card-count-control, .card-search-control) {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 8px !important;
    }

    .card-management-toolbar :is(.card-days-control, .card-count-control, .card-search-control) input:not([type="checkbox"]):not([type="radio"]),
    .card-management-toolbar > button {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 768px) {

    html[data-theme] .overflow-x-auto {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }

    html[data-theme] .overflow-x-auto::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .mobile-table-scrollbar.mobile-table-scrollbar-visible {
        display: block;
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: max(6px, env(safe-area-inset-bottom));
        height: 14px;
        padding: 2px;
        z-index: 9998;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid rgba(100, 116, 139, 0.55);
        border-radius: 7px;
        background: rgba(15, 23, 42, 0.94);
        box-shadow: 0 2px 10px rgba(2, 6, 23, 0.32);
        touch-action: none;
    }

    .mobile-table-scrollbar-thumb {
        display: block;
        width: 36px;
        height: 8px;
        border-radius: 4px;
        background: #94a3b8;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
        cursor: grab;
        touch-action: none;
        will-change: transform;
    }

    .mobile-table-scrollbar-thumb.is-dragging {
        cursor: grabbing;
        background: #cbd5e1;
    }

    html[data-theme="light"] .mobile-table-scrollbar.mobile-table-scrollbar-visible {
        border-color: #cbd5e1;
        background: rgba(241, 245, 249, 0.96);
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.14);
    }

    html[data-theme="light"] .mobile-table-scrollbar-thumb {
        background: #64748b;
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
    }

    html[data-theme="light"] .mobile-table-scrollbar-thumb.is-dragging {
        background: #475569;
    }
}

html[data-theme] table :is(th, td),
html[data-theme] table :is(th, td) *:not(i):not(.fa) {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif !important;
    font-weight: 700 !important;
}

html[data-theme="light"][data-theme] table :is(th, td),
html[data-theme="light"][data-theme] table :is(th, td) *:not(button):not(button *):not(i) {
    color: #111111 !important;
}

html[data-theme="dark"][data-theme] table :is(th, td),
html[data-theme="dark"][data-theme] table :is(th, td) *:not(button):not(button *):not(i) {
    color: #ffffff !important;
}

html[data-theme="light"][data-theme] table :is(th, td) :is([class*="bg-green"], [class*="bg-accent-green"]):not(button) {
    background-color: #bbf7d0 !important;
    color: #14532d !important;
    box-shadow: inset 0 0 0 1px #86efac !important;
}

html[data-theme="light"][data-theme] table :is(th, td) :is([class*="bg-red"], [class*="bg-accent-red"]):not(button) {
    background-color: #fecaca !important;
    color: #7f1d1d !important;
    box-shadow: inset 0 0 0 1px #fca5a5 !important;
}

html[data-theme="light"][data-theme] table :is(th, td) :is([class*="bg-orange"], [class*="bg-accent-orange"]):not(button) {
    background-color: #fed7aa !important;
    color: #7c2d12 !important;
    box-shadow: inset 0 0 0 1px #fdba74 !important;
}

html[data-theme="light"][data-theme] table :is(th, td) :is([class*="bg-primary"], [class*="bg-blue"], [class*="bg-accent-blue"], [class*="bg-accentBlue"]):not(button) {
    background-color: #bfdbfe !important;
    color: #1e3a8a !important;
    box-shadow: inset 0 0 0 1px #93c5fd !important;
}

html[data-theme="light"][data-theme] table :is(th, td) [class*="bg-purple"]:not(button) {
    background-color: #e9d5ff !important;
    color: #581c87 !important;
    box-shadow: inset 0 0 0 1px #d8b4fe !important;
}

html[data-theme="light"][data-theme] table :is(th, td) [class*="bg-slate"]:not(button) {
    background-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: inset 0 0 0 1px #94a3b8 !important;
}

html[data-theme="dark"][data-theme] table :is(th, td) :is([class*="bg-green"], [class*="bg-accent-green"]):not(button) {
    background-color: #166534 !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px #22c55e !important;
}

html[data-theme="dark"][data-theme] table :is(th, td) :is([class*="bg-red"], [class*="bg-accent-red"]):not(button) {
    background-color: #991b1b !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px #ef4444 !important;
}

html[data-theme="dark"][data-theme] table :is(th, td) :is([class*="bg-orange"], [class*="bg-accent-orange"]):not(button) {
    background-color: #9a3412 !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px #f97316 !important;
}

html[data-theme="dark"][data-theme] table :is(th, td) :is([class*="bg-primary"], [class*="bg-blue"], [class*="bg-accent-blue"], [class*="bg-accentBlue"]):not(button) {
    background-color: #1e40af !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px #3b82f6 !important;
}

html[data-theme="dark"][data-theme] table :is(th, td) [class*="bg-purple"]:not(button) {
    background-color: #6b21a8 !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px #a855f7 !important;
}

html[data-theme="dark"][data-theme] table :is(th, td) [class*="bg-slate"]:not(button) {
    background-color: #334155 !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px #64748b !important;
}

html[data-theme="light"][data-theme] table .online-status-badge .online-status-dot {
    background-color: #16a34a !important;
    box-shadow: 0 0 0 1px #15803d !important;
}

html[data-theme="dark"][data-theme] table .online-status-badge .online-status-dot {
    background-color: #4ade80 !important;
    box-shadow: 0 0 0 1px #22c55e !important;
}

html[data-theme="light"] {
    color-scheme: light;
    --theme-page: #f3f5f8;
    --theme-surface: #ffffff;
    --theme-surface-raised: #f8fafc;
    --theme-border: #dbe1e8;
    --theme-text: #1f2937;
    --theme-text-muted: #64748b;
    --theme-accent: #2563eb;
    --admin-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04);
    --admin-control-placeholder: #77869a;
    --admin-focus-ring: rgba(37, 99, 235, 0.16);
    --admin-title-icon-bg: #2563eb;
    --admin-title-icon-border: #1d4ed8;
    --admin-title-icon-text: #ffffff;
    --admin-accent-hover: #1d4ed8;
    --admin-button-neutral-bg: #ffffff;
    --admin-button-neutral-border: #a9bdd6;
    --admin-button-neutral-text: #294568;
    --admin-button-neutral-hover-bg: #eff6ff;
    --admin-button-neutral-hover-border: #60a5fa;
    --admin-button-neutral-hover-text: #1d4ed8;
    --admin-button-disabled-bg: #f8fafc;
    --admin-button-disabled-border: #cbd5e1;
    --admin-button-disabled-text: #94a3b8;
    --admin-button-success-soft-bg: #dcfce7;
    --admin-button-success-soft-border: #86efac;
    --admin-button-success-soft-text: #166534;
    --admin-button-danger-soft-bg: #fee2e2;
    --admin-button-danger-soft-border: #fca5a5;
    --admin-button-danger-soft-text: #991b1b;
    --bg-main: #f3f5f8;
    --bg-card: #ffffff;
    --bg-modal: #ffffff;
    --border-color: #dbe1e8;
    --border-modal: #dbe1e8;
    --text-primary: #1f2937;
    --text-secondary: #64748b;
    --scrollbar-track: #eef1f5;
    --scrollbar-thumb: #bdc7d4;
    --scrollbar-thumb-hover: #98a6b8;
    background: var(--theme-page) !important;
}

html[data-theme="light"] body {
    background: var(--theme-page) !important;
    background-image: none !important;
    color: var(--theme-text) !important;
}

html[data-theme="light"] #content {
    background: #f3f5f8 !important;
}

html[data-theme="light"] #sidebar {
    background: #ffffff !important;
    border-color: var(--theme-border) !important;
    box-shadow: 2px 0 12px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] #sidebar > .absolute {
    display: none;
}

html[data-theme="light"] #sidebar [class*="bg-clip-text"] {
    background: none !important;
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}

html[data-theme="light"] .glass,
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .server-card {
    background: #ffffff !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .server-card:hover {
    background: #f8fafc !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.12) !important;
}

html[data-theme="light"] .custom-select {
    background: #ffffff !important;
    background-image: none !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .custom-select:hover {
    background: #f8fafc !important;
    border-color: #3b82f6 !important;
    color: #1d4ed8 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

html[data-theme="light"] .custom-select-value {
    color: var(--theme-text) !important;
}

html[data-theme="light"] .custom-select-label,
html[data-theme="light"] .custom-select-arrow {
    color: var(--theme-text-muted) !important;
}

html[data-theme="light"] div.rounded-lg.overflow-hidden:has(#playerTable) {
    background: #ffffff !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] #detailContent [class~="bg-slate-700/50"] {
    background: #e8f0ff !important;
    border: 1px solid #c7d7fe !important;
}

html[data-theme="light"] #detailContent [class~="bg-slate-700/50"] .fa {
    color: #2563eb !important;
}

html[data-theme="light"] #detailContent button[class*="from-accent-red"] {
    background: linear-gradient(90deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
}

html[data-theme="light"] #detailContent button[class*="from-accent-green"] {
    background: linear-gradient(90deg, #22c55e, #16a34a) !important;
    color: #ffffff !important;
}

html[data-theme="light"] #detailContent button[class*="from-accent-red"] .fa,
html[data-theme="light"] #detailContent button[class*="from-accent-green"] .fa {
    color: #ffffff !important;
}

html[data-theme="light"] header.glass {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .menu-item,
html[data-theme="light"] .submenu-item {
    color: #64748b !important;
}

html[data-theme="light"] .menu-item:hover,
html[data-theme="light"] .submenu-item:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

html[data-theme="light"] .menu-item.active,
html[data-theme="light"] .submenu-item.active {
    background: #e8f0ff !important;
    color: #1d4ed8 !important;
}

/* Keep every navigation label on the same text column regardless of glyph width. */
html[data-theme] .menu-item,
html[data-theme] .submenu-item {
    min-height: 44px;
    line-height: 20px;
}

html[data-theme] .menu-item > i:first-child,
html[data-theme] .submenu-item > i:first-child {
    display: inline-flex;
    width: 20px;
    min-width: 20px;
    height: 20px;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

html[data-theme] .menu-item > span,
html[data-theme] .submenu-item > span {
    min-width: 0;
    line-height: 20px;
}

html[data-theme="light"] .text-white,
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-text-primary,
html[data-theme="light"] .text-textPrimary {
    color: var(--theme-text) !important;
}

html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-slate-500,
html[data-theme="light"] .text-text-secondary,
html[data-theme="light"] .text-textSecondary {
    color: var(--theme-text-muted) !important;
}

html[data-theme="light"] .text-green {
    color: #15803d !important;
}

html[data-theme="light"] .text-red {
    color: #b91c1c !important;
}

html[data-theme="light"] .text-blue,
html[data-theme="light"] .text-primary {
    color: #1d4ed8 !important;
}

html[data-theme="light"] .text-purple {
    color: #7e22ce !important;
}

html[data-theme="light"] .text-orange {
    color: #c2410c !important;
}

html[data-theme="light"] .bg-dark,
html[data-theme="light"] [class~="bg-dark/30"],
html[data-theme="light"] [class~="bg-dark/50"],
html[data-theme="light"] .bg-card,
html[data-theme="light"] [class~="bg-card/50"],
html[data-theme="light"] .bg-card-dark,
html[data-theme="light"] [class~="bg-card-dark/50"],
html[data-theme="light"] [class~="bg-card-dark/70"],
html[data-theme="light"] .bg-bg-dark,
html[data-theme="light"] [class~="bg-bg-dark/50"],
html[data-theme="light"] .bg-slate-700,
html[data-theme="light"] [class~="bg-slate-700/70"],
html[data-theme="light"] .bg-slate-600,
html[data-theme="light"] [class~="bg-slate-600/70"],
html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] [class~="bg-slate-800/50"],
html[data-theme="light"] .bg-slate-900 {
    background: var(--theme-surface-raised) !important;
}

html[data-theme="light"] .border-line,
html[data-theme="light"] .border-border-dark,
html[data-theme="light"] [class*="border-border-dark/"],
html[data-theme="light"] .border-slate-600,
html[data-theme="light"] [class*="border-slate-600/"],
html[data-theme="light"] .border-slate-700,
html[data-theme="light"] [class*="border-slate-700/"] {
    border-color: var(--theme-border) !important;
}

html[data-theme="light"] :is(
    #theme-light-form-control,
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select) {
    background-color: #ffffff !important;
    background-image: none !important;
    border-color: #cfd7e3 !important;
    color: #1f2937 !important;
    box-shadow: none !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] :is(
    #theme-light-focused-control,
    input:focus,
    textarea:focus,
    select:focus) {
    background-color: #ffffff !important;
    background-image: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

html[data-theme="light"] :is(
    #theme-light-autofill-control,
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active
) {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: #1f2937 !important;
    background-color: #ffffff !important;
}


html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .custom-options {
    background: #ffffff !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
}


html[data-theme="light"] .dropdown-menu li,
html[data-theme="light"] .custom-option {
    color: #334155 !important;
}


html[data-theme="light"] .dropdown-menu li:hover,
html[data-theme="light"] .custom-option:hover {
    background: #f1f5f9 !important;
}


html[data-theme="light"] .custom-option.selected {
    background: #e8f0ff !important;
    color: #1d4ed8 !important;
}

html[data-theme="light"] table {
    background: #ffffff !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="light"] thead,
html[data-theme="light"] thead[class*="bg-"] {
    background: #f7f9fc !important;
}

html[data-theme="light"] th {
    background: #f7f9fc !important;
    border-color: var(--theme-border) !important;
    color: #526075 !important;
}

html[data-theme="light"] td {
    border-color: #e6eaf0 !important;
    color: #334155 !important;
}

html[data-theme="light"] tbody tr:hover,
html[data-theme="light"] .table-row:hover {
    background: #f5f8fc !important;
}

html[data-theme="light"] .modal-content,
html[data-theme="light"] .modal-content-fixed,
html[data-theme="light"] #modalContent,
html[data-theme="light"] #confirmContent,
html[data-theme="light"] #toast,
html[data-theme="light"] .toast,
html[data-theme="light"] .toast-center {
    background: #ffffff !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18) !important;
}

/* Iframe form pages use a full-height element as the visible dialog shell. */
html[data-theme="light"] body > .flex.flex-col.h-full,
html[data-theme="light"] body > div[style*="height: 100vh"] {
    background: #ffffff !important;
    background-image: none !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16) !important;
}

html[data-theme="light"] body > .flex.flex-col.h-full > :is(header, footer, div),
html[data-theme="light"] body > div[style*="height: 100vh"] > :is(header, footer, div) {
    border-color: var(--theme-border) !important;
}

html[data-theme="light"] body > div[style*="height: 100vh"] :is(h1, h2, h3, h4, p, span, label, div)[style*="color: white"] {
    color: var(--theme-text) !important;
}

html[data-theme="light"] body > div[style*="height: 100vh"] :is(p, span, label, div)[style*="color: #cbd5e1"],
html[data-theme="light"] body > div[style*="height: 100vh"] :is(p, span, label, div)[style*="color: #94a3b8"] {
    color: var(--theme-text-muted) !important;
}

html[data-theme="light"] body > div[style*="height: 100vh"] [style*="background: #0b1020"],
html[data-theme="light"] body > div[style*="height: 100vh"] [style*="background: rgba(11,16,32"] {
    background: var(--theme-surface-raised) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="light"] .modal-overlay,
html[data-theme="light"] .modal-overlay-fixed {
    background: rgba(15, 23, 42, 0.42) !important;
}

/* Keep confirmation actions visually distinct in both themes. */
#btnConfirmNo {
    min-width: 88px !important;
    height: 40px !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: #334155 !important;
    border-color: #64748b !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

#btnConfirmNo:hover {
    background: #475569 !important;
    border-color: #94a3b8 !important;
}

#btnConfirmYes {
    min-width: 88px !important;
    height: 40px !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: #dc2626 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.24) !important;
}

/* All modal action buttons share one tap target and alignment.  Older pages
   used different Tailwind padding values, which made Cancel visibly smaller
   than Confirm. */
:is(.modal-action-button, [id*="Cancel"], [id*="ConfirmNo"], [id="btnModalCancel"], [id="btnModalReset"], [id="btnModalSubmit"]) {
    min-width: 88px;
    min-height: 40px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

#btnConfirmYes:hover {
    background: #b91c1c !important;
    border-color: #dc2626 !important;
}

#btnConfirmNo:focus-visible,
#btnConfirmYes:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

html[data-theme="light"] :where(button:not([class*="bg-accent"]):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-blue"]):not([class*="bg-primary"]):not([class*="bg-teal"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-indigo"]):not([class*="bg-cyan"]):not([class*="bg-violet"]):not([class*="bg-orange"]):not([class*="bg-purple"]):not([class*="gradient"]):not([class*="text-blue"]):not([class*="text-primary"]):not([class*="text-purple"]):not([class*="text-orange"]):not(.theme-toggle-button):not(.tool-button):not(.admin-button):not(.button):not(.btn-pagination-active)) {
    background: var(--admin-button-neutral-bg) !important;
    border-color: var(--admin-button-neutral-border) !important;
    color: var(--admin-button-neutral-text) !important;
}

html[data-theme="light"] :where(button:not([class*="bg-accent"]):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-blue"]):not([class*="bg-primary"]):not([class*="bg-teal"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-indigo"]):not([class*="bg-cyan"]):not([class*="bg-violet"]):not([class*="bg-orange"]):not([class*="bg-purple"]):not([class*="gradient"]):not([class*="text-blue"]):not([class*="text-primary"]):not([class*="text-purple"]):not([class*="text-orange"]):not(.theme-toggle-button):not(.tool-button):not(.admin-button):not(.button):not(.btn-pagination-active):hover:not(:disabled)) {
    background: var(--admin-button-neutral-hover-bg) !important;
    border-color: var(--admin-button-neutral-hover-border) !important;
    color: var(--admin-button-neutral-hover-text) !important;
}

html[data-theme="light"] :where(button:not([class*="bg-accent"]):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-blue"]):not([class*="bg-primary"]):not([class*="bg-teal"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-indigo"]):not([class*="bg-cyan"]):not([class*="bg-violet"]):not([class*="bg-orange"]):not([class*="bg-purple"]):not([class*="gradient"]):not([class*="text-blue"]):not([class*="text-primary"]):not([class*="text-purple"]):not([class*="text-orange"]):not(.theme-toggle-button):not(.tool-button):not(.admin-button):not(.button):not(.btn-pagination-active):disabled) {
    background: var(--admin-button-disabled-bg) !important;
    border-color: var(--admin-button-disabled-border) !important;
    color: var(--admin-button-disabled-text) !important;
    opacity: 1 !important;
}

html[data-theme="light"] button[class*="bg-accent"],
html[data-theme="light"] button[class*="bg-red"],
html[data-theme="light"] button[class*="bg-green"],
html[data-theme="light"] button[class*="bg-blue"],
html[data-theme="light"] button[class*="bg-primary"],
html[data-theme="light"] button[class*="bg-teal"],
html[data-theme="light"] button[class*="bg-amber"],
html[data-theme="light"] button[class*="bg-emerald"],
html[data-theme="light"] button[class*="bg-indigo"],
html[data-theme="light"] button[class*="bg-cyan"],
html[data-theme="light"] button[class*="bg-violet"],
html[data-theme="light"] a[class*="bg-accent"] {
    color: #ffffff !important;
}

/* Normalize action colors so page-local bright palettes stay legible on white. */
html[data-theme="light"] button[class~="bg-primary"],
html[data-theme="light"] button[class~="bg-blue"],
html[data-theme="light"] button[class~="bg-accent-blue"],
html[data-theme="light"] button[class~="bg-accentBlue"] {
    background-color: var(--admin-button-primary) !important;
    border-color: var(--admin-button-primary-hover) !important;
    color: #ffffff !important;
}

/* Keep all Tailwind semantic action colors visible in the light theme. */
html[data-theme="light"] button[class*="bg-blue-"] { background-color:var(--admin-button-primary) !important; border-color:var(--admin-button-primary-hover) !important; color:#fff !important; }
html[data-theme="light"] button[class*="bg-green-"] { background-color:var(--admin-button-success) !important; border-color:var(--admin-button-success-hover) !important; color:#fff !important; }
html[data-theme="light"] button[class*="bg-red-"] { background-color:var(--admin-button-danger) !important; border-color:var(--admin-button-danger-hover) !important; color:#fff !important; }
html[data-theme="light"] button[class*="bg-purple-"] { background-color:var(--admin-button-purple) !important; border-color:var(--admin-button-purple-hover) !important; color:#fff !important; }
html[data-theme="light"] button[class*="bg-orange-"] { background-color:var(--admin-orange) !important; border-color:var(--admin-orange) !important; color:#fff !important; }
html[data-theme="light"] button[class*="bg-teal"] { background-color:var(--admin-button-info) !important; border-color:var(--admin-button-info-hover) !important; color:#fff !important; }
html[data-theme="light"] button[class*="bg-amber"] { background-color:var(--admin-button-warning) !important; border-color:var(--admin-button-warning-hover) !important; color:#fff !important; }
html[data-theme="light"] button[class*="bg-emerald"] { background-color:var(--admin-button-success) !important; border-color:var(--admin-button-success-hover) !important; color:#fff !important; }
html[data-theme="light"] button[class*="bg-indigo"] { background-color:var(--admin-button-purple) !important; border-color:var(--admin-button-purple-hover) !important; color:#fff !important; }
html[data-theme="light"] button[class*="bg-cyan"] { background-color:var(--admin-button-info) !important; border-color:var(--admin-button-info-hover) !important; color:#fff !important; }
html[data-theme="light"] button[class*="bg-violet"] { background-color:var(--admin-button-purple) !important; border-color:var(--admin-button-purple-hover) !important; color:#fff !important; }
html[data-theme="light"] button[class*="bg-teal"]:hover:not(:disabled) { background-color:var(--admin-button-info-hover) !important; }
html[data-theme="light"] button[class*="bg-amber"]:hover:not(:disabled) { background-color:var(--admin-button-warning-hover) !important; }
html[data-theme="light"] button[class*="bg-emerald"]:hover:not(:disabled) { background-color:var(--admin-button-success-hover) !important; }
html[data-theme="light"] button[class*="bg-indigo"]:hover:not(:disabled) { background-color:var(--admin-button-purple-hover) !important; }
html[data-theme="light"] button[class*="bg-cyan"]:hover:not(:disabled) { background-color:var(--admin-button-info-hover) !important; }
html[data-theme="light"] button[class*="bg-violet"]:hover:not(:disabled) { background-color:var(--admin-button-purple-hover) !important; }
html[data-theme="light"] button[class*="bg-blue-"]:hover:not(:disabled) { background-color:var(--admin-button-primary-hover) !important; }
html[data-theme="light"] button[class*="bg-green-"]:hover:not(:disabled) { background-color:var(--admin-button-success-hover) !important; }
html[data-theme="light"] button[class*="bg-red-"]:hover:not(:disabled) { background-color:var(--admin-button-danger-hover) !important; }
html[data-theme="light"] button[class*="bg-purple-"]:hover:not(:disabled) { background-color:var(--admin-button-purple-hover) !important; }
html[data-theme="light"] button[class*="bg-orange-"]:hover:not(:disabled) { background-color:var(--admin-orange-hover) !important; }

html[data-theme="light"] button[class~="bg-primary"]:hover:not(:disabled),
html[data-theme="light"] button[class~="bg-blue"]:hover:not(:disabled),
html[data-theme="light"] button[class~="bg-accent-blue"]:hover:not(:disabled),
html[data-theme="light"] button[class~="bg-accentBlue"]:hover:not(:disabled) {
    background-color: #1d4ed8 !important;
}

html[data-theme="light"] button[class~="bg-green"],
html[data-theme="light"] button[class~="bg-accent-green"] {
    background-color: var(--admin-button-success) !important;
    border-color: var(--admin-button-success-hover) !important;
    color: #ffffff !important;
}

html[data-theme="light"] button[class~="bg-green"]:hover:not(:disabled),
html[data-theme="light"] button[class~="bg-accent-green"]:hover:not(:disabled) {
    background-color: var(--admin-button-success-hover) !important;
}

html[data-theme="light"] button[class~="bg-red"],
html[data-theme="light"] button[class~="bg-accent-red"] {
    background-color: var(--admin-button-danger) !important;
    border-color: var(--admin-button-danger-hover) !important;
    color: #ffffff !important;
}

html[data-theme="light"] button[class~="bg-red"]:hover:not(:disabled),
html[data-theme="light"] button[class~="bg-accent-red"]:hover:not(:disabled) {
    background-color: var(--admin-button-danger-hover) !important;
}

html[data-theme="light"] button[class~="bg-purple"],
html[data-theme="light"] button[class~="bg-accent-purple"] {
    background-color: var(--admin-button-purple) !important;
    border-color: var(--admin-button-purple-hover) !important;
    color: #ffffff !important;
}

html[data-theme="light"] button[class~="bg-purple"]:hover:not(:disabled),
html[data-theme="light"] button[class~="bg-accent-purple"]:hover:not(:disabled) {
    background-color: var(--admin-button-purple-hover) !important;
}

html[data-theme="light"] button[class~="bg-orange"],
html[data-theme="light"] button[class~="bg-accent-orange"] {
    background-color: var(--admin-button-warning) !important;
    border-color: var(--admin-button-warning-hover) !important;
    color: #ffffff !important;
}

html[data-theme="light"] button[class~="bg-orange"]:hover:not(:disabled),
html[data-theme="light"] button[class~="bg-accent-orange"]:hover:not(:disabled) {
    background-color: var(--admin-button-warning-hover) !important;
}

html[data-theme="light"] button[class~="bg-primary"] > .fa,
html[data-theme="light"] button[class~="bg-blue"] > .fa,
html[data-theme="light"] button[class~="bg-accent-blue"] > .fa,
html[data-theme="light"] button[class~="bg-accentBlue"] > .fa,
html[data-theme="light"] button[class~="bg-accent-green"] > .fa,
html[data-theme="light"] button[class~="bg-accent-red"] > .fa,
html[data-theme="light"] button[class~="bg-accent-purple"] > .fa,
html[data-theme="light"] button[class~="bg-accent-orange"] > .fa,
html[data-theme="light"] button[class~="bg-green"] > .fa,
html[data-theme="light"] button[class~="bg-red"] > .fa,
html[data-theme="light"] button[class~="bg-purple"] > .fa,
html[data-theme="light"] button[class~="bg-orange"] > .fa {
    color: inherit !important;
}

html[data-theme="light"] button:is(
    [class*="bg-blue-"],
    [class*="bg-green-"],
    [class*="bg-red-"],
    [class*="bg-purple-"],
    [class*="bg-orange-"],
    [class*="bg-teal"],
    [class*="bg-amber"],
    [class*="bg-emerald"],
    [class*="bg-indigo"],
    [class*="bg-cyan"],
    [class*="bg-violet"],
    [class~="bg-primary"],
    [class~="bg-blue"],
    [class~="bg-accent-blue"],
    [class~="bg-accentBlue"],
    [class~="bg-accent-green"],
    [class~="bg-accent-red"],
    [class~="bg-accent-purple"],
    [class~="bg-accent-orange"],
    [class~="bg-green"],
    [class~="bg-red"],
    [class~="bg-purple"],
    [class~="bg-orange"]
):disabled {
    background-color: var(--admin-button-disabled-bg) !important;
    border-color: var(--admin-button-disabled-border) !important;
    color: var(--admin-button-disabled-text) !important;
    opacity: 1 !important;
}

/* Login actions keep their branded gradient in the light theme. */
html[data-theme="light"] #login-form button[class*="bg-gradient"],
html[data-theme="light"] #register-form button[class*="bg-gradient"] {
    background-image: linear-gradient(90deg, #3b82f6, #06b6d4) !important;
    background-color: transparent !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

html[data-theme="light"] #login-form button[class*="bg-gradient"]:hover,
html[data-theme="light"] #register-form button[class*="bg-gradient"]:hover {
    background-image: linear-gradient(90deg, #2563eb, #0891b2) !important;
}

html[data-theme="light"] .table-export-button {
    background-color: var(--admin-button-success) !important;
    border-color: var(--admin-button-success-hover) !important;
    color: #ffffff !important;
    font-weight: 700;
}

html[data-theme="light"] .table-export-button:hover {
    background-color: var(--admin-button-success-hover) !important;
}

html[data-theme="light"] button.text-green {
    color: #15803d !important;
}

html[data-theme="light"] button.text-red {
    color: #b91c1c !important;
}

html[data-theme="light"] :is(
    [class*="bg-accent"],
    [class*="bg-primary"],
    [class*="bg-green"],
    [class*="bg-red"],
    [class*="bg-blue"],
    [class*="bg-purple"],
    [style*="gradient"]
) .text-white {
    color: #ffffff !important;
}

html[data-theme="light"] .card-no-cell {
    color: #334155 !important;
}

html[data-theme] :is(button.toggle, .toggle-thumb, .switch-track) {
    background: var(--admin-switch-off) !important;
    border-color: var(--admin-switch-off) !important;
}

html[data-theme] :is(button.toggle.on, .peer:checked + .toggle-thumb, .switch input:checked + .switch-track) {
    background: var(--admin-switch-on) !important;
    border-color: var(--admin-switch-on) !important;
}

html[data-theme] :is(button.toggle, .toggle-thumb, .switch-track)::after {
    background: var(--admin-switch-thumb) !important;
}

html[data-theme="light"] #showAllToggle + div {
    background: #cbd5e1 !important;
}

html[data-theme="light"] #showAllToggle:checked + div {
    background: #22c55e !important;
}

html[data-theme="light"] .btn-pagination:not(.btn-pagination-active),
html[data-theme="light"] .pagination button,
html[data-theme="light"] [class*="page-btn"] {
    background: var(--admin-button-neutral-bg) !important;
    border-color: var(--admin-button-neutral-border) !important;
    color: var(--admin-button-neutral-text) !important;
}

html[data-theme="light"] .btn-pagination-active,
html[data-theme="light"] .pagination .active,
html[data-theme="light"] [class*="page-btn"].active {
    background: var(--admin-button-primary) !important;
    border-color: var(--admin-button-primary-hover) !important;
    color: #ffffff !important;
}

.theme-toggle-wrapper {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.theme-toggle-inline {
    margin-right: 2px;
}

.theme-toggle-fixed {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
}

.theme-toggle-button {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    background: rgba(30, 41, 59, 0.72);
    color: #cbd5e1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.theme-toggle-button:hover {
    background: rgba(59, 130, 246, 0.16);
    border-color: rgba(96, 165, 250, 0.5);
    color: #ffffff;
}

.theme-toggle-button:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

html[data-theme="light"] .theme-toggle-button {
    background: #ffffff;
    border-color: var(--theme-border);
    color: #475569;
}

html[data-theme="light"] .theme-toggle-button:hover {
    background: #eff6ff;
    border-color: #93b4ed;
    color: #1d4ed8;
}

html[data-theme="light"] .theme-toggle-button .theme-icon {
    color: #475569 !important;
}

html[data-theme="dark"] .theme-icon-dark,
html[data-theme="light"] .theme-icon-light {
    display: none;
}

.theme-icon {
    font-size: 17px;
    line-height: 1;
}

html[data-theme="light"] #main-form {
    background: #ffffff !important;
    border-color: #dbe1e8 !important;
    color: #172033 !important;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] #main-form > div:first-child {
    opacity: 0.08;
}

html[data-theme="light"] .grid-bg {
    opacity: 0.22 !important;
}

html[data-theme="light"] .scanline,
html[data-theme="light"] .particles,
html[data-theme="light"] .ring-container {
    opacity: 0.12 !important;
}

html[data-theme="light"] body #login-form .input-field,
html[data-theme="light"] body #register-form .input-field,
html[data-theme="light"] .input-field {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #1f2937 !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] body #login-form .input-field:focus,
html[data-theme="light"] body #register-form .input-field:focus {
    background: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14) !important;
}

html[data-theme="light"] body #login-form .input-field::placeholder,
html[data-theme="light"] body #register-form .input-field::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] body #login-form .input-field:-webkit-autofill,
html[data-theme="light"] body #login-form .input-field:-webkit-autofill:hover,
html[data-theme="light"] body #login-form .input-field:-webkit-autofill:focus,
html[data-theme="light"] body #login-form .input-field:-webkit-autofill:active,
html[data-theme="light"] body #register-form .input-field:-webkit-autofill,
html[data-theme="light"] body #register-form .input-field:-webkit-autofill:hover,
html[data-theme="light"] body #register-form .input-field:-webkit-autofill:focus,
html[data-theme="light"] body #register-form .input-field:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
    -webkit-text-fill-color: #1f2937 !important;
    background-color: #f8fafc !important;
    caret-color: #1f2937 !important;
}

html[data-theme="light"] body #login-form .input-field:-moz-autofill,
html[data-theme="light"] body #register-form .input-field:-moz-autofill {
    box-shadow: 0 0 0 1000px #f8fafc inset !important;
    -moz-text-fill-color: #1f2937 !important;
}

html[data-theme="light"] #main-form .title {
    background: none !important;
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
    text-shadow: none !important;
}

html[data-theme="light"] #login-form > [role="group"] {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] #login-form .login-mode-btn {
    background: transparent !important;
    color: #475569 !important;
}

html[data-theme="light"] #login-form .login-mode-btn.bg-blue-500 {
    background: #2563eb !important;
    color: #ffffff !important;
}

html[data-theme="light"] #main-form .login-field-icon,
html[data-theme="light"] #main-form .login-field-icon i {
    color: #64748b !important;
}

html[data-theme="light"] .slider-captcha-track {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .slider-captcha-text {
    color: #64748b !important;
}

html[data-theme="light"] .slider-captcha-success .slider-captcha-text {
    color: #15803d !important;
}

html[data-theme="light"] #login-form label span {
    color: #64748b !important;
}

html[data-theme="light"]::-webkit-scrollbar-track,
html[data-theme="light"] body::-webkit-scrollbar-track,
html[data-theme="light"] ::-webkit-scrollbar-track {
    background: #eef1f5 !important;
}

html[data-theme="light"]::-webkit-scrollbar-thumb,
html[data-theme="light"] body::-webkit-scrollbar-thumb,
html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #bdc7d4 !important;
}

html[data-theme="light"]::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] body::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #98a6b8 !important;
}

html[data-theme="light"]::-webkit-scrollbar-corner,
html[data-theme="light"] body::-webkit-scrollbar-corner,
html[data-theme="light"] ::-webkit-scrollbar-corner {
    background: #eef1f5 !important;
}

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] * {
    scrollbar-color: #bdc7d4 #eef1f5;
}

/* Recharge rating shown before the account avatar in the admin shell. */
.recharge-rating-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 28px;
    box-sizing: border-box;
    padding: 4px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    background: rgba(15, 23, 42, .55);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .18);
}
.recharge-rating-badge > span {
    display: block;
    line-height: 1.2;
    text-align: center;
}
.recharge-rating-badge i { font-size: 11px; }
.recharge-rating-normal { color: #93c5fd; }
.recharge-rating-bronze { color: #f59e0b; }
.recharge-rating-silver { color: #d1d5db; }
.recharge-rating-gold { color: #facc15; }
.recharge-rating-platinum { color: #67e8f9; }
.recharge-rating-diamond { color: #93c5fd; }
html[data-theme="light"] .recharge-rating-badge {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
html[data-theme="light"] .recharge-rating-normal { color: #2563eb; }
html[data-theme="light"] .recharge-rating-bronze { color: #b45309; }
html[data-theme="light"] .recharge-rating-silver { color: #4b5563; }
html[data-theme="light"] .recharge-rating-gold { color: #a16207; }
html[data-theme="light"] .recharge-rating-platinum { color: #0e7490; }
html[data-theme="light"] .recharge-rating-diamond { color: #1d4ed8; }

/* Compact tier emblem, inspired by game level badges. */
.recharge-rating-badge {
    gap: 6px;
    min-height: 30px;
    padding: 3px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, .78);
    border-color: color-mix(in srgb, currentColor 68%, transparent);
}
.recharge-rating-badge i {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 25px;
    clip-path: polygon(50% 0%, 92% 25%, 92% 75%, 50% 100%, 8% 75%, 8% 25%);
    background: linear-gradient(135deg, currentColor 0%, #ffffff 48%, currentColor 100%);
    background-size: 220% 220%;
    color: #111827;
    font-size: 13px;
    text-shadow: none;
    animation: rechargeRatingShine 2.8s ease-in-out infinite, rechargeRatingPulse 2.8s ease-in-out infinite;
    filter: drop-shadow(0 0 4px currentColor);
}
.recharge-rating-normal i { background: linear-gradient(145deg, #bfdbfe, #2563eb); }
.recharge-rating-bronze i { background: linear-gradient(145deg, #fbbf24, #b45309); }
.recharge-rating-silver i { background: linear-gradient(145deg, #f8fafc, #94a3b8); }
.recharge-rating-gold i { background: linear-gradient(145deg, #fef08a, #ca8a04); }
.recharge-rating-platinum i { background: linear-gradient(145deg, #cffafe, #0891b2); }
.recharge-rating-diamond i { background: linear-gradient(145deg, #dbeafe, #2563eb); }
html[data-theme="light"] .recharge-rating-badge { background: #f8fafc; }
html[data-theme="light"] .recharge-rating-badge i { color: #0f172a; }
@keyframes rechargeRatingShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes rechargeRatingPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px currentColor); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 8px currentColor); }
}
@media (prefers-reduced-motion: reduce) {
    .recharge-rating-badge i { animation: none; }
}

/* Shared structure for legacy action names that now use the central skin. */
html[data-theme] :where(.tool-button, .btn-primary, .btn-secondary, .btn-pagination) {
    box-sizing: border-box;
    display: inline-flex;
    min-width: 0;
    min-height: var(--admin-control-height);
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--admin-control-radius);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

html[data-theme] .tool-button {
    height: 42px;
    padding-inline: 16px;
}

/*
 * Shared admin button appearance.
 * Pages may control placement and width; all colors and interaction states live here.
 * The filled palette is chosen for readable white text in the light theme and is reused
 * in the dark theme so actions keep the same meaning everywhere.
 */
html[data-theme] :where(button) {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--admin-button-neutral-border) !important;
}

html[data-theme] :where(
    .admin-button,
    .admin-page-shell .button,
    .tool-button,
    .client-action-button,
    .btn-primary,
    .btn-secondary,
    .btn-pagination,
    .table-export-button,
    .icon-button:not(.icon-button-close),
    .copy-button,
    .guide-edit-button,
    .detail-view-button,
    .seg,
    .tab,
    .template-choice,
    .editor-tool,
    .server-view-button,
    .level-button,
    button[class~="bg-primary"],
    button[class~="bg-accent-blue"],
    button[class~="bg-blue-500"],
    button[class~="bg-blue-500/80"],
    button[class~="bg-blue-600"],
    button[class~="bg-accent-green"],
    button[class~="bg-green"],
    button[class~="bg-green/80"],
    button[class~="bg-green/20"],
    button[class~="bg-emerald-600"],
    button[class~="bg-accent-red"],
    button[class~="bg-red"],
    button[class~="bg-red/20"],
    button[class~="bg-red-500/20"],
    button[class~="bg-accent-orange"],
    button[class~="bg-orange-600"],
    button[class~="bg-amber-600"],
    button[class~="bg-purple"],
    button[class~="bg-violet-600"],
    button[class~="bg-cyan-600"],
    button[class~="bg-teal-600"],
    button[class~="bg-card"],
    button[class~="bg-card-dark"],
    button[class~="bg-dark"],
    button[class~="bg-slate-700"],
    button[class~="bg-slate-700/50"],
    button[class~="bg-slate-700/70"],
    button[class*="from-accent-blue"],
    button[class*="from-accent-green"],
    button[class*="from-accent-red"],
    button[class*="from-accent-purple"],
    a[class~="bg-blue-500"],
    a[class~="bg-blue-600"]
) {
    --admin-action-bg: var(--admin-button-neutral-bg);
    --admin-action-border: var(--admin-button-neutral-border);
    --admin-action-text: var(--admin-button-neutral-text);
    --admin-action-hover-bg: var(--admin-button-neutral-hover-bg);
    --admin-action-hover-border: var(--admin-button-neutral-hover-border);
    --admin-action-hover-text: var(--admin-button-neutral-hover-text);
    box-sizing: border-box;
    border-color: var(--admin-action-border) !important;
    background-color: var(--admin-action-bg) !important;
    background-image: none !important;
    color: var(--admin-action-text) !important;
    opacity: 1;
}

html[data-theme] :where(
    .admin-button,
    .admin-page-shell .button,
    .tool-button,
    .client-action-button,
    .btn-primary,
    .btn-secondary,
    .btn-pagination,
    .table-export-button,
    .icon-button:not(.icon-button-close),
    .copy-button,
    .guide-edit-button,
    .detail-view-button,
    .seg,
    .tab,
    .template-choice,
    .editor-tool,
    .server-view-button,
    .level-button,
    button[class~="bg-primary"],
    button[class~="bg-accent-blue"],
    button[class~="bg-blue-500"],
    button[class~="bg-blue-500/80"],
    button[class~="bg-blue-600"],
    button[class~="bg-accent-green"],
    button[class~="bg-green"],
    button[class~="bg-green/80"],
    button[class~="bg-green/20"],
    button[class~="bg-emerald-600"],
    button[class~="bg-accent-red"],
    button[class~="bg-red"],
    button[class~="bg-red/20"],
    button[class~="bg-red-500/20"],
    button[class~="bg-accent-orange"],
    button[class~="bg-orange-600"],
    button[class~="bg-amber-600"],
    button[class~="bg-purple"],
    button[class~="bg-violet-600"],
    button[class~="bg-cyan-600"],
    button[class~="bg-teal-600"],
    button[class~="bg-card"],
    button[class~="bg-card-dark"],
    button[class~="bg-dark"],
    button[class~="bg-slate-700"],
    button[class~="bg-slate-700/50"],
    button[class~="bg-slate-700/70"],
    button[class*="from-accent-blue"],
    button[class*="from-accent-green"],
    button[class*="from-accent-red"],
    button[class*="from-accent-purple"],
    a[class~="bg-blue-500"],
    a[class~="bg-blue-600"]
):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--admin-action-hover-border) !important;
    background-color: var(--admin-action-hover-bg) !important;
    background-image: none !important;
    color: var(--admin-action-hover-text) !important;
}

html[data-theme] :where(
    .admin-button-primary,
    .admin-page-shell .button-primary,
    .btn-primary,
    .tool-button-primary,
    .card-generate-action,
    .card-search-action,
    .btn-pagination-active,
    .seg.active,
    .tab.active,
    .template-choice.active,
    .server-view-button[aria-pressed="true"],
    button[class~="bg-primary"],
    button[class~="bg-accent-blue"],
    button[class~="bg-blue-500"],
    button[class~="bg-blue-500/80"],
    button[class~="bg-blue-600"],
    button[class*="from-accent-blue"],
    a[class~="bg-blue-500"],
    a[class~="bg-blue-600"]
) {
    --admin-action-bg: var(--admin-button-primary);
    --admin-action-border: var(--admin-button-primary-hover);
    --admin-action-text: #ffffff;
    --admin-action-hover-bg: var(--admin-button-primary-hover);
    --admin-action-hover-border: var(--admin-button-primary-hover);
    --admin-action-hover-text: #ffffff;
}

html[data-theme] :where(
    .admin-button-success,
    .admin-page-shell .button-success,
    .tool-button-recharge,
    .table-export-button,
    .level-button.active-free,
    button[class~="bg-accent-green"],
    button[class~="bg-green"],
    button[class~="bg-green/80"],
    button[class~="bg-emerald-600"],
    button[class*="from-accent-green"]
) {
    --admin-action-bg: var(--admin-button-success);
    --admin-action-border: var(--admin-button-success-hover);
    --admin-action-text: #ffffff;
    --admin-action-hover-bg: var(--admin-button-success-hover);
    --admin-action-hover-border: var(--admin-button-success-hover);
    --admin-action-hover-text: #ffffff;
}

html[data-theme] :where(
    .admin-button-danger,
    .admin-page-shell .button-danger,
    .icon-button-danger,
    .recharge-rating-remove,
    button[class~="bg-accent-red"],
    button[class~="bg-red"],
    button[class*="from-accent-red"]
) {
    --admin-action-bg: var(--admin-button-danger);
    --admin-action-border: var(--admin-button-danger-hover);
    --admin-action-text: #ffffff;
    --admin-action-hover-bg: var(--admin-button-danger-hover);
    --admin-action-hover-border: var(--admin-button-danger-hover);
    --admin-action-hover-text: #ffffff;
}

html[data-theme] :where(
    .admin-button-warning,
    .admin-button-orange,
    .admin-page-shell .button-warning,
    .admin-page-shell .button-orange,
    .tool-button-purchase,
    .level-button.active-paid,
    button[class~="bg-accent-orange"],
    button[class~="bg-orange-600"],
    button[class~="bg-amber-600"]
) {
    --admin-action-bg: var(--admin-button-warning);
    --admin-action-border: var(--admin-button-warning-hover);
    --admin-action-text: #ffffff;
    --admin-action-hover-bg: var(--admin-button-warning-hover);
    --admin-action-hover-border: var(--admin-button-warning-hover);
    --admin-action-hover-text: #ffffff;
}

html[data-theme] :where(
    .admin-button-purple,
    .admin-page-shell .button-purple,
    button[class~="bg-purple"],
    button[class~="bg-violet-600"],
    button[class*="from-accent-purple"]
) {
    --admin-action-bg: var(--admin-button-purple);
    --admin-action-border: var(--admin-button-purple-hover);
    --admin-action-text: #ffffff;
    --admin-action-hover-bg: var(--admin-button-purple-hover);
    --admin-action-hover-border: var(--admin-button-purple-hover);
    --admin-action-hover-text: #ffffff;
}

html[data-theme] :where(
    .admin-button-info,
    .admin-page-shell .button-info,
    button[class~="bg-cyan-600"],
    button[class~="bg-teal-600"]
) {
    --admin-action-bg: var(--admin-button-info);
    --admin-action-border: var(--admin-button-info-hover);
    --admin-action-text: #ffffff;
    --admin-action-hover-bg: var(--admin-button-info-hover);
    --admin-action-hover-border: var(--admin-button-info-hover);
    --admin-action-hover-text: #ffffff;
}

html[data-theme] :where(button[class~="bg-green/20"]) {
    --admin-action-bg: var(--admin-button-success-soft-bg);
    --admin-action-border: var(--admin-button-success-soft-border);
    --admin-action-text: var(--admin-button-success-soft-text);
    --admin-action-hover-bg: var(--admin-button-success);
    --admin-action-hover-border: var(--admin-button-success-hover);
    --admin-action-hover-text: #ffffff;
}

html[data-theme] :where(button[class~="bg-red/20"], button[class~="bg-red-500/20"]) {
    --admin-action-bg: var(--admin-button-danger-soft-bg);
    --admin-action-border: var(--admin-button-danger-soft-border);
    --admin-action-text: var(--admin-button-danger-soft-text);
    --admin-action-hover-bg: var(--admin-button-danger);
    --admin-action-hover-border: var(--admin-button-danger-hover);
    --admin-action-hover-text: #ffffff;
}

html[data-theme] :where(.token, .button-dialog-close) {
    box-sizing: border-box;
    border-color: var(--admin-button-neutral-border) !important;
    background: var(--admin-button-neutral-bg) !important;
    color: var(--admin-button-neutral-text) !important;
}

html[data-theme] :where(.token, .button-dialog-close):hover:not(:disabled) {
    border-color: var(--admin-button-neutral-hover-border) !important;
    background: var(--admin-button-neutral-hover-bg) !important;
    color: var(--admin-button-neutral-hover-text) !important;
}

html[data-theme] .button-dialog-close:hover:not(:disabled) {
    border-color: var(--admin-button-danger-soft-border) !important;
    background: var(--admin-button-danger-soft-bg) !important;
    color: var(--admin-button-danger-soft-text) !important;
}

html[data-theme] :where(.token, .button-dialog-close) :where(i, span, svg) {
    color: inherit !important;
}

html[data-theme] .btn-back {
    border-color: var(--admin-button-primary) !important;
    background: var(--theme-surface) !important;
    color: var(--admin-button-primary) !important;
}

html[data-theme] .btn-back:hover {
    border-color: var(--admin-button-primary-hover) !important;
    background: var(--admin-button-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px var(--admin-focus-ring) !important;
}

html[data-theme] :where(
    .admin-button,
    .admin-page-shell .button,
    .tool-button,
    .client-action-button,
    .btn-primary,
    .btn-secondary,
    .btn-pagination,
    .table-export-button,
    .icon-button,
    .copy-button,
    .guide-edit-button,
    .detail-view-button,
    .seg,
    .tab,
    .template-choice,
    .editor-tool,
    .server-view-button,
    .level-button,
    button[class~="bg-primary"],
    button[class~="bg-accent-blue"],
    button[class~="bg-accent-green"],
    button[class~="bg-accent-red"],
    button[class~="bg-accent-orange"],
    button[class~="bg-blue-500"],
    button[class~="bg-blue-500/80"],
    button[class~="bg-blue-600"],
    button[class~="bg-green"],
    button[class~="bg-green/80"],
    button[class~="bg-green/20"],
    button[class~="bg-red"],
    button[class~="bg-red/20"],
    button[class~="bg-red-500/20"],
    button[class~="bg-orange-600"],
    button[class~="bg-amber-600"],
    button[class~="bg-purple"],
    button[class~="bg-violet-600"],
    button[class~="bg-cyan-600"],
    button[class~="bg-teal-600"],
    button[class~="bg-emerald-600"]
) :where(i, span, svg) {
    color: inherit !important;
}

html[data-theme] :where(button:disabled, button[aria-disabled="true"], a[aria-disabled="true"]) {
    border-color: var(--admin-button-disabled-border) !important;
    background-color: var(--admin-button-disabled-bg) !important;
    background-image: none !important;
    color: var(--admin-button-disabled-text) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

html[data-theme] :where(button, a[href], [role="button"]):focus-visible {
    outline: 2px solid var(--admin-button-primary) !important;
    outline-offset: 2px !important;
}

/* Shared table paginator states; theme variables provide the neutral colors. */
html[data-theme] .btn-pagination:not(.btn-pagination-active):not(:disabled):not([aria-disabled="true"]) {
    border: 1px solid var(--admin-button-primary) !important;
    background: var(--theme-surface) !important;
    color: var(--admin-button-primary) !important;
}

html[data-theme] .btn-pagination:not(.btn-pagination-active):not(:disabled):not([aria-disabled="true"]):hover {
    border-color: var(--admin-button-primary-hover) !important;
    background: var(--admin-button-primary) !important;
    color: #ffffff !important;
}

html[data-theme] button.btn-pagination.btn-pagination-active {
    border-color: var(--admin-button-primary-hover) !important;
    background-color: var(--admin-button-primary) !important;
    background-image: none !important;
    color: #ffffff !important;
}

html[data-theme] button.btn-pagination.btn-pagination-active > * {
    color: inherit !important;
}

/* Business guide navigation needs a visible light-theme selected state. */
html[data-theme="light"] .guide-nav-item {
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    color: #475569 !important;
}

html[data-theme="light"] .guide-nav-item:hover {
    border-color: #93c5fd !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

html[data-theme="light"] .guide-nav-item.active {
    border-color: #60a5fa !important;
    background: #dbeafe !important;
    color: #1e3a8a !important;
    box-shadow: inset 3px 0 #2563eb, 0 1px 2px rgba(37, 99, 235, 0.12) !important;
}