/* ========================================================================= MAXXOPS — design tokens & shared primitives (single source of truth) Loaded last so it can map Bootstrap vars and align 3rd-party (kgrid) styles. ========================================================================= */ :root { /* Brand — one cohesive identity */ --mx-brand-900: #0f1d33; --mx-brand-800: #16294a; --mx-primary: #2563eb; --mx-primary-600:#1d4ed8; --mx-primary-050:#eaf1ff; /* Neutrals (slate) — tuned for clearer layer separation */ --mx-ink: #0f172a; --mx-ink-soft: #1e293b; --mx-muted: #5b6b80; --mx-line: #c5d0de; --mx-line-soft:#e2e8f0; --mx-header: #eef2f7; /* card / table section bands */ --mx-surface: #ffffff; --mx-canvas: #e4eaf2; --mx-row-alt: #f6f8fb; /* subtle zebra in tables */ /* Status */ --mx-success:#16a34a; --mx-success-bg:#e7f6ec; --mx-warning:#d97706; --mx-warning-bg:#fdf0db; --mx-danger: #dc2626; --mx-danger-bg:#fbe9e9; --mx-info: #0891b2; --mx-info-bg:#e2f5f9; /* Shape & depth */ --mx-radius-sm: 8px; --mx-radius: 12px; --mx-shadow-sm: 0 1px 3px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06); --mx-shadow: 0 4px 14px rgba(15,23,42,.10); --mx-shadow-lg: 0 12px 32px rgba(15,23,42,.16); --mx-nav-h: 56px; /* Density — Comfortable by default; switchable via [data-density] on */ --mx-row-y: 11px; --mx-cell-x: 12px; --mx-card-pad: 18px; --mx-table-font: .875rem; /* Map onto Bootstrap so .btn-primary / .text-primary / .form-control inherit the brand */ --bs-primary: var(--mx-primary); --bs-primary-rgb: 37,99,235; --bs-link-color: var(--mx-primary); --bs-link-color-rgb: 37,99,235; --bs-link-hover-color: var(--mx-primary-600); --bs-border-color: var(--mx-line); --bs-body-bg: var(--mx-canvas); --bs-body-color: var(--mx-ink-soft); --bs-card-bg: var(--mx-surface); } :root[data-density="compact"] { --mx-row-y: 6px; --mx-cell-x: 9px; --mx-card-pad: 13px; --mx-table-font: .82rem; } :root[data-density="spacious"] { --mx-row-y: 16px; --mx-cell-x: 16px; --mx-card-pad: 24px; --mx-table-font: .9rem; } /* ---------- Dark mode (Bootstrap data-bs-theme + MAXXOPS tokens) ---------- */ [data-bs-theme="dark"] { color-scheme: dark; --mx-brand-900: #0a1220; --mx-brand-800: #1e3a5f; --mx-primary: #3b82f6; --mx-primary-600:#60a5fa; --mx-primary-050:rgba(59, 130, 246, .18); --mx-ink: #f8fafc; --mx-ink-soft: #e2e8f0; --mx-muted: #a8b4c4; --mx-line: #4a5d75; --mx-line-soft:#334155; --mx-header: #2a3548; --mx-surface: #1c2838; --mx-canvas: #0a1018; --mx-row-alt: rgba(255,255,255,.04); --mx-success-bg:rgba(22, 163, 74, .18); --mx-warning-bg:rgba(217, 119, 6, .18); --mx-danger-bg: rgba(220, 38, 38, .18); --mx-info-bg: rgba(8, 145, 178, .18); --mx-shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25); --mx-shadow: 0 4px 16px rgba(0,0,0,.4); --mx-shadow-lg: 0 12px 36px rgba(0,0,0,.55); --bs-primary: var(--mx-primary); --bs-primary-rgb: 59, 130, 246; --bs-link-color: var(--mx-primary); --bs-link-color-rgb: 59, 130, 246; --bs-link-hover-color: var(--mx-primary-600); --bs-border-color: var(--mx-line); --bs-body-bg: var(--mx-canvas); --bs-body-color: var(--mx-ink-soft); --bs-secondary-bg: var(--mx-surface); --bs-tertiary-bg: #0f172a; --bs-emphasis-color: var(--mx-ink); --bs-card-bg: var(--mx-surface); } /* ---------- Base ---------- */ body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; background-color: var(--mx-canvas) !important; color: var(--mx-ink-soft); -webkit-font-smoothing: antialiased; } .btn-primary { --bs-btn-bg: var(--mx-primary); --bs-btn-border-color: var(--mx-primary); --bs-btn-hover-bg: var(--mx-primary-600); --bs-btn-hover-border-color: var(--mx-primary-600); --bs-btn-active-bg: var(--mx-primary-600); } /* Cards — elevated surface on canvas background */ .card { background-color: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: var(--mx-radius); box-shadow: var(--mx-shadow); } .card > .card-header { background-color: var(--mx-header); border-bottom: 1px solid var(--mx-line); color: var(--mx-ink-soft); font-weight: 700; font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; } .card > .card-body { background-color: var(--mx-surface); } /* Navbar — crisp separation from page canvas */ .mx-navbar { background: var(--mx-surface) !important; border-bottom: 1px solid var(--mx-line) !important; box-shadow: var(--mx-shadow-sm); } /* Page shells — horizontal inset (layout_vertical, layout_with_details_panel) */ .page-nav > .container, .page-content > .container { max-width: 1480px; } .page-content > .container { padding-bottom: 8px; } /* Pill-shaped, consistent badges (colors stay in states.css) */ .badge { font-weight: 600; border-radius: 999px; padding: .34em .7em; letter-spacing: .01em; } /* Form controls — visible borders on surfaces */ .form-control, .form-select { border-color: var(--mx-line); background-color: var(--mx-surface); } .form-control:focus, .form-select:focus { border-color: var(--mx-primary); box-shadow: 0 0 0 3px var(--mx-primary-050); } /* Breadcrumbs / page titles — stronger hierarchy */ .breadcrumb { --bs-breadcrumb-item-active-color: var(--mx-ink); } .breadcrumb-item.active { color: var(--mx-ink); font-weight: 800; } /* ========================================================================= kgrid data grid — align with the brand (header colour, hover, soft borders) ========================================================================= */ .custom-table .thead-labels th { background-color: var(--mx-brand-800); } .custom-table .thead-filters th { background-color: var(--mx-header); border-bottom: 1px solid var(--mx-line); } .custom-table { font-size: var(--mx-table-font); } .custom-table th, .custom-table td { padding: var(--mx-row-y) var(--mx-cell-x); } .custom-table > tbody > tr > td { border-bottom: 1px solid var(--mx-line-soft); } .custom-table > tbody > tr:nth-child(even) > td { background-color: var(--mx-row-alt); } @media (min-width: 769px) { .custom-table > tbody > tr:hover > td { background-color: var(--mx-primary-050) !important; } } @media (max-width: 768px) { [data-bs-theme="dark"] .custom-table-shell tr { background: var(--mx-surface); border-color: var(--mx-line); } [data-bs-theme="dark"] .custom-table-shell td::before { color: var(--mx-muted); border-bottom-color: var(--mx-line); } } /* ========================================================================= Shared primitives (opt-in: use when converting pages to the new look) ========================================================================= */ .mx-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; } .mx-crumbs { font-size:.78rem; color:var(--mx-muted); margin-bottom:4px; } .mx-crumbs a { color:var(--mx-muted); } .mx-crumbs a:hover { color:var(--mx-primary); } .mx-title { font-size:1.4rem; font-weight:800; color:var(--mx-ink); margin:0; letter-spacing:-.01em; } .mx-subtitle { font-size:.86rem; color:var(--mx-muted); margin:2px 0 0; } .mx-card { background:var(--mx-surface); border:1px solid var(--mx-line); border-radius:var(--mx-radius); box-shadow:var(--mx-shadow); } .mx-card-head { padding:14px 18px; border-bottom:1px solid var(--mx-line); background:var(--mx-header); display:flex; align-items:center; justify-content:space-between; gap:12px; } .mx-card-head h3 { font-size:.95rem; font-weight:700; color:var(--mx-ink); margin:0; } .mx-card-body { padding:var(--mx-card-pad); } .mx-stat { background:var(--mx-surface); border:1px solid var(--mx-line); border-radius:var(--mx-radius); padding:var(--mx-card-pad); box-shadow:var(--mx-shadow-sm); position:relative; overflow:hidden; height:100%; } .mx-stat::after { content:""; position:absolute; inset:0 0 auto auto; width:120px; height:120px; background:radial-gradient(circle at top right, var(--mx-primary-050), transparent 70%); } .mx-stat .ic { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:1.05rem; margin-bottom:12px; position:relative; } .mx-stat .label { font-size:.76rem; color:var(--mx-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; } .mx-stat .value { font-size:1.7rem; font-weight:800; color:var(--mx-ink); line-height:1.1; margin:2px 0 6px; letter-spacing:-.02em; } .mx-trend { font-size:.78rem; font-weight:600; display:inline-flex; align-items:center; gap:4px; } .mx-trend.up { color:var(--mx-success); } .mx-trend.down { color:var(--mx-danger); } .mx-trend .muted { color:var(--mx-muted); font-weight:500; } .ic-blue { background:var(--mx-primary-050); color:var(--mx-primary); } .ic-green { background:var(--mx-success-bg); color:var(--mx-success); } .ic-amber { background:var(--mx-warning-bg); color:var(--mx-warning); } .ic-red { background:var(--mx-danger-bg); color:var(--mx-danger); } .mx-pill { display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:600; padding:3px 10px; border-radius:999px; line-height:1.5; white-space:nowrap; } .mx-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }