/* ============================================================ EVCMS admin theme — YZEN-inspired FULL DARK + green accent. Restyles the stock Bootstrap Blazor template in place. ============================================================ */ :root { --brand: #1177d3; /* SHAKTI blue */ --brand-rgb: 17, 119, 211; --brand-dark: #0b57a6; --bg: #0e1626; /* page background */ --sidebar-bg: #0a111f; /* darkest */ --card-bg: #16203a; /* panels / cards */ --card-bg-2: #1b2742; /* hover / inputs */ --border: #243049; /* dividers / borders */ --text: #e7ecf4; /* primary text */ --muted: #8a96ad; /* secondary text */ --sidebar-text: #9aa6bf; --sidebar-muted: #5d6a86; --card-radius: 12px; --shadow: 0 6px 24px rgba(0, 0, 0, .35); --ok: #22c55e; --warn: #f5a524; --danger: #f0556d; --nav-hover: rgba(255, 255, 255, .06); --nav-active-fg: #7fb8f5; } /* ---- light theme (toggled via ) ---- */ :root[data-theme="light"] { --bg: #f4f6fb; --sidebar-bg: #ffffff; --card-bg: #ffffff; --card-bg-2: #eef1f7; --border: #e6e9f0; --text: #1f2a44; --muted: #6b7689; --sidebar-text: #4a5570; --sidebar-muted: #98a2b3; --nav-hover: rgba(0, 0, 0, .04); --nav-active-fg: #0b57a6; } :root[data-theme="light"] body { background: var(--bg); } :root[data-theme="light"] .card.shadow-sm { box-shadow: 0 1px 3px rgba(16, 24, 40, .08) !important; } :root[data-theme="light"] .table-hover > tbody > tr:hover > * { background: rgba(17, 119, 211, .06); } :root[data-theme="light"] .btn-close { filter: none; } :root[data-theme="light"] code { color: #3a55d8; } :root[data-theme="light"] .bg-success { color: #15803d !important; } :root[data-theme="light"] .bg-danger { color: #b42318 !important; } :root[data-theme="light"] .bg-warning { color: #b54708 !important; } :root[data-theme="light"] .bg-info { color: #0369a1 !important; } :root[data-theme="light"] .bg-primary { color: #0b57a6 !important; } :root[data-theme="light"] .bg-secondary { color: #5b6577 !important; } /* Collapsible menu groups (global so the styles apply inside the DynamicNav child component, which component-scoped CSS does not reach). Rendered as a full-width row with a chevron. */ .nav-group { display: flex; align-items: center; width: 100%; background: transparent; border: 0; cursor: pointer; color: var(--sidebar-text, #9aa6bf); border-radius: 9px; padding: .6rem .75rem; margin: .1rem 0; font-size: .9rem; font-weight: 600; text-align: left; } .nav-group:hover { background: var(--nav-hover, rgba(255, 255, 255, .06)); color: var(--text, #fff); } .nav-group-title { flex: 1; } .nav-group-caret { margin-left: auto; font-size: .65rem; opacity: .7; transition: transform .15s ease; } /* Children of a group; indented slightly and hidden when the group is collapsed. */ .nav-group-items { padding-left: .35rem; } .nav-group-items.is-collapsed { display: none; } /* ---- collapsed icon-rail sidebar (desktop) ---- */ @media (min-width: 641px) { .page.sidebar-collapsed .sidebar { width: 72px; } .page.sidebar-collapsed .brand { justify-content: center; padding: 0; } .page.sidebar-collapsed .brand-name, .page.sidebar-collapsed .nav-text, .page.sidebar-collapsed .nav-group, .page.sidebar-collapsed .nav-section { display: none; } /* In the icon rail, always show every leaf icon regardless of group collapse state. */ .page.sidebar-collapsed .nav-group-items.is-collapsed { display: block; } .page.sidebar-collapsed a.nav-link { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } .page.sidebar-collapsed a.nav-link .oi { width: auto; } } html, body { font-family: 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 0.9rem; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } .main { background: var(--bg); } .content { padding-top: 1.5rem; padding-bottom: 2rem; } /* typography */ h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 600; letter-spacing: -.01em; } h1 { font-size: 1.5rem; margin-bottom: 1.25rem; } h2 { font-size: 1.3rem; } h4 { font-size: 1rem; } .text-muted { color: var(--muted) !important; } small, .small { font-size: .8rem; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-dark); } /* ---- cards ---- */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: none; color: var(--text); } .card.shadow-sm { box-shadow: 0 2px 10px rgba(0,0,0,.2) !important; } .card-header { background: transparent; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: .98rem; padding: .9rem 1.2rem; } .card-body { padding: 1.15rem; } .card-subtitle, .card-text { color: var(--text); } /* ---- tables ---- */ .table { color: var(--text); margin-bottom: 0; --bs-table-bg: transparent; --bs-table-color: var(--text); } .table > thead > tr > th { border-bottom: 1px solid var(--border); color: var(--muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: .7rem 1rem; background: transparent; } .table > tbody > tr > td { padding: .75rem 1rem; border-color: var(--border); vertical-align: middle; background: transparent; color: var(--text); } .table-hover > tbody > tr:hover > * { background: rgba(255, 255, 255, .03); color: var(--text); } .table-responsive { border-radius: var(--card-radius); } /* ---- buttons ---- */ .btn { border-radius: 9px; font-weight: 600; font-size: .85rem; } .btn-primary, .btn-primary:focus { background: var(--brand); border-color: var(--brand); color: #ffffff; } .btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #ffffff; } .btn-secondary { background: var(--card-bg-2); border-color: var(--border); color: var(--text); } .btn-secondary:hover { background: #232f4d; border-color: var(--border); color: var(--text); } .btn-outline-primary { color: var(--brand); border-color: rgba(var(--brand-rgb), .5); } .btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); color: #ffffff; } .btn-outline-secondary { color: var(--muted); border-color: var(--border); } .btn-outline-secondary:hover { background: var(--card-bg-2); color: var(--text); border-color: var(--border); } .btn-outline-warning { color: var(--warn); border-color: rgba(245,165,36,.5); } .btn-outline-danger { color: var(--danger); border-color: rgba(240,85,109,.5); } .btn-sm { border-radius: 7px; } /* ---- badges / pills ---- */ .badge { font-weight: 600; padding: .4em .65em; border-radius: 7px; } .bg-success { background: rgba(34, 197, 94, .16) !important; color: #4ade80 !important; } .bg-secondary { background: rgba(138, 150, 173, .16) !important; color: var(--muted) !important; } .bg-danger { background: rgba(240, 85, 109, .16) !important; color: #ff8097 !important; } .bg-warning { background: rgba(245, 165, 36, .16) !important; color: #ffc34d !important; } .bg-info { background: rgba(56, 189, 248, .16) !important; color: #38bdf8 !important; } .bg-primary { background: rgba(17, 119, 211, .16) !important; color: #5aa9f0 !important; } .bg-light { background: rgba(138, 150, 173, .16) !important; color: #aab4c8 !important; } /* keep badge text legible even when Bootstrap forces .text-dark on a dark pill */ .badge.text-dark { color: inherit !important; } /* ---- forms ---- */ .form-control, .form-select { background-color: var(--card-bg-2); border: 1px solid var(--border); border-radius: 9px; padding: .5rem .75rem; color: var(--text); } .form-control::placeholder { color: var(--sidebar-muted); } .form-control:focus, .form-select:focus { background-color: var(--card-bg-2); color: var(--text); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .2); } /* single chevron, no native arrow, correctly positioned (no repeat) */ .form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; 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='%238a96ad' 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 .75rem center; background-size: 14px 12px; padding-right: 2.25rem; } .form-label { font-weight: 600; font-size: .82rem; color: #b8c2d6; margin-bottom: .25rem; } .form-check-input { background-color: var(--card-bg-2); border-color: var(--border); } .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); } /* ---- list group ---- */ .list-group { border-radius: var(--card-radius); overflow: hidden; } .list-group-item { background: transparent; border-color: var(--border); color: var(--text); padding: .75rem 1rem; } /* ---- modal ---- */ .modal-content { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: 0 24px 70px rgba(0, 0, 0, .6); } .modal-header, .modal-footer { border-color: var(--border); } .modal-body { overflow-x: hidden; } .btn-close { filter: invert(1) grayscale(1) brightness(1.5); } /* ---- alerts ---- */ .alert { border-radius: 11px; border: 1px solid transparent; } .alert-danger { background: rgba(240, 85, 109, .12); color: #ff8097; border-color: rgba(240,85,109,.25); } .alert-info { background: rgba(var(--brand-rgb), .1); color: #7fb8f5; border-color: rgba(var(--brand-rgb),.25); } .alert-warning { background: rgba(245, 165, 36, .12); color: #ffc34d; border-color: rgba(245,165,36,.25); } /* ---- pager / nav ---- */ .page-link { background: var(--card-bg); border-color: var(--border); color: var(--text); } .page-link:hover { background: var(--card-bg-2); color: var(--text); } .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #ffffff; } .page-item.disabled .page-link { background: var(--card-bg); border-color: var(--border); color: var(--sidebar-muted); } code { color: #8fb7ff; } hr { border-color: var(--border); }