/* ============================================================ admin-mica.css Dark Mica design system for the v2 admin area. Ported from the IAGD SuperApp Frontend (globals.css + admin/*). Load order: bootstrap.min.css → admin-mica.css → (per-page CSS). Requires data-bs-theme="dark" on . ============================================================ */ /* ---------- Inter (self-hosted, 4 cuts) -------------------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.ttf") format("truetype"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.ttf") format("truetype"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.ttf") format("truetype"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-700.ttf") format("truetype"); } /* ---------- Tokens ----------------------------------------- */ :root { --mica-base: #1a1340; --mica-base-alt: #14102f; --mica-surface: #100c26; --mica-layer: rgba(255, 255, 255, 0.04); --mica-layer-soft: rgba(255, 255, 255, 0.06); --mica-layer-alt: rgba(255, 255, 255, 0.08); --mica-layer-stroke: rgba(255, 255, 255, 0.08); --mica-layer-stroke-strong: rgba(255, 255, 255, 0.12); --mica-layer-stroke-accent: rgba(124, 58, 237, 0.32); --mica-text: #ffffff; --mica-dim-1: rgba(220, 210, 255, 0.75); --mica-dim-2: rgba(220, 210, 255, 0.5); --mica-accent: #7c3aed; --mica-accent-hover: #8b4af2; --mica-accent-soft: rgba(124, 58, 237, 0.18); --mica-accent-deep: #5b21b6; --mica-accent-text: #c4a8ff; --mica-gold: #e6c97a; --mica-gold-deep: #b8995a; --mica-danger: #f87171; --mica-danger-soft: rgba(248, 113, 113, 0.12); --mica-warn: #fbbf24; --mica-ok: #34d399; --mica-ok-soft: rgba(52, 211, 153, 0.12); --mica-radius: 8px; --mica-radius-card: 12px; --mica-radius-pill: 999px; --mica-edge: inset 0 1px 0 rgba(255, 255, 255, 0.05); --mica-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.45); --mica-font-sans: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --mica-font-mono: "Cascadia Code", Consolas, "Courier New", monospace; --mica-ease: cubic-bezier(0.1, 0.9, 0.2, 1); --mica-ease-out: cubic-bezier(0.33, 0, 0.1, 1); --mica-sidebar-w: 260px; --mica-header-h: 56px; } /* ---------- Body chrome (Mica-honest base) ----------------- */ html, body { background: var(--mica-base); color: var(--mica-text); font-family: var(--mica-font-sans); min-height: 100vh; min-height: 100dvh; margin: 0; padding: 0; } body#admin-page { position: relative; overflow-x: hidden; } /* Static wallpaper tint — sampled once, no animation. */ body#admin-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(80% 60% at 15% 0%, rgba(124, 58, 237, 0.18), transparent 70%), radial-gradient(60% 50% at 100% 100%, rgba(34, 211, 238, 0.06), transparent 70%); } /* Static noise overlay — Mica-honest film grain. */ body#admin-page::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: url("../textures/noise.png"); background-repeat: repeat; background-size: 128px 128px; opacity: 0.04; } /* Page content stacks above body::after via the wrapper. */ body#admin-page > .wrapper, body#admin-page > .wrapper * { position: relative; } body#admin-page > .wrapper { z-index: 2; } @media (prefers-reduced-motion: reduce) { body#admin-page::after { opacity: 0.02; } } /* ---------- Scrollbars ------------------------------------- */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } /* ---------- Layout shell ----------------------------------- */ body#admin-page .wrapper { min-height: 100vh; min-height: 100dvh; } body#admin-page .main-content { flex: 1 1 auto; min-width: 0; margin-left: var(--mica-sidebar-w); display: flex; flex-direction: column; } @media (max-width: 991.98px) { body#admin-page .main-content { margin-left: 0; } } /* ---------- Floating sidebar ------------------------------- */ .floating-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--mica-sidebar-w); z-index: 40; pointer-events: auto; } .floating-sidebar .sidebar { height: 100%; overflow-y: auto; background-color: var(--mica-surface); background-image: linear-gradient(rgba(16, 12, 38, 0.92), rgba(16, 12, 38, 0.92)), url("../textures/noise.png"); background-repeat: no-repeat, repeat; background-size: auto, 128px 128px; /* Keep the dimming gradient under the border, or the raw grain shows through the 1px stroke as a bright line. */ background-origin: border-box; border-right: 1px solid var(--mica-layer-stroke); box-shadow: var(--mica-edge); color: var(--mica-text); padding-bottom: 24px; } .floating-sidebar .close-sidebar { color: var(--mica-dim-1); cursor: pointer; padding: 6px; border-radius: var(--mica-radius); transition: background-color 120ms var(--mica-ease); } .floating-sidebar .close-sidebar:hover { background-color: var(--mica-layer); color: var(--mica-text); } .floating-sidebar .close-sidebar .size-6 { width: 22px; height: 22px; } .floating-sidebar .sidebar-brand { padding: 4px 20px 18px; } .floating-sidebar .sidebar-brand img { max-width: 140px; height: auto; opacity: 0.95; filter: drop-shadow(0 2px 12px rgba(124, 58, 237, 0.35)); } /* Section eyebrow */ .sidebar-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--mica-accent-text); padding: 18px 16px 6px; opacity: 0.85; } /* Override Bootstrap nav-pills look inside sidebar */ .floating-sidebar .nav.nav-pills { padding: 0 8px; gap: 1px; } .floating-sidebar .nav-link { color: var(--mica-dim-1); border-radius: var(--mica-radius); padding: 9px 10px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 10px; transition: background-color 120ms var(--mica-ease), color 120ms var(--mica-ease); position: relative; } .floating-sidebar .nav-link.link-dark { color: var(--mica-dim-1); } .floating-sidebar .nav-link:hover { background-color: var(--mica-layer); color: var(--mica-text); } .floating-sidebar .nav-link.active, .floating-sidebar .nav-link[aria-current="page"] { background-color: var(--mica-accent-soft); color: var(--mica-text); box-shadow: var(--mica-edge); } .floating-sidebar .nav-link.active::before, .floating-sidebar .nav-link[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background-color: var(--mica-accent); } /* Icon wrappers (preserve existing svg-icon classes) */ .floating-sidebar .svg-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: currentColor; flex-shrink: 0; } .floating-sidebar .svg-icon .size-6, .floating-sidebar .svg-icon svg { width: 18px; height: 18px; } .floating-sidebar .svg-icon-xs { width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; color: currentColor; } .floating-sidebar .svg-icon-xs svg, .floating-sidebar .svg-icon-xs .size-6 { width: 12px; height: 12px; } /* Collapsible groups */ .floating-sidebar .collapse .nav .nav-link { font-size: 12.5px; padding: 7px 10px 7px 8px; color: var(--mica-dim-2); } .floating-sidebar .collapse .nav .nav-link:hover { color: var(--mica-text); } /* Caret hint for groups (data-bs-toggle="collapse") */ .floating-sidebar .nav-link[data-bs-toggle="collapse"]::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg) translateX(-2px); transition: transform 160ms var(--mica-ease); opacity: 0.6; } .floating-sidebar .nav-link[data-bs-toggle="collapse"]:not(.collapsed)::after { transform: rotate(45deg) translateX(-2px); } /* Mobile slide-out behaviour kept compatible with toggle-sidebar JS */ @media (max-width: 991.98px) { .floating-sidebar { transform: translateX(-100%); transition: transform 220ms var(--mica-ease); } .floating-sidebar.is-open, body.sidebar-open .floating-sidebar { transform: translateX(0); } } /* ---------- Header navigation ------------------------------ */ .header-nav { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--mica-layer-stroke); background-color: rgba(26, 19, 64, 0.65); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } .header-nav .hnav { height: var(--mica-header-h); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; } .header-nav .header-title { font-size: 13px; font-weight: 600; color: var(--mica-text); letter-spacing: 0.2px; } .header-nav .header-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--mica-accent-text); } .header-nav .header-actions { display: flex; align-items: center; gap: 4px; } .header-nav button.toggle-sidebar, .header-nav .btn-svg { background: transparent; border: 0; width: 36px; height: 36px; border-radius: 50%; color: var(--mica-dim-1); display: inline-flex; align-items: center; justify-content: center; transition: background-color 120ms var(--mica-ease), color 120ms var(--mica-ease), transform 80ms var(--mica-ease); cursor: pointer; } .header-nav button.toggle-sidebar:hover, .header-nav .btn-svg:hover { background-color: var(--mica-layer); color: var(--mica-text); } .header-nav button:active, .header-nav .btn-svg:active { transform: scale(0.95); } .header-nav .svg-icon, .header-nav .svg-icon svg, .header-nav .svg-icon .size-6 { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; } @media (min-width: 992px) { .header-nav button.toggle-sidebar { display: none; } } /* ---------- Page content surface --------------------------- */ .page-contents { color: var(--mica-text); padding: 16px 16px 48px; max-width: 1200px; margin: 0 auto; } @media (min-width: 768px) { .page-contents { padding: 24px 24px 64px; } } /* ---------- Cards: legacy bs-card override + new mica-card -- */ .bs-card, .mica-card { background-color: var(--mica-layer-alt); border: 1px solid var(--mica-layer-stroke); border-radius: var(--mica-radius-card); box-shadow: var(--mica-edge); color: var(--mica-text); padding: 16px; } .mica-card-tight { padding: 10px 12px; } .mica-card-flat { background-color: transparent; box-shadow: none; } .mica-card-accent { border-color: var(--mica-layer-stroke-accent); } /* Surface for big sections that need extra darkness */ .mica-surface { background-color: var(--mica-surface); background-image: linear-gradient(rgba(16, 12, 38, 0.92), rgba(16, 12, 38, 0.92)), url("../textures/noise.png"); background-repeat: no-repeat, repeat; background-size: auto, 128px 128px; background-origin: border-box; border: 1px solid var(--mica-layer-stroke); border-radius: var(--mica-radius-card); box-shadow: var(--mica-edge); } /* ---------- Eyebrows + headings ---------------------------- */ .mica-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--mica-accent-text); margin: 0; } .mica-eyebrow-dim { color: var(--mica-dim-2); } .mica-h1 { font-size: 20px; font-weight: 600; margin: 0; color: var(--mica-text); letter-spacing: -0.1px; } .mica-h2 { font-size: 16px; font-weight: 600; margin: 0; color: var(--mica-text); } .mica-meta { font-size: 11.5px; color: var(--mica-dim-2); } /* ---------- Stat card -------------------------------------- */ .mica-stat { background-color: var(--mica-layer-alt); border: 1px solid var(--mica-layer-stroke); border-radius: var(--mica-radius-card); box-shadow: var(--mica-edge); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .mica-stat__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--mica-accent-text); } .mica-stat__value { font-size: 22px; font-weight: 600; color: var(--mica-text); line-height: 1.1; } .mica-stat__value--sm { font-size: 15px; } .mica-stat__delta { font-size: 11px; color: var(--mica-dim-1); } .mica-stat__delta--up { color: var(--mica-ok); } .mica-stat__delta--down { color: var(--mica-danger); } /* ---------- Tabs (pill bar with active underline) ---------- */ .admin-nav.nav.nav-pills, .mica-tab-nav { border-bottom: 1px solid var(--mica-layer-stroke); gap: 4px !important; padding: 0; margin: 0 0 20px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .admin-nav.nav.nav-pills::-webkit-scrollbar, .mica-tab-nav::-webkit-scrollbar { display: none; } .admin-nav .nav-item, .mica-tab-nav .nav-item { flex-shrink: 0; } .admin-nav .nav-link, .mica-tab-nav .nav-link, .mica-tab { background: transparent; color: var(--mica-dim-1); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 14px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: color 120ms var(--mica-ease), border-color 120ms var(--mica-ease); cursor: pointer; } .admin-nav .nav-link:hover, .mica-tab-nav .nav-link:hover, .mica-tab:hover { color: var(--mica-text); } .admin-nav .nav-link.active, .mica-tab-nav .nav-link.active, .mica-tab.is-active { color: var(--mica-text); border-bottom-color: var(--mica-accent); background: transparent !important; } /* Hide non-active admin-tab panels (controlled by JS) */ .admin-tab { display: none; } .admin-tab.is-active { display: block; } /* ---------- Buttons (override + utility) ------------------- */ .btn, .mica-btn { border-radius: var(--mica-radius); font-weight: 600; font-size: 13px; padding: 7px 14px; transition: background-color 120ms var(--mica-ease), border-color 120ms var(--mica-ease), color 120ms var(--mica-ease), transform 80ms var(--mica-ease); } .btn:active, .mica-btn:active { transform: scale(0.98); } .btn-primary, .mica-btn-accent { background-color: var(--mica-accent) !important; border-color: var(--mica-accent) !important; color: #fff !important; box-shadow: var(--mica-edge); } .btn-primary:hover, .mica-btn-accent:hover { background-color: var(--mica-accent-hover) !important; border-color: var(--mica-accent-hover) !important; } .btn-secondary, .mica-btn-ghost { background-color: var(--mica-layer-alt) !important; border-color: var(--mica-layer-stroke) !important; color: var(--mica-text) !important; } .btn-secondary:hover, .mica-btn-ghost:hover { background-color: var(--mica-layer-soft) !important; } .btn-outline-secondary { background-color: transparent !important; border-color: var(--mica-layer-stroke-strong) !important; color: var(--mica-dim-1) !important; } .btn-outline-secondary:hover { color: var(--mica-text) !important; background-color: var(--mica-layer) !important; } .btn-danger { background-color: var(--mica-danger) !important; border-color: var(--mica-danger) !important; color: #1a0a0a !important; } .btn-outline-danger { background-color: transparent !important; border-color: rgba(248, 113, 113, 0.5) !important; color: var(--mica-danger) !important; } .btn-outline-danger:hover { background-color: var(--mica-danger-soft) !important; } .btn-warning { background-color: var(--mica-warn) !important; border-color: var(--mica-warn) !important; color: #2a1a00 !important; } .mica-btn-icon { background: var(--mica-layer-alt); border: 1px solid var(--mica-layer-stroke); color: var(--mica-dim-1); border-radius: var(--mica-radius); padding: 6px 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; } .mica-btn-icon:hover { color: var(--mica-text); background: var(--mica-layer-soft); } /* ---------- Form controls (dark-mode tuned) ---------------- */ .form-control, .form-select, .mica-input { background-color: var(--mica-layer) !important; border: 1px solid var(--mica-layer-stroke) !important; color: var(--mica-text) !important; border-radius: var(--mica-radius) !important; font-size: 13px; } .form-control::placeholder, .mica-input::placeholder { color: var(--mica-dim-2); } .form-control:focus, .form-select:focus, .mica-input:focus { background-color: var(--mica-layer-alt) !important; border-color: var(--mica-accent) !important; box-shadow: 0 0 0 3px var(--mica-accent-soft) !important; color: var(--mica-text) !important; } .form-label, .mica-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--mica-dim-2); margin-bottom: 4px; } .form-check-input { background-color: var(--mica-layer); border-color: var(--mica-layer-stroke-strong); } .form-check-input:checked { background-color: var(--mica-accent); border-color: var(--mica-accent); } /* ---------- Tables ----------------------------------------- */ .table, .mica-table { --bs-table-bg: transparent; --bs-table-color: var(--mica-text); --bs-table-striped-bg: rgba(255, 255, 255, 0.025); --bs-table-hover-bg: var(--mica-layer); --bs-table-border-color: var(--mica-layer-stroke); color: var(--mica-text); border-color: var(--mica-layer-stroke); } .table thead th, .mica-table thead th { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--mica-accent-text); background-color: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--mica-layer-stroke) !important; padding: 10px 12px; } .table tbody td, .mica-table tbody td { font-size: 13px; padding: 11px 12px; border-color: var(--mica-layer-stroke) !important; vertical-align: middle; } .table tbody tr:hover > * { color: var(--mica-text); } /* ---------- Pills, badges, status chips -------------------- */ .mica-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--mica-radius-pill); font-size: 11px; font-weight: 600; background-color: var(--mica-layer-alt); border: 1px solid var(--mica-layer-stroke); color: var(--mica-text); } .mica-chip--accent { background-color: var(--mica-accent-soft); border-color: var(--mica-layer-stroke-accent); color: var(--mica-accent-text); } .mica-chip--ok { background-color: var(--mica-ok-soft); border-color: rgba(52, 211, 153, 0.32); color: var(--mica-ok); } .mica-chip--warn { background-color: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.32); color: var(--mica-warn); } .mica-chip--danger { background-color: var(--mica-danger-soft); border-color: rgba(248, 113, 113, 0.32); color: var(--mica-danger); } .admin-level-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--mica-radius-pill); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; background-color: var(--mica-accent-soft); color: var(--mica-accent-text); border: 1px solid var(--mica-layer-stroke-accent); } /* ---------- Breadcrumbs ------------------------------------ */ .breadcrumb { --bs-breadcrumb-divider-color: var(--mica-dim-2); --bs-breadcrumb-item-active-color: var(--mica-text); font-size: 12px; margin-bottom: 16px; } .breadcrumb-item a { color: var(--mica-dim-1); text-decoration: none; } .breadcrumb-item a:hover { color: var(--mica-accent-text); } .breadcrumb-item.active { color: var(--mica-text); } /* ---------- Alerts ----------------------------------------- */ .alert { border-radius: var(--mica-radius); border: 1px solid var(--mica-layer-stroke); background-color: var(--mica-layer-alt); color: var(--mica-text); font-size: 13px; } .alert-secondary { background-color: var(--mica-layer-alt); border-color: var(--mica-layer-stroke); } .alert-success { background-color: var(--mica-ok-soft); border-color: rgba(52, 211, 153, 0.32); color: var(--mica-ok); } .alert-warning { background-color: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.32); color: var(--mica-warn); } .alert-danger { background-color: var(--mica-danger-soft); border-color: rgba(248, 113, 113, 0.32); color: var(--mica-danger); } /* ---------- Pagination ------------------------------------- */ .pagination .page-link { background-color: var(--mica-layer-alt); border: 1px solid var(--mica-layer-stroke); color: var(--mica-dim-1); } .pagination .page-link:hover { background-color: var(--mica-layer-soft); color: var(--mica-text); } .pagination .page-item.active .page-link { background-color: var(--mica-accent); border-color: var(--mica-accent); color: #fff; } .pagination .page-item.disabled .page-link { background-color: var(--mica-layer); color: var(--mica-dim-2); } /* ---------- Offcanvas / modal panels ----------------------- */ .offcanvas, .modal-content { background-color: var(--mica-surface); background-image: linear-gradient(rgba(16, 12, 38, 0.92), rgba(16, 12, 38, 0.92)), url("../textures/noise.png"); background-repeat: no-repeat, repeat; background-size: auto, 128px 128px; background-origin: border-box; border: 1px solid var(--mica-layer-stroke); color: var(--mica-text); } .offcanvas-header, .modal-header { border-bottom: 1px solid var(--mica-layer-stroke); } .offcanvas-footer, .modal-footer { border-top: 1px solid var(--mica-layer-stroke); } /* ---------- Bar chart / mini bars -------------------------- */ .mica-bars { display: flex; align-items: flex-end; gap: 3px; height: 128px; } .mica-bars__bar { flex: 1 1 0; background-color: var(--mica-accent); opacity: 0.8; border-radius: 3px 3px 0 0; min-height: 2px; transition: opacity 120ms var(--mica-ease); } .mica-bars__bar:hover { opacity: 1; } .mica-meter { height: 6px; background-color: var(--mica-layer); border-radius: 3px; overflow: hidden; } .mica-meter__fill { height: 100%; background-color: var(--mica-accent); } /* ---------- Event-row list (compact) ----------------------- */ .mica-eventrow { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 12px; } .mica-eventrow:last-child { border-bottom: 0; } .mica-eventrow__time { font-family: var(--mica-font-mono); font-size: 11px; color: var(--mica-dim-2); } .mica-eventrow__name { font-weight: 600; color: var(--mica-text); } .mica-eventrow__meta { color: var(--mica-dim-2); font-size: 10.5px; } .mica-eventrow__payload { margin-top: 6px; padding: 6px 8px; background-color: var(--mica-layer); border-radius: 4px; font-family: var(--mica-font-mono); font-size: 10.5px; color: var(--mica-dim-1); overflow-x: auto; } /* ---------- Skeleton loader -------------------------------- */ .mica-skeleton { background: linear-gradient( 90deg, var(--mica-layer) 0%, var(--mica-layer-soft) 50%, var(--mica-layer) 100% ); background-size: 200% 100%; animation: mica-shimmer 1.6s infinite linear; border-radius: var(--mica-radius); } @keyframes mica-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .mica-skeleton { animation: none; } } /* ---------- Links ------------------------------------------ */ a, .link-dark { color: var(--mica-accent-text); text-decoration: none; transition: color 120ms var(--mica-ease); } a:hover, .link-dark:hover { color: var(--mica-text); } /* ---------- Utilities -------------------------------------- */ .text-mica-dim { color: var(--mica-dim-1) !important; } .text-mica-dim-2 { color: var(--mica-dim-2) !important; } .text-mica-accent { color: var(--mica-accent-text) !important; } .text-mica-ok { color: var(--mica-ok) !important; } .text-mica-warn { color: var(--mica-warn) !important; } .text-mica-danger { color: var(--mica-danger) !important; } .bg-mica-layer { background-color: var(--mica-layer) !important; } .bg-mica-layer-alt { background-color: var(--mica-layer-alt) !important; } .border-mica { border: 1px solid var(--mica-layer-stroke) !important; } .shadow-mica-edge { box-shadow: var(--mica-edge) !important; } /* ---------- Bootstrap dark-mode tweaks --------------------- */ .dropdown-menu { background-color: var(--mica-surface); border: 1px solid var(--mica-layer-stroke); color: var(--mica-text); } .dropdown-item { color: var(--mica-dim-1); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--mica-layer); color: var(--mica-text); } hr, .hr { border-color: var(--mica-layer-stroke); opacity: 1; }