/* private/assets/css/admin-theme.css */

/* ═══════════════════════════════════════════════════════
   Admin Panel Theme Variables & Overrides
   Designed for Psychological Comfort & Modern Aesthetics
   ═══════════════════════════════════════════════════════ */

:root {
    /* ── Core Brand ── */
    --primary: #5a52d9;
    /* Slightly deeper, softer primary for less eye strain */
    --primary-light: #7c74f2;
    --primary-dark: #413aab;
    --primary-rgb: 90, 82, 217;

    --accent: #F43F5E;
    /* Rose 500 - more pleasant than pure red */
    --accent-hover: #E11D48;
    --accent-rgb: 244, 63, 94;

    /* ── Dark Spectrum ── */
    --dark: #1e293b;
    /* Slate 800 - Professional, neutral dark instead of pure blue */
    --darker: #0f172a;
    /* Slate 900 */
    --dark-bg: #f8fafc;
    /* Slate 50 - Very soft, cool white for main background */
    --dark-rgb: 30, 41, 59;

    /* ── Surfaces ── */
    --bg: #f8fafc;
    /* Slate 50 - softer than pure white for huge backgrounds */
    --bg-warm: #fffbfc;
    /* Very subtle warm white */
    --bg-subtle: #f1f5f9;
    /* Slate 100 */
    --bg-input: #ffffff;
    --surface: #ffffff;
    /* Pure white for cards to pop against soft bg */
    --surface-alt: #f1f5f9;

    /* ── Text ── */
    --text: #334155;
    /* Slate 700 - Highly readable but softer than #000 */
    --text-secondary: #475569;
    /* Slate 600 */
    --text-muted: #64748b;
    /* Slate 500 */
    --text-faint: #94a3b8;
    /* Slate 400 */
    --heading-color: #0f172a;
    /* Slate 900 */

    /* ── Borders ── */
    --border: #e2e8f0;
    /* Slate 200 */
    --border-soft: #f1f5f9;
    /* Slate 100 */
    --border-light: #f8fafc;
    /* Slate 50 */
    --border-card: #e2e8f0;

    /* ── Gradients ── */
    /* Softer, more pleasing gradients for sidebars and headers */
    --gradient-hero: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    /* Indigo tint */
    --gradient-brand: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    /* Elegant Slate for Sidebar */
    --gradient-soft: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    --gradient-accent: linear-gradient(135deg, #5a52d9 0%, #c4b5fd 100%);
    /* Primary to light purple */
    --gradient-progress: linear-gradient(90deg, #5a52d9, #F43F5E);
    --gradient-prop: linear-gradient(135deg, #6C60FE 0%, #7c3aed 50%, #06b6d4 100%);
    --gradient-prop-soft: linear-gradient(135deg, rgba(108, 96, 254, 0.08) 0%, rgba(124, 58, 237, 0.05) 100%);

    /* ── Shadows ── */
    /* Much softer, diffused shadows simulating natural light */
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-soft: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-dropdown: 0 10px 15px -3px rgb(0 0 0 / 0.1);

    /* ── Semantic ── */
    --success: #10B981;
    /* Pleasant Emerald green */
    --success-light: #d1fae5;
    --warning: #F59E0B;
    /* Amber */
    --warning-light: #fef3c7;
    --info-color: #3B82F6;
    /* Blue */

    /* ── Layout ── */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════
   Overrides for AdminLTE Main Components (Light Mode)
   ═══════════════════════════════════════════════════════ */

/* Layout Backgrounds */
body:not(.dark-mode) .wrapper,
body:not(.dark-mode) .content-wrapper {
    background-color: var(--bg);
    color: var(--text);
}

/* Base text */
body:not(.dark-mode) {
    color: var(--text);
    font-family: 'Source Sans Pro', 'Inter', system-ui, -apple-system, sans-serif;
}

/* Cards */
body:not(.dark-mode) .card {
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius);
    background-color: var(--surface);
    transition: var(--transition);
}

body:not(.dark-mode) .card:hover {
    box-shadow: var(--shadow);
}

body:not(.dark-mode) .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border);
}

/* Main Sidebar Override */
body:not(.dark-mode) .main-sidebar {
    background: var(--gradient-brand) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

/* Active Sidebar Link - using a soft, pleasing highlight instead of screaming neon */
body:not(.dark-mode) .sidebar-dark-warning .nav-sidebar>.nav-item>.nav-link.active,
body:not(.dark-mode) .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    color: #fff;
    border-left: 3px solid var(--primary-light);
    border-radius: 0 8px 8px 0;
}

body:not(.dark-mode) .sidebar-dark-warning .nav-sidebar>.nav-item>.nav-link:hover,
body:not(.dark-mode) .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
}

body:not(.dark-mode) .brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Top Navbar */
/* The user requested navbar green (success) was hiding the toggle. 
   We will make the navbar crisp white in light mode for a hyper-modern SAAS look. */
body:not(.dark-mode) .main-header.navbar {
    background-color: var(--surface) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
}

body:not(.dark-mode) .navbar-light .navbar-nav .nav-link,
body:not(.dark-mode) .main-header.navbar .navbar-nav .nav-link {
    color: var(--text-secondary) !important;
}

body:not(.dark-mode) .main-header.navbar .navbar-nav .nav-link:hover {
    color: var(--primary) !important;
}

/* Primary Utilities */
.bg-primary {
    background-color: var(--primary) !important;
    color: #fff;
}

.text-primary {
    color: var(--primary) !important;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

/* Success Utilities */
.bg-success {
    background-color: var(--success) !important;
    color: #fff;
}

.text-success {
    color: var(--success) !important;
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}

/* Accent (Danger/Secondary maps to Accent based on usage) */
.bg-danger {
    background-color: var(--accent) !important;
    color: #fff;
}

.text-danger {
    color: var(--accent) !important;
}

.btn-danger {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* Inputs and Forms */
body:not(.dark-mode) .form-control {
    border-color: var(--border);
    border-radius: var(--radius-sm);
    box-shadow: none;
    padding: 0.6rem 1rem;
    color: var(--text);
    background-color: var(--bg-input);
}

body:not(.dark-mode) .form-control:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
    background-color: #fff;
}

/* Tables */
body:not(.dark-mode) .table {
    border-bottom: 1px solid var(--border);
}

body:not(.dark-mode) .table thead th {
    border-bottom: 2px solid var(--border);
    border-top: none;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    background-color: var(--bg-subtle);
}

body:not(.dark-mode) .table td {
    border-top: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}


/* ═══════════════════════════════════════════════════════
   Dark Mode Overrides (.dark-mode class provided by AdminLTE)
   Designed for low eye strain in poorly lit environments
   ═══════════════════════════════════════════════════════ */
body.dark-mode {
    background-color: #0c1220;
    /* Very deep slate, better contrast than raw black */
    color: #94a3b8;
    /* Slate 400 - prevents searing white on dark backgrounds */
}

body.dark-mode .wrapper,
body.dark-mode .content-wrapper,
body.dark-mode .main-footer {
    background-color: #0c1220 !important;
    border-color: #1e293b;
    color: #cbd5e1;
    /* Slate 300 */
}

body.dark-mode .card,
body.dark-mode .info-box,
body.dark-mode .modal-content {
    background-color: #151e32;
    /* Slightly lighter than bg to show depth */
    border: 1px solid #1e293b;
    border-radius: var(--radius);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}

body.dark-mode .card-header {
    border-bottom: 1px solid #1e293b;
    color: #e2e8f0;
}

body.dark-mode .card-footer {
    border-top: 1px solid #1e293b;
    background-color: #151e32;
}

/* Sidebar in dark mode uses true dark */
body.dark-mode .main-sidebar {
    background: #080b13 !important;
    border-right: 1px solid #1e293b;
}

body.dark-mode .brand-link {
    border-bottom: 1px solid #1e293b !important;
}

/* Navbar Dark */
body.dark-mode .main-header.navbar {
    background-color: #151e32 !important;
    border-bottom: 1px solid #1e293b !important;
}

body.dark-mode .navbar-dark .navbar-nav .nav-link,
body.dark-mode .main-header.navbar .navbar-nav .nav-link {
    color: #cbd5e1 !important;
}

body.dark-mode .main-header.navbar .navbar-nav .nav-link:hover {
    color: #f8fafc !important;
}

/* Dark mode inputs */
body.dark-mode .form-control,
body.dark-mode .custom-select,
body.dark-mode .select2-container--default .select2-selection--single {
    background-color: #0c1220;
    border-color: #334155;
    color: #f8fafc;
}

body.dark-mode .form-control:focus {
    background-color: #080b13;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(108, 96, 254, 0.25);
    color: #f8fafc;
}

/* Dark Mode Tables */
body.dark-mode .table {
    color: #cbd5e1;
}

body.dark-mode .table thead th {
    border-bottom-color: #334155;
    background-color: #080b13;
    color: #e2e8f0;
}

body.dark-mode .table td {
    border-top-color: #1e293b;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .02);
}

/* Dropdowns in dark mode */
body.dark-mode .dropdown-menu {
    background-color: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

body.dark-mode .dropdown-item {
    color: #cbd5e1;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #334155;
    color: #f8fafc;
}

body.dark-mode .dropdown-divider {
    border-top-color: #334155;
}

/* Fix tinyMCE inside dark mode if necessary */
body.dark-mode .tox-tinymce {
    border-color: #334155 !important;
}

/* Theme Toggle Button custom styles */
.theme-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: pointer;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    /* Better contrast than raw primary */
    border: 1px solid var(--border);
}

.theme-toggle-btn:hover {
    background: #e2e8f0;
    color: var(--primary);
    transform: translateY(-1px);
}

body.dark-mode .theme-toggle-btn {
    background: #1e293b;
    color: #fbbf24;
    /* Sun yellow for dark mode */
    border-color: #334155;
}

body.dark-mode .theme-toggle-btn:hover {
    background: #334155;
    color: #fcd34d;
}