/* SMR Admin — design system layered on top of Bootstrap 5 Inspired by Gogo MUI/Tailwind admin template. Themes: light, dark, system (default). Toggle via data-bs-theme on . */ :root, [data-bs-theme="light"] { /* Palette — Happy Buying blue primary, olive-gray secondary (from logo) */ --smr-primary: #1a6ca8; --smr-primary-rgb: 26, 108, 168; --smr-primary-hover: #155985; --smr-primary-soft: rgba(26, 108, 168, 0.10); --smr-secondary: #4a553f; --smr-secondary-rgb: 74, 85, 63; --smr-secondary-soft: rgba(74, 85, 63, 0.10); --smr-success: #10b981; --smr-info: #0ea5e9; --smr-warning: #f59e0b; --smr-danger: #ef4444; /* Surfaces */ --smr-bg: #f4f5fb; --smr-paper: #ffffff; --smr-paper-2: #fafafe; --smr-sidebar: #ffffff; --smr-header: rgba(255, 255, 255, 0.85); --smr-border: #e6e7ef; --smr-border-strong: #d4d6e2; --smr-text: #1f2333; --smr-text-muted: #6b7090; --smr-text-faint: #9aa0bd; --smr-code: #c2185b; /* Effects */ --smr-shadow-xs: 0 1px 2px rgba(17, 12, 46, 0.06); --smr-shadow-sm: 0 4px 12px rgba(17, 12, 46, 0.06); --smr-shadow-md: 0 12px 28px rgba(17, 12, 46, 0.08); --smr-radius: 14px; --smr-radius-lg: 22px; --smr-radius-pill: 999px; --smr-sidebar-w: 250px; --smr-header-h: 64px; } [data-bs-theme="dark"] { --smr-primary: #5ba6d9; --smr-primary-rgb: 91, 166, 217; --smr-primary-hover: #3d8fc7; --smr-primary-soft: rgba(91, 166, 217, 0.14); --smr-secondary: #a3ad96; --smr-secondary-rgb: 163, 173, 150; --smr-secondary-soft: rgba(163, 173, 150, 0.14); --smr-success: #34d399; --smr-info: #38bdf8; --smr-warning: #fbbf24; --smr-danger: #f87171; --smr-bg: #0d0e15; --smr-paper: #161824; --smr-paper-2: #1c1f2e; --smr-sidebar: #131521; --smr-header: rgba(19, 21, 33, 0.78); --smr-border: #262a3d; --smr-border-strong: #343a55; --smr-text: #e7e9f3; --smr-text-muted: #9da3c1; --smr-text-faint: #6b7090; --smr-code: #f9a8d4; --smr-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45); --smr-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4); --smr-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html, body { background: var(--smr-bg); color: var(--smr-text); font-family: "Mulish", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; -webkit-font-smoothing: antialiased; } body { min-height: 100vh; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Urbanist", "Mulish", sans-serif; color: var(--smr-text); letter-spacing: -0.01em; font-weight: 700; } code, pre, .font-monospace { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--smr-code); background: var(--smr-primary-soft); padding: 0.06em 0.35em; border-radius: 6px; font-size: 0.86em; } pre code, pre { background: var(--smr-paper-2); color: var(--smr-text); border-radius: 10px; padding: 12px 14px; border: 1px solid var(--smr-border); } a { color: var(--smr-primary); text-decoration: none; } a:hover { color: var(--smr-primary-hover); } .text-muted { color: var(--smr-text-muted) !important; } /* ---------- Layout shell ---------- */ .smr-shell { min-height: 100vh; background: var(--smr-bg); } .smr-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--smr-sidebar-w); background: var(--smr-sidebar); border-right: 1px solid var(--smr-border); padding: 18px 14px; z-index: 1040; display: flex; flex-direction: column; transition: transform 0.25s ease; } .smr-sidebar .smr-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; text-decoration: none; color: var(--smr-text); font-family: "Urbanist", sans-serif; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; } .smr-sidebar .smr-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, var(--smr-primary), var(--smr-secondary)); color: white; font-weight: 800; } .smr-nav { list-style: none; padding: 0; margin: 0; flex: 1; overflow-y: auto; } .smr-nav-section { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--smr-text-faint); padding: 16px 12px 6px; font-weight: 700; } .smr-nav .smr-nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--smr-text-muted); font-weight: 500; text-decoration: none; font-size: 0.92rem; transition: background 0.15s, color 0.15s; margin-bottom: 2px; } .smr-nav .smr-nav-link:hover { background: var(--smr-primary-soft); color: var(--smr-primary); } .smr-nav .smr-nav-link.active { background: var(--smr-primary-soft); color: var(--smr-primary); font-weight: 700; } .smr-nav .smr-nav-link .smr-icon { width: 20px; height: 20px; flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.85; } .smr-nav-sub { list-style: none; padding: 0 0 0 30px; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.22s ease, padding 0.22s ease; } .smr-nav-group.is-open>.smr-nav-sub { max-height: 500px; padding: 4px 0 4px 30px; } .smr-nav-sub .smr-nav-link { font-size: 0.85rem; padding: 7px 12px; } /* Clickable parent for grouped submenus — toggles expand/collapse. */ .smr-nav .smr-nav-link.smr-nav-parent { background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; } .smr-nav-caret { margin-left: auto; display: inline-flex; align-items: center; transition: transform 0.2s ease; opacity: 0.7; } .smr-nav-group.is-open>.smr-nav-parent .smr-nav-caret { transform: rotate(90deg); } /* When the sidebar is collapsed to the icon rail, hide caret + submenu. */ html.smr-collapsed .smr-nav-caret, html.smr-collapsed .smr-nav-sub { display: none; } /* ---------- Header ---------- */ .smr-header { position: fixed; inset-block-start: 0; inset-inline-start: var(--smr-sidebar-w); inset-inline-end: 0; height: var(--smr-header-h); background: var(--smr-header); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--smr-border); display: flex; align-items: center; padding: 0 24px; gap: 16px; z-index: 1030; } .smr-header .smr-sidebar-toggle { display: none; border: 0; background: transparent; color: var(--smr-text-muted); padding: 8px; border-radius: 10px; } .smr-header .smr-sidebar-toggle:hover { background: var(--smr-primary-soft); color: var(--smr-primary); } .smr-header .smr-spacer { flex: 1; } .smr-header-action { border: 0; background: transparent; color: var(--smr-text-muted); width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s; } .smr-header-action:hover { background: var(--smr-primary-soft); color: var(--smr-primary); } /* Queue health widget */ .smr-queue { display: inline-flex; align-items: center; gap: 4px; } .smr-queue-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--smr-radius-pill, 999px); border: 1px solid var(--smr-border); background: var(--smr-paper); color: var(--smr-text-muted); font-size: 0.8rem; font-weight: 600; line-height: 1; cursor: default; user-select: none; } .smr-queue-label { font-variant-numeric: tabular-nums; } .smr-queue-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--smr-text-muted); flex: 0 0 auto; } /* State colours driven by [data-state] on the wrapper */ .smr-queue[data-state="idle"] .smr-queue-dot { background: #22c55e; } .smr-queue[data-state="working"] .smr-queue-dot { background: #3b82f6; animation: smr-queue-pulse 1.2s ease-in-out infinite; } .smr-queue[data-state="stalled"] .smr-queue-dot { background: #f59e0b; } .smr-queue[data-state="down"] .smr-queue-dot { background: #ef4444; animation: smr-queue-pulse 1.4s ease-in-out infinite; } .smr-queue[data-state="error"] .smr-queue-dot { background: #f59e0b; } .smr-queue[data-state="unknown"] .smr-queue-dot { background: #9ca3af; } .smr-queue[data-state="restarting"] .smr-queue-dot { background: var(--smr-primary); animation: smr-queue-pulse 0.8s ease-in-out infinite; } .smr-queue[data-state="down"] .smr-queue-chip { color: #ef4444; border-color: #ef4444; } .smr-queue[data-state="stalled"] .smr-queue-chip, .smr-queue[data-state="error"] .smr-queue-chip { color: var(--smr-text); border-color: currentColor; } .smr-queue-restart svg { transition: transform 0.4s ease; } .smr-queue-restart:hover svg { transform: rotate(90deg); } .smr-queue-restart:disabled { opacity: 0.5; cursor: progress; } .smr-queue[data-state="restarting"] .smr-queue-restart svg { animation: smr-queue-spin 0.8s linear infinite; } @keyframes smr-queue-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes smr-queue-spin { to { transform: rotate(360deg); } } @media (max-width: 575.98px) { .smr-queue-label { display: none; } } .smr-queue-chip { border: 1px solid var(--smr-border); background: var(--smr-paper); } .smr-queue-chip:hover { border-color: var(--smr-primary); color: var(--smr-text); } /* Failed-jobs panel */ .smr-fj-overlay { position: fixed; inset: 0; z-index: 1080; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 72px 16px 16px; } .smr-fj-overlay[hidden] { display: none; } .smr-fj-modal { width: 100%; max-width: 640px; max-height: calc(100vh - 110px); display: flex; flex-direction: column; background: var(--smr-paper); color: var(--smr-text); border: 1px solid var(--smr-border); border-radius: var(--smr-radius, 16px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); overflow: hidden; } .smr-fj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--smr-border); } .smr-fj-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--smr-text); } .smr-fj-title svg { color: #ef4444; } .smr-fj-count { color: var(--smr-text-muted); font-weight: 600; } .smr-fj-head-actions { display: inline-flex; align-items: center; gap: 6px; } .smr-fj-close { font-size: 1.1rem; line-height: 1; padding: 2px 9px; } .smr-fj-body { overflow-y: auto; padding: 8px; } .smr-fj-empty { padding: 32px 16px; text-align: center; color: var(--smr-text-muted); } .smr-fj-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--smr-border); border-radius: 12px; margin-bottom: 8px; } .smr-fj-row-main { min-width: 0; flex: 1; } .smr-fj-name { font-weight: 600; word-break: break-word; } .smr-fj-meta { font-size: 0.78rem; color: var(--smr-text-muted); margin-top: 2px; } .smr-fj-exc { font-size: 0.78rem; color: #b91c1c; margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word; line-height: 1.35; } .smr-fj-row-actions { display: inline-flex; flex-direction: column; gap: 6px; flex: 0 0 auto; } [data-bs-theme="dark"] .smr-fj-exc { color: #f87171; } body.smr-fj-open { overflow: hidden; } .smr-user-chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; background: var(--smr-paper); border: 1px solid var(--smr-border); border-radius: var(--smr-radius-pill); font-size: 0.85rem; color: var(--smr-text); } .smr-user-chip .smr-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--smr-primary), var(--smr-secondary)); color: white; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; } /* ---------- Main ---------- */ .smr-main { padding-inline-start: var(--smr-sidebar-w); padding-top: var(--smr-header-h); min-height: 100vh; display: flex; flex-direction: column; } .smr-content { flex: 1; padding: 28px 24px; } .smr-paper { background: var(--smr-paper); border-radius: var(--smr-radius-lg); box-shadow: var(--smr-shadow-sm); padding: 28px; border: 1px solid var(--smr-border); } /* ---------- Collapsible (compact) sidebar ---------- */ .smr-label { white-space: nowrap; } @media (min-width: 992px) { .smr-sidebar { transition: transform 0.25s ease, width 0.2s ease; } .smr-header { transition: inset-inline-start 0.2s ease; } .smr-main { transition: padding-inline-start 0.2s ease; } /* Compact icon-only rail */ html.smr-collapsed { --smr-sidebar-w: 76px; } html.smr-collapsed .smr-sidebar { padding-inline: 10px; } html.smr-collapsed .smr-brand { justify-content: center; padding: 6px 0 18px; gap: 0; } html.smr-collapsed .smr-brand .smr-label { display: none; } html.smr-collapsed .smr-nav-section { display: none; } html.smr-collapsed .smr-nav .smr-nav-link { justify-content: center; padding-inline: 0; gap: 0; } html.smr-collapsed .smr-nav .smr-nav-link .smr-label { display: none; } } @media (max-width: 991.98px) { .smr-sidebar { transform: translateX(-100%); } .smr-sidebar.is-open { transform: translateX(0); box-shadow: var(--smr-shadow-md); } .smr-header { inset-inline-start: 0; } .smr-header .smr-sidebar-toggle { display: inline-flex; } .smr-collapse-toggle { display: none !important; } .smr-main { padding-inline-start: 0; } .smr-content { padding: 18px 14px; } .smr-paper { padding: 18px; border-radius: var(--smr-radius); } .smr-backdrop { position: fixed; inset: 0; background: rgba(13, 14, 21, .5); z-index: 1035; display: none; } .smr-backdrop.is-open { display: block; } } [dir="ltr"] .smr-sidebar { border-right: 1px solid var(--smr-border); } /* ---------- Page header ---------- */ .smr-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .smr-page-title { margin: 0; font-size: 1.75rem; } .smr-page-subtitle { margin: 6px 0 0; color: var(--smr-text-muted); font-size: 0.92rem; } .smr-breadcrumb { margin: 4px 0 0; font-size: 0.82rem; color: var(--smr-text-muted); display: flex; gap: 6px; flex-wrap: wrap; } .smr-breadcrumb a { color: var(--smr-text-muted); } .smr-breadcrumb a:hover { color: var(--smr-primary); } /* ---------- Cards ---------- */ .card { background: var(--smr-paper); border: 1px solid var(--smr-border); border-radius: var(--smr-radius); box-shadow: var(--smr-shadow-xs); color: var(--smr-text); } .card .card-body { padding: 1.25rem 1.4rem; } .card .card-footer { background: transparent; border-top: 1px solid var(--smr-border); padding: 1rem 1.4rem; } .card .card-title { font-family: "Urbanist", sans-serif; font-weight: 700; letter-spacing: -0.01em; } .card.shadow-sm { box-shadow: var(--smr-shadow-sm) !important; } .smr-stat { background: var(--smr-paper); border: 1px solid var(--smr-border); border-radius: var(--smr-radius); padding: 18px 20px; display: flex; align-items: center; gap: 14px; transition: transform 0.2s, box-shadow 0.2s; height: 100%; } .smr-stat:hover { transform: translateY(-2px); box-shadow: var(--smr-shadow-md); } .smr-stat-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; background: var(--smr-primary-soft); color: var(--smr-primary); display: inline-flex; align-items: center; justify-content: center; } .smr-stat-icon.is-secondary { background: var(--smr-secondary-soft); color: var(--smr-secondary); } .smr-stat-icon.is-success { background: rgba(16, 185, 129, 0.12); color: var(--smr-success); } .smr-stat-icon.is-danger { background: rgba(239, 68, 68, 0.12); color: var(--smr-danger); } .smr-stat-icon.is-info { background: rgba(14, 165, 233, 0.12); color: var(--smr-info); } .smr-stat-icon.is-warning { background: rgba(245, 158, 11, 0.12); color: var(--smr-warning); } .smr-stat-icon.is-neutral { background: rgba(107, 112, 144, 0.14); color: var(--smr-text-muted); } .smr-stat-label { font-size: 0.78rem; color: var(--smr-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .smr-stat-value { font-family: "Urbanist", sans-serif; font-size: 1.7rem; font-weight: 800; line-height: 1.1; margin-top: 2px; color: var(--smr-text); } /* ---------- Tables ---------- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--smr-text); color: var(--smr-text); margin-bottom: 0; } .table>thead>tr>th { border-bottom: 1px solid var(--smr-border); color: var(--smr-text-muted); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 12px 14px; background: transparent; } .table>tbody>tr>td { border-bottom: 1px solid var(--smr-border); padding: 12px 14px; vertical-align: middle; font-size: 0.9rem; } .table>tbody>tr:last-child>td { border-bottom: 0; } .table-striped>tbody>tr:nth-of-type(odd)>td { background: var(--smr-paper-2); } .table-hover>tbody>tr:hover>td { background: var(--smr-primary-soft); } .table-sm>thead>tr>th, .table-sm>tbody>tr>td { padding: 9px 12px; font-size: 0.85rem; } .table-responsive { border-radius: var(--smr-radius); } /* ---------- Responsive "stacked card" tables (mobile) ---------- */ @media (max-width: 767.98px) { .smr-stack > thead { display: none; } .smr-stack, .smr-stack > tbody, .smr-stack > tbody > tr, .smr-stack > tbody > tr > td { display: block; width: 100%; } .smr-stack > tbody > tr { border: 1px solid var(--smr-border); border-radius: var(--smr-radius); padding: 6px 14px; margin-bottom: 12px; background: var(--smr-paper); } .smr-stack > tbody > tr > td { border: 0 !important; border-bottom: 1px solid var(--smr-border) !important; padding: 9px 0; font-size: 0.9rem; text-align: left !important; display: flex; justify-content: space-between; align-items: center; gap: 14px; } .smr-stack > tbody > tr > td:last-child { border-bottom: 0 !important; } .smr-stack > tbody > tr > td::before { content: attr(data-label); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--smr-text-muted); flex: 0 0 auto; } .smr-stack > tbody > tr > td:not([data-label])::before { content: ""; } /* Actions cell: full-width stacked buttons for easy tapping. */ .smr-stack > tbody > tr > td.smr-actions { display: block; text-align: left !important; } .smr-stack > tbody > tr > td.smr-actions::before { display: block; margin-bottom: 6px; } .smr-stack td.smr-actions .btn, .smr-stack td.smr-actions form { width: 100%; margin: 4px 0 0; } .smr-stack td.smr-actions form .btn { width: 100%; } /* Empty-state / full-width rows stay centered. */ .smr-stack > tbody > tr > td[colspan] { display: block; text-align: center !important; } .smr-stack > tbody > tr > td[colspan]::before { content: ""; } } /* ---------- Buttons ---------- */ .btn { border-radius: 12px; font-weight: 600; padding: 0.5rem 1rem; transition: transform 0.05s, box-shadow 0.15s, background 0.15s, border-color 0.15s; border: 1px solid transparent; } .btn:active { transform: translateY(1px); } .btn-sm { padding: 0.32rem 0.7rem; font-size: 0.82rem; border-radius: 10px; } .btn-lg { padding: 0.7rem 1.3rem; font-size: 1rem; border-radius: 14px; } .btn-primary, .btn-primary:focus { background: var(--smr-primary); border-color: var(--smr-primary); color: #fff; box-shadow: 0 4px 14px rgba(var(--smr-primary-rgb), 0.32); } .btn-primary:hover, .btn-primary:active { background: var(--smr-primary-hover); border-color: var(--smr-primary-hover); color: #fff; } .btn-outline-primary { color: var(--smr-primary); border-color: var(--smr-border-strong); background: var(--smr-paper); } .btn-outline-primary:hover, .btn-outline-primary:active { background: var(--smr-primary-soft); border-color: var(--smr-primary); color: var(--smr-primary); } .btn-outline-secondary { color: var(--smr-text-muted); border-color: var(--smr-border-strong); background: var(--smr-paper); } .btn-outline-secondary:hover { background: var(--smr-paper-2); color: var(--smr-text); border-color: var(--smr-border-strong); } .btn-outline-danger { color: var(--smr-danger); border-color: rgba(239, 68, 68, 0.4); background: transparent; } .btn-outline-danger:hover { background: rgba(239, 68, 68, 0.12); color: var(--smr-danger); border-color: var(--smr-danger); } .btn-outline-light, .btn-outline-light:focus { color: var(--smr-text); border-color: var(--smr-border-strong); background: transparent; } .btn-outline-light:hover { background: var(--smr-paper-2); color: var(--smr-text); } .btn-link { color: var(--smr-primary); text-decoration: none; padding-inline: 0; } .btn-link:hover { color: var(--smr-primary-hover); text-decoration: underline; } /* ---------- Forms ---------- */ .form-label { font-weight: 600; font-size: 0.85rem; color: var(--smr-text); margin-bottom: 0.35rem; } .form-control, .form-select { background-color: var(--smr-paper); border: 1px solid var(--smr-border); color: var(--smr-text); border-radius: 12px; padding: 0.55rem 0.85rem; font-size: 0.92rem; transition: border-color 0.15s, box-shadow 0.15s; } /* Restore the dropdown chevron. Bootstrap's .form-select sets appearance:none and supplies the arrow via background-image; the rule above replaced it, so re-add it. */ .form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 2.25rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7090' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 14px 10px; } [data-bs-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239da3c1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } /* form-select-sm is more compact, so pull the chevron in a touch. */ .form-select-sm { padding-right: 2rem; background-position: right 0.6rem center; } .form-control::placeholder { color: var(--smr-text-faint); } .form-control:focus, .form-select:focus { background-color: var(--smr-paper); border-color: var(--smr-primary); color: var(--smr-text); box-shadow: 0 0 0 0.2rem var(--smr-primary-soft); } .form-control:disabled, .form-control[readonly] { background: var(--smr-paper-2); color: var(--smr-text-muted); } .form-check-input { background-color: var(--smr-paper); border: 1.5px solid var(--smr-border-strong); width: 1.05em; height: 1.05em; margin-top: 0.18em; border-radius: 5px; } .form-check-input:checked { background-color: var(--smr-primary); border-color: var(--smr-primary); } .form-check-input:focus { box-shadow: 0 0 0 0.2rem var(--smr-primary-soft); border-color: var(--smr-primary); } .form-check-label { color: var(--smr-text); font-size: 0.9rem; } /* ---------- Badges ---------- */ .badge { font-weight: 600; font-size: 0.7rem; padding: 0.36em 0.72em; border-radius: var(--smr-radius-pill); letter-spacing: 0.02em; } .badge.bg-primary { background: var(--smr-primary-soft) !important; color: var(--smr-primary); } .badge.bg-secondary { background: rgba(107, 112, 144, 0.15) !important; color: var(--smr-text-muted); } .badge.bg-success { background: rgba(16, 185, 129, 0.15) !important; color: var(--smr-success); } .badge.bg-info { background: rgba(14, 165, 233, 0.15) !important; color: var(--smr-info); } .badge.bg-warning { background: rgba(245, 158, 11, 0.18) !important; color: var(--smr-warning); } .badge.bg-danger { background: rgba(239, 68, 68, 0.15) !important; color: var(--smr-danger); } .badge.bg-dark { background: rgba(31, 35, 51, 0.12) !important; color: var(--smr-text); } .badge.bg-light { background: var(--smr-paper-2) !important; color: var(--smr-text-muted); } [data-bs-theme="dark"] .badge.bg-dark { background: rgba(231, 233, 243, 0.14) !important; color: var(--smr-text); } .badge code, .badge .text-light { background: transparent !important; color: inherit !important; padding: 0; font-size: inherit; } /* ---------- Alerts ---------- */ .alert { border-radius: var(--smr-radius); border: 1px solid transparent; padding: 0.85rem 1.1rem; font-size: 0.92rem; } .alert-success { background: rgba(16, 185, 129, 0.12); color: var(--smr-success); border-color: rgba(16, 185, 129, 0.25); } .alert-info { background: rgba(14, 165, 233, 0.10); color: var(--smr-info); border-color: rgba(14, 165, 233, 0.25); } .alert-warning { background: rgba(245, 158, 11, 0.13); color: var(--smr-warning); border-color: rgba(245, 158, 11, 0.28); } .alert-danger { background: rgba(239, 68, 68, 0.10); color: var(--smr-danger); border-color: rgba(239, 68, 68, 0.28); } .alert code { background: rgba(0, 0, 0, 0.06); color: inherit; } [data-bs-theme="dark"] .alert code { background: rgba(255, 255, 255, 0.08); } /* ---------- Pagination (Laravel default) ---------- */ .pagination { display: inline-flex; gap: 4px; margin-top: 1rem; padding: 0; } .pagination .page-item .page-link { background: var(--smr-paper); color: var(--smr-text-muted); border: 1px solid var(--smr-border); border-radius: 10px; font-weight: 600; font-size: 0.86rem; padding: 0.4rem 0.75rem; margin: 0; } .pagination .page-item.active .page-link { background: var(--smr-primary); color: #fff; border-color: var(--smr-primary); } .pagination .page-item.disabled .page-link { opacity: 0.45; } .pagination .page-item .page-link:hover { background: var(--smr-primary-soft); color: var(--smr-primary); border-color: var(--smr-primary); } /* ---------- Dropdown (Bootstrap) ---------- */ .dropdown-menu { background: var(--smr-paper); border: 1px solid var(--smr-border); border-radius: 14px; box-shadow: var(--smr-shadow-md); padding: 6px; min-width: 12rem; } .dropdown-item { color: var(--smr-text); border-radius: 10px; padding: 8px 12px; font-size: 0.9rem; } .dropdown-item:hover, .dropdown-item:focus { background: var(--smr-primary-soft); color: var(--smr-primary); } .dropdown-divider { border-color: var(--smr-border); } /* ---------- Misc ---------- */ .smr-divider { height: 1px; background: var(--smr-border); margin: 1.25rem 0; border: 0; } .smr-empty { text-align: center; color: var(--smr-text-muted); padding: 2rem 1rem; font-size: 0.92rem; } .smr-section-title { font-family: "Urbanist", sans-serif; font-weight: 700; font-size: 1rem; color: var(--smr-text); margin: 0 0 1rem; } .text-danger { color: var(--smr-danger) !important; } .text-success { color: var(--smr-success) !important; } .text-info { color: var(--smr-info) !important; } .text-warning { color: var(--smr-warning) !important; } /* Timeline (events page) */ .smr-timeline { list-style: none; padding: 0; margin: 0; } .smr-timeline li { position: relative; padding: 4px 0 18px 26px; } .smr-timeline li::before { content: ""; position: absolute; inset-inline-start: 7px; inset-block: 4px 0; width: 2px; background: var(--smr-border); } .smr-timeline li::after { content: ""; position: absolute; inset-inline-start: 1px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--smr-paper); border: 3px solid var(--smr-primary); } .smr-timeline li.is-success::after { border-color: var(--smr-success); } .smr-timeline li.is-danger::after { border-color: var(--smr-danger); } .smr-timeline li.is-warning::after { border-color: var(--smr-warning); } .smr-timeline li:last-child::before { display: none; } .smr-timeline pre { margin-top: 8px; font-size: 0.78rem; max-height: 320px; overflow: auto; } /* Login layout */ .smr-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 15% 10%, var(--smr-primary-soft), transparent 45%), radial-gradient(circle at 85% 90%, var(--smr-secondary-soft), transparent 45%), var(--smr-bg); } .smr-auth-card { width: 100%; max-width: 420px; background: var(--smr-paper); border: 1px solid var(--smr-border); border-radius: var(--smr-radius-lg); box-shadow: var(--smr-shadow-md); padding: 36px 32px; } .smr-auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-family: "Urbanist", sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--smr-text); } /* Utility */ .smr-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.85em; } .smr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 0.25rem 0.7rem; border-radius: var(--smr-radius-pill); background: var(--smr-paper-2); color: var(--smr-text-muted); font-size: 0.78rem; font-weight: 600; border: 1px solid var(--smr-border); } .smr-w-1 { width: 1%; white-space: nowrap; } /* Scrollbar polish */ @media (hover: hover) { .smr-sidebar ::-webkit-scrollbar, .smr-content ::-webkit-scrollbar { width: 8px; height: 8px; } .smr-sidebar ::-webkit-scrollbar-thumb, .smr-content ::-webkit-scrollbar-thumb { background: var(--smr-border-strong); border-radius: 999px; } }