/* ========================================================================== SENTINEL MILITARY DARK THEME Overrides Vuexy dark mode variables when data-skin="military" is active. Activated by: data-bs-theme="dark" + data-skin="military" on ========================================================================== */ /* --- Core Variables --- */ [data-bs-theme="dark"][data-skin="military"] { /* Font: tactical monospace */ --bs-font-sans-serif: "JetBrains Mono", "SFMono-Regular", menlo, monaco, consolas, monospace; /* Backgrounds: pure black / near-black */ --bs-body-bg: #080808; --bs-body-bg-rgb: 8, 8, 8; --bs-paper-bg: #111111; --bs-paper-bg-rgb: 17, 17, 17; /* Text: zinc palette */ --bs-body-color: #d4d4d8; --bs-body-color-rgb: 212, 212, 216; --bs-heading-color: #e4e4e7; --bs-emphasis-color: #fafafa; --bs-emphasis-color-rgb: 250, 250, 250; --bs-secondary-color: #a1a1aa; --bs-secondary-color-rgb: 161, 161, 170; --bs-tertiary-color: rgba(212, 212, 216, 0.5); --bs-tertiary-color-rgb: 212, 212, 216; --bs-tertiary-bg: #1a1a1a; --bs-tertiary-bg-rgb: 26, 26, 26; --bs-secondary-bg: #71717a; --bs-secondary-bg-rgb: 113, 113, 122; /* Borders: very subtle */ --bs-border-color: #1e1e1e; --bs-border-color-translucent: rgba(255, 255, 255, 0.06); /* Base color: used by color-mix() throughout Vuexy */ --bs-base-color: #d4d4d8; --bs-base-color-rgb: 212, 212, 216; /* Primary: tactical olive green */ --bs-primary: #22c55e; --bs-primary-rgb: 34, 197, 94; /* Secondary: muted zinc */ --bs-secondary: #71717a; --bs-secondary-rgb: 113, 113, 122; /* Success: brighter green */ --bs-success: #4ade80; --bs-success-rgb: 74, 222, 128; /* Info: tactical cyan */ --bs-info: #22d3ee; --bs-info-rgb: 34, 211, 238; /* Warning: amber */ --bs-warning: #f59e0b; --bs-warning-rgb: 245, 158, 11; /* Danger: red */ --bs-danger: #ef4444; --bs-danger-rgb: 239, 68, 68; /* Light / Dark */ --bs-light: #1a1a1a; --bs-light-rgb: 26, 26, 26; --bs-dark: #52525b; --bs-dark-rgb: 82, 82, 91; --bs-gray: #71717a; --bs-gray-rgb: 113, 113, 122; /* Gray scale: zinc-based (neutral, not blue-tinted) */ --bs-gray-25: #141414; --bs-gray-50: #1a1a1a; --bs-gray-75: #1e1e1e; --bs-gray-100: #262626; --bs-gray-200: #2a2a2a; --bs-gray-300: #3f3f46; --bs-gray-400: #52525b; --bs-gray-500: #71717a; --bs-gray-600: #a1a1aa; --bs-gray-700: #d4d4d8; --bs-gray-800: #e4e4e7; --bs-gray-900: #f4f4f5; /* Subtle backgrounds for badges/labels */ --bs-primary-bg-subtle: #0a2618; --bs-secondary-bg-subtle: #1a1a1e; --bs-success-bg-subtle: #0a2e18; --bs-info-bg-subtle: #0a2229; --bs-warning-bg-subtle: #2a1f0a; --bs-danger-bg-subtle: #2a0a0a; --bs-light-bg-subtle: #141414; --bs-dark-bg-subtle: #1a1a1a; /* Subtle borders */ --bs-primary-border-subtle: #166534; --bs-secondary-border-subtle: #3f3f46; --bs-success-border-subtle: #16a34a; --bs-info-border-subtle: #0e7490; --bs-warning-border-subtle: #92400e; --bs-danger-border-subtle: #991b1b; --bs-light-border-subtle: #1e1e1e; --bs-dark-border-subtle: #27272a; /* Text emphasis */ --bs-primary-text-emphasis: #86efac; --bs-secondary-text-emphasis: #a1a1aa; --bs-success-text-emphasis: #86efac; --bs-info-text-emphasis: #67e8f9; --bs-warning-text-emphasis: #fcd34d; --bs-danger-text-emphasis: #fca5a5; --bs-light-text-emphasis: #d4d4d8; --bs-dark-text-emphasis: #e4e4e7; /* Links */ --bs-link-color: #4ade80; --bs-link-hover-color: #86efac; --bs-link-color-rgb: 74, 222, 128; --bs-link-hover-color-rgb: 134, 239, 172; /* Code */ --bs-code-color: #fb923c; --bs-highlight-color: #d4d4d8; --bs-highlight-bg: #422006; /* Shadows: minimal, darker */ --bs-box-shadow: 0 0.1875rem 0.75rem 0 rgba(0, 0, 0, 0.3); --bs-box-shadow-xs: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.25); --bs-box-shadow-sm: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.28); --bs-box-shadow-lg: 0 0.25rem 1.125rem 0 rgba(0, 0, 0, 0.35); --bs-box-shadow-xl: 0 0.3125rem 1.875rem 0 rgba(0, 0, 0, 0.4); --bs-floating-component-shadow: 0 0.31rem 1.25rem 0 rgba(0, 0, 0, 0.5); /* Label tint */ --bs-bg-label-tint-amount: 90%; --bs-border-subtle-amount: 70%; /* Contrast colors */ --bs-primary-contrast: #000; --bs-success-contrast: #000; --bs-warning-contrast: #000; } /* --- Menu Variables --- */ [data-bs-theme="dark"][data-skin="military"] { --bs-menu-bg: #0c0c0c; --bs-menu-bg-rgb: 12, 12, 12; --bs-menu-color: #d4d4d8; --bs-menu-color-rgb: 212, 212, 216; --bs-menu-hover-bg: #1a1a1a; --bs-menu-hover-color: #e4e4e7; --bs-menu-sub-active-bg: #1a1a1a; --bs-menu-sub-active-color: #e4e4e7; --bs-menu-active-bg: var(--bs-primary); --bs-menu-active-color: #000; --bs-menu-horizontal-active-bg: #0a2618; --bs-menu-box-shadow: none; --bs-menu-divider-color: transparent; /* Navbar */ --bs-navbar-search-shadow: 0 0.25rem 0.5rem -0.25rem rgba(0, 0, 0, 0.5); } /* --- Navbar detached --- */ [data-bs-theme="dark"][data-skin="military"] .layout-navbar.navbar-detached.bg-navbar-theme { background-color: rgba(17, 17, 17, 0.92) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* --- Footer --- */ [data-bs-theme="dark"][data-skin="military"] .footer.bg-footer-theme { color: #71717a; } /* --- Typography: letter spacing for tactical readability --- */ [data-bs-theme="dark"][data-skin="military"] body { letter-spacing: 0.02em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [data-bs-theme="dark"][data-skin="military"] h1, [data-bs-theme="dark"][data-skin="military"] h2, [data-bs-theme="dark"][data-skin="military"] h3, [data-bs-theme="dark"][data-skin="military"] h4, [data-bs-theme="dark"][data-skin="military"] h5, [data-bs-theme="dark"][data-skin="military"] h6, [data-bs-theme="dark"][data-skin="military"] .h1, [data-bs-theme="dark"][data-skin="military"] .h2, [data-bs-theme="dark"][data-skin="military"] .h3, [data-bs-theme="dark"][data-skin="military"] .h4, [data-bs-theme="dark"][data-skin="military"] .h5, [data-bs-theme="dark"][data-skin="military"] .h6 { letter-spacing: 0.04em; } /* --- App Brand in sidebar --- */ [data-bs-theme="dark"][data-skin="military"] .app-brand-text { color: #22c55e !important; font-family: "JetBrains Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; } [data-bs-theme="dark"][data-skin="military"] .app-brand-logo svg rect { fill: #22c55e; } /* --- Scrollbar --- */ [data-bs-theme="dark"][data-skin="military"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-bs-theme="dark"][data-skin="military"] ::-webkit-scrollbar-track { background: #080808; } [data-bs-theme="dark"][data-skin="military"] ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; } [data-bs-theme="dark"][data-skin="military"] ::-webkit-scrollbar-thumb:hover { background: #3f3f46; } /* --- Form controls --- */ [data-bs-theme="dark"][data-skin="military"] .form-control, [data-bs-theme="dark"][data-skin="military"] .form-select { border-color: #2a2a2a; background-color: #0c0c0c; } [data-bs-theme="dark"][data-skin="military"] .form-control:focus, [data-bs-theme="dark"][data-skin="military"] .form-select:focus { border-color: #22c55e; box-shadow: 0 0 0 0.15rem rgba(34, 197, 94, 0.2); } /* --- SweetAlert2 --- */ [data-bs-theme="dark"][data-skin="military"] .swal2-popup { background: #111111; color: #d4d4d8; } [data-bs-theme="dark"][data-skin="military"] .swal2-title { color: #e4e4e7; } [data-bs-theme="dark"][data-skin="military"] .swal2-html-container { color: #a1a1aa; } /* --- Notyf --- */ [data-bs-theme="dark"][data-skin="military"] .notyf, [data-bs-theme="dark"][data-skin="military"] .notyf__message { font-family: "JetBrains Mono", monospace !important; } /* --- Select2 --- */ [data-bs-theme="dark"][data-skin="military"] .select2-container--default .select2-selection--single, [data-bs-theme="dark"][data-skin="military"] .select2-container--default .select2-selection--multiple { background-color: #0c0c0c; border-color: #2a2a2a; } [data-bs-theme="dark"][data-skin="military"] .select2-container--default .select2-dropdown { background-color: #111111; border-color: #2a2a2a; } [data-bs-theme="dark"][data-skin="military"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #22c55e; color: #000; } /* --- Flatpickr --- */ [data-bs-theme="dark"][data-skin="military"] .flatpickr-calendar { background: #111111; border-color: #2a2a2a; } /* --- DataTables --- */ [data-bs-theme="dark"][data-skin="military"] .dataTables_wrapper .dataTables_length, [data-bs-theme="dark"][data-skin="military"] .dataTables_wrapper .dataTables_filter, [data-bs-theme="dark"][data-skin="military"] .dataTables_wrapper .dataTables_info, [data-bs-theme="dark"][data-skin="military"] .dataTables_wrapper .dataTables_paginate { color: #a1a1aa; } /* --- Content backdrop --- */ [data-bs-theme="dark"][data-skin="military"] .content-backdrop { background-color: rgba(0, 0, 0, 0.5); } /* --- App overlay --- */ [data-bs-theme="dark"][data-skin="military"] .app-overlay.show { background-color: rgba(0, 0, 0, 0.6); } /* --- ApexCharts --- */ [data-bs-theme="dark"][data-skin="military"] .apexcharts-theme-dark { --bs-primary: #22c55e; --bs-body-color: #d4d4d8; --bs-heading-color: #e4e4e7; --bs-paper-bg: #111111; --bs-border-color: #1e1e1e; }