/* GOPBPD — UI/UX Customizer & Accessibility Stylesheet */

:root {
    --font-base-scale: 1.0;
    --density-padding-scale: 1.0;
    --density-gap-scale: 1.0;
}

/* ==========================================================================
   1. COLOR PRESET TRANSITIONS & VARIABLES
   ========================================================================== */

/* Default / Daikin Blue Preset */
:root.theme-preset-daikin, :root {
    --primary-hvac: #0F6CBD;
    --primary-light: #4DA6FF;
    --primary-hover: #0b5394;
    --primary-rgb: 15, 108, 189;
}

/* Premium LG Red Preset */
:root.theme-preset-lg {
    --primary-hvac: #C3002F;
    --primary-light: #FF4D79;
    --primary-hover: #920022;
    --primary-rgb: 195, 0, 47;
}

/* Eco AUX Green Preset */
:root.theme-preset-aux {
    --primary-hvac: #008B5E;
    --primary-light: #33C294;
    --primary-hover: #006242;
    --primary-rgb: 0, 139, 94;
}

/* Luxury Voltas Gold Preset */
:root.theme-preset-voltas {
    --primary-hvac: #D97706;
    --primary-light: #FBBF24;
    --primary-hover: #B45309;
    --primary-rgb: 217, 119, 6;
}

/* Modern Midnight Purple Preset */
:root.theme-preset-midnight {
    --primary-hvac: #7C3AED;
    --primary-light: #A78BFA;
    --primary-hover: #5B21B6;
    --primary-rgb: 124, 58, 237;
}

/* Ensure smooth theme shifts */
body, header, aside, .card, .bento-card, .stats-card, table, input, select, textarea, button {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* ==========================================================================
   2. TEXT SIZE ACCESSIBILITY
   ========================================================================== */
:root.text-sm { --font-base-scale: 0.88; }
:root.text-md { --font-base-scale: 1.0; }
:root.text-lg { --font-base-scale: 1.12; }
:root.text-xl { --font-base-scale: 1.25; }

html {
    font-size: calc(15px * var(--font-base-scale, 1.0)) !important;
}

body {
    font-size: 1rem !important;
}

/* ==========================================================================
   3. LAYOUT SPACING DENSITY
   ========================================================================== */
:root.density-compact {
    --density-padding-scale: 0.65;
    --density-gap-scale: 0.65;
}
:root.density-cozy {
    --density-padding-scale: 1.0;
    --density-gap-scale: 1.0;
}
:root.density-spacious {
    --density-padding-scale: 1.35;
    --density-gap-scale: 1.35;
}

/* Spacing Overrides */
html.density-compact td, html.density-compact th {
    padding: calc(0.6rem * var(--density-padding-scale, 1.0)) calc(0.8rem * var(--density-padding-scale, 1.0)) !important;
}
html.density-spacious td, html.density-spacious th {
    padding: calc(1.3rem * var(--density-padding-scale, 1.0)) calc(1.5rem * var(--density-padding-scale, 1.0)) !important;
}

html.density-compact .bento-card,
html.density-compact .stats-card,
html.density-compact .card,
html.density-compact .saas-table-container {
    padding: calc(1.25rem * var(--density-padding-scale, 1.0)) !important;
}
html.density-spacious .bento-card,
html.density-spacious .stats-card,
html.density-spacious .card,
html.density-spacious .saas-table-container {
    padding: calc(1.25rem * var(--density-padding-scale, 1.0)) !important;
}

html.density-compact .dash-wrapper,
html.density-compact .metrics-row,
html.density-compact .stats-container,
html.density-compact .quick-actions-grid,
html.density-compact .feature-cards-wrap,
html.density-compact .services-grid {
    gap: calc(1.25rem * var(--density-gap-scale, 1.0)) !important;
}
html.density-spacious .dash-wrapper,
html.density-spacious .metrics-row,
html.density-spacious .stats-container,
html.density-spacious .quick-actions-grid,
html.density-spacious .feature-cards-wrap,
html.density-spacious .services-grid {
    gap: calc(1.25rem * var(--density-gap-scale, 1.0)) !important;
}

/* ==========================================================================
   4. PREMIUM DARK MODE THEME SYSTEM
   ========================================================================== */
:root.theme-dark {
    --bg-main: #090D1A;
    --bg-card: #121829;
    --border-color: #1F2A45;
    --border-hover: #2D3D60;
    --text-primary: #F3F4F6;
    --text-secondary: #D1D5DB;
    --text-muted: #9CA3AF;
    --box-bg: #121829;
    --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    --accent-light: rgba(var(--primary-rgb, 15, 108, 189), 0.15);
    --accent-dark: var(--primary-light);
}

/* Global Dark Overrides */
html.theme-dark body {
    background-color: var(--bg-main) !important;
    color: var(--text-primary) !important;
}

html.theme-dark header,
html.theme-dark aside,
html.theme-dark footer,
html.theme-dark .navbar,
html.theme-dark .cus-header,
html.theme-dark .saas-sidebar {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html.theme-dark .footer-top-grid a,
html.theme-dark .footer-col p,
html.theme-dark .footer-col h3,
html.theme-dark .footer-bottom p {
    color: var(--text-secondary) !important;
}

html.theme-dark .wrisda-footer {
    background: #0f1424 !important;
}

/* Public Home / Services Cards */
html.theme-dark .feature-badge-card,
html.theme-dark .partner-card,
html.theme-dark .service-card,
html.theme-dark .value-card,
html.theme-dark .feedback-card,
html.theme-dark .product-card,
html.theme-dark .bento-card,
html.theme-dark .stats-card,
html.theme-dark .saas-table-container,
html.theme-dark .card,
html.theme-dark .modal-content,
html.theme-dark .panel,
html.theme-dark .dropdown-menu,
html.theme-dark .cus-dropdown-panel,
html.theme-dark .attendance-card,
html.theme-dark .quick-action-item,
html.theme-dark .billing-card,
html.theme-dark .detail-card,
html.theme-dark .info-box,
html.theme-dark .table-responsive,
html.theme-dark .admin-main,
html.theme-dark .main-content-wrapper,
html.theme-dark .dashboard-card {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--box-shadow) !important;
}

/* Modals */
html.theme-dark .product-modal-container,
html.theme-dark .notif-modal-card,
html.theme-dark .swal2-popup {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

html.theme-dark .swal2-title,
html.theme-dark .swal2-html-container {
    color: var(--text-primary) !important;
}

/* Forms & Text Fields */
html.theme-dark input,
html.theme-dark select,
html.theme-dark textarea,
html.theme-dark .saas-form-control,
html.theme-dark .form-control {
    background-color: #171E30 !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html.theme-dark input:focus,
html.theme-dark select:focus,
html.theme-dark textarea:focus {
    border-color: var(--primary-hvac) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25) !important;
}

/* Navigation Links */
html.theme-dark .nav-menu-item,
html.theme-dark .cus-profile-menu-item,
html.theme-dark .nav-links a {
    color: var(--text-secondary) !important;
}

html.theme-dark .nav-menu-item:hover,
html.theme-dark .cus-profile-menu-item:hover,
html.theme-dark .nav-links a:hover {
    background-color: #171E30 !important;
    color: var(--primary-light) !important;
}

html.theme-dark .nav-menu-item.active,
html.theme-dark .nav-links li.active a {
    background-color: rgba(var(--primary-rgb), 0.15) !important;
    color: var(--primary-light) !important;
}

/* Tables and Headers */
html.theme-dark table,
html.theme-dark tr,
html.theme-dark td,
html.theme-dark th {
    border-color: var(--border-color) !important;
}

html.theme-dark th,
html.theme-dark thead th {
    background-color: #171E30 !important;
    color: var(--text-secondary) !important;
}

html.theme-dark tr:hover td {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Text and Titles */
html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4,
html.theme-dark h5,
html.theme-dark h6,
html.theme-dark .bento-header,
html.theme-dark .metric-value,
html.theme-dark .stats-val {
    color: var(--text-primary) !important;
}

html.theme-dark .text-muted,
html.theme-dark .metric-label,
html.theme-dark .stats-label {
    color: var(--text-muted) !important;
}

/* Badges and Buttons */
html.theme-dark .btn-portal-primary,
html.theme-dark .saas-btn-primary,
html.theme-dark .btn-primary {
    background-color: var(--primary-hvac) !important;
    border-color: var(--primary-hvac) !important;
    color: #ffffff !important;
}

html.theme-dark .btn-portal-primary:hover,
html.theme-dark .saas-btn-primary:hover,
html.theme-dark .btn-primary:hover {
    background-color: var(--primary-hover) !important;
}

html.theme-dark .swal2-confirm {
    background-color: var(--primary-hvac) !important;
    color: #ffffff !important;
}

html.theme-dark .btn-outline,
html.theme-dark .btn-secondary,
html.theme-dark .saas-btn-secondary {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html.theme-dark .btn-outline:hover,
html.theme-dark .btn-secondary:hover,
html.theme-dark .saas-btn-secondary:hover {
    background-color: #171E30 !important;
    border-color: var(--border-hover) !important;
}

/* Glass Header Overrides in Dark Mode */
html.theme-dark .glass-header {
    background: rgba(18, 24, 41, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Calendar styling in dark mode */
html.theme-dark .fc,
html.theme-dark .fc-theme-standard td,
html.theme-dark .fc-theme-standard th,
html.theme-dark .fc-theme-standard .fc-scrollgrid {
    border-color: var(--border-color) !important;
}
html.theme-dark .fc-daygrid-day:hover {
    background-color: #171E30 !important;
}
html.theme-dark .fc-col-header-cell {
    background-color: #171E30 !important;
}
html.theme-dark .fc-day-today {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
}
html.theme-dark .fc-button-primary {
    background-color: #171E30 !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
html.theme-dark .fc-button-primary:hover {
    background-color: var(--primary-hvac) !important;
    color: #fff !important;
}
html.theme-dark .fc-button-active {
    background-color: var(--primary-hvac) !important;
    border-color: var(--primary-hvac) !important;
}

/* ==========================================================================
   5. CUSTOMIZER DRAWER UI
   ========================================================================== */

#customizer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 9998;
    display: none;
    animation: fadeIn 0.25s ease;
}

#customizer-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 350px;
    height: 100vh;
    background: var(--bg-card, #ffffff);
    z-index: 9999;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Poppins', 'Inter', sans-serif;
    color: var(--text-primary, #1F2937);
    border-left: 1px solid var(--border-color, #E5E7EB);
}

#customizer-drawer.open {
    transform: translateX(0);
}

.customizer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
}

.customizer-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.customizer-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary, #4B5563);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    width: 32px;
    height: 32px;
}

.customizer-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

html.theme-dark .customizer-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.customizer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.customizer-section-title {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #9CA3AF);
    margin-bottom: 0.75rem;
    margin-top: 0;
}

/* Customizer Items Control Group */
.customizer-group {
    display: flex;
    flex-direction: column;
}

/* Theme Preset Options (Grid of buttons) */
.color-presets-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.65rem;
}

.color-preset-btn {
    border: 2px solid transparent;
    border-radius: 50%;
    aspect-ratio: 1;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}

.color-preset-btn:hover {
    transform: scale(1.1);
}

.color-preset-btn.active {
    border-color: var(--text-primary, #1F2937);
}

html.theme-dark .color-preset-btn.active {
    border-color: #FFFFFF;
}

.color-preset-btn.active::after {
    content: "✓";
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Theme Mode Toggle Options */
.theme-mode-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.theme-mode-btn, .layout-density-btn, .font-size-btn {
    background: var(--bg-main, #F5F7FA);
    border: 1px solid var(--border-color, #E5E7EB);
    padding: 0.6rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, #4B5563);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
}

.theme-mode-btn:hover, .layout-density-btn:hover, .font-size-btn:hover {
    border-color: var(--primary-hvac);
    color: var(--primary-hvac);
}

.theme-mode-btn.active, .layout-density-btn.active, .font-size-btn.active {
    background-color: var(--primary-hvac);
    border-color: var(--primary-hvac);
    color: #ffffff !important;
}

html.theme-dark .theme-mode-btn,
html.theme-dark .layout-density-btn,
html.theme-dark .font-size-btn {
    background: #171E30;
    border-color: var(--border-color);
}

html.theme-dark .theme-mode-btn:hover,
html.theme-dark .layout-density-btn:hover,
html.theme-dark .font-size-btn:hover {
    color: var(--primary-light);
    border-color: var(--primary-light);
}

html.theme-dark .theme-mode-btn.active,
html.theme-dark .layout-density-btn.active,
html.theme-dark .font-size-btn.active {
    background-color: var(--primary-hvac);
    border-color: var(--primary-hvac);
    color: #ffffff !important;
}

/* Icons within customizer */
.mode-icon {
    font-size: 1.15rem;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 480px) {
    #customizer-drawer {
        width: 100%;
    }
}