/** * ═══════════════════════════════════════════════════════════════════════════════ * CADMUS İNŞAAT - DARK THEME FOR PERFEX CRM * ═══════════════════════════════════════════════════════════════════════════════ * * Brand: Cadmus İnşaat (Real Estate / Construction) * Theme: Dark (Night / Premium / Executive) * Version: 1.0.0 * * Apply by adding: or class="cadmus-theme-dark" * ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ DESIGN TOKENS - DARK THEME ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"], .cadmus-theme-dark { /* ─── Brand Gold (Same as Light) ─── */ --cadmus-gold-50: #FDF8EE; --cadmus-gold-100: #FAF0DB; --cadmus-gold-200: #F5E1B7; --cadmus-gold-300: #EFD293; --cadmus-gold-400: #E6BF73; --cadmus-gold-500: #D2A960; --cadmus-gold-600: #BE9450; --cadmus-gold-700: #A67B3B; --cadmus-gold-800: #8D6530; --cadmus-gold-900: #5B4E2C; /* ─── Deep Olive (Support) ─── */ --cadmus-olive-50: #F4F5F3; --cadmus-olive-100: #E8EAE6; --cadmus-olive-200: #D1D5CC; --cadmus-olive-300: #9AA391; --cadmus-olive-400: #5C6B54; --cadmus-olive-500: #3D4A37; --cadmus-olive-600: #374031; --cadmus-olive-700: #283024; --cadmus-olive-800: #222A1E; --cadmus-olive-900: #161D14; /* ─── Neutrals (Dark Theme) ─── */ --cadmus-bg-base: #0F1621; --cadmus-bg-surface: rgba(255, 255, 255, 0.06); --cadmus-bg-surface-solid: #161D14; --cadmus-bg-surface-2: rgba(255, 255, 255, 0.04); --cadmus-bg-surface-3: rgba(255, 255, 255, 0.08); --cadmus-bg-elevated: #1A2332; --cadmus-bg-overlay: rgba(0, 0, 0, 0.7); /* ─── Text Colors ─── */ --cadmus-text-primary: #F4F2EC; --cadmus-text-secondary: #D4D2CC; --cadmus-text-muted: #B9B6AA; --cadmus-text-placeholder: rgba(244, 242, 236, 0.45); --cadmus-text-inverse: #0E1116; --cadmus-text-on-gold: #161D14; /* ─── Borders ─── */ --cadmus-border-light: rgba(255, 255, 255, 0.08); --cadmus-border-default: rgba(255, 255, 255, 0.12); --cadmus-border-strong: rgba(255, 255, 255, 0.18); --cadmus-border-focus: #D2A960; /* ─── Status Colors ─── */ --cadmus-success: #2FA56A; --cadmus-success-bg: rgba(47, 165, 106, 0.15); --cadmus-success-border: rgba(47, 165, 106, 0.35); --cadmus-warning: #E1B84A; --cadmus-warning-bg: rgba(225, 184, 74, 0.15); --cadmus-warning-border: rgba(225, 184, 74, 0.35); --cadmus-danger: #D14B4B; --cadmus-danger-bg: rgba(209, 75, 75, 0.15); --cadmus-danger-border: rgba(209, 75, 75, 0.35); --cadmus-info: #3B82F6; --cadmus-info-bg: rgba(59, 130, 246, 0.15); --cadmus-info-border: rgba(59, 130, 246, 0.35); /* ─── Shadows ─── */ --cadmus-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --cadmus-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25); --cadmus-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30); --cadmus-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35); --cadmus-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.40); --cadmus-shadow-gold: 0 4px 20px rgba(210, 169, 96, 0.25); /* ─── Radii ─── */ --cadmus-radius-xs: 4px; --cadmus-radius-sm: 6px; --cadmus-radius-md: 10px; --cadmus-radius-lg: 12px; --cadmus-radius-xl: 16px; --cadmus-radius-2xl: 20px; --cadmus-radius-full: 9999px; /* ─── Spacing ─── */ --cadmus-space-1: 4px; --cadmus-space-2: 8px; --cadmus-space-3: 12px; --cadmus-space-4: 16px; --cadmus-space-5: 20px; --cadmus-space-6: 24px; --cadmus-space-8: 32px; --cadmus-space-10: 40px; --cadmus-space-12: 48px; /* ─── Typography ─── */ --cadmus-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cadmus-font-size-xs: 11px; --cadmus-font-size-sm: 13px; --cadmus-font-size-base: 14px; --cadmus-font-size-md: 15px; --cadmus-font-size-lg: 16px; --cadmus-font-size-xl: 18px; --cadmus-font-size-2xl: 20px; --cadmus-font-size-3xl: 24px; --cadmus-font-weight-normal: 400; --cadmus-font-weight-medium: 500; --cadmus-font-weight-semibold: 600; --cadmus-font-weight-bold: 700; --cadmus-line-height-tight: 1.25; --cadmus-line-height-normal: 1.5; --cadmus-line-height-relaxed: 1.625; /* ─── Transitions ─── */ --cadmus-transition-fast: 0.15s ease; --cadmus-transition-normal: 0.2s ease; --cadmus-transition-slow: 0.3s ease; /* ─── Focus Ring ─── */ --cadmus-focus-ring: 0 0 0 4px rgba(210, 169, 96, 0.25); /* ─── Sidebar Specific ─── */ --cadmus-sidebar-bg: linear-gradient(180deg, #0A1018 0%, #0F1621 100%); --cadmus-sidebar-bg-solid: #0A1018; --cadmus-sidebar-border: rgba(255, 255, 255, 0.08); --cadmus-sidebar-text: #D4D2CC; --cadmus-sidebar-text-muted: #B9B6AA; --cadmus-sidebar-icon: #B9B6AA; --cadmus-sidebar-hover-bg: rgba(255, 255, 255, 0.05); --cadmus-sidebar-active-bg: rgba(210, 169, 96, 0.08); --cadmus-sidebar-active-text: #D2A960; --cadmus-sidebar-active-icon: #D2A960; --cadmus-sidebar-active-indicator: #D2A960; /* ─── Header Specific ─── */ --cadmus-header-bg: #0F1621; --cadmus-header-border: rgba(255, 255, 255, 0.08); --cadmus-header-text: #F4F2EC; --cadmus-header-icon: #B9B6AA; } /* ═══════════════════════════════════════════════════════════════════════════════ GLOBAL STYLES ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"], .cadmus-theme-dark { font-family: var(--cadmus-font-family) !important; font-size: var(--cadmus-font-size-base); line-height: var(--cadmus-line-height-normal); color: var(--cadmus-text-primary); background: var(--cadmus-bg-base) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Background gradient with subtle grain texture */ [data-theme="dark"]::before, .cadmus-theme-dark::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 0%, #0F1621 0%, transparent 70%), radial-gradient(ellipse at 100% 100%, rgba(22, 29, 20, 0.5) 0%, transparent 50%), #0F1621; pointer-events: none; z-index: -2; } /* Subtle grain overlay */ [data-theme="dark"]::after, .cadmus-theme-dark::after { content: ''; position: fixed; inset: 0; opacity: 0.03; pointer-events: none; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ═══════════════════════════════════════════════════════════════════════════════ 1. SIDEBAR NAVIGATION ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] #menu, [data-theme="dark"] .sidebar-menu, [data-theme="dark"] #sidebar, .cadmus-theme-dark #menu, .cadmus-theme-dark .sidebar-menu, .cadmus-theme-dark #sidebar { background: var(--cadmus-sidebar-bg-solid) !important; border-right: 1px solid var(--cadmus-sidebar-border) !important; } [data-theme="dark"] #menu li a, [data-theme="dark"] .sidebar-menu li a, .cadmus-theme-dark #menu li a, .cadmus-theme-dark .sidebar-menu li a { color: var(--cadmus-sidebar-text) !important; padding: 12px 16px !important; border-radius: var(--cadmus-radius-md) !important; margin: 2px 8px !important; transition: var(--cadmus-transition-normal) !important; } [data-theme="dark"] #menu li a i, [data-theme="dark"] .sidebar-menu li a i, .cadmus-theme-dark #menu li a i { color: var(--cadmus-sidebar-icon) !important; width: 20px !important; text-align: center !important; margin-right: 12px !important; transition: var(--cadmus-transition-normal) !important; } [data-theme="dark"] #menu li a:hover, [data-theme="dark"] .sidebar-menu li a:hover, .cadmus-theme-dark #menu li a:hover { background: var(--cadmus-sidebar-hover-bg) !important; color: var(--cadmus-text-primary) !important; } [data-theme="dark"] #menu li.active>a, [data-theme="dark"] .sidebar-menu li.active>a, [data-theme="dark"] #menu li a.active, .cadmus-theme-dark #menu li.active>a { background: var(--cadmus-sidebar-active-bg) !important; color: var(--cadmus-sidebar-active-text) !important; font-weight: var(--cadmus-font-weight-medium) !important; position: relative !important; } [data-theme="dark"] #menu li.active>a::before, .cadmus-theme-dark #menu li.active>a::before { content: '' !important; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: 3px !important; height: 24px !important; background: var(--cadmus-sidebar-active-indicator) !important; border-radius: 0 3px 3px 0 !important; } [data-theme="dark"] #menu li.active>a i, .cadmus-theme-dark #menu li.active>a i { color: var(--cadmus-sidebar-active-icon) !important; } /* Submenu */ [data-theme="dark"] #menu ul.nav-second-level, .cadmus-theme-dark #menu ul.nav-second-level { background: transparent !important; padding-left: 16px !important; } [data-theme="dark"] #menu ul.nav-second-level li a, .cadmus-theme-dark #menu ul.nav-second-level li a { font-size: var(--cadmus-font-size-sm) !important; padding: 8px 16px !important; color: var(--cadmus-sidebar-text-muted) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 2. TOP HEADER BAR ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .navbar-default, [data-theme="dark"] #header, [data-theme="dark"] .navbar, .cadmus-theme-dark .navbar-default, .cadmus-theme-dark #header { background: var(--cadmus-header-bg) !important; border-bottom: 1px solid var(--cadmus-header-border) !important; box-shadow: var(--cadmus-shadow-sm) !important; } [data-theme="dark"] .navbar-default .navbar-nav>li>a, .cadmus-theme-dark .navbar-default .navbar-nav>li>a { color: var(--cadmus-header-text) !important; } [data-theme="dark"] .navbar-default .navbar-nav>li>a:hover, .cadmus-theme-dark .navbar-default .navbar-nav>li>a:hover { color: var(--cadmus-gold-500) !important; } /* Search Bar */ [data-theme="dark"] .navbar-form input, [data-theme="dark"] #search input, .cadmus-theme-dark .navbar-form input { background: var(--cadmus-bg-surface-2) !important; border: 1px solid var(--cadmus-border-default) !important; border-radius: var(--cadmus-radius-md) !important; color: var(--cadmus-text-primary) !important; padding: 8px 16px !important; } [data-theme="dark"] .navbar-form input::placeholder, .cadmus-theme-dark .navbar-form input::placeholder { color: var(--cadmus-text-placeholder) !important; } [data-theme="dark"] .navbar-form input:focus, .cadmus-theme-dark .navbar-form input:focus { border-color: var(--cadmus-border-focus) !important; box-shadow: var(--cadmus-focus-ring) !important; background: var(--cadmus-bg-surface-3) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 3. CARDS & PANELS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .panel, [data-theme="dark"] .panel_s, [data-theme="dark"] .card, [data-theme="dark"] .widget, .cadmus-theme-dark .panel, .cadmus-theme-dark .panel_s, .cadmus-theme-dark .card { background: var(--cadmus-bg-surface) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid var(--cadmus-border-default) !important; border-radius: var(--cadmus-radius-lg) !important; box-shadow: var(--cadmus-shadow-md) !important; margin-bottom: var(--cadmus-space-5) !important; } [data-theme="dark"] .panel-heading, [data-theme="dark"] .panel_s .panel-heading, .cadmus-theme-dark .panel-heading { background: transparent !important; border-bottom: 1px solid var(--cadmus-border-light) !important; padding: var(--cadmus-space-4) var(--cadmus-space-5) !important; } [data-theme="dark"] .panel-title, [data-theme="dark"] .panel_s h4, .cadmus-theme-dark .panel-title { color: var(--cadmus-text-primary) !important; font-weight: var(--cadmus-font-weight-semibold) !important; font-size: var(--cadmus-font-size-lg) !important; margin: 0 !important; } [data-theme="dark"] .panel-body, .cadmus-theme-dark .panel-body { padding: var(--cadmus-space-5) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 4. TABLES ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .table, [data-theme="dark"] table.dataTable, .cadmus-theme-dark .table { background: transparent !important; border-radius: var(--cadmus-radius-lg) !important; overflow: hidden !important; } [data-theme="dark"] .table>thead>tr>th, [data-theme="dark"] table.dataTable thead th, .cadmus-theme-dark .table>thead>tr>th { background: var(--cadmus-bg-surface-2) !important; color: var(--cadmus-text-muted) !important; font-weight: var(--cadmus-font-weight-semibold) !important; font-size: var(--cadmus-font-size-sm) !important; text-transform: uppercase !important; letter-spacing: 0.03em !important; padding: var(--cadmus-space-3) var(--cadmus-space-4) !important; border-bottom: 1px solid var(--cadmus-border-default) !important; } [data-theme="dark"] .table>tbody>tr>td, [data-theme="dark"] table.dataTable tbody td, .cadmus-theme-dark .table>tbody>tr>td { padding: var(--cadmus-space-3) var(--cadmus-space-4) !important; border-bottom: 1px solid var(--cadmus-border-light) !important; color: var(--cadmus-text-primary) !important; font-size: var(--cadmus-font-size-base) !important; vertical-align: middle !important; } [data-theme="dark"] .table>tbody>tr:hover, .cadmus-theme-dark .table>tbody>tr:hover { background: var(--cadmus-bg-surface-3) !important; } [data-theme="dark"] .table>tbody>tr.selected, .cadmus-theme-dark .table>tbody>tr.selected { background: var(--cadmus-sidebar-active-bg) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 5. FORMS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] label, .cadmus-theme-dark label { color: var(--cadmus-text-muted) !important; font-weight: var(--cadmus-font-weight-medium) !important; font-size: var(--cadmus-font-size-sm) !important; margin-bottom: var(--cadmus-space-2) !important; } [data-theme="dark"] .form-control, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] textarea, [data-theme="dark"] select, .cadmus-theme-dark .form-control { background: rgba(255, 255, 255, 0.04) !important; border: 1.5px solid var(--cadmus-border-default) !important; border-radius: var(--cadmus-radius-md) !important; color: var(--cadmus-text-primary) !important; font-size: var(--cadmus-font-size-md) !important; padding: 10px 14px !important; height: auto !important; min-height: 44px !important; transition: var(--cadmus-transition-normal) !important; } [data-theme="dark"] .form-control::placeholder, .cadmus-theme-dark .form-control::placeholder { color: var(--cadmus-text-placeholder) !important; } [data-theme="dark"] .form-control:hover, .cadmus-theme-dark .form-control:hover { border-color: var(--cadmus-border-strong) !important; } [data-theme="dark"] .form-control:focus, .cadmus-theme-dark .form-control:focus { border-color: var(--cadmus-border-focus) !important; box-shadow: var(--cadmus-focus-ring) !important; outline: none !important; background: rgba(255, 255, 255, 0.08) !important; } /* Error state */ [data-theme="dark"] .form-control.error, [data-theme="dark"] .has-error .form-control, .cadmus-theme-dark .form-control.error { border-color: var(--cadmus-danger) !important; box-shadow: 0 0 0 3px var(--cadmus-danger-bg) !important; } /* Disabled */ [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly], .cadmus-theme-dark .form-control:disabled { background: var(--cadmus-bg-surface-2) !important; opacity: 0.6 !important; cursor: not-allowed !important; } /* Select dropdowns */ [data-theme="dark"] .bootstrap-select>.dropdown-toggle, .cadmus-theme-dark .bootstrap-select>.dropdown-toggle { background: rgba(255, 255, 255, 0.04) !important; border: 1.5px solid var(--cadmus-border-default) !important; border-radius: var(--cadmus-radius-md) !important; color: var(--cadmus-text-primary) !important; padding: 10px 14px !important; min-height: 44px !important; } /* Checkbox & Radio */ [data-theme="dark"] input[type="checkbox"], [data-theme="dark"] input[type="radio"], .cadmus-theme-dark input[type="checkbox"], .cadmus-theme-dark input[type="radio"] { accent-color: var(--cadmus-gold-500) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 6. BUTTONS ═══════════════════════════════════════════════════════════════════════════════ */ /* Primary Button (Gold) */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-success, .cadmus-theme-dark .btn-primary { background: linear-gradient(135deg, var(--cadmus-gold-500) 0%, var(--cadmus-gold-600) 100%) !important; border: none !important; color: var(--cadmus-text-on-gold) !important; font-weight: var(--cadmus-font-weight-semibold) !important; font-size: var(--cadmus-font-size-base) !important; padding: 10px 20px !important; border-radius: var(--cadmus-radius-md) !important; box-shadow: var(--cadmus-shadow-sm) !important; transition: var(--cadmus-transition-normal) !important; } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-success:hover, .cadmus-theme-dark .btn-primary:hover { background: linear-gradient(135deg, var(--cadmus-gold-400) 0%, var(--cadmus-gold-500) 100%) !important; box-shadow: var(--cadmus-shadow-gold) !important; transform: translateY(-1px) !important; } [data-theme="dark"] .btn-primary:active, .cadmus-theme-dark .btn-primary:active { background: var(--cadmus-gold-600) !important; transform: translateY(0) !important; } [data-theme="dark"] .btn-primary:focus, .cadmus-theme-dark .btn-primary:focus { box-shadow: var(--cadmus-focus-ring) !important; } /* Secondary Button */ [data-theme="dark"] .btn-default, [data-theme="dark"] .btn-secondary, .cadmus-theme-dark .btn-default { background: rgba(255, 255, 255, 0.06) !important; border: 1.5px solid var(--cadmus-border-default) !important; color: var(--cadmus-text-primary) !important; font-weight: var(--cadmus-font-weight-medium) !important; padding: 10px 20px !important; border-radius: var(--cadmus-radius-md) !important; transition: var(--cadmus-transition-normal) !important; } [data-theme="dark"] .btn-default:hover, .cadmus-theme-dark .btn-default:hover { background: rgba(255, 255, 255, 0.10) !important; border-color: var(--cadmus-gold-500) !important; color: var(--cadmus-gold-500) !important; } /* Danger Button */ [data-theme="dark"] .btn-danger, .cadmus-theme-dark .btn-danger { background: var(--cadmus-danger) !important; border: none !important; color: var(--cadmus-text-inverse) !important; font-weight: var(--cadmus-font-weight-semibold) !important; padding: 10px 20px !important; border-radius: var(--cadmus-radius-md) !important; } /* Info Button */ [data-theme="dark"] .btn-info, .cadmus-theme-dark .btn-info { background: var(--cadmus-info) !important; border: none !important; color: var(--cadmus-text-inverse) !important; font-weight: var(--cadmus-font-weight-semibold) !important; padding: 10px 20px !important; border-radius: var(--cadmus-radius-md) !important; } /* Warning Button */ [data-theme="dark"] .btn-warning, .cadmus-theme-dark .btn-warning { background: var(--cadmus-warning) !important; border: none !important; color: var(--cadmus-text-on-gold) !important; font-weight: var(--cadmus-font-weight-semibold) !important; padding: 10px 20px !important; border-radius: var(--cadmus-radius-md) !important; } /* Button Sizes */ [data-theme="dark"] .btn-lg, .cadmus-theme-dark .btn-lg { padding: 14px 28px !important; font-size: var(--cadmus-font-size-lg) !important; } [data-theme="dark"] .btn-sm, .cadmus-theme-dark .btn-sm { padding: 6px 14px !important; font-size: var(--cadmus-font-size-sm) !important; } [data-theme="dark"] .btn-xs, .cadmus-theme-dark .btn-xs { padding: 4px 10px !important; font-size: var(--cadmus-font-size-xs) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 7. BADGES & LABELS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .badge, [data-theme="dark"] .label, .cadmus-theme-dark .badge, .cadmus-theme-dark .label { font-weight: var(--cadmus-font-weight-medium) !important; font-size: var(--cadmus-font-size-xs) !important; padding: 4px 10px !important; border-radius: var(--cadmus-radius-full) !important; text-transform: uppercase !important; letter-spacing: 0.03em !important; } [data-theme="dark"] .label-success, [data-theme="dark"] .badge-success, .cadmus-theme-dark .label-success { background: var(--cadmus-success-bg) !important; color: var(--cadmus-success) !important; border: 1px solid var(--cadmus-success-border) !important; } [data-theme="dark"] .label-danger, [data-theme="dark"] .badge-danger, .cadmus-theme-dark .label-danger { background: var(--cadmus-danger-bg) !important; color: var(--cadmus-danger) !important; border: 1px solid var(--cadmus-danger-border) !important; } [data-theme="dark"] .label-warning, [data-theme="dark"] .badge-warning, .cadmus-theme-dark .label-warning { background: var(--cadmus-warning-bg) !important; color: var(--cadmus-warning) !important; border: 1px solid var(--cadmus-warning-border) !important; } [data-theme="dark"] .label-info, [data-theme="dark"] .badge-info, .cadmus-theme-dark .label-info { background: var(--cadmus-info-bg) !important; color: var(--cadmus-info) !important; border: 1px solid var(--cadmus-info-border) !important; } [data-theme="dark"] .label-default, .cadmus-theme-dark .label-default { background: var(--cadmus-bg-surface-2) !important; color: var(--cadmus-text-muted) !important; border: 1px solid var(--cadmus-border-default) !important; } [data-theme="dark"] .label-primary, .cadmus-theme-dark .label-primary { background: var(--cadmus-sidebar-active-bg) !important; color: var(--cadmus-gold-400) !important; border: 1px solid rgba(210, 169, 96, 0.35) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 8. ALERTS & TOASTS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .alert, .cadmus-theme-dark .alert { border-radius: var(--cadmus-radius-lg) !important; padding: var(--cadmus-space-4) var(--cadmus-space-5) !important; border-width: 1px !important; border-style: solid !important; } [data-theme="dark"] .alert-success, .cadmus-theme-dark .alert-success { background: var(--cadmus-success-bg) !important; border-color: var(--cadmus-success-border) !important; color: var(--cadmus-success) !important; } [data-theme="dark"] .alert-danger, [data-theme="dark"] .alert-error, .cadmus-theme-dark .alert-danger { background: var(--cadmus-danger-bg) !important; border-color: var(--cadmus-danger-border) !important; color: var(--cadmus-danger) !important; } [data-theme="dark"] .alert-warning, .cadmus-theme-dark .alert-warning { background: var(--cadmus-warning-bg) !important; border-color: var(--cadmus-warning-border) !important; color: var(--cadmus-warning) !important; } [data-theme="dark"] .alert-info, .cadmus-theme-dark .alert-info { background: var(--cadmus-info-bg) !important; border-color: var(--cadmus-info-border) !important; color: var(--cadmus-info) !important; } /* Toast notifications */ [data-theme="dark"] .atwho-message, [data-theme="dark"] .toast, .cadmus-theme-dark .toast { background: var(--cadmus-bg-elevated) !important; border-radius: var(--cadmus-radius-lg) !important; box-shadow: var(--cadmus-shadow-lg) !important; border-left: 4px solid var(--cadmus-gold-500) !important; color: var(--cadmus-text-primary) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 9. MODALS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .modal-content, .cadmus-theme-dark .modal-content { background: var(--cadmus-bg-elevated) !important; border: 1px solid var(--cadmus-border-default) !important; border-radius: var(--cadmus-radius-xl) !important; box-shadow: var(--cadmus-shadow-xl) !important; overflow: hidden !important; } [data-theme="dark"] .modal-header, .cadmus-theme-dark .modal-header { background: var(--cadmus-bg-elevated) !important; border-bottom: 1px solid var(--cadmus-border-light) !important; padding: var(--cadmus-space-5) var(--cadmus-space-6) !important; } [data-theme="dark"] .modal-title, .cadmus-theme-dark .modal-title { color: var(--cadmus-text-primary) !important; font-weight: var(--cadmus-font-weight-semibold) !important; font-size: var(--cadmus-font-size-xl) !important; } [data-theme="dark"] .modal-body, .cadmus-theme-dark .modal-body { padding: var(--cadmus-space-5) var(--cadmus-space-6) !important; color: var(--cadmus-text-primary) !important; } [data-theme="dark"] .modal-footer, .cadmus-theme-dark .modal-footer { background: rgba(255, 255, 255, 0.03) !important; border-top: 1px solid var(--cadmus-border-light) !important; padding: var(--cadmus-space-4) var(--cadmus-space-6) !important; } [data-theme="dark"] .modal-backdrop, .cadmus-theme-dark .modal-backdrop { background: #000000 !important; } [data-theme="dark"] .modal-backdrop.in, .cadmus-theme-dark .modal-backdrop.in { opacity: 0.7 !important; } [data-theme="dark"] .close, .cadmus-theme-dark .close { color: var(--cadmus-text-muted) !important; opacity: 1 !important; font-size: 24px !important; transition: var(--cadmus-transition-normal) !important; } [data-theme="dark"] .close:hover, .cadmus-theme-dark .close:hover { color: var(--cadmus-gold-500) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 10. TABS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .nav-tabs, .cadmus-theme-dark .nav-tabs { border-bottom: 1px solid var(--cadmus-border-default) !important; } [data-theme="dark"] .nav-tabs>li>a, .cadmus-theme-dark .nav-tabs>li>a { color: var(--cadmus-text-muted) !important; border: none !important; border-radius: 0 !important; padding: var(--cadmus-space-3) var(--cadmus-space-4) !important; margin-bottom: -1px !important; transition: var(--cadmus-transition-normal) !important; position: relative !important; background: transparent !important; } [data-theme="dark"] .nav-tabs>li>a:hover, .cadmus-theme-dark .nav-tabs>li>a:hover { color: var(--cadmus-text-primary) !important; background: transparent !important; } [data-theme="dark"] .nav-tabs>li.active>a, .cadmus-theme-dark .nav-tabs>li.active>a { color: var(--cadmus-gold-500) !important; background: transparent !important; border: none !important; font-weight: var(--cadmus-font-weight-medium) !important; } [data-theme="dark"] .nav-tabs>li.active>a::after, .cadmus-theme-dark .nav-tabs>li.active>a::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: var(--cadmus-gold-500) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 11. DROPDOWNS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .dropdown-menu, .cadmus-theme-dark .dropdown-menu { background: var(--cadmus-bg-elevated) !important; border: 1px solid var(--cadmus-border-default) !important; border-radius: var(--cadmus-radius-lg) !important; box-shadow: var(--cadmus-shadow-lg) !important; padding: var(--cadmus-space-2) !important; } [data-theme="dark"] .dropdown-menu>li>a, .cadmus-theme-dark .dropdown-menu>li>a { color: var(--cadmus-text-primary) !important; padding: var(--cadmus-space-2) var(--cadmus-space-3) !important; border-radius: var(--cadmus-radius-sm) !important; transition: var(--cadmus-transition-fast) !important; } [data-theme="dark"] .dropdown-menu>li>a:hover, .cadmus-theme-dark .dropdown-menu>li>a:hover { background: var(--cadmus-sidebar-active-bg) !important; color: var(--cadmus-gold-500) !important; } [data-theme="dark"] .dropdown-menu .divider, .cadmus-theme-dark .dropdown-menu .divider { background: var(--cadmus-border-light) !important; margin: var(--cadmus-space-2) 0 !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 12. PAGINATION ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .pagination>li>a, [data-theme="dark"] .pagination>li>span, [data-theme="dark"] .dataTables_paginate .paginate_button, .cadmus-theme-dark .pagination>li>a { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--cadmus-border-default) !important; color: var(--cadmus-text-primary) !important; padding: 8px 14px !important; margin: 0 2px !important; border-radius: var(--cadmus-radius-sm) !important; transition: var(--cadmus-transition-fast) !important; } [data-theme="dark"] .pagination>li>a:hover, [data-theme="dark"] .dataTables_paginate .paginate_button:hover, .cadmus-theme-dark .pagination>li>a:hover { background: var(--cadmus-sidebar-active-bg) !important; border-color: var(--cadmus-gold-500) !important; color: var(--cadmus-gold-500) !important; } [data-theme="dark"] .pagination>.active>a, [data-theme="dark"] .dataTables_paginate .paginate_button.current, .cadmus-theme-dark .pagination>.active>a { background: var(--cadmus-gold-500) !important; border-color: var(--cadmus-gold-500) !important; color: var(--cadmus-text-on-gold) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 13. LOGIN PAGE ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .login-page, [data-theme="dark"] #login, .cadmus-theme-dark .login-page { background: var(--cadmus-bg-base) !important; } [data-theme="dark"] .login-page::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 0%, #0F1621 0%, transparent 70%), radial-gradient(ellipse at 100% 100%, rgba(22, 29, 20, 0.5) 0%, transparent 50%), #0F1621; z-index: -1; } [data-theme="dark"] .login-panel, .cadmus-theme-dark .login-panel { background: var(--cadmus-bg-surface) !important; backdrop-filter: blur(14px) !important; border: 1px solid var(--cadmus-border-default) !important; border-radius: var(--cadmus-radius-2xl) !important; box-shadow: var(--cadmus-shadow-xl) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 14. HEADINGS & TYPOGRAPHY ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, .cadmus-theme-dark h1, .cadmus-theme-dark h2, .cadmus-theme-dark h3 { color: var(--cadmus-text-primary) !important; font-weight: var(--cadmus-font-weight-semibold) !important; line-height: var(--cadmus-line-height-tight) !important; } [data-theme="dark"] a, .cadmus-theme-dark a { color: var(--cadmus-gold-500) !important; text-decoration: none !important; transition: var(--cadmus-transition-fast) !important; } [data-theme="dark"] a:hover, .cadmus-theme-dark a:hover { color: var(--cadmus-gold-400) !important; } [data-theme="dark"] p, [data-theme="dark"] span, .cadmus-theme-dark p { color: var(--cadmus-text-secondary) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 15. WELL & HR ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .well, .cadmus-theme-dark .well { background: var(--cadmus-bg-surface-2) !important; border: 1px solid var(--cadmus-border-light) !important; border-radius: var(--cadmus-radius-lg) !important; box-shadow: none !important; } [data-theme="dark"] hr, .cadmus-theme-dark hr { border-color: var(--cadmus-border-light) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 16. SCROLLBARS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px !important; height: 8px !important; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--cadmus-bg-surface-2) !important; border-radius: var(--cadmus-radius-full) !important; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--cadmus-gold-600) !important; border-radius: var(--cadmus-radius-full) !important; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--cadmus-gold-500) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 17. DATEPICKER ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .datepicker, .cadmus-theme-dark .datepicker { background: var(--cadmus-bg-elevated) !important; border-radius: var(--cadmus-radius-lg) !important; box-shadow: var(--cadmus-shadow-lg) !important; color: var(--cadmus-text-primary) !important; } [data-theme="dark"] .datepicker table tr td, .cadmus-theme-dark .datepicker table tr td { color: var(--cadmus-text-primary) !important; } [data-theme="dark"] .datepicker table tr td.active, .cadmus-theme-dark .datepicker table tr td.active { background: var(--cadmus-gold-500) !important; color: var(--cadmus-text-on-gold) !important; } [data-theme="dark"] .datepicker table tr td.today, .cadmus-theme-dark .datepicker table tr td.today { background: var(--cadmus-sidebar-active-bg) !important; color: var(--cadmus-gold-500) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ PRINT STYLES (Override to light for printing) ═══════════════════════════════════════════════════════════════════════════════ */ @media print { [data-theme="dark"], .cadmus-theme-dark { background: #FFFFFF !important; color: #000000 !important; } [data-theme="dark"] *, .cadmus-theme-dark * { background: transparent !important; color: #000000 !important; box-shadow: none !important; text-shadow: none !important; } [data-theme="dark"] .panel, [data-theme="dark"] .panel_s, .cadmus-theme-dark .panel { border: 1px solid #ddd !important; } [data-theme="dark"] #menu, [data-theme="dark"] .navbar, .cadmus-theme-dark #menu { display: none !important; } [data-theme="dark"]::before, [data-theme="dark"]::after, .cadmus-theme-dark::before, .cadmus-theme-dark::after { display: none !important; } } /* ═══════════ CRITICAL OVERRIDES - Override style.css hardcoded values for Dark Theme */ ═══ /* Override style.css line 511-521 */ [data-theme="dark"] .sidebar, body[data-theme="dark"] .sidebar, html[data-theme="dark"] .sidebar { background: var(--cadmus-sidebar-bg-solid, #0A1018) !important; border-right: 1px solid var(--cadmus-sidebar-border, rgba(255,255,255,0.08)) !important; } /* Override style.css line 372-380 */ [data-theme="dark"] #header, body[data-theme="dark"] #header, html[data-theme="dark"] #header { background: var(--cadmus-header-bg, #0F1621) !important; } /* Override style.css line 660-666 */ [data-theme="dark"] #wrapper, body[data-theme="dark"] #wrapper, html[data-theme="dark"] #wrapper { background: var(--cadmus-bg-base, #0F1621) !important; } /* Override style.css sidebar text colors */ [data-theme="dark"] .sidebar ul.nav li a, body[data-theme="dark"] .sidebar ul.nav li a { color: var(--cadmus-sidebar-text, #D4D2CC) !important; } [data-theme="dark"] .sidebar ul.nav li a i.menu-icon, body[data-theme="dark"] .sidebar ul.nav li a i.menu-icon { color: var(--cadmus-sidebar-icon, #B9B6AA) !important; } [data-theme="dark"] .sidebar>ul.nav>li:hover a:first-child, [data-theme="dark"] .sidebar>ul.nav>li.active a:first-child, body[data-theme="dark"] .sidebar>ul.nav>li:hover a:first-child, body[data-theme="dark"] .sidebar>ul.nav>li.active a:first-child { background: var(--cadmus-sidebar-active-bg, rgba(210,169,96,0.08)) !important; border: 1px solid rgba(210,169,96,0.15) !important; } [data-theme="dark"] .sidebar ul.nav li.active>a, [data-theme="dark"] .sidebar ul.nav>li>a:hover, body[data-theme="dark"] .sidebar ul.nav li.active>a { color: var(--cadmus-sidebar-active-text, #D2A960) !important; } [data-theme="dark"] .sidebar ul.nav li.active>a .menu-icon, [data-theme="dark"] .sidebar ul.nav>li>a:hover .menu-icon, body[data-theme="dark"] .sidebar ul.nav li.active>a .menu-icon { color: var(--cadmus-gold-500, #D2A960) !important; } /* Global text and background overrides */ [data-theme="dark"] body, body[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--cadmus-bg-base, #0F1621) !important; color: var(--cadmus-text-primary, #F4F2EC) !important; } [data-theme="dark"] .content, body[data-theme="dark"] .content { background: var(--cadmus-bg-base, #0F1621) !important; } /* Panel/Card overrides for dark mode */ [data-theme="dark"] .panel, [data-theme="dark"] .panel_s, [data-theme="dark"] .card, body[data-theme="dark"] .panel, body[data-theme="dark"] .panel_s { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--cadmus-border-default, rgba(255,255,255,0.12)) !important; color: var(--cadmus-text-primary, #F4F2EC) !important; } /* Table overrides */ [data-theme="dark"] .table, [data-theme="dark"] table.dataTable, body[data-theme="dark"] .table { background: transparent !important; color: var(--cadmus-text-primary, #F4F2EC) !important; } [data-theme="dark"] .table thead th, body[data-theme="dark"] .table thead th { background: rgba(255, 255, 255, 0.05) !important; color: var(--cadmus-text-muted, #B9B6AA) !important; } [data-theme="dark"] .table tbody td, body[data-theme="dark"] .table tbody td { color: var(--cadmus-text-primary, #F4F2EC) !important; border-color: var(--cadmus-border-light, rgba(255,255,255,0.08)) !important; } /* Modal overrides */ [data-theme="dark"] .modal-content, body[data-theme="dark"] .modal-content { background: var(--cadmus-bg-elevated, #1A2332) !important; color: var(--cadmus-text-primary, #F4F2EC) !important; } /* Form control overrides */ [data-theme="dark"] .form-control, body[data-theme="dark"] .form-control { background: rgba(255, 255, 255, 0.04) !important; color: var(--cadmus-text-primary, #F4F2EC) !important; border-color: var(--cadmus-border-default, rgba(255,255,255,0.12)) !important; } [data-theme="dark"] .form-control::placeholder { color: var(--cadmus-text-placeholder, rgba(244,242,236,0.45)) !important; } /* Dropdown overrides */ [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .bootstrap-select .dropdown-menu, body[data-theme="dark"] .dropdown-menu { background: var(--cadmus-bg-elevated, #1A2332) !important; border-color: var(--cadmus-border-default, rgba(255,255,255,0.12)) !important; } [data-theme="dark"] .dropdown-menu > li > a, body[data-theme="dark"] .dropdown-menu > li > a { color: var(--cadmus-text-primary, #F4F2EC) !important; } [data-theme="dark"] .dropdown-menu > li > a:hover, body[data-theme="dark"] .dropdown-menu > li > a:hover { background: var(--cadmus-sidebar-active-bg, rgba(210,169,96,0.08)) !important; color: var(--cadmus-gold-500, #D2A960) !important; } /* Headings and text */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, body[data-theme="dark"] h1, body[data-theme="dark"] h2, body[data-theme="dark"] h3 { color: var(--cadmus-text-primary, #F4F2EC) !important; } [data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] label, body[data-theme="dark"] p, body[data-theme="dark"] label { color: var(--cadmus-text-secondary, #D4D2CC) !important; } /* Links */ [data-theme="dark"] a, body[data-theme="dark"] a { color: var(--cadmus-gold-500, #D2A960) !important; } /* Well and alerts */ [data-theme="dark"] .well, body[data-theme="dark"] .well { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--cadmus-border-light, rgba(255,255,255,0.08)) !important; color: var(--cadmus-text-primary, #F4F2EC) !important; } /* ═══════════ SIDEBAR & MENU ENHANCEMENTS (Step 3625) */ ═══════════════════════════════════ /* 1. Styled Scrollbar for Sidebar */ .sidebar, #setup-menu-wrapper { scrollbar-width: thin; scrollbar-color: var(--cadmus-gold-500) transparent; } .sidebar::-webkit-scrollbar, #setup-menu-wrapper::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-track, #setup-menu-wrapper::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb, #setup-menu-wrapper::-webkit-scrollbar-thumb { background-color: rgba(210, 169, 96, 0.4); border-radius: 20px; } .sidebar::-webkit-scrollbar-thumb:hover, #setup-menu-wrapper::-webkit-scrollbar-thumb:hover { background-color: var(--cadmus-gold-500); } /* 2. Fix Arrow/Chevron */ .sidebar .arrow { float: right !important; color: rgba(255,255,255,0.4); transition: transform 0.3s ease, color 0.3s ease; } .sidebar li.active > a > .fa.arrow { color: var(--cadmus-gold-500) !important; } /* 3. Sub-menu styling */ .sidebar ul.nav li .nav-second-level { background: rgba(0,0,0,0.15) !important; /* Darker inset for dark mode */ } .sidebar ul.nav li .nav-second-level li a { padding-left: 55px !important; opacity: 0.8; } .sidebar ul.nav li .nav-second-level li a:hover { opacity: 1; } /* 4. Cadmus AI Assist Parent Icon */ .sidebar ul.nav li a i.fa-wand-magic-sparkles { color: #D2A960 !important; text-shadow: 0 0 10px rgba(210, 169, 96, 0.3); }