/* ================================================================
   Matrix Mode — Green Phosphor CRT Theme
   Layered on top of Tabler dark theme via [data-cfm-theme="matrix"]
   ================================================================ */

/* ── Root variable overrides ─────────────────────────────────────── */
[data-cfm-theme="matrix"] {
    --tblr-body-bg: #0a0a0a !important;
    --tblr-body-color: #33ff33 !important;
    --tblr-card-bg: #0d1a0d !important;
    --tblr-card-border-color: #1a3a1a !important;
    --tblr-border-color: #1a3a1a !important;
    --tblr-bg-surface: #0a140a !important;
    --tblr-bg-surface-secondary: #0a140a !important;
    --tblr-primary: #00cc00 !important;
    --tblr-primary-rgb: 0, 204, 0 !important;
    --tblr-link-color: #33ff33 !important;
    --tblr-link-hover-color: #66ff66 !important;
    --tblr-muted: #2a8a2a !important;
    --tblr-secondary: #2a8a2a !important;
    --tblr-secondary-rgb: 42, 138, 42 !important;
    --tblr-code-color: #66ff66 !important;
    --tblr-active-bg: rgba(0, 255, 0, 0.08) !important;
    --tblr-btn-color: #33ff33 !important;
    color-scheme: dark;
}

/* ── Body ────────────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] body {
    background-color: #0a0a0a !important;
    color: #33ff33 !important;
}

/* ── Page titles ─────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .page-title,
[data-cfm-theme="matrix"] h1,
[data-cfm-theme="matrix"] h2,
[data-cfm-theme="matrix"] h3,
[data-cfm-theme="matrix"] h4 {
    color: #00ff00 !important;
}

/* ── Cards ───────────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .card {
    background-color: #0d1a0d !important;
    border-color: #1a3a1a !important;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.05) !important;
    position: relative;
}
[data-cfm-theme="matrix"] .card-header {
    background-color: transparent !important;
    border-color: #1a3a1a !important;
}
[data-cfm-theme="matrix"] .card-footer {
    background-color: transparent !important;
    border-color: #1a3a1a !important;
}
[data-cfm-theme="matrix"] .card-title {
    color: #00ff00 !important;
}

/* ── CRT Scanlines on cards ──────────────────────────────────────── */
[data-cfm-theme="matrix"] .card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.05) 2px,
        rgba(0, 0, 0, 0.05) 4px
    );
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* ── Tables ──────────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .table {
    --tblr-table-bg: transparent !important;
    --tblr-table-border-color: #1a3a1a !important;
    --tblr-table-striped-bg: rgba(0, 255, 0, 0.03) !important;
    color: #33ff33 !important;
}
[data-cfm-theme="matrix"] .table thead th {
    color: #00cc00 !important;
    border-color: #1a3a1a !important;
    background-color: transparent !important;
}
[data-cfm-theme="matrix"] .table td {
    border-color: #1a3a1a !important;
}
[data-cfm-theme="matrix"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --tblr-table-bg-type: rgba(0, 255, 0, 0.03) !important;
}

/* ── Form controls ───────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .form-control,
[data-cfm-theme="matrix"] .form-select {
    background-color: #0a140a !important;
    border-color: #1a3a1a !important;
    color: #33ff33 !important;
}
[data-cfm-theme="matrix"] .form-control:focus,
[data-cfm-theme="matrix"] .form-select:focus {
    border-color: #00cc00 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 204, 0, 0.15) !important;
}
[data-cfm-theme="matrix"] .form-control::placeholder {
    color: #1a6a1a !important;
}
[data-cfm-theme="matrix"] .form-label {
    color: #33ff33 !important;
}
[data-cfm-theme="matrix"] .form-hint {
    color: #2a8a2a !important;
}
[data-cfm-theme="matrix"] .input-group-text {
    background-color: #0a140a !important;
    border-color: #1a3a1a !important;
    color: #2a8a2a !important;
}

/* ── Toggle switches (override app defaults) ─────────────────────── */
[data-cfm-theme="matrix"] .form-switch .form-check-input {
    background-color: #1a3a1a !important;
    border-color: #2a5a2a !important;
}
[data-cfm-theme="matrix"] .form-switch .form-check-input:checked {
    background-color: #00aa00 !important;
    border-color: #00cc00 !important;
}
[data-cfm-theme="matrix"] .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 204, 0, 0.15) !important;
    border-color: #00cc00 !important;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .btn-primary {
    background-color: #00aa00 !important;
    border-color: #00aa00 !important;
    color: #000 !important;
}
[data-cfm-theme="matrix"] .btn-primary:hover {
    background-color: #00cc00 !important;
    border-color: #00cc00 !important;
    color: #000 !important;
}
[data-cfm-theme="matrix"] .btn-outline-primary {
    border-color: #00cc00 !important;
    color: #00cc00 !important;
}
[data-cfm-theme="matrix"] .btn-outline-primary:hover {
    background-color: #00cc00 !important;
    color: #000 !important;
}
[data-cfm-theme="matrix"] .btn-outline-secondary {
    border-color: #2a5a2a !important;
    color: #33ff33 !important;
}
[data-cfm-theme="matrix"] .btn-outline-secondary:hover {
    background-color: rgba(0, 255, 0, 0.1) !important;
    color: #33ff33 !important;
}
[data-cfm-theme="matrix"] .btn-ghost-secondary {
    color: #33ff33 !important;
}
[data-cfm-theme="matrix"] .btn-ghost-secondary:hover {
    background-color: rgba(0, 255, 0, 0.08) !important;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .navbar-vertical {
    background-color: #050a05 !important;
    border-right-color: #1a3a1a !important;
}
[data-cfm-theme="matrix"] .navbar-vertical .nav-link {
    color: #2a8a2a !important;
}
[data-cfm-theme="matrix"] .navbar-vertical .nav-link:hover {
    color: #33ff33 !important;
    background-color: rgba(0, 255, 0, 0.08) !important;
}
[data-cfm-theme="matrix"] .navbar-vertical .nav-link.active,
[data-cfm-theme="matrix"] .navbar-vertical .nav-item.active > .nav-link {
    color: #33ff33 !important;
    background-color: rgba(0, 255, 0, 0.1) !important;
}
[data-cfm-theme="matrix"] .navbar-vertical .nav-link-icon {
    color: #2a8a2a !important;
}
[data-cfm-theme="matrix"] .navbar-vertical .nav-link:hover .nav-link-icon,
[data-cfm-theme="matrix"] .navbar-vertical .nav-link.active .nav-link-icon {
    color: #33ff33 !important;
}
[data-cfm-theme="matrix"] .navbar-vertical .text-uppercase {
    color: #1a6a1a !important;
}

/* Sidebar scrollbar */
[data-cfm-theme="matrix"] .navbar-vertical {
    scrollbar-color: #1a3a1a transparent !important;
}
[data-cfm-theme="matrix"] .navbar-vertical::-webkit-scrollbar-thumb {
    background: #1a3a1a !important;
}

/* Sidebar edge handle */
[data-cfm-theme="matrix"] .sidebar-edge-handle {
    background: #050a05 !important;
    color: #2a8a2a !important;
}
[data-cfm-theme="matrix"] .sidebar-edge-handle:hover {
    color: #33ff33 !important;
}

/* Sidebar filter input */
[data-cfm-theme="matrix"] #sidebar-filter {
    background-color: #0a140a !important;
    border-color: #1a3a1a !important;
    color: #33ff33 !important;
}

/* ── Topbar ──────────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .app-topbar {
    background: linear-gradient(90deg, #001a00, #003a00) !important;
    box-shadow: 0 1px 6px rgba(0, 255, 0, 0.1) !important;
}

/* ── Dropdown menus ──────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .dropdown-menu {
    background-color: #0d1a0d !important;
    border-color: #1a3a1a !important;
}
[data-cfm-theme="matrix"] .dropdown-item {
    color: #33ff33 !important;
}
[data-cfm-theme="matrix"] .dropdown-item:hover,
[data-cfm-theme="matrix"] .dropdown-item:focus {
    background-color: rgba(0, 255, 0, 0.1) !important;
    color: #33ff33 !important;
}
[data-cfm-theme="matrix"] .dropdown-divider {
    border-color: #1a3a1a !important;
}

/* ── Badges ──────────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .badge.bg-primary,
[data-cfm-theme="matrix"] .badge.bg-blue,
[data-cfm-theme="matrix"] .badge.bg-azure,
[data-cfm-theme="matrix"] .badge.bg-azure-lt {
    background-color: rgba(0, 204, 0, 0.15) !important;
    color: #33ff33 !important;
}
[data-cfm-theme="matrix"] .badge.bg-success,
[data-cfm-theme="matrix"] .badge.bg-green,
[data-cfm-theme="matrix"] .badge.bg-green-lt {
    background-color: rgba(0, 204, 0, 0.2) !important;
    color: #33ff33 !important;
}
[data-cfm-theme="matrix"] .badge.bg-danger,
[data-cfm-theme="matrix"] .badge.bg-red,
[data-cfm-theme="matrix"] .badge.bg-red-lt {
    background-color: rgba(255, 50, 50, 0.2) !important;
    color: #ff5555 !important;
}
[data-cfm-theme="matrix"] .badge.bg-warning,
[data-cfm-theme="matrix"] .badge.bg-yellow,
[data-cfm-theme="matrix"] .badge.bg-yellow-lt {
    background-color: rgba(200, 200, 0, 0.2) !important;
    color: #cccc33 !important;
}
[data-cfm-theme="matrix"] .badge.bg-secondary,
[data-cfm-theme="matrix"] .badge.bg-secondary-lt {
    background-color: rgba(0, 255, 0, 0.08) !important;
    color: #2a8a2a !important;
}

/* ── Alerts ──────────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .alert-success {
    background-color: rgba(0, 204, 0, 0.1) !important;
    border-color: #1a3a1a !important;
    color: #33ff33 !important;
}
[data-cfm-theme="matrix"] .alert-danger {
    background-color: rgba(200, 50, 50, 0.15) !important;
    border-color: #3a1a1a !important;
    color: #ff5555 !important;
}
[data-cfm-theme="matrix"] .alert-warning {
    background-color: rgba(200, 200, 0, 0.1) !important;
    border-color: #3a3a1a !important;
    color: #cccc33 !important;
}
[data-cfm-theme="matrix"] .alert-info {
    background-color: rgba(0, 204, 0, 0.08) !important;
    border-color: #1a3a1a !important;
    color: #33ff33 !important;
}

/* ── Modals ──────────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .modal-content {
    background-color: #0d1a0d !important;
    border-color: #1a3a1a !important;
}
[data-cfm-theme="matrix"] .modal-header {
    border-color: #1a3a1a !important;
}
[data-cfm-theme="matrix"] .modal-footer {
    border-color: #1a3a1a !important;
}
[data-cfm-theme="matrix"] .modal-title {
    color: #00ff00 !important;
}
[data-cfm-theme="matrix"] .btn-close {
    filter: invert(1) hue-rotate(90deg) !important;
}

/* ── Avatars ─────────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .avatar {
    background-color: rgba(0, 204, 0, 0.15) !important;
    color: #33ff33 !important;
}

/* ── Code / Pre ──────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] code {
    color: #66ff66 !important;
}
[data-cfm-theme="matrix"] pre {
    background-color: #050a05 !important;
    border: 1px solid #1a3a1a !important;
    color: #33ff33 !important;
}

/* ── Links (not buttons/nav) ─────────────────────────────────────── */
[data-cfm-theme="matrix"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.app-topbar-brand):not(.app-topbar-user-link):not(.app-topbar-icon) {
    color: #33ff33 !important;
}
[data-cfm-theme="matrix"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.app-topbar-brand):not(.app-topbar-user-link):not(.app-topbar-icon):hover {
    color: #66ff66 !important;
}

/* ── Nav tabs ────────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .nav-tabs .nav-link {
    color: #2a8a2a !important;
}
[data-cfm-theme="matrix"] .nav-tabs .nav-link.active {
    color: #33ff33 !important;
    background-color: #0d1a0d !important;
    border-color: #1a3a1a !important;
}
[data-cfm-theme="matrix"] .nav-tabs {
    border-color: #1a3a1a !important;
}

/* ── Footer ──────────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .app-footer {
    border-top-color: #1a3a1a !important;
    color: #2a8a2a !important;
    background-color: #0a0a0a !important;
}
[data-cfm-theme="matrix"] .app-footer a {
    color: #33ff33 !important;
}

/* ── Scrollbar (WebKit) ──────────────────────────────────────────── */
[data-cfm-theme="matrix"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
[data-cfm-theme="matrix"] ::-webkit-scrollbar-track {
    background: #0a0a0a;
}
[data-cfm-theme="matrix"] ::-webkit-scrollbar-thumb {
    background: #1a3a1a;
    border-radius: 4px;
}
[data-cfm-theme="matrix"] ::-webkit-scrollbar-thumb:hover {
    background: #2a5a2a;
}

/* Firefox scrollbar */
[data-cfm-theme="matrix"] * {
    scrollbar-width: thin;
    scrollbar-color: #1a3a1a #0a0a0a;
}

/* ── Text selection ──────────────────────────────────────────────── */
[data-cfm-theme="matrix"] ::selection {
    background: #00aa00 !important;
    color: #000 !important;
}

/* ── Charts (hue-rotate to green) ────────────────────────────────── */
[data-cfm-theme="matrix"] canvas {
    filter: hue-rotate(90deg) saturate(1.5);
}

/* ── Breadcrumb ──────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .breadcrumb-item,
[data-cfm-theme="matrix"] .breadcrumb-item + .breadcrumb-item::before {
    color: #2a8a2a !important;
}
[data-cfm-theme="matrix"] .breadcrumb-item.active {
    color: #33ff33 !important;
}

/* ── Pagination ──────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .page-link {
    background-color: #0d1a0d !important;
    border-color: #1a3a1a !important;
    color: #33ff33 !important;
}
[data-cfm-theme="matrix"] .page-link:hover {
    background-color: rgba(0, 255, 0, 0.1) !important;
}
[data-cfm-theme="matrix"] .page-item.active .page-link {
    background-color: #00aa00 !important;
    border-color: #00aa00 !important;
    color: #000 !important;
}
[data-cfm-theme="matrix"] .page-item.disabled .page-link {
    background-color: #050a05 !important;
    color: #1a3a1a !important;
}

/* ── Toast ────────────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .toast {
    background-color: #0d1a0d !important;
    border-color: #1a3a1a !important;
    color: #33ff33 !important;
}

/* ── List group ──────────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .list-group-item {
    background-color: #0d1a0d !important;
    border-color: #1a3a1a !important;
    color: #33ff33 !important;
}

/* ── Progress bars ───────────────────────────────────────────────── */
[data-cfm-theme="matrix"] .progress {
    background-color: #0a140a !important;
}
[data-cfm-theme="matrix"] .progress-bar {
    background-color: #00aa00 !important;
}

/* ── Ribbon / Status-dot ─────────────────────────────────────────── */
[data-cfm-theme="matrix"] .status-dot {
    border-color: #0a0a0a !important;
}

/* ── Muted / secondary text ──────────────────────────────────────── */
[data-cfm-theme="matrix"] .text-muted,
[data-cfm-theme="matrix"] .text-secondary {
    color: #2a8a2a !important;
}

/* ── HR / dividers ───────────────────────────────────────────────── */
[data-cfm-theme="matrix"] hr {
    border-color: #1a3a1a !important;
    opacity: 1;
}

/* ── Offcanvas (mobile sidebar) ──────────────────────────────────── */
[data-cfm-theme="matrix"] .offcanvas {
    background-color: #050a05 !important;
}

/* ── Active nav indicator ────────────────────────────────────────── */
[data-cfm-theme="matrix"] .navbar-expand-lg .nav-item.active:after {
    border-color: #00cc00 !important;
}