/* ============================================================ Hoddi theme — indigo primary on neutral surfaces. Light and dark palettes switched via Bootstrap 5.3 color modes (data-bs-theme on ). ============================================================ */ /* Brand fonts — IBM Plex Sans (interface) + JetBrains Mono (identifiers). */ @font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-weight: 100 800; font-style: normal; font-display: swap; src: url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2'); } :root { /* Brand ramp (indigo) — identical in both modes. */ --ind-50:#f0f6ff; --ind-100:#e0ecff; --ind-200:#c9daff; --ind-300:#abc1ff; --ind-400:#8aa2ff; --ind-500:#6b82ec; --ind-600:#5265ca; --ind-700:#3d4da4; --ind-800:#2c387c; --ind-900:#1d2656; --vms-topbar-h: 56px; --vms-sidebar-w: 256px; /* Primary action is the same indigo in both themes. */ --bs-primary: #5265ca; --bs-primary-rgb: 82, 101, 202; /* Brand typefaces applied through Bootstrap's font tokens. */ --bs-font-sans-serif: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --bs-font-monospace: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Logo swap by theme (light lockup on light chrome, white on dark). */ .hoddi-only-dark { display: none; } [data-bs-theme="dark"] .hoddi-only-light { display: none; } [data-bs-theme="dark"] .hoddi-only-dark { display: inline-block; } /* ---- Light (default) ---- */ [data-bs-theme="light"], :root { --surface:#f9f9f7; --raised:#ffffff; --sunken:#f4f3f0; --ink:#0b0b0b; --ink-2:#52514e; --ink-3:#6f6e69; --line:#e1e0d9; --line-2:#c9c8c1; --brand:#5265ca; --brand-hover:#3d4da4; --brand-text:#3d4da4; --brand-wash:#f0f6ff; --brand-line:#abc1ff; --sidebar-bg:#1d2656; --sidebar-bg-2:#151c42; --sidebar-fg:#c9daff; --sidebar-muted:#8aa2ff; --sidebar-hover:rgba(255,255,255,.08); /* Bootstrap surface tokens */ --bs-body-bg:#f9f9f7; --bs-body-color:#0b0b0b; --bs-secondary-bg:#f4f3f0; --bs-tertiary-bg:#efeeea; --bs-border-color:#e1e0d9; --bs-card-bg:#ffffff; --bs-card-border-color:#e1e0d9; --bs-emphasis-color:#0b0b0b; --bs-secondary-color:#52514e; --bs-tertiary-color:#6f6e69; --bs-link-color:#3d4da4; --bs-link-hover-color:#2c387c; --bs-link-color-rgb:61,77,164; --bs-heading-color:#0b0b0b; } /* ---- Dark ---- */ [data-bs-theme="dark"] { --surface:#1a1a19; --raised:#212120; --sunken:#141413; --ink:#ffffff; --ink-2:#c3c2b7; --ink-3:#9d9c92; --line:#2c2c2a; --line-2:#45443f; --brand:#5265ca; --brand-hover:#6b82ec; --brand-text:#8aa2ff; --brand-wash:#212437; --brand-line:#3d4da4; --sidebar-bg:#151514; --sidebar-bg-2:#0f0f0e; --sidebar-fg:#c3c2b7; --sidebar-muted:#8f8e87; --sidebar-hover:rgba(255,255,255,.06); --bs-body-bg:#0d0d0d; --bs-body-color:#ffffff; --bs-secondary-bg:#1a1a19; --bs-tertiary-bg:#212120; --bs-border-color:#2c2c2a; --bs-card-bg:#212120; --bs-card-border-color:#2c2c2a; --bs-emphasis-color:#ffffff; --bs-secondary-color:#c3c2b7; --bs-tertiary-color:#9d9c92; --bs-link-color:#8aa2ff; --bs-link-hover-color:#abc1ff; --bs-link-color-rgb:138,162,255; --bs-heading-color:#ffffff; } html { font-size: 15px; position: relative; min-height: 100%; } body.vms-body { margin: 0; background: var(--bs-body-bg); color: var(--bs-body-color); font-family: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Identifiers — plates, phones, ID numbers, codes — in the mono face (0 vs O). */ code, kbd, samp, pre, .font-monospace, .tw-mono, table.dataTable td.dtr-title { font-family: var(--bs-font-monospace); } .btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); } .btn-outline-primary { --bs-btn-color: var(--brand-text); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); } .text-primary { color: var(--brand-text) !important; } .btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus, .form-select:focus { box-shadow: 0 0 0 0.2rem rgba(82, 101, 202, .3); border-color: var(--brand); } a { text-decoration-thickness: 1px; text-underline-offset: 2px; } /* Impersonation bar */ .vms-impersonation-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1060; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 1rem; background: #8a3a17; color: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,.2); } .vms-impersonation-bar span { color: #fff; } body.vms-impersonating { padding-bottom: 3.25rem; } /* Topbar */ .vms-topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--vms-topbar-h); display: flex; align-items: center; gap: .5rem; padding: 0 1rem; background: var(--raised); border-bottom: 1px solid var(--line); z-index: 1040; } .vms-brand { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.1rem; color: var(--ink); text-decoration: none; font-weight: 600; } .vms-brand i { color: var(--vms-accent, var(--brand)); } .vms-burger { font-size: 1.4rem; color: var(--ink-2); padding: .1rem .4rem; } .vms-context { font-size: .85rem; color: var(--ink-2); background: var(--sunken); padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--vms-accent, var(--line)); } .vms-user { color: var(--ink-2); } .vms-theme-toggle { border: 1px solid var(--line-2); color: var(--ink-2); background: transparent; width: 34px; height: 34px; border-radius: 8px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .vms-theme-toggle:hover { background: var(--sunken); color: var(--ink); } /* Shell layout */ .vms-shell { padding-top: var(--vms-topbar-h); } .vms-sidebar { background: var(--sidebar-bg); background-image: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2)); color: var(--sidebar-fg); width: var(--vms-sidebar-w); } @media (min-width: 992px) { .vms-sidebar { position: fixed; top: var(--vms-topbar-h); bottom: 0; left: 0; overflow-y: auto; visibility: visible !important; transition: transform .25s ease; } .vms-main { margin-left: var(--vms-sidebar-w); transition: margin-left .25s ease; } /* Hamburger collapse — slide the sidebar away and reclaim the width. */ body.vms-collapsed .vms-sidebar { transform: translateX(calc(-1 * var(--vms-sidebar-w))); } body.vms-collapsed .vms-main { margin-left: 0; } } /* Keep DataTables pagination & controls on-brand (indigo, not the template's teal). */ .dataTables_wrapper .pagination .page-item.active .page-link, .pagination .page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); color: #fff; } .pagination .page-link { color: var(--brand-text); } .pagination .page-link:hover { color: var(--brand-hover); } .dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dataTables_length select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(82, 101, 202, .25); } /* Prettier, smoother sidebar interactions. */ .vms-nav .nav-parent, .vms-nav .nav-sub .nav-link { transition: background-color .15s ease, color .15s ease; } .vms-nav .nav-sub .nav-link.active { box-shadow: 0 2px 8px rgba(0, 0, 0, .18); } .vms-sidebar::-webkit-scrollbar { width: 8px; } .vms-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 8px; } .vms-sidebar::-webkit-scrollbar-track { background: transparent; } .vms-sidebar .offcanvas-body { padding: .75rem .6rem; } /* Accordion navigation */ .vms-nav { --vms-nav-indent: 2.35rem; } .vms-nav .nav-group { margin-bottom: .15rem; } .vms-nav .nav-parent { display: flex; align-items: center; gap: .65rem; width: 100%; color: var(--sidebar-fg); background: transparent; border: 0; padding: .6rem .7rem; border-radius: .5rem; font-size: .93rem; font-weight: 500; text-align: left; text-decoration: none; } .vms-nav .nav-parent:hover { background: var(--sidebar-hover); color: #fff; } .vms-nav .nav-parent .p-icon { width: 1.2rem; text-align: center; font-size: 1.05rem; flex: none; } .vms-nav .nav-parent .p-label { flex: 1 1 auto; } .vms-nav .nav-parent .p-caret { transition: transform .18s ease; font-size: .8rem; opacity: .75; } .vms-nav .nav-parent[aria-expanded="true"] { color: #fff; background: var(--sidebar-hover); } .vms-nav .nav-parent[aria-expanded="true"] .p-caret { transform: rotate(90deg); } .vms-nav .nav-parent.has-active { color: #fff; } .vms-nav .nav-parent.has-active .p-icon { color: var(--ind-400); } .vms-nav .nav-sub { padding: .15rem 0 .25rem; } .vms-nav .nav-sub .nav-link { display: flex; align-items: center; gap: .55rem; color: var(--sidebar-muted); padding: .4rem .7rem .4rem var(--vms-nav-indent); border-radius: .45rem; font-size: .88rem; position: relative; } .vms-nav .nav-sub .nav-link i { width: 1rem; text-align: center; font-size: .95rem; } .vms-nav .nav-sub .nav-link:hover { background: var(--sidebar-hover); color: #fff; } .vms-nav .nav-sub .nav-link.active { background: var(--brand); color: #fff; } .vms-nav .nav-sub .nav-link.active i { color: #fff; } /* Direct (childless) top-level link */ .vms-nav .nav-parent.is-link.active { background: var(--brand); color: #fff; } .vms-nav .nav-parent.is-link.active .p-icon { color: #fff; } /* Main content */ .vms-main { padding: 1.5rem; } .vms-page-title { font-size: 1.4rem; font-weight: 600; margin-bottom: .25rem; color: var(--ink); } .vms-page-sub { color: var(--ink-3); margin-bottom: 1.25rem; } /* Cards pick up tokens automatically via --bs-card-bg; add subtle shadow only in light. */ [data-bs-theme="light"] .shadow-sm { box-shadow: 0 1px 2px rgba(16,15,15,.06), 0 1px 3px rgba(16,15,15,.05) !important; } [data-bs-theme="dark"] .card { border-color: var(--line); } /* Stat cards */ .vms-stat { background: var(--raised); border: 1px solid var(--line); border-radius: .75rem; padding: 1.1rem 1.25rem; height: 100%; display: flex; justify-content: space-between; align-items: flex-start; } .vms-stat .label { color: var(--ink-3); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; } .vms-stat .value { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--ink); } .vms-stat .icon { font-size: 1.4rem; opacity: .5; } .vms-stat.accent-blue .value { color: var(--brand-text); } .vms-stat.accent-amber .value { color: var(--bs-warning-text-emphasis, #7a4f00); } .vms-stat.accent-red .value { color: var(--bs-danger-text-emphasis, #8f2323); } .vms-stat.accent-green .value { color: var(--bs-success-text-emphasis, #0a5c0a); } /* Empty / placeholder screens */ .vms-empty { background: var(--raised); border: 1px dashed var(--line-2); border-radius: .75rem; padding: 3rem 2rem; text-align: center; color: var(--ink-3); } .vms-empty i { font-size: 2.5rem; color: var(--ink-3); } /* Tables */ .table { --bs-table-bg: transparent; } .card > .table-responsive, .card > .table { margin-bottom: 0; } /* Consistent header tint in both modes (neutralise Bootstrap's light header). */ .table > thead th, thead.table-light th, thead.table-light { --bs-table-bg: var(--sunken); --bs-table-color: var(--ink-3); background-color: var(--sunken); color: var(--ink-3); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; font-weight: 600; } /* DataTables (Bootstrap 5) polish */ div.dt-container .dt-search input, div.dt-container .dt-length select { border: 1px solid var(--line-2); background: var(--raised); color: var(--ink); border-radius: .45rem; } div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; } div.dt-container .dt-paging .dt-paging-button { color: var(--ink-2) !important; } div.dt-container .dt-info, div.dt-container .dt-length label, div.dt-container .dt-search label { color: var(--ink-3); } table.dataTable > tbody > tr { background-color: transparent; } table.dataTable > tbody > tr:hover > * { background-color: var(--sunken); } /* ============================================================ Page hero banner (FR-WEB) — a gradient header per screen. ============================================================ */ .vms-hero { background: linear-gradient(135deg, var(--ind-800), var(--ind-500)); color: #fff; border-radius: 14px; padding: 15px 20px; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; box-shadow: 0 10px 26px rgba(29, 38, 86, .28); } .vms-hero .hero-ico { width: 46px; height: 46px; border-radius: 12px; flex: none; background: rgba(255, 255, 255, .18); display: grid; place-items: center; font-size: 1.3rem; } .vms-hero .hero-txt { min-width: 0; } .vms-hero h1 { font-size: 1.25rem; font-weight: 700; margin: 0; color: #fff; line-height: 1.2; } .vms-hero p { margin: 0; opacity: .88; font-size: .88rem; } .vms-hero .hero-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; } .vms-hero .hero-actions .btn-light { --bs-btn-bg: rgba(255,255,255,.92); --bs-btn-border-color: transparent; --bs-btn-hover-bg:#fff; font-weight: 600; } /* Upgraded KPI stat tiles — icon chip + accent border. */ .vms-stat { position: relative; overflow: hidden; } .vms-stat .chip { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 1.15rem; flex: none; } .vms-stat.accent-blue { border-left: 3px solid var(--brand); } .vms-stat.accent-amber { border-left: 3px solid #d99a1c; } .vms-stat.accent-red { border-left: 3px solid #c2451f; } .vms-stat.accent-green { border-left: 3px solid #2f9e44; } .vms-stat.accent-blue .chip { background: var(--brand-wash); color: var(--brand-text); } .vms-stat.accent-amber .chip { background: var(--bs-warning-bg-subtle, #fdf1d6); color: #a97b00; } .vms-stat.accent-red .chip { background: var(--bs-danger-bg-subtle, #fbe9e1); color: #c2451f; } .vms-stat.accent-green .chip { background: var(--bs-success-bg-subtle, #e6f6e6); color: #2f9e44; } .vms-stat .sub { font-size: .72rem; color: var(--ink-3); margin-top: .3rem; } /* ============================================================ Motion — subtle, purposeful, and reduced-motion aware. ============================================================ */ @keyframes vmsRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes vmsFade { from { opacity: 0; } to { opacity: 1; } } @keyframes vmsPop { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes vmsDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(36px, 26px) scale(1.15); } } @keyframes vmsShimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } } /* Smooth colour changes when toggling theme. */ body.vms-body, .vms-topbar, .vms-sidebar, .card, .vms-stat, .vms-hero, .table > :not(caption) > * > *, .form-control, .form-select, .btn, .badge, .dropdown-menu, .modal-content { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } @media (prefers-reduced-motion: no-preference) { /* Page sections rise in with a gentle stagger. */ .vms-main > * { animation: vmsRise .42s cubic-bezier(.2, .7, .3, 1) both; } .vms-main > *:nth-child(2) { animation-delay: .05s; } .vms-main > *:nth-child(3) { animation-delay: .1s; } .vms-main > *:nth-child(4) { animation-delay: .15s; } .vms-main > *:nth-child(n+5) { animation-delay: .2s; } /* DataTables rows fade in on every draw. */ table.dataTable > tbody > tr { animation: vmsFade .3s ease both; } /* Buttons lift on hover, settle on press. */ .btn { transition: transform .12s ease, box-shadow .12s ease, background-color .15s, border-color .15s, filter .12s; } .btn-primary:hover, .btn-outline-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(82, 101, 202, .28); } .btn:active { transform: translateY(0); } /* Cards lift subtly on hover. */ .card.shadow-sm { transition: box-shadow .18s ease, transform .18s ease; } .card.shadow-sm:hover { transform: translateY(-2px); } } /* Active section accent bar in the sidebar. */ .vms-nav .nav-parent { position: relative; } .vms-nav .nav-parent.has-active::before { content: ""; position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--ind-400); } /* Zebra + hover on all data tables. */ .table-hover > tbody > tr:hover > * { background-color: var(--sunken); } /* Top navigation-progress bar. */ #vms-top-loader { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 20000; background: linear-gradient(90deg, var(--ind-500), var(--ind-300)); box-shadow: 0 0 10px rgba(82, 101, 202, .6); opacity: 0; transition: width .2s ease, opacity .3s ease; } #vms-top-loader.on { opacity: 1; } /* Branded full-screen loader — Hoddi mark inside a spinning indigo ring. */ #vms-loader { position: fixed; inset: 0; z-index: 20050; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: color-mix(in srgb, var(--bs-body-bg) 60%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } #vms-loader.on { display: flex; animation: vmsFade .18s ease; } .vms-spinner { position: relative; width: 74px; height: 74px; display: grid; place-items: center; } .vms-spinner .ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 90deg, var(--brand), var(--ind-300) 45%, transparent 78%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); animation: vmsSpin .8s linear infinite; } .vms-spinner img { width: 36px; height: 36px; animation: vmsPulse 1.4s ease-in-out infinite; } .vms-loader-text { font-size: .82rem; font-weight: 600; letter-spacing: .05em; color: var(--ink-3); text-transform: uppercase; } @keyframes vmsSpin { to { transform: rotate(360deg); } } @keyframes vmsPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.85); opacity: .7; } } /* Skeleton shimmer utility. */ .vms-skeleton { background: linear-gradient(90deg, var(--sunken) 25%, var(--line) 37%, var(--sunken) 63%); background-size: 840px 100%; animation: vmsShimmer 1.3s infinite linear; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { #vms-top-loader { display: none; } .vms-spinner .ring, .vms-spinner img { animation-duration: 1.6s; } .vms-auth-sidebar::before, .vms-auth-sidebar::after { animation: none !important; } } /* ============================================================ Data listing — Boldet-style (pills, action icons, summary). ============================================================ */ /* Status pills with a dot. */ .vms-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.5; background: var(--sunken); color: var(--ink-2); white-space: nowrap; } .vms-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .vms-pill.ok { background: var(--bs-success-bg-subtle, #e6f6e6); color: var(--bs-success-text-emphasis, #0a5c0a); } .vms-pill.danger { background: var(--bs-danger-bg-subtle, #fbe9e1); color: var(--bs-danger-text-emphasis, #8f2323); } .vms-pill.warn { background: var(--bs-warning-bg-subtle, #fdf1d6); color: var(--bs-warning-text-emphasis, #7a4f00); } .vms-pill.info { background: var(--bs-info-bg-subtle, #e8ecfd); color: var(--bs-info-text-emphasis, #33409a); } .vms-pill.muted { background: var(--sunken); color: var(--ink-3); } /* Key/name column link. */ a.tw-name { color: var(--brand-text); font-weight: 600; text-decoration: none; } a.tw-name:hover { text-decoration: underline; } /* Compact square action icons. */ .vms-acts { display: inline-flex; gap: .3rem; justify-content: flex-end; } .btn-icon { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--line-2); background: var(--raised); color: var(--ink-2); font-size: .9rem; line-height: 1; text-decoration: none; transition: transform .12s, background-color .15s, border-color .15s, color .15s; } .btn-icon:hover { transform: translateY(-1px); color: #fff; background: var(--ink-3); border-color: var(--ink-3); } .btn-icon.i-primary { border-color: var(--brand-line); color: var(--brand-text); } .btn-icon.i-primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; } .btn-icon.i-danger { border-color: color-mix(in srgb, var(--bs-danger-text-emphasis, #8f2323) 45%, transparent); color: var(--bs-danger-text-emphasis, #8f2323); } .btn-icon.i-danger:hover { background: var(--bs-danger-text-emphasis, #8f2323); border-color: var(--bs-danger-text-emphasis, #8f2323); color: #fff; } /* Card header with a count pill. */ .vms-card-head { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); } .vms-card-head h2 { font-size: .9rem; font-weight: 700; margin: 0; flex: 1 1 auto; display: inline-flex; align-items: center; gap: .45rem; } .vms-card-head .count { background: var(--sunken); color: var(--ink-3); border-radius: 999px; padding: .1rem .55rem; font-size: .72rem; font-weight: 600; } /* KPI summary strip. */ .vms-mini-stat { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; display: flex; align-items: center; gap: .8rem; height: 100%; } .vms-mini-stat .chip { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 1.15rem; flex: none; } .vms-mini-stat .num { font-size: 1.4rem; font-weight: 700; line-height: 1; color: var(--ink); } .vms-mini-stat .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-top: .2rem; } .vms-mini-stat.i-primary .chip { background: var(--brand-wash); color: var(--brand-text); } .vms-mini-stat.i-success .chip { background: var(--bs-success-bg-subtle, #e6f6e6); color: var(--bs-success-text-emphasis, #0a5c0a); } .vms-mini-stat.i-danger .chip { background: var(--bs-danger-bg-subtle, #fbe9e1); color: var(--bs-danger-text-emphasis, #8f2323); } /* DataTables control bar: comfortable padding, sensible spacing. */ div.dt-container div.dt-layout-start, div.dt-container div.dt-layout-end { padding: .7rem 1rem; } div.dt-container .dt-length select { margin: 0 .4rem; } div.dt-container .dt-search input { margin-left: .4rem; min-width: 220px; } /* Responsive expand control + detail list. */ table.dataTable td.dtr-control:before, table.dataTable th.dtr-control:before { background-color: var(--brand) !important; border: none !important; box-shadow: none !important; line-height: 1rem; } ul.dtr-details { width: 100%; display: block; } ul.dtr-details > li { border-bottom: 1px solid var(--line); padding: .4rem 0; } ul.dtr-details > li:last-child { border-bottom: none; } ul.dtr-details .dtr-title { min-width: 110px; color: var(--ink-3); font-weight: 600; } @media (max-width: 575.98px) { div.dt-container .dt-layout-row { flex-direction: column; gap: .4rem; align-items: stretch; } div.dt-container .dt-search { text-align: left; } div.dt-container .dt-search input { min-width: 0; width: 100%; } .vms-hero { align-items: flex-start; } .vms-hero .hero-actions { margin-left: 0; width: 100%; } } /* ============================================================ Auth (sign-in) — split brand panel + card. ============================================================ */ .vms-auth { min-height: 100vh; display: flex; background: var(--bs-body-bg); } .vms-auth-sidebar { flex: 0 0 44%; max-width: 44%; position: relative; overflow: hidden; background: linear-gradient(155deg, var(--ind-800) 0%, var(--ind-600) 100%); color: #fff; display: flex; align-items: center; justify-content: center; padding: 2.5rem; } .vms-auth-sidebar::before, .vms-auth-sidebar::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); } .vms-auth-sidebar::before { width: 460px; height: 460px; top: -120px; left: -100px; animation: vmsDrift 15s ease-in-out infinite alternate; } .vms-auth-sidebar::after { width: 360px; height: 360px; bottom: -110px; right: -80px; animation: vmsDrift 19s ease-in-out infinite alternate-reverse; } .vms-auth-sidebar .brand-content { position: relative; z-index: 1; max-width: 380px; } .vms-auth-sidebar .brand-logo { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.7rem; font-weight: 700; } .vms-auth-sidebar .brand-logo i { font-size: 2rem; } .vms-auth-sidebar h2 { font-size: 1.9rem; font-weight: 700; margin: 1.4rem 0 .5rem; } .vms-auth-sidebar .lead-sub { opacity: .9; margin-bottom: 1.6rem; } .vms-auth-sidebar .feature-list { list-style: none; padding: 0; margin: 0; } .vms-auth-sidebar .feature-list li { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; opacity: .95; } .vms-auth-sidebar .feature-list li i { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.14); display: grid; place-items: center; } @media (max-width: 991.98px) { .vms-auth-sidebar { display: none; } } .vms-auth-form { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 1.5rem; position: relative; } .vms-auth-card { background: var(--bs-card-bg); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 2.15rem 2rem; width: 100%; max-width: 430px; box-shadow: 0 16px 40px rgba(2, 6, 23, .12); animation: vmsRise .45s cubic-bezier(.2, .7, .3, 1) both; } .vms-auth-brand { text-align: center; margin-bottom: 1.4rem; color: var(--ink); } .vms-auth-brand img { display: block; margin: 0 auto .3rem; } .vms-auth-ico img { display: block; } /* Standalone auth cards (forgot/reset/verify/invite) centre without a brand panel. */ .vms-auth > .vms-auth-card:only-child { margin: auto; } .vms-auth-ico { width: 54px; height: 54px; border-radius: 16px; margin: 0 auto .8rem; display: grid; place-items: center; font-size: 1.5rem; color: #fff; background: linear-gradient(135deg, var(--ind-700), var(--ind-500)); box-shadow: 0 8px 18px rgba(82, 101, 202, .4); animation: vmsPop .4s ease both; } .vms-auth-brand i { color: var(--brand); } .vms-auth .input-group-text { background: var(--sunken); border-color: var(--line-2); color: var(--ink-3); } .vms-auth .password-toggle { cursor: pointer; } .vms-auth-theme { position: absolute; top: 1rem; right: 1.25rem; }