/*
 * Admin Panel — Surface Overrides
 *
 * Retrofits existing Tailwind utility classes inside admin scope so they
 * source colors from --admin-* tokens instead of hardcoded Tailwind grays.
 * This means the existing markup becomes theme-correct (dark + light)
 * without an HTML rewrite. New code should prefer the .admin-* component
 * classes from admin-components.css; this file is the migration bridge.
 *
 * Scope: body[data-page="admin"] main, plus admin-specific modals/forms
 * inside the admin shell.
 *
 * Load order: AFTER admin-components.css, so component classes win when
 * both are applied to the same element.
 */

/* ═══════════════════════════════════════════════════════════════════════
 * SURFACE COLORS — replace Tailwind grays with admin tokens
 * ═══════════════════════════════════════════════════════════════════════ */

body[data-page="admin"] main .bg-gray-800 {
    background-color: var(--admin-surface) !important;
}
body[data-page="admin"] main .bg-gray-900 {
    background-color: var(--admin-bg) !important;
}
body[data-page="admin"] main .bg-gray-700 {
    background-color: var(--admin-surface-raised) !important;
}
/* Tailwind opacity-suffix classes (compiled with escaped slash) */
body[data-page="admin"] main .bg-gray-700\/50,
body[data-page="admin"] main .bg-gray-800\/50,
body[data-page="admin"] main .bg-gray-900\/50 {
    background-color: var(--admin-surface-raised) !important;
}
body[data-page="admin"] main .bg-gray-700\/30,
body[data-page="admin"] main .bg-gray-800\/30,
body[data-page="admin"] main .bg-gray-900\/30 {
    background-color: color-mix(in srgb, var(--admin-surface-raised) 75%, transparent) !important;
}
body[data-page="admin"] main .divide-gray-700\/50 > * + * {
    border-color: var(--admin-border) !important;
}
body[data-page="admin"] main .border-gray-700 {
    border-color: var(--admin-border) !important;
}
body[data-page="admin"] main .border-gray-600 {
    border-color: var(--admin-border) !important;
}
body[data-page="admin"] main .divide-gray-700 > * + * {
    border-color: var(--admin-border) !important;
}

/* Text colors */
body[data-page="admin"] main .text-white { color: var(--admin-text) !important; }
body[data-page="admin"] main .text-gray-100 { color: var(--admin-text) !important; }
body[data-page="admin"] main .text-gray-200 { color: var(--admin-text) !important; }
body[data-page="admin"] main .text-gray-300 { color: var(--admin-text-muted) !important; }
body[data-page="admin"] main .text-gray-400 { color: var(--admin-text-muted) !important; }
body[data-page="admin"] main .text-gray-500 { color: var(--admin-text-subtle) !important; }

/* Accent text colors → map to admin status tokens so light theme stays readable */
body[data-page="admin"] main .text-red-400,
body[data-page="admin"] main .text-red-500 { color: var(--admin-danger) !important; }
body[data-page="admin"] main .text-green-400,
body[data-page="admin"] main .text-green-500 { color: var(--admin-success) !important; }
body[data-page="admin"] main .text-yellow-400,
body[data-page="admin"] main .text-yellow-500,
body[data-page="admin"] main .text-amber-400,
body[data-page="admin"] main .text-amber-500 { color: var(--admin-warning) !important; }
body[data-page="admin"] main .text-blue-400,
body[data-page="admin"] main .text-blue-500 { color: var(--admin-info) !important; }
body[data-page="admin"] main .text-teal-400,
body[data-page="admin"] main .text-teal-500 { color: var(--admin-accent) !important; }
body[data-page="admin"] main .text-indigo-400,
body[data-page="admin"] main .text-indigo-500,
body[data-page="admin"] main .text-purple-400,
body[data-page="admin"] main .text-purple-500 { color: var(--admin-info) !important; }

/* Icon-tinted "soft" backgrounds (e.g. .bg-blue-500/10) — these Tailwind
 * opacity-suffix classes compile to rgba(); we override the most common
 * ones to admin tone-soft tokens so they remain visible in light theme. */
body[data-page="admin"] main .bg-indigo-500\/10,
body[data-page="admin"] main .bg-purple-500\/10 { background-color: var(--admin-info-soft) !important; }
body[data-page="admin"] main .bg-blue-500\/10,
body[data-page="admin"] main .bg-teal-500\/10  { background-color: var(--admin-accent-soft) !important; }
body[data-page="admin"] main .bg-green-500\/10 { background-color: var(--admin-success-soft) !important; }
body[data-page="admin"] main .bg-yellow-500\/10,
body[data-page="admin"] main .bg-amber-500\/10 { background-color: var(--admin-warning-soft) !important; }
body[data-page="admin"] main .bg-red-500\/10   { background-color: var(--admin-danger-soft) !important; }

/* ═══════════════════════════════════════════════════════════════════════
 * CARD SURFACE — auto-elevate "bg-gray-800 + rounded-lg + border" combo
 * ═══════════════════════════════════════════════════════════════════════
 * The legacy card pattern is: .bg-gray-800.rounded-lg.p-6.border.border-gray-700
 * We re-skin it without forcing markup changes.
 */

body[data-page="admin"] main .bg-gray-800.rounded-lg,
body[data-page="admin"] main .bg-gray-800.rounded-xl {
    border-radius: var(--admin-radius-lg) !important;
    box-shadow: var(--admin-shadow-1);
}

/* ═══════════════════════════════════════════════════════════════════════
 * FORM CONTROLS — inputs, selects, textareas inside admin
 * ═══════════════════════════════════════════════════════════════════════ */

body[data-page="admin"] main input[type="text"],
body[data-page="admin"] main input[type="email"],
body[data-page="admin"] main input[type="password"],
body[data-page="admin"] main input[type="search"],
body[data-page="admin"] main input[type="number"],
body[data-page="admin"] main input[type="url"],
body[data-page="admin"] main input[type="tel"],
body[data-page="admin"] main input[type="date"],
body[data-page="admin"] main input[type="time"],
body[data-page="admin"] main input[type="datetime-local"],
body[data-page="admin"] main select,
body[data-page="admin"] main textarea {
    background-color: var(--admin-surface-raised);
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    border-radius: var(--admin-radius-md);
}
body[data-page="admin"] main input::placeholder,
body[data-page="admin"] main textarea::placeholder {
    color: var(--admin-text-subtle);
}
body[data-page="admin"] main input:focus-visible,
body[data-page="admin"] main select:focus-visible,
body[data-page="admin"] main textarea:focus-visible {
    outline: none;
    border-color: var(--admin-accent);
    box-shadow: var(--admin-focus);
}
body[data-page="admin"] main input:disabled,
body[data-page="admin"] main select:disabled,
body[data-page="admin"] main textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════
 * LEGACY INLINE BUTTONS — retrofit hardcoded "bg-*-600" to use tokens
 * ═══════════════════════════════════════════════════════════════════════
 * These are buttons like:
 *   <button class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg">
 * We keep them working but theme-correct.
 */

body[data-page="admin"] main .bg-red-600,
body[data-page="admin"] main .bg-red-500 {
    background-color: var(--admin-danger) !important;
    color: #ffffff !important;
}
body[data-page="admin"] main .hover\:bg-red-700:hover,
body[data-page="admin"] main .hover\:bg-red-600:hover {
    background-color: var(--admin-danger) !important;
    filter: brightness(1.08);
}

body[data-page="admin"] main .bg-blue-600,
body[data-page="admin"] main .bg-blue-500 {
    background-color: var(--admin-accent) !important;
    color: var(--admin-text-on-accent) !important;
}
body[data-page="admin"] main .hover\:bg-blue-700:hover,
body[data-page="admin"] main .hover\:bg-blue-600:hover {
    background-color: var(--admin-accent) !important;
    filter: brightness(1.08);
}

body[data-page="admin"] main .bg-green-600,
body[data-page="admin"] main .bg-green-500 {
    background-color: var(--admin-success) !important;
    color: #ffffff !important;
}
body[data-page="admin"] main .hover\:bg-green-700:hover,
body[data-page="admin"] main .hover\:bg-green-600:hover {
    background-color: var(--admin-success) !important;
    filter: brightness(1.08);
}

body[data-page="admin"] main .bg-yellow-600,
body[data-page="admin"] main .bg-amber-600,
body[data-page="admin"] main .bg-yellow-500,
body[data-page="admin"] main .bg-amber-500 {
    background-color: var(--admin-warning) !important;
    color: #1f1300 !important;
}

body[data-page="admin"] main .bg-indigo-600,
body[data-page="admin"] main .bg-purple-600 {
    background-color: var(--admin-info) !important;
    color: #ffffff !important;
}
body[data-page="admin"] main .hover\:bg-indigo-700:hover,
body[data-page="admin"] main .hover\:bg-purple-700:hover {
    background-color: var(--admin-info) !important;
    filter: brightness(1.08);
}

/* ═══════════════════════════════════════════════════════════════════════
 * MODAL BACKDROPS / OVERLAYS
 * ═══════════════════════════════════════════════════════════════════════ */

body[data-page="admin"] .bg-black\/50,
body[data-page="admin"] .bg-black\/60,
body[data-page="admin"] .bg-black\/70 {
    background-color: rgba(0, 0, 0, 0.52) !important;
}
html[data-theme="light"] body[data-page="admin"] .bg-black\/50,
html[data-theme="light"] body[data-page="admin"] .bg-black\/60,
html[data-theme="light"] body[data-page="admin"] .bg-black\/70 {
    background-color: rgba(15, 23, 42, 0.42) !important;
}

/* Modal bodies (the inner .bg-gray-800 inside a fixed inset overlay) */
body[data-page="admin"] [class*="-modal"] .bg-gray-800,
body[data-page="admin"] [class*="-modal"] .bg-gray-900 {
    background-color: var(--admin-surface-elevated) !important;
    border-color: var(--admin-border) !important;
    color: var(--admin-text) !important;
    box-shadow: var(--admin-shadow-3);
}

/* ═══════════════════════════════════════════════════════════════════════
 * LIGHT-MODE COMPATIBILITY for legacy hardcoded hex in admin.css billing
 * ═══════════════════════════════════════════════════════════════════════
 * The audit found `.billing-kicker { color: #8B5CF6 }` at 3.1:1 contrast
 * on white — fails WCAG AA. Re-route to tokens so light theme is readable.
 */

body[data-page="admin"] .billing-kicker,
body[data-page="admin"] .billing-section__header span,
body[data-page="admin"] .billing-section__header > span:first-child {
    color: var(--admin-accent) !important;
}
body[data-page="admin"] .billing-tab {
    color: var(--admin-text-muted) !important;
}
body[data-page="admin"] .billing-tab.is-active {
    color: var(--admin-text) !important;
    background: var(--admin-accent-soft) !important;
}
body[data-page="admin"] .billing-hero,
body[data-page="admin"] .billing-section,
body[data-page="admin"] .billing-org-card,
body[data-page="admin"] .billing-metric-card,
body[data-page="admin"] .billing-note {
    background: var(--admin-surface) !important;
    border-color: var(--admin-border) !important;
    color: var(--admin-text) !important;
}
body[data-page="admin"] .billing-hero h3,
body[data-page="admin"] .billing-metric-card strong {
    color: var(--admin-text) !important;
}
body[data-page="admin"] .billing-hero p,
body[data-page="admin"] .billing-metric-card small,
body[data-page="admin"] .billing-note p {
    color: var(--admin-text-muted) !important;
}
body[data-page="admin"] .billing-progress__fill--ok     { background: var(--admin-success) !important; }
body[data-page="admin"] .billing-progress__fill--warn   { background: var(--admin-warning) !important; }
body[data-page="admin"] .billing-progress__fill--danger { background: var(--admin-danger) !important; }
body[data-page="admin"] .billing-progress {
    background: var(--admin-surface-raised) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * SECTION HEADINGS — unify h2/h3 inside admin sections
 * ═══════════════════════════════════════════════════════════════════════ */

body[data-page="admin"] main .text-3xl {
    color: var(--admin-text);
    letter-spacing: -0.01em;
}
body[data-page="admin"] main .text-2xl,
body[data-page="admin"] main .text-xl {
    color: var(--admin-text);
}

/* ═══════════════════════════════════════════════════════════════════════
 * DROPDOWN PANELS / MENUS
 * ═══════════════════════════════════════════════════════════════════════ */

body[data-page="admin"] .dropdown-menu,
body[data-page="admin"] [role="menu"],
body[data-page="admin"] [role="listbox"] {
    background: var(--admin-surface-elevated);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    box-shadow: var(--admin-shadow-2);
    color: var(--admin-text);
}

/* ═══════════════════════════════════════════════════════════════════════
 * NEEDS-ATTENTION CARD — already custom; just re-skin via tokens
 * ═══════════════════════════════════════════════════════════════════════ */

body[data-page="admin"] .needs-attention-card {
    background: var(--admin-surface) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: var(--admin-radius-lg) !important;
    box-shadow: var(--admin-shadow-1);
    color: var(--admin-text) !important;
}
body[data-page="admin"] .needs-attention-card h3 {
    color: var(--admin-text) !important;
}
body[data-page="admin"] .needs-attention-icon {
    background: var(--admin-warning-soft) !important;
    color: var(--admin-warning) !important;
    border-color: transparent !important;
}
body[data-page="admin"] .needs-attention-count-badge {
    background: var(--admin-warning-soft) !important;
    color: var(--admin-warning) !important;
    border: 1px solid var(--admin-warning) !important;
}
body[data-page="admin"] .needs-attention-skeleton-row {
    background: linear-gradient(90deg,
        var(--admin-surface-raised) 0%,
        var(--admin-surface-elevated) 50%,
        var(--admin-surface-raised) 100%) !important;
    background-size: 200% 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * TABLES — generic table inside admin
 * ═══════════════════════════════════════════════════════════════════════ */

body[data-page="admin"] main table {
    color: var(--admin-text);
    border-color: var(--admin-border);
}
body[data-page="admin"] main table thead th {
    background: var(--admin-surface-raised);
    border-bottom: 1px solid var(--admin-border);
    color: var(--admin-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
}
body[data-page="admin"] main table tbody tr {
    border-bottom: 1px solid var(--admin-border);
}
body[data-page="admin"] main table tbody tr:hover {
    background: var(--admin-surface-raised);
}

/* ═══════════════════════════════════════════════════════════════════════
 * LOADING SCREEN + BUSY OVERLAY (outside main, but same token base)
 * ═══════════════════════════════════════════════════════════════════════ */

body[data-page="admin"] #loading-screen .text-gray-400,
body[data-page="admin"] #admin-busy-overlay #admin-busy-text {
    color: var(--admin-text-muted) !important;
}
body[data-page="admin"] #admin-busy-overlay .bg-gray-800 {
    background: var(--admin-surface-elevated) !important;
    border-color: var(--admin-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * RESPONSIVE INPUTS
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    body[data-page="admin"] main input[type="text"],
    body[data-page="admin"] main input[type="email"],
    body[data-page="admin"] main input[type="search"],
    body[data-page="admin"] main select,
    body[data-page="admin"] main textarea {
        font-size: 16px; /* prevents iOS zoom on focus */
    }
}