/**
 * DOT-CMS Admin Panel Shell Styles
 * Auto-Dark Shade Mapping from 60-30-10 Brand CI Engine + High-Contrast Badge Guard
 */
@import url('/storage/theme/brand-ci.css');

:root {
    --admin-bg: var(--surface-canvas, var(--ci-60-100, #f8fafc));
    --admin-card-bg: var(--surface-card, #ffffff);
    --admin-subtle-bg: var(--surface-subtle, var(--ci-60-50, #f1f5f9));
    --admin-card-border: var(--surface-border, var(--ci-60-200, #e2e8f0));
    --admin-text-heading: var(--text-heading, #0f172a);
    --admin-text-body: var(--text-body, #334155);
    --admin-text-muted: var(--text-muted, #64748b);
    --admin-sidebar-bg: var(--ci-30-900, #0f172a);
    --admin-accent: var(--ci-10-500, #4f46e5);
    --admin-accent-hover: var(--ci-10-600, #4338ca);
}

html.dark {
    --admin-bg: var(--ci-60-950, #0c141d);
    --admin-card-bg: var(--ci-60-900, #14212e);
    --admin-subtle-bg: var(--ci-60-800, #1f3347);
    --admin-card-border: var(--ci-60-700, #2b4764);
    --admin-text-heading: var(--ci-60-50, #f8fafc);
    --admin-text-body: var(--ci-60-100, #e2e8f0);
    --admin-text-muted: var(--ci-60-300, #cbd5e1);
    --admin-sidebar-bg: var(--ci-30-950, #090d16);
}

body.dot-admin-body {
    background-color: var(--admin-bg);
    color: var(--admin-text-body);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ==========================================================
   1. Dark Mode Surface & Card Mapping (From 60% Dominant Shades)
   ========================================================== */
html.dark .bg-white {
    background-color: var(--admin-card-bg) !important;
    color: var(--admin-text-body);
}

html.dark .bg-slate-50,
html.dark .bg-slate-50\/40,
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-50\/70,
html.dark .bg-slate-50\/80,
html.dark .bg-slate-100,
html.dark .bg-slate-100\/80,
html.dark .bg-slate-200\/60 {
    background-color: var(--admin-subtle-bg) !important;
}

html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/80,
html.dark .border-slate-300 {
    border-color: var(--admin-card-border) !important;
}

/* ==========================================================
   2. Dark Mode Typography Contrast Guard
   ========================================================== */
html.dark .text-slate-900,
html.dark .text-slate-800 {
    color: var(--admin-text-heading) !important;
}

html.dark .text-slate-700,
html.dark .text-slate-600 {
    color: var(--admin-text-body) !important;
}

html.dark .text-slate-500,
html.dark .text-slate-400 {
    color: var(--admin-text-muted) !important;
}

/* ==========================================================
   3. Dark Mode Pastel Boxes, Badges & Action Buttons Guard
      Automatically converts light *-50 tints into high-contrast dark translucent badges!
   ========================================================== */

/* Indigo Badges & Buttons */
html.dark .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.20) !important;
    border-color: rgba(129, 140, 248, 0.40) !important;
}
html.dark .bg-indigo-50:hover,
html.dark .hover\:bg-indigo-100:hover {
    background-color: rgba(99, 102, 241, 0.32) !important;
}
html.dark .text-indigo-600,
html.dark .text-indigo-700 {
    color: #a5b4fc !important;
}
html.dark .border-indigo-200 {
    border-color: rgba(129, 140, 248, 0.40) !important;
}

/* Emerald Badges & Buttons */
html.dark .bg-emerald-50,
html.dark .bg-emerald-50\/70 {
    background-color: rgba(16, 185, 129, 0.18) !important;
    border-color: rgba(52, 211, 153, 0.40) !important;
}
html.dark .bg-emerald-50:hover,
html.dark .hover\:bg-emerald-100:hover {
    background-color: rgba(16, 185, 129, 0.30) !important;
}
html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark .text-emerald-800 {
    color: #6ee7b7 !important;
}
html.dark .border-emerald-200,
html.dark .border-emerald-200\/80 {
    border-color: rgba(52, 211, 153, 0.40) !important;
}

/* Rose / Danger Badges & Buttons */
html.dark .bg-rose-50,
html.dark .bg-rose-50\/70 {
    background-color: rgba(244, 63, 94, 0.18) !important;
    border-color: rgba(251, 113, 133, 0.40) !important;
}
html.dark .bg-rose-50:hover,
html.dark .hover\:bg-rose-100:hover {
    background-color: rgba(244, 63, 94, 0.30) !important;
}
html.dark .text-rose-600,
html.dark .text-rose-700 {
    color: #fda4af !important;
}
html.dark .border-rose-200,
html.dark .border-rose-200\/80 {
    border-color: rgba(251, 113, 133, 0.40) !important;
}

/* Amber / Orange / Core Warning Badges & Section Builder Picker */
html.dark .bg-amber-50,
html.dark .bg-amber-50\/40,
html.dark .bg-orange-50,
html.dark .hover\:bg-orange-50\/70:hover {
    background-color: rgba(245, 158, 11, 0.16) !important;
    border-color: rgba(251, 191, 36, 0.38) !important;
}
html.dark .text-amber-500,
html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark .text-orange-700 {
    color: #fcd34d !important;
}
html.dark .border-amber-200,
html.dark .border-amber-300\/80,
html.dark .border-orange-200\/80 {
    border-color: rgba(251, 191, 36, 0.38) !important;
}

/* Purple Badges */
html.dark .bg-purple-50 {
    background-color: rgba(168, 85, 247, 0.20) !important;
    border-color: rgba(192, 132, 252, 0.40) !important;
}
html.dark .text-purple-700 {
    color: #d8b4fe !important;
}

/* Form Controls & Inputs in Dark Mode */
html.dark input:not([type="color"]),
html.dark select,
html.dark textarea {
    background-color: var(--ci-60-950, #0c141d) !important;
    color: var(--ci-60-50, #f8fafc) !important;
    border-color: var(--ci-60-700, #2b4764) !important;
}

html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover {
    background-color: var(--ci-60-700, #2b4764) !important;
}

/* ==========================================================
   4. Core Brand CI Components
   ========================================================== */
.dot-sidebar {
    background-color: var(--admin-sidebar-bg);
}

.dot-btn-accent {
    background-color: var(--ci-10-500, #4f46e5);
    color: #ffffff !important;
}

.dot-btn-accent:hover {
    background-color: var(--ci-10-600, #4338ca);
}

.dot-nav-active {
    background-color: var(--ci-10-500, #4f46e5);
    color: #ffffff !important;
    box-shadow: 0 4px 12px -2px rgba(79, 70, 229, 0.35);
}