/* ============================================================ SRMCore – Global Design System Brand: #250C77 (deep violet) | #ED642B (vivid orange) Supports: light / dark theme via [data-theme="dark"] on ============================================================ */ /* ── Design Tokens: Light (default) ──────────────────────────── */ :root { /* Brand */ --clr-violet: #250C77; --clr-violet-lt: #3a1fa8; --clr-violet-xlt: #5b38d4; --clr-orange: #ED642B; --clr-orange-dk: #d45520; --clr-accent-grad: linear-gradient(135deg, #ED642B, #f5883a); --clr-violet-grad: linear-gradient(135deg, #250C77, #3a1fa8); --clr-orange-grad: linear-gradient(135deg, #ED642B, #f5883a); /* Layout */ --header-height: 58px; --sidebar-width: 256px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; /* Light-mode surfaces */ --body-bg: #f3f4fb; --surface: #ffffff; --surface-2: #f8f9fe; --border-clr: #e2e4f0; --header-bg: #ffffff; --header-border: #e2e4f0; --content-bg: #f3f4fb; /* Sidebar (always dark for brand consistency) */ --sidebar-bg: #14103a; --sidebar-border: #221c50; --sidebar-text: rgba(255,255,255,0.85); --sidebar-text-active: #ffffff; --sidebar-hover: rgba(255,255,255,0.07); --sidebar-active-bg: rgba(237,100,43,0.18); --sidebar-active-accent:#ED642B; --sidebar-section-clr: rgba(255,255,255,0.40); /* Text */ --text-primary: #1a1633; --text-secondary: #5e5a7a; --text-muted: #9794b3; --text-on-brand: #ffffff; /* Inputs */ --input-bg: #ffffff; --input-border: #d0d3e8; --input-focus: rgba(37,12,119,0.20); /* Shadows */ --shadow-xs: 0 1px 3px rgba(37,12,119,0.07); --shadow-sm: 0 2px 8px rgba(37,12,119,0.10); --shadow-md: 0 4px 20px rgba(37,12,119,0.14); --shadow-lg: 0 8px 40px rgba(37,12,119,0.18); /* Stat cards */ --stat-border-violet: #250C77; --stat-border-orange: #ED642B; --stat-border-green: #059669; --stat-border-sky: #0284c7; --stat-border-rose: #e11d48; /* Card panel header icon — change here to restyle every panel icon app-wide */ --card-icon-bg: linear-gradient(135deg, #ED642B, #f5883a); --card-icon-shadow: rgba(237,100,43,0.32); --card-icon-size: 32px; --card-icon-radius: 8px; /* Misc */ --transition: 0.22s ease; } /* ── Dark Mode overrides ────────────────────────────────────── */ html.dark { --body-bg: #0d0b22; --surface: #161230; --surface-2: #1e1944; --border-clr: #2d2860; --header-bg: #161230; --header-border: #2d2860; --content-bg: #0d0b22; --text-primary: #eeeaf8; --text-secondary: #c8c4e0; --text-muted: #9490b8; --input-bg: #1e1944; --input-border: #3a3570; --input-focus: rgba(90,60,220,0.28); --shadow-xs: 0 1px 3px rgba(0,0,0,0.35); --shadow-sm: 0 2px 8px rgba(0,0,0,0.45); --shadow-md: 0 4px 20px rgba(0,0,0,0.55); --shadow-lg: 0 8px 40px rgba(0,0,0,0.65); } /* ── Base Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 14px; background: var(--body-bg); color: var(--text-primary); height: 100%; transition: background var(--transition), color var(--transition); } a { color: var(--clr-violet); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--clr-orange); } h1:focus { outline: none; } /* ============================================================ Layout Shell ============================================================ */ .srm-layout { display: flex; min-height: 100vh; background: var(--body-bg); } /* ── Sidebar Container ───────────────────────────────────────── */ .sidebar-container { width: var(--sidebar-width); flex-shrink: 0; position: relative; z-index: 200; transition: width var(--transition); } /* Mobile overlay */ .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.50); z-index: 1039; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .sidebar-overlay.show { opacity: 1; visibility: visible; } /* ── Sidebar ─────────────────────────────────────────────────── */ .srm-sidebar { width: var(--sidebar-width); min-height: 100vh; position: fixed; top: 0; left: 0; border-right: 1px solid var(--sidebar-border); background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; overflow: hidden; transition: transform var(--transition); z-index: 300; } /* Header */ .srm-sidebar-header { padding: 1.1rem 1.15rem 0.7rem; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; } /* Brand */ .srm-brand-logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; } .srm-brand-logo img.srm-brand-img { height: 36px; width: auto; object-fit: contain; } .srm-brand-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--clr-accent-grad); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(37,12,119,0.45); } .srm-brand-icon i { font-size: 1rem; color: #fff; } .srm-brand-name { font-size: 1.05rem; font-weight: 700; color: #f9fafb; white-space: nowrap; letter-spacing: -0.01em; } /* Nav scroll area */ .srm-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.5rem 0.75rem 2rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; } .srm-nav::-webkit-scrollbar { width: 4px; } .srm-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; } /* Nav structure */ .srm-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.2rem; } .srm-nav-section { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--sidebar-section-clr); margin: 1.1rem 0 0.35rem; padding: 0 0.5rem; } .srm-nav-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 0.75rem 0; } /* Nav links */ .srm-nav-link, .srm-nav-toggle { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; color: var(--sidebar-text); text-decoration: none; border: none; background: transparent; width: 100%; text-align: left; cursor: pointer; transition: background var(--transition), color var(--transition); line-height: 1.4; } .srm-nav-toggle--sub { padding-left: 1rem; font-size: 0.83rem; opacity: 0.92; } .srm-nav-link:hover, .srm-nav-toggle:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); } .srm-nav-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-text-active); font-weight: 600; border-left: 3px solid var(--sidebar-active-accent); } .srm-nav-icon { width: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--sidebar-active-accent); font-size: 1rem; opacity: 0.85; } .srm-nav-link.active .srm-nav-icon { opacity: 1; } .srm-nav-chevron { margin-left: auto; font-size: 0.68rem; opacity: 0.6; transition: transform 0.22s ease; flex-shrink: 0; } .srm-nav-toggle[aria-expanded="true"] .srm-nav-chevron { transform: rotate(180deg); opacity: 1; } .srm-nav-sub { list-style: none; padding: 0.25rem 0 0.25rem 1.85rem; margin: 0; display: flex; flex-direction: column; gap: 0.15rem; } .srm-nav-sub .srm-nav-link { font-size: 0.82rem; padding: 0.45rem 0.75rem; border-radius: var(--radius-sm); } /* ============================================================ Main Content Area ============================================================ */ .srm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--body-bg); transition: background var(--transition); } /* ── Top Header ──────────────────────────────────────────────── */ .top-header { height: var(--header-height); background: var(--header-bg); border-bottom: 1px solid var(--header-border); display: flex; align-items: center; padding: 0 1.25rem; gap: 0.4rem; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-xs); transition: background var(--transition), border-color var(--transition); } .header-left { display: flex; align-items: center; flex: 1; min-width: 0; gap: 0.5rem; } .header-right { display: flex; align-items: center; gap: 0.2rem; flex-shrink: 0; } /* Breadcrumb */ .breadcrumb { font-size: 0.78rem; margin-bottom: 0; background: transparent !important; padding: 0 !important; } .breadcrumb-item + .breadcrumb-item::before { content: "/"; font-size: 0.9rem; line-height: 1; color: var(--text-muted); padding: 0 0.3rem; } .breadcrumb-item a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; } .breadcrumb-item a:hover { color: var(--clr-violet); } html.dark .breadcrumb-item a:hover { color: var(--clr-orange); } .breadcrumb-item.active { color: var(--text-primary); font-weight: 600; } /* Strip any nav/ol wrapper background */ nav[aria-label="breadcrumb"] { background: transparent !important; } nav[aria-label="breadcrumb"] ol { background: transparent !important; padding: 0 !important; margin: 0 !important; } /* ── Header Buttons ─────────────────────────────────────────── */ .header-icon-btn { width: 36px; height: 36px; padding: 0; border: none; background: transparent; color: var(--text-secondary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.05rem; transition: background var(--transition), color var(--transition); position: relative; text-decoration: none; flex-shrink: 0; } .header-icon-btn:hover { background: rgba(37,12,119,0.08); color: var(--clr-violet); } html.dark .header-icon-btn { color: #c8c4e0; } html.dark .header-icon-btn:hover { background: rgba(255,255,255,0.09); color: var(--clr-orange); } .header-icon-btn.dropdown-toggle::after { display: none; } /* Theme toggle */ .theme-toggle-btn { position: relative; } .theme-toggle-btn .bi-sun-fill { display: none; } .theme-toggle-btn .bi-moon-fill { display: inline; } html.dark .theme-toggle-btn .bi-sun-fill { display: inline; color: #fbbf24; } html.dark .theme-toggle-btn .bi-moon-fill { display: none; } /* User button */ .header-user-btn { width: auto; gap: 0.4rem; padding: 0.25rem 0.6rem; border-radius: 20px; border: 1px solid var(--border-clr); } .header-user-btn:hover { background: rgba(37,12,119,0.06); border-color: var(--clr-violet); } html.dark .header-user-btn:hover { background: rgba(255,255,255,0.07); border-color: var(--clr-orange); } .avatar-circle { width: 30px; height: 30px; border-radius: 50%; background: var(--clr-accent-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.85rem; flex-shrink: 0; } .badge-dot { width: 8px; height: 8px; border-radius: 50%; position: absolute; top: 5px; right: 5px; border: 2px solid var(--header-bg); pointer-events: none; } /* Mobile hamburger */ .sidebar-toggle-btn { width: 36px; height: 36px; border: none; background: transparent; color: var(--text-secondary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition), color var(--transition); } .sidebar-toggle-btn:hover { background: rgba(37,12,119,0.08); color: var(--clr-violet); } /* ── Page Content ────────────────────────────────────────────── */ .page-content { flex: 1; padding: 1.5rem; min-width: 0; } /* ============================================================ Generic Card (srm-card) ============================================================ */ .srm-card { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border-clr); box-shadow: var(--shadow-sm); overflow: hidden; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); } html.dark .srm-card { background: #1e1944; border-color: #3a3570; } .srm-card-header { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-clr); background: #ED642B; } .srm-card-title { font-size: 0.925rem; font-weight: 700; flex: 1; color: rgb(255, 255, 255); } .srm-card-body { padding: 1.25rem; color: var(--text-primary); } /* Bootstrap .card overrides */ .card { background: var(--surface) !important; border-color: var(--border-clr) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; color: var(--text-primary) !important; transition: background var(--transition), border-color var(--transition); } html.dark .card { background: #1e1944 !important; border-color: #3a3570 !important; } html.dark .card-header { background: #1a1640 !important; border-bottom-color: #3a3570 !important; } html.dark .card-footer { background: #1a1640 !important; border-top-color: #3a3570 !important; } .card-header { background: var(--surface) !important; border-bottom: 1px solid var(--border-clr) !important; color: var(--text-primary) !important; font-weight: 600; } .card-footer { background: var(--surface-2) !important; border-top: 1px solid var(--border-clr) !important; color: var(--text-primary) !important; } /* ============================================================ Stat Cards (left-border accent, bigger numbers) ============================================================ */ .srm-stat-card { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border-clr); border-left: 4px solid var(--stat-border-violet); box-shadow: var(--shadow-sm); padding: 1.1rem 1.15rem; display: flex; align-items: flex-start; gap: 1rem; transition: box-shadow var(--transition), background var(--transition); } .srm-stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } html.dark .srm-stat-card { background: #1e1944; border-color: #3a3570; } /* Colour variants */ .srm-stat-card--orange { border-left-color: var(--stat-border-orange); } .srm-stat-card--green { border-left-color: var(--stat-border-green); } .srm-stat-card--sky { border-left-color: var(--stat-border-sky); } .srm-stat-card--rose { border-left-color: var(--stat-border-rose); } /* Icon badge */ .srm-stat-icon { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--clr-accent-grad); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(37,12,119,0.28); } .srm-stat-icon i { font-size: 1.15rem; color: #fff; } /* Colour variants for icon */ .srm-stat-icon--orange { background: var(--clr-orange-grad); box-shadow: 0 4px 14px rgba(237,100,43,0.28); } .srm-stat-icon--green { background: linear-gradient(135deg,#059669,#34d399); box-shadow: 0 4px 14px rgba(5,150,105,0.28); } .srm-stat-icon--purple { background: linear-gradient(135deg,#7c3aed,#a78bfa); box-shadow: 0 4px 14px rgba(124,58,237,0.28); } .srm-stat-icon--sky { background: linear-gradient(135deg,#0284c7,#38bdf8); box-shadow: 0 4px 14px rgba(2,132,199,0.28); } .srm-stat-icon--rose { background: linear-gradient(135deg,#e11d48,#fb7185); box-shadow: 0 4px 14px rgba(225,29,72,0.28); } /* Stat body */ .srm-stat-body { flex: 1; min-width: 0; } .srm-stat-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin: 0 0 0.25rem; } .srm-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--text-primary); margin: 0 0 0.3rem; line-height: 1.1; letter-spacing: -0.02em; } .srm-stat-delta { font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; gap: 0.25rem; } .srm-stat-delta--up { color: #059669; } .srm-stat-delta--down { color: #e11d48; } /* ============================================================ Page Header Badge ============================================================ */ .page-icon-badge { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--clr-accent-grad); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(237,100,43,0.35); color: #fff; font-size: 1rem; } .page-icon-badge i { color: #fff !important; } /* ============================================================ Search Header ============================================================ */ .srm-search-header { display: flex; align-items: center; gap: 0.65rem; padding: 0.8rem 1.25rem; background: var(--clr-accent-grad); color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .srm-search-header i { font-size: 0.95rem; } /* ── Themed card header / footer ─────────────────────────────── */ /*.srm-card-header { background: var(--surface-2) !important; border-bottom: 1px solid var(--border-clr) !important; color: var(--text-primary) !important; } */ /* Single control point: the square icon badge inside every panel header. Change --card-icon-bg in :root to restyle ALL panel icons app-wide. */ /*.srm-card-icon { width: var(--card-icon-size); height: var(--card-icon-size); border-radius: var(--card-icon-radius); background: var(--card-icon-bg); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 3px 10px var(--card-icon-shadow); } */ .srm-card-icon i { font-size: 0.9rem; color: #fff !important; } /* Icons INSIDE large page-icon-badge always white */ .page-icon-badge i { color: #fff !important; } .srm-card-footer { background: var(--surface-2) !important; border-top: 1px solid var(--border-clr) !important; } html.dark .srm-card-header { background: #1a1640 !important; border-bottom-color: #3a3570 !important; } html.dark .srm-card-footer { background: #1a1640 !important; border-top-color: #3a3570 !important; } /* ============================================================ Modal Header ============================================================ */ .srm-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.25rem; background: var(--clr-accent-grad); color: #fff; font-size: 0.9rem; } /* ============================================================ Tab Navigation ============================================================ */ .srm-tab-nav { display: flex; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--surface-2); border-bottom: 1px solid var(--border-clr); overflow-x: auto; } .srm-tab-btn { padding: 0.45rem 1.1rem; border: 2px solid var(--border-clr); background: var(--surface); color: var(--text-muted); font-size: 0.875rem; font-weight: 600; cursor: pointer; border-radius: 999px; transition: color 0.12s, background 0.12s, border-color 0.12s, box-shadow 0.12s; white-space: nowrap; display: flex; align-items: center; gap: 0.5rem; line-height: 1.4; /* Instant visual feel — no layout-shift transition */ will-change: background, color; } .srm-tab-btn:hover { color: var(--clr-orange); border-color: var(--clr-orange); background: rgba(237,100,43,0.06); } .srm-tab-btn.active { background: var(--clr-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(237,100,43,0.32); } .srm-tab-btn.active .badge { background: rgba(255,255,255,0.25) !important; color: #fff !important; } html.dark .srm-tab-btn { background: #1e1944; border-color: #3a3570; } html.dark .srm-tab-btn:hover { border-color: var(--clr-orange); background: rgba(237,100,43,0.10); } html.dark .srm-tab-btn.active { background: var(--clr-accent-grad); border-color: transparent; } /* ============================================================ Search-bar style panel header (used on inner sub-cards) ============================================================ */ .srm-panel-header { display: flex; align-items: center; gap: 0.65rem; padding: 0.72rem 1.25rem; background: var(--clr-accent-grad); color: #fff; font-size: 0.88rem; font-weight: 700; border-radius: var(--radius-lg) var(--radius-lg) 0 0; letter-spacing: 0.01em; } .srm-panel-header i { font-size: 1rem; color: #fff !important; } html.dark .srm-panel-header { background: var(--clr-accent-grad); } /* ============================================================ Modal — slide in from right, offset past sidebar ============================================================ */ .modal-sidebar-offset .modal-dialog { margin-left: calc(var(--sidebar-width) + 1rem); margin-right: 1rem; max-width: calc(100vw - var(--sidebar-width) - 2rem); } @media (max-width: 991.98px) { .modal-sidebar-offset .modal-dialog { margin-left: 0.5rem; margin-right: 0.5rem; max-width: calc(100vw - 1rem); } } /* ============================================================ Info Bar — standout investor summary strip ============================================================ */ .investor-info-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2rem; padding: 1rem 1.5rem; background: linear-gradient(135deg, rgba(237,100,43,0.08) 0%, rgba(37,12,119,0.06) 100%); border-bottom: 2px solid var(--clr-orange); border-radius: 0; } html.dark .investor-info-bar { background: linear-gradient(135deg, rgba(237,100,43,0.12) 0%, rgba(37,12,119,0.10) 100%); border-bottom-color: var(--clr-orange); } /* ============================================================ Input group text icons — orange tint ============================================================ */ .input-group-text.icon-accent { color: var(--clr-orange) !important; background: rgba(237,100,43,0.07) !important; border-color: var(--input-border) !important; } .input-group-text.bg-transparent i { color: var(--clr-orange) !important; } .inv-stat__label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 0.15rem; } .inv-stat__value { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); } .inv-stat__value--accent { color: var(--clr-violet); } html.dark .inv-stat__value--accent { color: var(--clr-orange); } .inv-stat-divider { width: 1px; height: 32px; background: var(--border-clr); flex-shrink: 0; } /* ============================================================ Table ============================================================ */ .srm-table { color: var(--text-primary) !important; } .srm-table thead th { background: var(--surface-2) !important; color: var(--text-muted) !important; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; border-bottom: 2px solid var(--border-clr) !important; padding: 0.6rem 0.9rem !important; } .srm-table tbody tr { transition: background var(--transition); border-bottom: 1px solid var(--border-clr) !important; } .srm-table tbody tr:hover { background: rgba(37,12,119,0.04) !important; } html.dark .srm-table tbody tr:hover { background: rgba(255,255,255,0.05) !important; } html.dark .srm-table thead th { background: #1a1640 !important; color: #c8c4e0 !important; border-bottom-color: #3a3570 !important; } html.dark .srm-table td { color: var(--text-primary) !important; } .result-row { cursor: pointer; } .code-badge { display: inline-block; background: rgba(37,12,119,0.08); color: var(--clr-violet); border-radius: 6px; padding: 0.15rem 0.5rem; font-size: 0.78rem; font-weight: 700; font-family: monospace; } [data-theme="dark"] .code-badge, html.dark .code-badge { background: rgba(237,100,43,0.15); color: var(--clr-orange); } /* ============================================================ Bootstrap Form Overrides (dark-mode aware) ============================================================ */ .form-control, .form-select { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition); } .form-control::placeholder { color: var(--text-muted) !important; } .form-control:focus, .form-select:focus { border-color: var(--clr-violet) !important; box-shadow: 0 0 0 3px var(--input-focus) !important; background-color: var(--input-bg) !important; color: var(--text-primary) !important; } html.dark .form-control:focus, html.dark .form-select:focus { border-color: var(--clr-orange) !important; } .form-label { color: var(--text-secondary) !important; font-size: 0.78rem; font-weight: 700; } .input-group-text { background: var(--surface-2) !important; border-color: var(--input-border) !important; color: var(--text-muted) !important; } /* Switches */ .form-check-input:checked { background-color: var(--clr-orange) !important; border-color: var(--clr-orange) !important; } .form-check-input:focus { box-shadow: 0 0 0 3px rgba(237,100,43,0.25) !important; } /* ============================================================ Bootstrap Dropdown Overrides ============================================================ */ .dropdown-menu { background: var(--surface) !important; border-color: var(--border-clr) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-lg) !important; padding: 0.4rem 0 !important; min-width: 180px; } .dropdown-item { color: var(--text-primary) !important; font-size: 0.875rem; padding: 0.45rem 0.9rem !important; transition: background var(--transition), color var(--transition); } .dropdown-item:hover, .dropdown-item:focus { background: rgba(37,12,119,0.07) !important; color: var(--clr-violet) !important; } html.dark .dropdown-menu { background: #1e1944 !important; border-color: #3a3570 !important; } html.dark .dropdown-item { color: #eeeaf8 !important; } html.dark .dropdown-item:hover, html.dark .dropdown-item:focus { background: rgba(237,100,43,0.12) !important; color: var(--clr-orange) !important; } .dropdown-item.active, .dropdown-item:active { background: var(--clr-violet-grad) !important; color: #fff !important; } .dropdown-divider { border-color: var(--border-clr) !important; } .dropdown-header { color: var(--text-muted) !important; font-size: 0.7rem !important; } /* ============================================================ Bootstrap Button Overrides ============================================================ */ .btn-primary { background: var(--clr-violet-grad) !important; border-color: var(--clr-violet) !important; color: #fff !important; border-radius: var(--radius-sm) !important; font-weight: 600; letter-spacing: 0.01em; } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, var(--clr-violet-lt), var(--clr-violet-xlt)) !important; border-color: var(--clr-violet-lt) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(37,12,119,0.35) !important; } .btn-outline-primary { color: var(--clr-violet) !important; border-color: var(--clr-violet) !important; border-radius: var(--radius-sm) !important; font-weight: 600; } .btn-outline-primary:hover { background: var(--clr-violet) !important; color: #fff !important; } .btn-outline-secondary { color: var(--text-secondary) !important; border-color: var(--border-clr) !important; border-radius: var(--radius-sm) !important; background: transparent !important; } .btn-outline-secondary:hover { background: var(--surface-2) !important; color: var(--text-primary) !important; border-color: var(--border-clr) !important; } .btn:focus, .btn:active:focus { box-shadow: 0 0 0 3px rgba(37,12,119,0.20) !important; } /* ============================================================ Badge Overrides ============================================================ */ .badge.bg-primary-subtle { background: rgba(37,12,119,0.10) !important; color: var(--clr-violet) !important; } html.dark .badge.bg-primary-subtle { background: rgba(237,100,43,0.15) !important; color: var(--clr-orange) !important; } /* ============================================================ Alert / Toast Overrides ============================================================ */ .alert { border-radius: var(--radius-md) !important; border: none !important; } .alert-warning { background: rgba(251,191,36,0.12) !important; color: #92400e !important; } html.dark .alert-warning { background: rgba(251,191,36,0.10) !important; color: #fbbf24 !important; } .alert-danger { background: rgba(225,29,72,0.10) !important; color: #9f1239 !important; } html.dark .alert-danger { background: rgba(225,29,72,0.12) !important; color: #fca5a5 !important; } /* Toast */ .srm-toast { position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 9999; padding: 0.85rem 1.15rem; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; min-width: 260px; max-width: 420px; animation: toast-in 0.28s ease; } @keyframes toast-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .srm-toast--ok { background: #ecfdf5; color: #065f46; border-left: 4px solid #059669; } .srm-toast--err { background: #fff1f2; color: #9f1239; border-left: 4px solid #e11d48; } html.dark .srm-toast--ok { background: #052e16; color: #86efac; border-left-color: #4ade80; } html.dark .srm-toast--err { background: #2d0a14; color: #fca5a5; border-left-color: #f87171; } .srm-toast__close { background: transparent; border: none; cursor: pointer; color: inherit; opacity: 0.7; font-size: 0.8rem; margin-left: auto; flex-shrink: 0; padding: 0; } /* ============================================================ Empty State ============================================================ */ .empty-state-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(37,12,119,0.08); display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 1.6rem; color: var(--clr-violet); } html.dark .empty-state-icon { background: rgba(237,100,43,0.12); color: var(--clr-orange); } .dash-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); } /* ============================================================ Dashboard Skeleton Loader ============================================================ */ .skeleton-row { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.6s infinite; border-radius: var(--radius-lg); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Spin for refresh button */ .dash-spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ Progress bars ============================================================ */ .progress { background: var(--surface-2) !important; border-radius: 6px !important; } /* ============================================================ Form Validation ============================================================ */ .valid.modified:not([type=checkbox]) { outline: 1px solid #059669; } .invalid { outline: 1px solid #e11d48; } .validation-message { color: #e11d48; font-size: 0.8rem; } /* ============================================================ Blazor Error UI ============================================================ */ .blazor-error-boundary { background: #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred."; } #blazor-error-ui { color-scheme: light only; background: #fff8e1; border-top: 2px solid #ffc107; bottom: 0; box-shadow: 0 -2px 8px rgba(0,0,0,0.10); box-sizing: border-box; display: none; left: 0; padding: 0.65rem 1.5rem; position: fixed; width: 100%; z-index: 2000; font-size: 0.875rem; color: #1a1a1a; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1rem; color: #666; } /* ============================================================ RTL Support ============================================================ */ .rtl-mode .srm-sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--sidebar-border); } .rtl-mode .srm-nav-link.active { border-left: none; border-right: 3px solid var(--sidebar-active-accent); } .rtl-mode .srm-stat-card { border-left: none; border-right: 4px solid var(--stat-border-violet); } /* ============================================================ Mobile / Responsive ============================================================ */ @media (max-width: 991.98px) { .sidebar-container { width: 0; } .srm-sidebar { transform: translateX(-100%); } .srm-sidebar.mobile-open { transform: translateX(0); } .rtl-mode .srm-sidebar { transform: translateX(100%); } .rtl-mode .srm-sidebar.mobile-open { transform: translateX(0); } .sidebar-overlay { display: block; } .page-content { padding: 1rem; } } @media (min-width: 992px) { .sidebar-container { width: var(--sidebar-width); } } /* ============================================================ Status Badges ============================================================ */ .srm-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; } .srm-badge--active { background: rgba(5,150,105,0.12); color: #059669; } .srm-badge--pending { background: rgba(237,100,43,0.14); color: var(--clr-orange); } .srm-badge--info { background: rgba(37,12,119,0.10); color: #ffffff; } .srm-badge--inactive{ background: rgba(100,100,120,0.10);color: var(--text-muted); } html.dark .srm-badge--info { background: rgba(237,100,43,0.15); color: var(--clr-orange); } /* ============================================================ Misc Utilities ============================================================ */ .tracking-wide { letter-spacing: 0.06em; } .text-muted { color: var(--text-muted) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-danger { color: #e11d48 !important; } .bg-light { background: var(--surface-2) !important; color: var(--text-primary) !important; } html.dark .bg-light { background: #1a1640 !important; } .border-0 { border: none !important; }