/* ============================================================================ SRM design layer — a clean, modern SaaS look on top of Bootstrap 5.3. Driven by Bootstrap CSS variables so everything adapts to light/dark (data-bs-theme on ). ============================================================================ */ :root { /* Indigo accent */ --srm-accent: #4f46e5; --srm-accent-hover: #4338ca; --srm-accent-active: #3730a3; --srm-accent-soft: rgba(79, 70, 229, 0.10); /* Re-tint Bootstrap links/focus to the accent */ --bs-primary: #4f46e5; --bs-primary-rgb: 79, 70, 229; --bs-link-color-rgb: 79, 70, 229; --bs-link-hover-color-rgb: 67, 56, 202; /* Friendlier corners + soft shadows */ --bs-border-radius: 0.625rem; --bs-border-radius-sm: 0.45rem; --bs-border-radius-lg: 0.9rem; --bs-border-radius-xl: 1.1rem; --srm-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06); --srm-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.06); } /* Light theme surface palette */ [data-bs-theme="light"] { --bs-body-bg: #f4f5fa; --bs-secondary-bg: #ffffff; --bs-border-color: #e6e8ef; --bs-border-color-translucent: rgba(16, 24, 40, 0.08); --bs-card-bg: #ffffff; --bs-secondary-color: #6b7280; } /* Dark theme surface palette (deeper, more neutral than Bootstrap default) */ [data-bs-theme="dark"] { --bs-body-bg: #0d1017; --bs-secondary-bg: #161a22; --bs-tertiary-bg: #1b2029; --bs-border-color: #29303b; --bs-border-color-translucent: rgba(255, 255, 255, 0.08); --bs-card-bg: #151a22; --bs-emphasis-color: #f3f4f6; --bs-secondary-color: #9aa3b2; } html, body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--bs-body-bg); } h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -0.015em; font-weight: 650; } /* Reusable page header */ .srm-page-title { font-size: 1.5rem; font-weight: 680; margin-bottom: 0.1rem; } .srm-page-subtitle { color: var(--bs-secondary-color); font-size: 0.92rem; margin-bottom: 0; } /* --- Buttons -------------------------------------------------------------- */ .btn { --bs-btn-font-weight: 550; --bs-btn-border-radius: 0.55rem; --bs-btn-padding-x: 0.95rem; } .btn-sm { --bs-btn-border-radius: 0.45rem; } .btn-primary { --bs-btn-bg: var(--srm-accent); --bs-btn-border-color: var(--srm-accent); --bs-btn-hover-bg: var(--srm-accent-hover); --bs-btn-hover-border-color: var(--srm-accent-hover); --bs-btn-active-bg: var(--srm-accent-active); --bs-btn-active-border-color: var(--srm-accent-active); --bs-btn-disabled-bg: var(--srm-accent); --bs-btn-disabled-border-color: var(--srm-accent); box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25); } .btn-outline-primary { --bs-btn-color: var(--srm-accent); --bs-btn-border-color: color-mix(in srgb, var(--srm-accent) 45%, transparent); --bs-btn-hover-bg: var(--srm-accent); --bs-btn-hover-border-color: var(--srm-accent); --bs-btn-active-bg: var(--srm-accent); --bs-btn-active-border-color: var(--srm-accent); } /* --- Cards --------------------------------------------------------------- */ .card { --bs-card-border-color: var(--bs-border-color-translucent); --bs-card-border-radius: var(--bs-border-radius-lg); --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px); --bs-card-cap-bg: transparent; --bs-card-spacer-y: 1rem; --bs-card-spacer-x: 1.15rem; box-shadow: var(--srm-shadow-sm); } .card-header { border-bottom-color: var(--bs-border-color-translucent); font-weight: 620; padding-top: 0.85rem; padding-bottom: 0.85rem; } .card-footer { background-color: transparent; border-top-color: var(--bs-border-color-translucent); } /* --- Tables -------------------------------------------------------------- */ .table { --bs-table-border-color: var(--bs-border-color-translucent); --bs-table-bg: transparent; margin-bottom: 0; vertical-align: middle; } .table > thead th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-secondary-color); font-weight: 650; border-bottom-width: 1px; } /* --- Forms --------------------------------------------------------------- */ .form-label { font-weight: 550; font-size: 0.85rem; margin-bottom: 0.3rem; color: var(--bs-emphasis-color); } .form-control, .form-select { border-radius: 0.55rem; border-color: var(--bs-border-color); } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--srm-accent); box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.18); } .form-check-input:checked { background-color: var(--srm-accent); border-color: var(--srm-accent); } /* --- Badges -------------------------------------------------------------- */ .badge { font-weight: 600; letter-spacing: 0.01em; border-radius: 0.5rem; } /* --- Alerts -------------------------------------------------------------- */ .alert { border-radius: var(--bs-border-radius); border: 1px solid var(--bs-border-color-translucent); } /* --- Stat cards (dashboard) --------------------------------------------- */ .srm-stat { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1.05rem; } .srm-stat-icon { width: 2.6rem; height: 2.6rem; border-radius: 0.7rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } .srm-stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1; } .srm-stat-label { color: var(--bs-secondary-color); font-size: 0.8rem; } .srm-bg-accent-soft { background: var(--srm-accent-soft); color: var(--srm-accent); } .srm-bg-success-soft { background: rgba(25, 135, 84, 0.12); color: var(--bs-success); } .srm-bg-warning-soft { background: rgba(255, 193, 7, 0.15); color: #b8860b; } .srm-bg-danger-soft { background: rgba(220, 53, 69, 0.12); color: var(--bs-danger); } [data-bs-theme="dark"] .srm-bg-warning-soft { color: #ffca2c; } /* --- Settings tabs ------------------------------------------------------- */ .srm-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--bs-border-color-translucent); padding-bottom: 0.4rem; } .srm-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border-radius: 0.55rem; color: var(--bs-secondary-color); text-decoration: none; font-size: 0.9rem; font-weight: 550; white-space: nowrap; } .srm-tab:hover { background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); } .srm-tab.active { background: var(--srm-accent); color: #fff; } /* Settings hub cards */ .srm-settings-card { transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .srm-settings-card:hover { transform: translateY(-2px); box-shadow: var(--srm-shadow); border-color: color-mix(in srgb, var(--srm-accent) 35%, var(--bs-border-color)); } /* --- Topbar user menu ---------------------------------------------------- */ .srm-user { display: flex; align-items: center; gap: 0.5rem; } .srm-user-name { font-weight: 600; font-size: 0.9rem; } /* --- Boot / loading splash ---------------------------------------------- */ .srm-boot { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--bs-body-bg); } /* --- Login --------------------------------------------------------------- */ .srm-auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: radial-gradient(900px 500px at 15% 0%, rgba(79, 70, 229, 0.18), transparent 60%), radial-gradient(800px 500px at 100% 100%, rgba(124, 58, 237, 0.14), transparent 55%), var(--bs-body-bg); } .srm-login-card { width: 100%; max-width: 400px; box-shadow: var(--srm-shadow); } .srm-login-mark { font-size: 2.5rem; line-height: 1; margin-bottom: 0.35rem; } .srm-login-hint { border-top: 1px solid var(--bs-border-color-translucent); padding-top: 1rem; } /* Subtle, modern scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; }