/* Planning Portal — Three-mode theme system
   Dark:  Deep navy/slate, SAP Fiori dark inspired
   Soft:  Light blues, greys, frosted glass — enterprise dashboard feel
   Light: Clean white, minimal — classic ERP
*/

/* ============================================================
   SOFT MODE — Default — Blue-grey frosted glass
   ============================================================ */
[data-theme="soft"] body {
    background: #EDF2F7 !important;
    background-image:
        radial-gradient(ellipse at top left, rgba(66,133,244,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(99,102,241,0.06) 0%, transparent 50%) !important;
    background-attachment: fixed !important;
}
[data-theme="soft"] .theme-nav {
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(12px) saturate(180%);
    border-color: rgba(203,213,225,0.5) !important;
}
[data-theme="soft"] .theme-sidebar {
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(12px) saturate(180%);
    border-color: rgba(203,213,225,0.4) !important;
}
[data-theme="soft"] .theme-card {
    background: rgba(255,255,255,0.78) !important;
    backdrop-filter: blur(8px);
    border-color: rgba(203,213,225,0.45) !important;
}
[data-theme="soft"] .theme-card-alt {
    background: rgba(241,245,249,0.7) !important;
}
[data-theme="soft"] .theme-input {
    background: rgba(255,255,255,0.9) !important;
    border-color: #CBD5E1 !important;
    color: #1E293B !important;
}
[data-theme="soft"] .theme-input:focus {
    border-color: #4F6BED !important;
    box-shadow: 0 0 0 3px rgba(79,107,237,0.1);
}
[data-theme="soft"] .theme-table-header {
    background: rgba(241,245,249,0.8) !important;
}
[data-theme="soft"] .theme-table-row:hover {
    background: rgba(241,245,249,0.6) !important;
}

/* ============================================================
   LIGHT MODE — Clean white ERP
   ============================================================ */
html:not(.dark):not([data-theme="soft"]) body {
    background: #FAFBFC !important;
}
html:not(.dark):not([data-theme="soft"]) .theme-nav {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}
html:not(.dark):not([data-theme="soft"]) .theme-sidebar {
    background: #F8FAFC !important;
    border-color: #E2E8F0 !important;
}
html:not(.dark):not([data-theme="soft"]) .theme-card {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}
html:not(.dark):not([data-theme="soft"]) .theme-card-alt {
    background: #F8FAFC !important;
}

/* ============================================================
   DARK MODE — Deep navy, SAP Fiori dark
   ============================================================ */
html.dark body {
    background: #0B1121 !important;
    background-image:
        radial-gradient(ellipse at top left, rgba(79,107,237,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(99,102,241,0.06) 0%, transparent 50%) !important;
    background-attachment: fixed !important;
}
html.dark .theme-nav {
    background: rgba(17,24,45,0.92) !important;
    backdrop-filter: blur(12px);
    border-color: rgba(51,65,85,0.5) !important;
}
html.dark .theme-sidebar {
    background: rgba(15,21,39,0.95) !important;
    border-color: rgba(51,65,85,0.4) !important;
}
html.dark .theme-card {
    background: rgba(30,41,59,0.8) !important;
    border-color: rgba(51,65,85,0.5) !important;
}
html.dark .theme-card-alt {
    background: rgba(30,41,59,0.5) !important;
}
html.dark .theme-input {
    background: rgba(30,41,59,0.9) !important;
    border-color: #475569 !important;
    color: #E2E8F0 !important;
}
html.dark .theme-input:focus {
    border-color: #4F6BED !important;
    box-shadow: 0 0 0 3px rgba(79,107,237,0.2);
}
html.dark .theme-table-header {
    background: rgba(30,41,59,0.6) !important;
}
html.dark .theme-table-row:hover {
    background: rgba(51,65,85,0.3) !important;
}

/* ============================================================
   SHARED — Hardcoded dark class overrides for light/soft
   These ensure bg-slate-800, border-slate-700 etc. used in
   templates adapt properly across all three themes.
   ============================================================ */

/* Cards & containers: bg-slate-800 → theme-appropriate */
[data-theme="soft"] .bg-slate-800,
[data-theme="soft"] .bg-\[\\#1E293B\] {
    background: rgba(255,255,255,0.78) !important;
    backdrop-filter: blur(8px);
}
html:not(.dark):not([data-theme="soft"]) .bg-slate-800,
html:not(.dark):not([data-theme="soft"]) .bg-\[\\#1E293B\] {
    background: #FFFFFF !important;
}

/* Alt surfaces: bg-slate-800/50 → lighter */
[data-theme="soft"] .bg-slate-800\/50 {
    background: rgba(241,245,249,0.7) !important;
}
html:not(.dark):not([data-theme="soft"]) .bg-slate-800\/50 {
    background: #F8FAFC !important;
}

/* Borders: border-slate-700 → softer */
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-700\/50 {
    border-color: rgba(203,213,225,0.5) !important;
}

/* Dividers */
html:not(.dark) .divide-slate-700 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) .divide-slate-700\/50 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(226,232,240,0.8) !important;
}

/* Table header backgrounds */
html:not(.dark) .bg-slate-800\/50 {
    background: rgba(241,245,249,0.8) !important;
}

/* Hover states */
html:not(.dark) .hover\:bg-slate-700\/50:hover,
html:not(.dark) .hover\:bg-slate-700:hover {
    background: rgba(241,245,249,0.6) !important;
}
html:not(.dark) .hover\:bg-slate-600:hover {
    background: rgba(226,232,240,0.8) !important;
}

/* Input fields: bg-slate-700 → light-appropriate */
html:not(.dark) .bg-slate-700 {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
}
html:not(.dark) input.bg-slate-700,
html:not(.dark) select.bg-slate-700,
html:not(.dark) textarea.bg-slate-700 {
    color: #1E293B !important;
}
html:not(.dark) .border-slate-600 {
    border-color: #CBD5E1 !important;
}

/* Focus states */
html:not(.dark) .focus\:border-violet-500:focus,
html:not(.dark) .focus\:border-pp-primary:focus {
    border-color: #4F6BED !important;
    box-shadow: 0 0 0 3px rgba(79,107,237,0.1);
}

/* Nav & sidebar overrides for hardcoded classes */
html:not(.dark) .bg-\[\\#0B1121\],
html:not(.dark) .bg-\[\\#0F172A\] {
    background: transparent !important;
}

/* Text colour overrides */
html:not(.dark) .text-slate-200 { color: #475569 !important; }
html:not(.dark) .text-slate-300 { color: #475569 !important; }
html:not(.dark) .text-slate-400 { color: #64748B !important; }
html:not(.dark) .text-white { color: #0F172A !important; }
html:not(.dark) .text-slate-500 { color: #64748B !important; }

/* Pricing cards and special containers with hardcoded dark bg */
html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-slate-900\/50 {
    background: #F1F5F9 !important;
}

/* Ring/border overrides for pricing cards */
html:not(.dark) .border-violet-600\/50,
html:not(.dark) .border-violet-500,
html:not(.dark) .border-pp-primary {
    border-color: rgba(79,107,237,0.4) !important;
}
html:not(.dark) .ring-violet-600\/20,
html:not(.dark) .ring-violet-500\/30 {
    --tw-ring-color: rgba(79,107,237,0.15) !important;
}

/* Flash messages in light/soft */
html:not(.dark) .bg-green-900\/50 { background: rgba(16,185,129,0.1) !important; }
html:not(.dark) .bg-red-900\/50 { background: rgba(239,68,68,0.1) !important; }
html:not(.dark) .bg-blue-900\/50 { background: rgba(59,130,246,0.1) !important; }
html:not(.dark) .bg-yellow-900\/50 { background: rgba(245,158,11,0.1) !important; }
html:not(.dark) .bg-orange-900\/50 { background: rgba(249,115,22,0.1) !important; }
html:not(.dark) .bg-violet-900\/50 { background: rgba(139,92,246,0.1) !important; }
html:not(.dark) .border-green-700 { border-color: rgba(16,185,129,0.3) !important; }
html:not(.dark) .border-red-700 { border-color: rgba(239,68,68,0.3) !important; }
html:not(.dark) .border-blue-700 { border-color: rgba(59,130,246,0.3) !important; }
html:not(.dark) .text-green-300 { color: #059669 !important; }
html:not(.dark) .text-red-300 { color: #DC2626 !important; }
html:not(.dark) .text-blue-300 { color: #2563EB !important; }
html:not(.dark) .text-yellow-300 { color: #D97706 !important; }
html:not(.dark) .text-orange-300 { color: #EA580C !important; }
html:not(.dark) .text-violet-300 { color: #7C3AED !important; }

/* Stat card number colors in light/soft */
html:not(.dark) .text-yellow-400 { color: #D97706 !important; }
html:not(.dark) .text-blue-400 { color: #2563EB !important; }
html:not(.dark) .text-violet-400 { color: #7C3AED !important; }
html:not(.dark) .text-orange-400 { color: #EA580C !important; }
html:not(.dark) .text-green-400 { color: #059669 !important; }
html:not(.dark) .text-red-400 { color: #DC2626 !important; }

/* Ensure coloured buttons keep white text */
html:not(.dark) .bg-pp-primary,
html:not(.dark) .bg-pp-primary-hover,
html:not(.dark) .bg-blue-600,
html:not(.dark) .bg-blue-500,
html:not(.dark) .bg-green-600,
html:not(.dark) .bg-emerald-600,
html:not(.dark) .bg-red-600,
html:not(.dark) .bg-red-500,
html:not(.dark) .bg-amber-500,
html:not(.dark) .bg-violet-600 {
    color: #fff !important;
}

/* Scrollbar in soft mode */
[data-theme="soft"] ::-webkit-scrollbar { width: 6px; }
[data-theme="soft"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="soft"] ::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.3); border-radius: 3px; }
[data-theme="soft"] ::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.5); }

/* Status badges work across themes */
.badge-success { background: rgba(16,185,129,0.15); color: #059669; }
.badge-warning { background: rgba(245,158,11,0.15); color: #D97706; }
.badge-error { background: rgba(239,68,68,0.15); color: #DC2626; }
.badge-info { background: rgba(79,107,237,0.15); color: #4F6BED; }
html.dark .badge-success { background: rgba(16,185,129,0.2); color: #34D399; }
html.dark .badge-warning { background: rgba(245,158,11,0.2); color: #FBBF24; }
html.dark .badge-error { background: rgba(239,68,68,0.2); color: #FCA5A5; }
html.dark .badge-info { background: rgba(79,107,237,0.2); color: #93A3F8; }

/* ============================================================
   SIDEBAR — SAP-style collapsible sidebar nav
   ============================================================ */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 0.15s;
}
html.dark .sidebar-link {
    color: #94A3B8;
}
html.dark .sidebar-link:hover {
    color: #E2E8F0;
    background: rgba(51,65,85,0.4);
}
html.dark .sidebar-link.active {
    color: #E2E8F0;
    background: rgba(79,107,237,0.15);
    border-left: 3px solid #4F6BED;
}
html:not(.dark) .sidebar-link {
    color: #475569;
}
html:not(.dark) .sidebar-link:hover {
    color: #0F172A;
    background: rgba(241,245,249,0.8);
}
html:not(.dark) .sidebar-link.active {
    color: #0F172A;
    background: rgba(79,107,237,0.08);
    border-left: 3px solid #4F6BED;
}
.sidebar-section-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.75rem 0.75rem 0.25rem;
}
html.dark .sidebar-section-label { color: #64748B; }
html:not(.dark) .sidebar-section-label { color: #94A3B8; }