/** * ═══════════════════════════════════════════════════════════════════════════════ * CADMUS İNŞAAT - LIGHT THEME FOR PERFEX CRM * ═══════════════════════════════════════════════════════════════════════════════ * * Brand: Cadmus İnşaat (Real Estate / Construction) * Theme: Light (Default / Daytime / Office) * Version: 1.0.0 * * Apply by adding: or class="cadmus-theme-light" * ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ DESIGN TOKENS - LIGHT THEME ═══════════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="light"], .cadmus-theme-light { /* ─── Brand Gold ─── */ --cadmus-gold-50: #FDF8EE; --cadmus-gold-100: #FAF0DB; --cadmus-gold-200: #F5E1B7; --cadmus-gold-300: #EFD293; --cadmus-gold-400: #E6BF73; --cadmus-gold-500: #D2A960; /* Primary Brand */ --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 (Light Theme) ─── */ --cadmus-bg-base: #F6F7F9; --cadmus-bg-surface: #FFFFFF; --cadmus-bg-surface-2: #F2F4F7; --cadmus-bg-surface-3: #EBEEF2; --cadmus-bg-elevated: #FFFFFF; --cadmus-bg-overlay: rgba(0, 0, 0, 0.5); /* ─── Text Colors ─── */ --cadmus-text-primary: #0E1116; --cadmus-text-secondary: #3D444D; --cadmus-text-muted: #6B7280; --cadmus-text-placeholder: #9CA3AF; --cadmus-text-inverse: #FFFFFF; --cadmus-text-on-gold: #161D14; /* ─── Borders ─── */ --cadmus-border-light: rgba(0, 0, 0, 0.06); --cadmus-border-default: rgba(0, 0, 0, 0.10); --cadmus-border-strong: rgba(0, 0, 0, 0.16); --cadmus-border-focus: #D2A960; /* ─── Status Colors ─── */ --cadmus-success: #2FA56A; --cadmus-success-bg: rgba(47, 165, 106, 0.10); --cadmus-success-border: rgba(47, 165, 106, 0.30); --cadmus-warning: #E1B84A; --cadmus-warning-bg: rgba(225, 184, 74, 0.10); --cadmus-warning-border: rgba(225, 184, 74, 0.30); --cadmus-danger: #D14B4B; --cadmus-danger-bg: rgba(209, 75, 75, 0.10); --cadmus-danger-border: rgba(209, 75, 75, 0.30); --cadmus-info: #3B82F6; --cadmus-info-bg: rgba(59, 130, 246, 0.10); --cadmus-info-border: rgba(59, 130, 246, 0.30); /* ─── Shadows ─── */ --cadmus-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --cadmus-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06); --cadmus-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --cadmus-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10); --cadmus-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12); --cadmus-shadow-gold: 0 4px 16px rgba(210, 169, 96, 0.20); /* ─── 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.20); /* ─── Sidebar Specific ─── */ --cadmus-sidebar-bg: #FFFFFF; --cadmus-sidebar-border: rgba(0, 0, 0, 0.08); --cadmus-sidebar-text: #3D444D; --cadmus-sidebar-text-muted: #6B7280; --cadmus-sidebar-icon: #6B7280; --cadmus-sidebar-hover-bg: rgba(0, 0, 0, 0.04); --cadmus-sidebar-active-bg: rgba(210, 169, 96, 0.10); --cadmus-sidebar-active-text: #D2A960; --cadmus-sidebar-active-icon: #D2A960; --cadmus-sidebar-active-indicator: #D2A960; /* ─── Header Specific ─── */ --cadmus-header-bg: #FFFFFF; --cadmus-header-border: rgba(0, 0, 0, 0.08); --cadmus-header-text: #0E1116; --cadmus-header-icon: #6B7280; } /* ═══════════════════════════════════════════════════════════════════════════════ GLOBAL STYLES ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"], .cadmus-theme-light { 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-color: var(--cadmus-bg-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ═══════════════════════════════════════════════════════════════════════════════ 1. SIDEBAR NAVIGATION ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] #menu, [data-theme="light"] .sidebar-menu, [data-theme="light"] #sidebar, .cadmus-theme-light #menu, .cadmus-theme-light .sidebar-menu, .cadmus-theme-light #sidebar { background: var(--cadmus-sidebar-bg) !important; border-right: 1px solid var(--cadmus-sidebar-border) !important; } [data-theme="light"] #menu li a, [data-theme="light"] .sidebar-menu li a, .cadmus-theme-light #menu li a, .cadmus-theme-light .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="light"] #menu li a i, [data-theme="light"] .sidebar-menu li a i, .cadmus-theme-light #menu li a i, .cadmus-theme-light .sidebar-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="light"] #menu li a:hover, [data-theme="light"] .sidebar-menu li a:hover, .cadmus-theme-light #menu li a:hover, .cadmus-theme-light .sidebar-menu li a:hover { background: var(--cadmus-sidebar-hover-bg) !important; } [data-theme="light"] #menu li.active>a, [data-theme="light"] .sidebar-menu li.active>a, [data-theme="light"] #menu li a.active, .cadmus-theme-light #menu li.active>a, .cadmus-theme-light .sidebar-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="light"] #menu li.active>a::before, .cadmus-theme-light #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="light"] #menu li.active>a i, .cadmus-theme-light #menu li.active>a i { color: var(--cadmus-sidebar-active-icon) !important; } /* Submenu */ [data-theme="light"] #menu ul.nav-second-level, .cadmus-theme-light #menu ul.nav-second-level { background: transparent !important; padding-left: 16px !important; } [data-theme="light"] #menu ul.nav-second-level li a, .cadmus-theme-light #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="light"] .navbar-default, [data-theme="light"] #header, [data-theme="light"] .navbar, .cadmus-theme-light .navbar-default, .cadmus-theme-light #header { background: var(--cadmus-header-bg) !important; border-bottom: 1px solid var(--cadmus-header-border) !important; box-shadow: var(--cadmus-shadow-xs) !important; } [data-theme="light"] .navbar-default .navbar-nav>li>a, .cadmus-theme-light .navbar-default .navbar-nav>li>a { color: var(--cadmus-header-text) !important; } [data-theme="light"] .navbar-default .navbar-nav>li>a:hover, .cadmus-theme-light .navbar-default .navbar-nav>li>a:hover { color: var(--cadmus-gold-500) !important; } /* Search Bar */ [data-theme="light"] .navbar-form input, [data-theme="light"] #search input, .cadmus-theme-light .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="light"] .navbar-form input:focus, .cadmus-theme-light .navbar-form input:focus { border-color: var(--cadmus-border-focus) !important; box-shadow: var(--cadmus-focus-ring) !important; background: var(--cadmus-bg-surface) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 3. CARDS & PANELS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] .panel, [data-theme="light"] .panel_s, [data-theme="light"] .card, [data-theme="light"] .widget, .cadmus-theme-light .panel, .cadmus-theme-light .panel_s, .cadmus-theme-light .card { background: var(--cadmus-bg-surface) !important; border: 1px solid var(--cadmus-border-light) !important; border-radius: var(--cadmus-radius-lg) !important; box-shadow: var(--cadmus-shadow-sm) !important; margin-bottom: var(--cadmus-space-5) !important; } [data-theme="light"] .panel-heading, [data-theme="light"] .panel_s .panel-heading, .cadmus-theme-light .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="light"] .panel-title, [data-theme="light"] .panel_s h4, .cadmus-theme-light .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="light"] .panel-body, .cadmus-theme-light .panel-body { padding: var(--cadmus-space-5) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 4. TABLES ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] .table, [data-theme="light"] table.dataTable, .cadmus-theme-light .table { background: var(--cadmus-bg-surface) !important; border-radius: var(--cadmus-radius-lg) !important; overflow: hidden !important; } [data-theme="light"] .table>thead>tr>th, [data-theme="light"] table.dataTable thead th, .cadmus-theme-light .table>thead>tr>th { background: var(--cadmus-bg-surface-2) !important; color: var(--cadmus-text-secondary) !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="light"] .table>tbody>tr>td, [data-theme="light"] table.dataTable tbody td, .cadmus-theme-light .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="light"] .table>tbody>tr:hover, .cadmus-theme-light .table>tbody>tr:hover { background: var(--cadmus-bg-surface-2) !important; } [data-theme="light"] .table>tbody>tr.selected, .cadmus-theme-light .table>tbody>tr.selected { background: var(--cadmus-sidebar-active-bg) !important; } /* Zebra striping (optional) */ [data-theme="light"] .table-striped>tbody>tr:nth-of-type(odd), .cadmus-theme-light .table-striped>tbody>tr:nth-of-type(odd) { background: var(--cadmus-bg-surface) !important; } [data-theme="light"] .table-striped>tbody>tr:nth-of-type(even), .cadmus-theme-light .table-striped>tbody>tr:nth-of-type(even) { background: var(--cadmus-bg-surface-2) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 5. FORMS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] label, .cadmus-theme-light label { color: var(--cadmus-text-secondary) !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="light"] .form-control, [data-theme="light"] input[type="text"], [data-theme="light"] input[type="email"], [data-theme="light"] input[type="password"], [data-theme="light"] input[type="number"], [data-theme="light"] input[type="tel"], [data-theme="light"] textarea, [data-theme="light"] select, .cadmus-theme-light .form-control { background: var(--cadmus-bg-surface) !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="light"] .form-control::placeholder, .cadmus-theme-light .form-control::placeholder { color: var(--cadmus-text-placeholder) !important; } [data-theme="light"] .form-control:hover, .cadmus-theme-light .form-control:hover { border-color: var(--cadmus-border-strong) !important; } [data-theme="light"] .form-control:focus, .cadmus-theme-light .form-control:focus { border-color: var(--cadmus-border-focus) !important; box-shadow: var(--cadmus-focus-ring) !important; outline: none !important; } /* Error state */ [data-theme="light"] .form-control.error, [data-theme="light"] .has-error .form-control, .cadmus-theme-light .form-control.error { border-color: var(--cadmus-danger) !important; box-shadow: 0 0 0 3px var(--cadmus-danger-bg) !important; } /* Disabled */ [data-theme="light"] .form-control:disabled, [data-theme="light"] .form-control[readonly], .cadmus-theme-light .form-control:disabled { background: var(--cadmus-bg-surface-2) !important; opacity: 0.7 !important; cursor: not-allowed !important; } /* Select dropdowns */ [data-theme="light"] .bootstrap-select>.dropdown-toggle, .cadmus-theme-light .bootstrap-select>.dropdown-toggle { background: var(--cadmus-bg-surface) !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="light"] input[type="checkbox"], [data-theme="light"] input[type="radio"], .cadmus-theme-light input[type="checkbox"], .cadmus-theme-light input[type="radio"] { accent-color: var(--cadmus-gold-500) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 6. BUTTONS ═══════════════════════════════════════════════════════════════════════════════ */ /* Primary Button (Gold) */ [data-theme="light"] .btn-primary, [data-theme="light"] .btn-success, .cadmus-theme-light .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="light"] .btn-primary:hover, [data-theme="light"] .btn-success:hover, .cadmus-theme-light .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="light"] .btn-primary:active, .cadmus-theme-light .btn-primary:active { background: var(--cadmus-gold-600) !important; transform: translateY(0) !important; } [data-theme="light"] .btn-primary:focus, .cadmus-theme-light .btn-primary:focus { box-shadow: var(--cadmus-focus-ring) !important; } /* Secondary Button */ [data-theme="light"] .btn-default, [data-theme="light"] .btn-secondary, .cadmus-theme-light .btn-default { background: var(--cadmus-bg-surface) !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="light"] .btn-default:hover, .cadmus-theme-light .btn-default:hover { background: var(--cadmus-bg-surface-2) !important; border-color: var(--cadmus-border-strong) !important; } /* Danger Button */ [data-theme="light"] .btn-danger, .cadmus-theme-light .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="light"] .btn-info, .cadmus-theme-light .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="light"] .btn-warning, .cadmus-theme-light .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="light"] .btn-lg, .cadmus-theme-light .btn-lg { padding: 14px 28px !important; font-size: var(--cadmus-font-size-lg) !important; } [data-theme="light"] .btn-sm, .cadmus-theme-light .btn-sm { padding: 6px 14px !important; font-size: var(--cadmus-font-size-sm) !important; } [data-theme="light"] .btn-xs, .cadmus-theme-light .btn-xs { padding: 4px 10px !important; font-size: var(--cadmus-font-size-xs) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 7. BADGES & LABELS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] .badge, [data-theme="light"] .label, .cadmus-theme-light .badge, .cadmus-theme-light .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="light"] .label-success, [data-theme="light"] .badge-success, .cadmus-theme-light .label-success { background: var(--cadmus-success-bg) !important; color: var(--cadmus-success) !important; border: 1px solid var(--cadmus-success-border) !important; } [data-theme="light"] .label-danger, [data-theme="light"] .badge-danger, .cadmus-theme-light .label-danger { background: var(--cadmus-danger-bg) !important; color: var(--cadmus-danger) !important; border: 1px solid var(--cadmus-danger-border) !important; } [data-theme="light"] .label-warning, [data-theme="light"] .badge-warning, .cadmus-theme-light .label-warning { background: var(--cadmus-warning-bg) !important; color: var(--cadmus-gold-700) !important; border: 1px solid var(--cadmus-warning-border) !important; } [data-theme="light"] .label-info, [data-theme="light"] .badge-info, .cadmus-theme-light .label-info { background: var(--cadmus-info-bg) !important; color: var(--cadmus-info) !important; border: 1px solid var(--cadmus-info-border) !important; } [data-theme="light"] .label-default, .cadmus-theme-light .label-default { background: var(--cadmus-bg-surface-2) !important; color: var(--cadmus-text-secondary) !important; border: 1px solid var(--cadmus-border-default) !important; } [data-theme="light"] .label-primary, .cadmus-theme-light .label-primary { background: var(--cadmus-sidebar-active-bg) !important; color: var(--cadmus-gold-600) !important; border: 1px solid rgba(210, 169, 96, 0.30) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 8. ALERTS & TOASTS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] .alert, .cadmus-theme-light .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="light"] .alert-success, .cadmus-theme-light .alert-success { background: var(--cadmus-success-bg) !important; border-color: var(--cadmus-success-border) !important; color: var(--cadmus-success) !important; } [data-theme="light"] .alert-danger, [data-theme="light"] .alert-error, .cadmus-theme-light .alert-danger { background: var(--cadmus-danger-bg) !important; border-color: var(--cadmus-danger-border) !important; color: var(--cadmus-danger) !important; } [data-theme="light"] .alert-warning, .cadmus-theme-light .alert-warning { background: var(--cadmus-warning-bg) !important; border-color: var(--cadmus-warning-border) !important; color: var(--cadmus-gold-700) !important; } [data-theme="light"] .alert-info, .cadmus-theme-light .alert-info { background: var(--cadmus-info-bg) !important; border-color: var(--cadmus-info-border) !important; color: var(--cadmus-info) !important; } /* Toast notifications */ [data-theme="light"] .atwho-message, [data-theme="light"] .toast, .cadmus-theme-light .toast { background: var(--cadmus-bg-surface) !important; border-radius: var(--cadmus-radius-lg) !important; box-shadow: var(--cadmus-shadow-lg) !important; border-left: 4px solid var(--cadmus-gold-500) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 9. MODALS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] .modal-content, .cadmus-theme-light .modal-content { background: var(--cadmus-bg-surface) !important; border: none !important; border-radius: var(--cadmus-radius-xl) !important; box-shadow: var(--cadmus-shadow-xl) !important; overflow: hidden !important; } [data-theme="light"] .modal-header, .cadmus-theme-light .modal-header { background: var(--cadmus-bg-surface) !important; border-bottom: 1px solid var(--cadmus-border-light) !important; padding: var(--cadmus-space-5) var(--cadmus-space-6) !important; } [data-theme="light"] .modal-title, .cadmus-theme-light .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="light"] .modal-body, .cadmus-theme-light .modal-body { padding: var(--cadmus-space-5) var(--cadmus-space-6) !important; } [data-theme="light"] .modal-footer, .cadmus-theme-light .modal-footer { background: var(--cadmus-bg-surface-2) !important; border-top: 1px solid var(--cadmus-border-light) !important; padding: var(--cadmus-space-4) var(--cadmus-space-6) !important; } [data-theme="light"] .modal-backdrop, .cadmus-theme-light .modal-backdrop { background: #0E1116 !important; } [data-theme="light"] .modal-backdrop.in, .cadmus-theme-light .modal-backdrop.in { opacity: 0.5 !important; } [data-theme="light"] .close, .cadmus-theme-light .close { color: var(--cadmus-text-muted) !important; opacity: 1 !important; font-size: 24px !important; transition: var(--cadmus-transition-normal) !important; } [data-theme="light"] .close:hover, .cadmus-theme-light .close:hover { color: var(--cadmus-text-primary) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 10. TABS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] .nav-tabs, .cadmus-theme-light .nav-tabs { border-bottom: 1px solid var(--cadmus-border-default) !important; } [data-theme="light"] .nav-tabs>li>a, .cadmus-theme-light .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; } [data-theme="light"] .nav-tabs>li>a:hover, .cadmus-theme-light .nav-tabs>li>a:hover { color: var(--cadmus-text-primary) !important; background: transparent !important; } [data-theme="light"] .nav-tabs>li.active>a, .cadmus-theme-light .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="light"] .nav-tabs>li.active>a::after, .cadmus-theme-light .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="light"] .dropdown-menu, .cadmus-theme-light .dropdown-menu { background: var(--cadmus-bg-surface) !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="light"] .dropdown-menu>li>a, .cadmus-theme-light .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="light"] .dropdown-menu>li>a:hover, .cadmus-theme-light .dropdown-menu>li>a:hover { background: var(--cadmus-bg-surface-2) !important; color: var(--cadmus-gold-500) !important; } [data-theme="light"] .dropdown-menu .divider, .cadmus-theme-light .dropdown-menu .divider { background: var(--cadmus-border-light) !important; margin: var(--cadmus-space-2) 0 !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 12. PAGINATION ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] .pagination>li>a, [data-theme="light"] .pagination>li>span, [data-theme="light"] .dataTables_paginate .paginate_button, .cadmus-theme-light .pagination>li>a { background: var(--cadmus-bg-surface) !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="light"] .pagination>li>a:hover, [data-theme="light"] .dataTables_paginate .paginate_button:hover, .cadmus-theme-light .pagination>li>a:hover { background: var(--cadmus-bg-surface-2) !important; border-color: var(--cadmus-gold-500) !important; color: var(--cadmus-gold-500) !important; } [data-theme="light"] .pagination>.active>a, [data-theme="light"] .dataTables_paginate .paginate_button.current, .cadmus-theme-light .pagination>.active>a { background: var(--cadmus-gold-500) !important; border-color: var(--cadmus-gold-500) !important; color: var(--cadmus-text-on-gold) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 13. CHARTS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] .chart-legend li span, .cadmus-theme-light .chart-legend li span { border-radius: var(--cadmus-radius-xs) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 14. LOGIN PAGE ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] .login-page, [data-theme="light"] #login, .cadmus-theme-light .login-page { background: linear-gradient(135deg, #F6F7F9 0%, #E8EAE6 100%) !important; } [data-theme="light"] .login-panel, .cadmus-theme-light .login-panel { background: var(--cadmus-bg-surface) !important; border-radius: var(--cadmus-radius-2xl) !important; box-shadow: var(--cadmus-shadow-xl) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 15. HEADINGS & TYPOGRAPHY ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6, .cadmus-theme-light h1, .cadmus-theme-light h2, .cadmus-theme-light 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="light"] a, .cadmus-theme-light a { color: var(--cadmus-gold-600) !important; text-decoration: none !important; transition: var(--cadmus-transition-fast) !important; } [data-theme="light"] a:hover, .cadmus-theme-light a:hover { color: var(--cadmus-gold-500) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 16. WELL & HR ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] .well, .cadmus-theme-light .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="light"] hr, .cadmus-theme-light hr { border-color: var(--cadmus-border-light) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 17. SCROLLBARS ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] ::-webkit-scrollbar { width: 8px !important; height: 8px !important; } [data-theme="light"] ::-webkit-scrollbar-track { background: var(--cadmus-bg-surface-2) !important; border-radius: var(--cadmus-radius-full) !important; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--cadmus-gold-400) !important; border-radius: var(--cadmus-radius-full) !important; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--cadmus-gold-500) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ 18. DATEPICKER ═══════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] .datepicker, .cadmus-theme-light .datepicker { background: var(--cadmus-bg-surface) !important; border-radius: var(--cadmus-radius-lg) !important; box-shadow: var(--cadmus-shadow-lg) !important; } [data-theme="light"] .datepicker table tr td.active, .cadmus-theme-light .datepicker table tr td.active { background: var(--cadmus-gold-500) !important; color: var(--cadmus-text-on-gold) !important; } [data-theme="light"] .datepicker table tr td.today, .cadmus-theme-light .datepicker table tr td.today { background: var(--cadmus-sidebar-active-bg) !important; color: var(--cadmus-gold-600) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ PRINT STYLES ═══════════════════════════════════════════════════════════════════════════════ */ @media print { [data-theme="light"], .cadmus-theme-light { background: #FFFFFF !important; color: #000000 !important; } [data-theme="light"] .panel, [data-theme="light"] .panel_s, .cadmus-theme-light .panel { box-shadow: none !important; border: 1px solid #ddd !important; } [data-theme="light"] #menu, [data-theme="light"] .navbar, .cadmus-theme-light #menu { display: none !important; } } /* ══════════ CRITICAL OVERRIDES - Override style.css hardcoded values */ ═════════════════ /* Override style.css line 511-521 */ [data-theme="light"] .sidebar, body[data-theme="light"] .sidebar, html[data-theme="light"] .sidebar { background: var(--cadmus-sidebar-bg, #FFFFFF) !important; border-right: 1px solid var(--cadmus-sidebar-border, rgba(0, 0, 0, 0.08)) !important; } /* Override style.css line 372-380 */ [data-theme="light"] #header, body[data-theme="light"] #header, html[data-theme="light"] #header { background: var(--cadmus-header-bg, #FFFFFF) !important; } /* Override style.css line 660-666 */ [data-theme="light"] #wrapper, body[data-theme="light"] #wrapper, html[data-theme="light"] #wrapper { background: var(--cadmus-bg-base, #F6F7F9) !important; } /* Override style.css sidebar text colors */ [data-theme="light"] .sidebar ul.nav li a, body[data-theme="light"] .sidebar ul.nav li a { color: var(--cadmus-sidebar-text, #3D444D) !important; } [data-theme="light"] .sidebar ul.nav li a i.menu-icon, body[data-theme="light"] .sidebar ul.nav li a i.menu-icon { color: var(--cadmus-sidebar-icon, #6B7280) !important; } [data-theme="light"] .sidebar>ul.nav>li:hover a:first-child, [data-theme="light"] .sidebar>ul.nav>li.active a:first-child, body[data-theme="light"] .sidebar>ul.nav>li:hover a:first-child, body[data-theme="light"] .sidebar>ul.nav>li.active a:first-child { background: var(--cadmus-sidebar-active-bg, rgba(210, 169, 96, 0.10)) !important; border: 1px solid rgba(210, 169, 96, 0.20) !important; } [data-theme="light"] .sidebar ul.nav li.active>a, [data-theme="light"] .sidebar ul.nav>li>a:hover, body[data-theme="light"] .sidebar ul.nav li.active>a { color: var(--cadmus-sidebar-active-text, #D2A960) !important; } [data-theme="light"] .sidebar ul.nav li.active>a .menu-icon, [data-theme="light"] .sidebar ul.nav>li>a:hover .menu-icon, body[data-theme="light"] .sidebar ul.nav li.active>a .menu-icon { color: var(--cadmus-gold-500, #D2A960) !important; } /* Global text and background overrides */ [data-theme="light"] body, body[data-theme="light"], html[data-theme="light"] body { background-color: var(--cadmus-bg-base, #F6F7F9) !important; color: var(--cadmus-text-primary, #0E1116) !important; } [data-theme="light"] .content, body[data-theme="light"] .content { background: var(--cadmus-bg-base, #F6F7F9) !important; } /* Modal overrides */ [data-theme="light"] .modal-content, body[data-theme="light"] .modal-content { background: var(--cadmus-bg-surface, #FFFFFF) !important; color: var(--cadmus-text-primary, #0E1116) !important; } /* Form control overrides */ [data-theme="light"] .form-control, body[data-theme="light"] .form-control { background: var(--cadmus-bg-surface, #FFFFFF) !important; color: var(--cadmus-text-primary, #0E1116) !important; border-color: var(--cadmus-border-default, rgba(0, 0, 0, 0.10)) !important; } /* ══════════ SIDEBAR & MENU ENHANCEMENTS (Step 3625) */ ══════════════════════════════════ /* 1. Styled Scrollbar for Sidebar to match "Premium" feel */ .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.5); 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 Position and Style */ /* Force arrow to correct position if user sees it "wrong" */ .sidebar .arrow { float: right !important; /* Keep right for standard expanding menus */ margin-top: 2px; font-size: 11px; opacity: 0.7; transition: transform 0.3s ease, color 0.3s ease; } /* Rotate arrow when active instead of content replacement (if possible, but style.css uses content) */ .sidebar li.active>a>.fa.arrow { color: var(--cadmus-gold-500) !important; /* transform: rotate(-90deg); Optional: if using an angle icon */ } /* 3. Sub-menu styling for depth */ .sidebar ul.nav li .nav-second-level { background: rgba(0, 0, 0, 0.02) !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02); } .sidebar ul.nav li .nav-second-level li a { padding-left: 55px !important; /* Better indentation */ font-size: 13px !important; } /* 4. Cadmus AI Assist Parent Icon Styling */ .sidebar ul.nav li a i.fa-wand-magic-sparkles { color: #D2A960 !important; /* Gold icon for the main AI menu */ } /* 5. Fix scroll button left/right confusion */ /* If the user means the sidebar toggle button, ensure it's visible */ #header .hide-menu { border-radius: 50%; width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; } #header .hide-menu:hover { background: rgba(0, 0, 0, 0.05); } /* ══════════ KANBAN CARD FIX (Step 3880) */ ══════════════════════════════════════════════ /* Force dark text on Kanban cards in light mode */ .kan-ban-content, .kan-ban-content p, .kan-ban-content span, .kan-ban-content div, .kan-ban-content a { color: #4b5563 !important; /* Dark gray for readability */ } /* Specific fix for the top header part of the card if it uses panel-heading or similar */ .kan-ban-content .panel-heading, .kan-ban-content .heading { color: #1f2937 !important; /* Darker gray for headers */ } /* Ensure links are visible but distinct */ .kan-ban-content a { color: #bfa05a !important; } /* Fix for any white text classes that might have been applied globally */ .kan-ban-content .text-white { color: #4b5563 !important; } /* ══════════ KANBAN CARD FIX (Step 3915) */ ══════════════════════════════════════════════ /* Force dark text on Kanban cards in light mode */ .kan-ban-content, .kan-ban-content p, .kan-ban-content span, .kan-ban-content div, .kan-ban-content a { color: #4b5563 !important; /* Dark gray for readability */ } /* Specific fix for the top header part of the card if it uses panel-heading or similar */ .kan-ban-content .panel-heading, .kan-ban-content .heading { color: #1f2937 !important; /* Darker gray for headers */ } /* Ensure links are visible but distinct */ .kan-ban-content a { color: #bfa05a !important; /* Primary Goldish color */ } /* Fix for any white text classes that might have been applied globally */ .kan-ban-content .text-white { color: #4b5563 !important; /* Override white text class inside kanban */ } /* ══════════ KANBAN COLUMN HEADER FIX (Step 3945) /* ══════════ FINAL KANBAN FIX (Step 4030) */ ═════════════════════════════════════════════ /* 1. KANBAN CARDS (Content): Force Dark Text on White Cards */ .kan-ban-content, .kan-ban-content p, .kan-ban-content span, .kan-ban-content div, .kan-ban-content a { color: #4b5563 !important; /* Dark Gray */ } }