/*
 * Bina360 — CSS Variable Theme System
 * Supports: gold/navy templates × dark/light modes
 * Usage: <body data-template="gold" data-mode="dark">
 * Do NOT override Tailwind utility classes here — variables only.
 */

/* ── Smooth transitions on mode/template switch ────────────────────────── */
body {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ════════════════════════════════════════════════════════════════════════
   GOLD · DARK  (default — preserves existing look)
   ════════════════════════════════════════════════════════════════════════ */
body[data-template="gold"][data-mode="dark"] {
    --bg-primary:        #07070B;
    --bg-surface:        #0F0F13;
    --bg-sidebar:        #0F0F13;
    --accent:            var(--custom-gold-acc, #C9A84C);
    --accent-hover:      color-mix(in srgb, var(--custom-gold-acc, #C9A84C) 82%, #000);
    --text-primary:      #e2e8f0;
    --text-secondary:    #64748b;
    --text-heading:      var(--custom-gold-acc, #C9A84C);
    --border-color:      rgba(201,168,76,0.2);
    --input-bg:          #0d0d11;
    --input-text:        #e2e8f0;
    --input-border:      #334155;
    --btn-primary-bg:    var(--custom-gold-acc, #C9A84C);
    --btn-primary-text:  #fff;
}

/* ════════════════════════════════════════════════════════════════════════
   GOLD · LIGHT
   ════════════════════════════════════════════════════════════════════════ */
body[data-template="gold"][data-mode="light"] {
    --bg-primary:        #f8f7f2;
    --bg-surface:        #fffdf5;
    --bg-sidebar:        #1a1508;
    --accent:            var(--custom-gold-acc, #C9A84C);
    --accent-hover:      color-mix(in srgb, var(--custom-gold-acc, #C9A84C) 78%, #000);
    --text-primary:      #1a1a1a;
    --text-secondary:    #6b7280;
    --text-heading:      #92720e;
    --border-color:      rgba(201,168,76,0.3);
    --input-bg:          #ffffff;
    --input-text:        #1a1a1a;
    --input-border:      #d1d5db;
    --btn-primary-bg:    var(--custom-gold-acc, #C9A84C);
    --btn-primary-text:  #fff;
}

/* ════════════════════════════════════════════════════════════════════════
   NAVY · DARK
   ════════════════════════════════════════════════════════════════════════ */
body[data-template="navy"][data-mode="dark"] {
    --bg-primary:        #0a1628;
    --bg-surface:        #102A43;
    --bg-sidebar:        #0a1628;
    --accent:            var(--custom-navy-acc, #2F6FED);
    --accent-hover:      color-mix(in srgb, var(--custom-navy-acc, #2F6FED) 82%, #000);
    --text-primary:      #e2e8f0;
    --text-secondary:    #64748b;
    --text-heading:      #7fb3f8;
    --border-color:      rgba(47,111,237,0.25);
    --input-bg:          #0d1f35;
    --input-text:        #e2e8f0;
    --input-border:      #1F3A5F;
    --btn-primary-bg:    var(--custom-navy-acc, #2F6FED);
    --btn-primary-text:  #fff;
}

/* ════════════════════════════════════════════════════════════════════════
   NAVY · LIGHT
   ════════════════════════════════════════════════════════════════════════ */
body[data-template="navy"][data-mode="light"] {
    --bg-primary:        #f0f5ff;
    --bg-surface:        #ffffff;
    --bg-sidebar:        #102A43;
    --accent:            var(--custom-navy-acc, #2F6FED);
    --accent-hover:      color-mix(in srgb, var(--custom-navy-acc, #2F6FED) 82%, #000);
    --text-primary:      #0f172a;
    --text-secondary:    #475569;
    --text-heading:      #1e40af;
    --border-color:      rgba(47,111,237,0.2);
    --input-bg:          #ffffff;
    --input-text:        #0f172a;
    --input-border:      #bfdbfe;
    --btn-primary-bg:    var(--custom-navy-acc, #2F6FED);
    --btn-primary-text:  #fff;
}

/* ════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES — consume the variables
   These are purely additive; they do not conflict with Tailwind utilities.
   ════════════════════════════════════════════════════════════════════════ */

/* Primary button using theme variables */
.btn-theme-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--btn-primary-bg, #C9A84C);
    color: var(--btn-primary-text, #fff);
    font-weight: 700;
    font-size: 14px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-theme-primary:hover {
    background: var(--accent-hover, #b8952f);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.btn-theme-primary:active {
    transform: translateY(0);
}

/* Card / panel surface */
.card-theme {
    background: var(--bg-surface, #0F0F13);
    border: 1px solid var(--border-color, rgba(201,168,76,0.2));
    border-radius: 16px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* ════════════════════════════════════════════════════════════════════════
   NAVY TEMPLATE — override hardcoded gold/dark elements in admin layout
   These rules target the inline <style> classes and specific element IDs.
   ════════════════════════════════════════════════════════════════════════ */

/* Sidebar background */
body[data-template="navy"] #bp-sidebar {
    background-color: #0a1628 !important;
    border-right-color: rgba(47,111,237,0.12) !important;
}

/* Header background */
body[data-template="navy"] #bp-header {
    background-color: #102A43 !important;
    border-bottom-color: rgba(47,111,237,0.18) !important;
}

/* Sidebar active link — bg-gold-500/15, text-gold-500, border-gold-500/20 */
body[data-template="navy"] #bp-sidebar a[class*="bg-gold"] {
    background-color: rgba(47,111,237,0.18) !important;
}
body[data-template="navy"] #bp-sidebar a[class*="text-gold"] {
    color: #7fb3f8 !important;
}
body[data-template="navy"] #bp-sidebar a[class*="border-gold"] {
    border-color: rgba(47,111,237,0.25) !important;
}

/* Sidebar scrollbar accent */
body[data-template="navy"] .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(47,111,237,0.65) !important;
}

/* btn-gold → navy accent */
body[data-template="navy"] .btn-gold {
    background: var(--custom-navy-acc, #2F6FED) !important;
}
body[data-template="navy"] .btn-gold:hover {
    background: color-mix(in srgb, var(--custom-navy-acc, #2F6FED) 82%, #000) !important;
    box-shadow: 0 6px 18px rgba(47,111,237,0.38) !important;
}
body[data-template="navy"] .btn-gold:active {
    box-shadow: 0 2px 6px rgba(47,111,237,0.25) !important;
}

/* Flatpickr accent */
body[data-template="navy"] .flatpickr-input[readonly]:focus {
    border-color: #2F6FED !important;
    box-shadow: 0 0 0 3px rgba(47,111,237,0.1) !important;
}
body[data-template="navy"] .flatpickr-day.selected,
body[data-template="navy"] .flatpickr-day.selected:hover {
    background: var(--custom-navy-acc, #2F6FED) !important;
    border-color: var(--custom-navy-acc, #2F6FED) !important;
}
body[data-template="navy"] .flatpickr-day:hover {
    background: rgba(47,111,237,0.1) !important;
}

/* admin-content blue→gold conversion → revert to natural blue for navy */
body[data-template="navy"] .admin-content [class*="bg-blue-600"]:not([class*="bg-blue-600/"]) {
    background: #2F6FED !important;
    color: #ffffff !important;
}
body[data-template="navy"] .admin-content [class*="bg-blue-600/"] {
    background: rgba(47,111,237,0.12) !important;
}
body[data-template="navy"] .admin-content [class*="text-blue-4"] { color: #1d4ed8 !important; }
body[data-template="navy"] .admin-content [class*="text-blue-3"] { color: #2F6FED !important; }
body[data-template="navy"] .admin-content [class*="border-blue"] { border-color: rgba(47,111,237,0.35) !important; }
body[data-template="navy"] .admin-content [class*="ring-blue"]   { --tw-ring-color: rgba(47,111,237,0.5) !important; }

/* Table row hover */
body[data-template="navy"] .bp-table tbody tr:hover {
    background: rgba(47,111,237,0.04) !important;
}

/* badge-pending → navy blue tint */
body[data-template="navy"] .badge-pending {
    background: rgba(47,111,237,0.1) !important;
    color: #1e40af !important;
    border-color: rgba(47,111,237,0.25) !important;
}

/* Yellow text headings in content area → navy accent */
body[data-template="navy"] .admin-content .text-yellow-600 { color: #2F6FED !important; }
body[data-template="navy"] .admin-content .text-yellow-700 { color: #1d5fd4 !important; }
body[data-template="navy"] .admin-content .text-yellow-400 { color: #7fb3f8 !important; }

/* Settings page section headings (outside .admin-content) */
body[data-template="navy"] .text-yellow-700 { color: #3b82f6 !important; }

/* Settings page input focus ring */
body[data-template="navy"] .focus\:border-yellow-500:focus { border-color: #2F6FED !important; }
body[data-template="navy"] .focus\:ring-yellow-500\/50:focus { --tw-ring-color: rgba(47,111,237,0.5) !important; }

/* ════════════════════════════════════════════════════════════════════════
   LOGIN PAGE (auth-body) — body background + form element overrides
   Uses !important to override the hardcoded inline style on <body>.
   body.auth-body scoping ensures admin panel is NOT affected.
   ════════════════════════════════════════════════════════════════════════ */

/* Gold Dark — matches inline default, written for toggle consistency */
body.auth-body[data-template="gold"][data-mode="dark"] {
    background: #07070B !important;
    background-image: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,168,76,0.07) 0%, transparent 70%) !important;
}
/* Gold Light */
body.auth-body[data-template="gold"][data-mode="light"] {
    background: #f8f7f2 !important;
    background-image: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,168,76,0.06) 0%, transparent 70%) !important;
}
/* Gold Light — login card */
body.auth-body[data-template="gold"][data-mode="light"] .gold-glow {
    background: #ffffff !important;
    border-color: rgba(201,168,76,0.3) !important;
    box-shadow: 0 0 0 1px rgba(201,168,76,0.15), 0 8px 32px rgba(0,0,0,0.07), 0 0 60px rgba(201,168,76,0.04) !important;
}
body.auth-body[data-template="gold"][data-mode="light"] .gold-glow h2 { color: #374151 !important; }
body.auth-body[data-template="gold"][data-mode="light"] .gold-glow label,
body.auth-body[data-template="gold"][data-mode="light"] .gold-glow label span { color: #4b5563 !important; }
body.auth-body[data-template="gold"][data-mode="light"] .gold-glow a { color: #92720e !important; }
body.auth-body[data-template="gold"][data-mode="light"] .gold-glow a:hover { color: #C9A84C !important; }
body.auth-body[data-template="gold"][data-mode="light"] .gold-glow button[type="button"] { color: #6b7280 !important; }
/* Gold Light — inputs */
body.auth-body[data-template="gold"][data-mode="light"] .input-field {
    background: #f9f7f0 !important;
    border-color: rgba(0,0,0,0.14) !important;
    color: #1a1a1a !important;
}
body.auth-body[data-template="gold"][data-mode="light"] .input-field:focus {
    border-color: rgba(201,168,76,0.6) !important;
    box-shadow: 0 0 0 3px rgba(201,168,76,0.12) !important;
}
body.auth-body[data-template="gold"][data-mode="light"] .input-field::placeholder { color: #9ca3af !important; }
/* Gold Light — toggle button */
body.auth-body[data-template="gold"][data-mode="light"] #theme-toggle-btn {
    border-color: rgba(0,0,0,0.15) !important;
    background: rgba(0,0,0,0.06) !important;
    color: #374151 !important;
}

/* Navy Dark */
body.auth-body[data-template="navy"][data-mode="dark"] {
    background: #0a1628 !important;
    background-image: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(47,111,237,0.12) 0%, transparent 70%) !important;
}
/* Navy Dark — login card */
body.auth-body[data-template="navy"][data-mode="dark"] .gold-glow {
    background: #0b1a2c !important;
    border-color: rgba(47,111,237,0.22) !important;
    box-shadow: 0 0 0 1px rgba(47,111,237,0.13),
                0 0 40px rgba(47,111,237,0.13),
                0 0 100px rgba(47,111,237,0.07),
                0 0 200px rgba(47,111,237,0.04) !important;
}
body.auth-body[data-template="navy"][data-mode="dark"] .gold-glow h2 { color: #7fb3f8 !important; }
body.auth-body[data-template="navy"][data-mode="dark"] .input-field {
    background: rgba(47,111,237,0.06) !important;
    border-color: rgba(47,111,237,0.2) !important;
    color: #e2e8f0 !important;
}
body.auth-body[data-template="navy"][data-mode="dark"] .input-field::placeholder { color: #64748b !important; }
/* Navy Light */
body.auth-body[data-template="navy"][data-mode="light"] {
    background: #f0f5ff !important;
    background-image: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(47,111,237,0.08) 0%, transparent 70%) !important;
}
/* Navy Light — login card */
body.auth-body[data-template="navy"][data-mode="light"] .gold-glow {
    background: #ffffff !important;
    border-color: rgba(47,111,237,0.25) !important;
    box-shadow: 0 0 0 1px rgba(47,111,237,0.12), 0 8px 32px rgba(0,0,0,0.07), 0 0 60px rgba(47,111,237,0.04) !important;
}
body.auth-body[data-template="navy"][data-mode="light"] .gold-glow h2 { color: #1e3a5f !important; }
body.auth-body[data-template="navy"][data-mode="light"] .gold-glow label,
body.auth-body[data-template="navy"][data-mode="light"] .gold-glow label span { color: #475569 !important; }
body.auth-body[data-template="navy"][data-mode="light"] .gold-glow a { color: #3b6fd4 !important; }
body.auth-body[data-template="navy"][data-mode="light"] .gold-glow a:hover { color: #2F6FED !important; }
body.auth-body[data-template="navy"][data-mode="light"] .gold-glow button[type="button"] { color: #64748b !important; }
/* Navy Light — inputs */
body.auth-body[data-template="navy"][data-mode="light"] .input-field {
    background: #f5f8ff !important;
    border-color: rgba(47,111,237,0.2) !important;
    color: #0f172a !important;
}
body.auth-body[data-template="navy"][data-mode="light"] .input-field:focus {
    border-color: rgba(47,111,237,0.55) !important;
    box-shadow: 0 0 0 3px rgba(47,111,237,0.1) !important;
}
body.auth-body[data-template="navy"][data-mode="light"] .input-field::placeholder { color: #9ca3af !important; }
/* Navy Light — toggle button */
body.auth-body[data-template="navy"][data-mode="light"] #theme-toggle-btn {
    border-color: rgba(47,111,237,0.2) !important;
    background: rgba(47,111,237,0.06) !important;
    color: #1e3a5f !important;
}

/* Navy — btn-login, input focus, card glow */
body.auth-body[data-template="navy"] .btn-login {
    background: var(--custom-navy-acc, #2F6FED) !important;
    color: #ffffff !important;
}
body.auth-body[data-template="navy"] .btn-login:hover {
    background: color-mix(in srgb, var(--custom-navy-acc, #2F6FED) 82%, #000) !important;
    box-shadow: 0 8px 24px rgba(47,111,237,0.35) !important;
}
body.auth-body[data-template="navy"] .input-field:focus {
    border-color: rgba(47,111,237,0.5) !important;
    box-shadow: 0 0 0 3px rgba(47,111,237,0.1) !important;
}
body.auth-body[data-template="navy"] .gold-glow {
    box-shadow: 0 0 0 1px rgba(47,111,237,0.13), 0 0 40px rgba(47,111,237,0.13),
                0 0 100px rgba(47,111,237,0.07), 0 0 200px rgba(47,111,237,0.04) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   LOGIN LOGO — dark mode: white logo, light mode: dark logo
   ════════════════════════════════════════════════════════════════════════ */
body.auth-body .login-logo-dark  { display: block; }
body.auth-body .login-logo-light { display: none;  }
body.auth-body[data-mode="light"] .login-logo-dark  { display: none  !important; }
body.auth-body[data-mode="light"] .login-logo-light { display: block !important; }

/* ═══════════════════════════════════════════════════════════
   TENANT PANEL — THEME OVERRIDES
   body has data-template + data-mode set by tenant.php layout
   ═══════════════════════════════════════════════════════════ */

/* ── Gold Dark ─────────────────────────────── */
body[data-template="gold"][data-mode="dark"] {
    background: #0F0F13 !important;
    color: #e5e7eb;
}
body[data-template="gold"][data-mode="dark"] .tenant-navbar {
    background: rgba(15,15,19,0.97) !important;
    border-color: rgba(201,168,76,0.18) !important;
}
body[data-template="gold"][data-mode="dark"] .tenant-card {
    background: #18181f !important;
    border-color: rgba(201,168,76,0.1) !important;
    color: #e5e7eb;
}
body[data-template="gold"][data-mode="dark"] .tenant-card p,
body[data-template="gold"][data-mode="dark"] .tenant-card span.text-gray-800,
body[data-template="gold"][data-mode="dark"] .tenant-card .text-gray-800 { color: #f1f5f9 !important; }
body[data-template="gold"][data-mode="dark"] .tenant-card .text-gray-500,
body[data-template="gold"][data-mode="dark"] .tenant-card .text-gray-400 { color: #94a3b8 !important; }
body[data-template="gold"][data-mode="dark"] .tenant-card .divide-y > * { border-color: rgba(255,255,255,0.06) !important; }
body[data-template="gold"][data-mode="dark"] .tenant-card a:hover { background: rgba(201,168,76,0.07) !important; }
body[data-template="gold"][data-mode="dark"] .tenant-nav-link.active {
    background: rgba(201,168,76,0.14) !important;
    color: var(--custom-gold-acc, #C9A84C) !important;
}
body[data-template="gold"][data-mode="dark"] .tenant-nav-link:hover {
    background: rgba(201,168,76,0.08) !important;
    color: #e5e7eb !important;
}

/* ── Navy Dark ─────────────────────────────── */
body[data-template="navy"][data-mode="dark"] {
    background: #06111f !important;
    color: #e2e8f0;
}
body[data-template="navy"][data-mode="dark"] .tenant-navbar {
    background: rgba(6,17,31,0.97) !important;
    border-color: rgba(47,111,237,0.2) !important;
}
body[data-template="navy"][data-mode="dark"] .tenant-card {
    background: #0b1929 !important;
    border-color: rgba(47,111,237,0.12) !important;
    color: #e2e8f0;
}
body[data-template="navy"][data-mode="dark"] .tenant-card p,
body[data-template="navy"][data-mode="dark"] .tenant-card span.text-gray-800,
body[data-template="navy"][data-mode="dark"] .tenant-card .text-gray-800 { color: #f1f5f9 !important; }
body[data-template="navy"][data-mode="dark"] .tenant-card .text-gray-500,
body[data-template="navy"][data-mode="dark"] .tenant-card .text-gray-400 { color: #94a3b8 !important; }
body[data-template="navy"][data-mode="dark"] .tenant-card .divide-y > * { border-color: rgba(255,255,255,0.06) !important; }
body[data-template="navy"][data-mode="dark"] .tenant-card a:hover { background: rgba(47,111,237,0.07) !important; }
body[data-template="navy"][data-mode="dark"] .tenant-nav-link.active {
    background: rgba(47,111,237,0.15) !important;
    color: var(--custom-navy-acc, #2F6FED) !important;
}
body[data-template="navy"][data-mode="dark"] .tenant-nav-link:hover {
    background: rgba(47,111,237,0.08) !important;
    color: #e2e8f0 !important;
}

/* ── Gold Light ────────────────────────────── */
body[data-template="gold"][data-mode="light"] {
    background: #f8f7f0 !important;
}
body[data-template="gold"][data-mode="light"] .tenant-navbar {
    background: rgba(255,255,255,0.97) !important;
    border-color: rgba(201,168,76,0.2) !important;
}
body[data-template="gold"][data-mode="light"] .tenant-card {
    background: #ffffff !important;
    border-color: rgba(201,168,76,0.15) !important;
}
body[data-template="gold"][data-mode="light"] .tenant-nav-link.active {
    background: rgba(201,168,76,0.12) !important;
    color: #92720e !important;
}

/* ── Navy Light ────────────────────────────── */
body[data-template="navy"][data-mode="light"] {
    background: #f0f4fd !important;
}
body[data-template="navy"][data-mode="light"] .tenant-navbar {
    background: rgba(255,255,255,0.97) !important;
    border-color: rgba(47,111,237,0.2) !important;
}
body[data-template="navy"][data-mode="light"] .tenant-card {
    background: #ffffff !important;
    border-color: rgba(47,111,237,0.12) !important;
}
body[data-template="navy"][data-mode="light"] .tenant-nav-link.active {
    background: rgba(47,111,237,0.1) !important;
    color: var(--custom-navy-acc, #2F6FED) !important;
}
body[data-template="navy"][data-mode="light"] .tenant-nav-link:hover {
    background: rgba(47,111,237,0.06) !important;
    color: #1e3a8a !important;
}

/* ── Navy btn-gold override (tenant) ─────── */
body[data-template="navy"] .btn-gold {
    background: var(--custom-navy-acc, #2F6FED) !important;
}
body[data-template="navy"] .btn-gold:hover {
    background: color-mix(in srgb, var(--custom-navy-acc, #2F6FED) 82%, #000) !important;
}

/* ── Welcome bar ─────────────────────────── */
body[data-template="gold"][data-mode="dark"] .tenant-welcome-bar {
    background: linear-gradient(135deg,#1e1a0e 0%,#2d2410 60%,#3a2e14 100%) !important;
    border-color: rgba(201,168,76,0.25) !important;
}
body[data-template="navy"][data-mode="dark"] .tenant-welcome-bar {
    background: linear-gradient(135deg,#06111f 0%,#0b1929 60%,#0e2040 100%) !important;
    border-color: rgba(47,111,237,0.25) !important;
}
body[data-template="gold"][data-mode="light"] .tenant-welcome-bar {
    background: linear-gradient(135deg,#fdf8ec 0%,#f5edd4 60%,#ede3c0 100%) !important;
    border-color: rgba(201,168,76,0.3) !important;
}
body[data-template="gold"][data-mode="light"] .tenant-welcome-bar h1 { color: #1a1208 !important; }
body[data-template="gold"][data-mode="light"] .tenant-welcome-bar p  { color: rgba(100,80,20,0.7) !important; }
body[data-template="navy"][data-mode="light"] .tenant-welcome-bar {
    background: linear-gradient(135deg,#eff4ff 0%,#dce8ff 60%,#c8dbff 100%) !important;
    border-color: rgba(47,111,237,0.3) !important;
}
body[data-template="navy"][data-mode="light"] .tenant-welcome-bar h1 { color: #0f2460 !important; }
body[data-template="navy"][data-mode="light"] .tenant-welcome-bar p  { color: rgba(15,36,96,0.6) !important; }

/* ── Accent text + avatar dot ────────────── */
body[data-template="navy"] .tenant-accent-text { color: var(--custom-navy-acc, #2F6FED) !important; }
body[data-template="navy"] .tenant-avatar-dot  {
    background: rgba(47,111,237,0.15) !important;
    border-color: rgba(47,111,237,0.35) !important;
}
body[data-template="navy"] .tenant-avatar-dot span { color: var(--custom-navy-acc, #2F6FED) !important; }