/* ============================================================================= * XIMS Network Inventory — Theme (Metronic-inspired, Bootstrap 5 compatible) * ----------------------------------------------------------------------------- * Built atop Bootstrap 5.3 by overriding CSS variables and adding a layer of * refined component styles. Visual language borrowed from Metronic (Keenthemes * Tailwind admin theme): * - System font stack, generous line-height * - Subtle borders > heavy shadows * - Generous rounded corners (10–12px) * - Quiet neutrals + a single brand accent * - Sidebar = 8 collapsible groups, sticky scroll, icon + label * - Light AND dark modes, toggled via [data-bs-theme] on * * No frontend rewrite required — every existing .btn, .card, .table, .form-* * keeps working. This file ONLY overrides variables + adds shell + utilities. * ============================================================================= */ /* ---------- Brand identity (Xonware) ---------- */ :root { --xn-green: #7CB342; --xn-green-fg: #ffffff; --xn-green-dark: #558B2F; --xn-green-light: #DCEDC8; --xn-navy: #1A237E; --xn-navy-light: #283593; } /* ---------- Light mode tokens (default) ---------- */ :root, [data-bs-theme="light"] { /* Surfaces */ --xn-bg-page: #F4F6FA; --xn-bg-card: #FFFFFF; --xn-bg-elev1: #FAFBFC; --xn-bg-elev2: #F1F3F7; --xn-bg-sidebar: #FFFFFF; --xn-bg-sidebar-hover: #F4F6FA; --xn-bg-sidebar-active:#EAF3DD; /* light green tint */ --xn-bg-topbar: #FFFFFF; /* Text */ --xn-fg: #14181F; --xn-fg-muted: #58606D; --xn-fg-subtle: #8892A0; --xn-fg-inv: #FFFFFF; /* Borders */ --xn-border: #E5E8ED; --xn-border-strong: #D2D7DF; --xn-divider: #EEF1F4; /* Brand mapping */ --bs-primary: var(--xn-green); --bs-primary-rgb: 124, 179, 66; /* Status — matched against Metronic palette aesthetic */ --xn-success: #17C653; --xn-success-soft: #E0F8E8; --xn-info: #1B84FF; --xn-info-soft: #DDEEFF; --xn-warning: #F6C000; --xn-warning-soft: #FFF3CC; --xn-danger: #F8285A; --xn-danger-soft: #FFE3EB; --xn-purple: #7239EA; --xn-purple-soft: #E9DEFF; /* Shadows — soft, layered */ --xn-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --xn-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --xn-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --xn-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12); --xn-shadow-focus: 0 0 0 4px rgba(124, 179, 66, 0.18); /* Geometry */ --xn-radius-sm: 6px; --xn-radius: 10px; --xn-radius-lg: 14px; --xn-radius-pill: 999px; /* Layout */ --xn-sidebar-width: 264px; --xn-sidebar-collapsed-width: 64px; --xn-header-height: 60px; --xn-content-pad: 24px; } /* ---------- Dark mode tokens ---------- */ [data-bs-theme="dark"] { --xn-bg-page: #0F1419; --xn-bg-card: #161B22; --xn-bg-elev1: #1C2128; --xn-bg-elev2: #21262D; --xn-bg-sidebar: #161B22; --xn-bg-sidebar-hover: #1C2128; --xn-bg-sidebar-active:#1F2A1A; --xn-bg-topbar: #161B22; --xn-fg: #E6EDF3; --xn-fg-muted: #9EB0BF; --xn-fg-subtle: #6E7C8B; --xn-fg-inv: #14181F; --xn-border: #2D343C; --xn-border-strong: #3A424B; --xn-divider: #232932; --xn-success-soft: #16321F; --xn-info-soft: #102842; --xn-warning-soft: #2E2510; --xn-danger-soft: #361520; --xn-purple-soft: #261A40; --xn-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --xn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --xn-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55); --xn-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6); } /* ============================================================================= * Global resets * ============================================================================= */ html, body { background: var(--xn-bg-page); color: var(--xn-fg); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Base lifted from 14px → 15px after operator feedback. Heading scale below is in rems so it tracks proportionally. */ font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--xn-green-light); color: var(--xn-fg); } a { color: var(--xn-navy-light); text-decoration: none; } a:hover { color: var(--xn-green-dark); text-decoration: underline; text-decoration-thickness: 1px; } h1, h2, h3, h4, h5, h6 { color: var(--xn-fg); font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: 1.6rem; line-height: 1.3; } h2 { font-size: 1.35rem; } h3 { font-size: 1.18rem; } h4 { font-size: 1.04rem; } small, .small { font-size: 0.85rem; } code, .font-monospace, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.85em; } /* ============================================================================= * Layout shell — top bar + sidebar + content * ============================================================================= */ .xn-shell { display: grid; grid-template-columns: var(--xn-sidebar-width) 1fr; grid-template-rows: var(--xn-header-height) 1fr; grid-template-areas: "sidebar topbar" "sidebar content"; min-height: 100vh; transition: grid-template-columns 200ms ease; } .xn-shell.collapsed { grid-template-columns: var(--xn-sidebar-collapsed-width) 1fr; } /* ---------- Top bar ---------- */ .xn-topbar { grid-area: topbar; height: var(--xn-header-height); background: var(--xn-bg-topbar); border-bottom: 1px solid var(--xn-border); display: flex; align-items: center; padding: 0 var(--xn-content-pad); gap: 12px; position: sticky; top: 0; z-index: 30; } .xn-topbar .xn-collapse-toggle { background: transparent; border: 1px solid transparent; color: var(--xn-fg-muted); width: 38px; height: 38px; border-radius: var(--xn-radius-sm); display: inline-flex; align-items: center; justify-content: center; transition: all 120ms ease; } .xn-topbar .xn-collapse-toggle:hover { background: var(--xn-bg-elev2); color: var(--xn-fg); } .xn-topbar .xn-page-title { font-size: 0.95rem; color: var(--xn-fg-muted); margin: 0; font-weight: 500; } .xn-topbar .xn-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .xn-topbar .btn-icon { width: 38px; height: 38px; border-radius: var(--xn-radius-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--xn-fg-muted); background: transparent; border: 1px solid transparent; transition: all 120ms ease; } .xn-topbar .btn-icon:hover { background: var(--xn-bg-elev2); color: var(--xn-fg); } /* ---------- Sidebar ---------- */ .xn-sidebar { grid-area: sidebar; background: var(--xn-bg-sidebar); border-right: 1px solid var(--xn-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 40; } .xn-sidebar-brand { height: var(--xn-header-height); display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--xn-border); gap: 10px; flex-shrink: 0; } .xn-sidebar-brand .xn-logo { width: 32px; height: 32px; background: linear-gradient(135deg, var(--xn-green) 0%, var(--xn-navy-light) 100%); border-radius: 8px; color: white; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; letter-spacing: -0.02em; flex-shrink: 0; } .xn-sidebar-brand .xn-brand-text { font-weight: 700; font-size: 1rem; color: var(--xn-fg); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; } .xn-sidebar-scroll { flex: 1; overflow-y: auto; padding: 12px 8px 24px 8px; scrollbar-width: thin; scrollbar-color: var(--xn-border-strong) transparent; } .xn-sidebar-scroll::-webkit-scrollbar { width: 6px; } .xn-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--xn-border-strong); border-radius: 3px; } /* Group (collapsible category) */ .xn-nav-group { margin-bottom: 4px; } .xn-nav-group-header { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: none; color: var(--xn-fg-subtle); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 14px 6px 14px; cursor: pointer; transition: color 120ms ease; } .xn-nav-group-header:hover { color: var(--xn-fg-muted); } .xn-nav-group-header .xn-chevron { margin-left: auto; font-size: 0.65rem; transition: transform 200ms ease; } .xn-nav-group.collapsed .xn-chevron { transform: rotate(-90deg); } .xn-nav-group-body { overflow: hidden; transition: max-height 220ms ease; } .xn-nav-group.collapsed .xn-nav-group-body { max-height: 0 !important; } /* Item (a link) */ .xn-nav-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin: 1px 6px; border-radius: var(--xn-radius-sm); color: var(--xn-fg-muted); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 120ms ease; white-space: nowrap; overflow: hidden; } .xn-nav-item:hover { background: var(--xn-bg-sidebar-hover); color: var(--xn-fg); text-decoration: none; } .xn-nav-item.active { background: var(--xn-bg-sidebar-active); color: var(--xn-green-dark); font-weight: 600; } [data-bs-theme="dark"] .xn-nav-item.active { color: var(--xn-green); } .xn-nav-item .xn-nav-icon { width: 18px; font-size: 1rem; text-align: center; flex-shrink: 0; color: currentColor; opacity: 0.85; } .xn-nav-item.active .xn-nav-icon { opacity: 1; } .xn-nav-item .xn-nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; } .xn-nav-item .badge { margin-left: auto; font-size: 0.6875rem; } /* Sub-item (nested links) */ .xn-nav-sub { padding-left: 38px !important; font-size: 0.825rem; color: var(--xn-fg-muted); } .xn-nav-sub::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.4; flex-shrink: 0; margin-right: 8px; } /* Collapsed-sidebar mode: hide labels + group headers, show only icons */ .xn-shell.collapsed .xn-sidebar-brand .xn-brand-text, .xn-shell.collapsed .xn-nav-group-header, .xn-shell.collapsed .xn-nav-label, .xn-shell.collapsed .xn-nav-item .badge, .xn-shell.collapsed .xn-nav-sub { display: none; } .xn-shell.collapsed .xn-nav-item { justify-content: center; padding: 10px; margin: 2px 8px; } .xn-shell.collapsed .xn-nav-group { margin-bottom: 0; } .xn-shell.collapsed .xn-nav-group-body { max-height: none !important; } /* ---------- Content ---------- */ .xn-content { grid-area: content; padding: var(--xn-content-pad); min-width: 0; /* prevent overflow on flex/grid children */ } /* ============================================================================= * Card refinement * ============================================================================= */ .card { background: var(--xn-bg-card); border: 1px solid var(--xn-border); border-radius: var(--xn-radius); box-shadow: var(--xn-shadow-xs); transition: box-shadow 180ms ease, border-color 180ms ease; } .card:hover { box-shadow: var(--xn-shadow-sm); } .card-header { background: transparent; border-bottom: 1px solid var(--xn-divider); padding: 14px 18px; font-weight: 600; color: var(--xn-fg); display: flex; align-items: center; gap: 8px; } .card-body { padding: 18px; } .card-footer { background: transparent; border-top: 1px solid var(--xn-divider); padding: 12px 18px; } /* Stat tile — used on dashboard */ .xn-stat-tile { background: var(--xn-bg-card); border: 1px solid var(--xn-border); border-radius: var(--xn-radius); padding: 18px; display: flex; align-items: flex-start; gap: 14px; transition: all 180ms ease; min-height: 100px; } .xn-stat-tile:hover { border-color: var(--xn-border-strong); box-shadow: var(--xn-shadow-sm); transform: translateY(-1px); } .xn-stat-tile .xn-stat-icon { width: 44px; height: 44px; border-radius: var(--xn-radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } .xn-stat-tile .xn-stat-body { flex: 1; min-width: 0; } .xn-stat-tile .xn-stat-label { color: var(--xn-fg-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-bottom: 4px; } .xn-stat-tile .xn-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--xn-fg); letter-spacing: -0.02em; line-height: 1.2; } .xn-stat-tile .xn-stat-delta { font-size: 0.75rem; font-weight: 600; margin-top: 4px; } .xn-stat-tile .xn-stat-delta.up { color: var(--xn-success); } .xn-stat-tile .xn-stat-delta.down { color: var(--xn-danger); } .xn-stat-tile .xn-stat-delta.flat { color: var(--xn-fg-subtle); } /* Stat-icon colour variants */ .xn-stat-icon.green { background: var(--xn-success-soft); color: var(--xn-success); } .xn-stat-icon.blue { background: var(--xn-info-soft); color: var(--xn-info); } .xn-stat-icon.amber { background: var(--xn-warning-soft); color: var(--xn-warning); } .xn-stat-icon.red { background: var(--xn-danger-soft); color: var(--xn-danger); } .xn-stat-icon.purple { background: var(--xn-purple-soft); color: var(--xn-purple); } .xn-stat-icon.navy { background: rgba(26,35,126,0.1); color: var(--xn-navy); } /* Welcome banner — gradient strip with greeting */ .xn-welcome { background: linear-gradient(135deg, var(--xn-green) 0%, var(--xn-navy-light) 100%); color: white; border-radius: var(--xn-radius-lg); padding: 22px 26px; margin-bottom: 22px; display: flex; align-items: center; gap: 20px; box-shadow: var(--xn-shadow-sm); } .xn-welcome h2 { color: white; margin: 0 0 4px 0; } .xn-welcome .xn-welcome-sub { opacity: 0.9; font-size: 0.875rem; } /* ============================================================================= * Button refinement * ============================================================================= */ .btn { font-weight: 500; border-radius: var(--xn-radius-sm); padding: 7px 14px; transition: all 120ms ease; border: 1px solid transparent; font-size: 0.875rem; } .btn:focus, .btn:focus-visible { box-shadow: var(--xn-shadow-focus); outline: none; } .btn-sm { padding: 5px 10px; font-size: 0.8125rem; } .btn-lg { padding: 10px 20px; font-size: 1rem; } .btn-primary { background: var(--xn-green); border-color: var(--xn-green); color: var(--xn-green-fg); } .btn-primary:hover { background: var(--xn-green-dark); border-color: var(--xn-green-dark); color: var(--xn-green-fg); } .btn-secondary { background: var(--xn-bg-elev2); border-color: var(--xn-border); color: var(--xn-fg); } .btn-secondary:hover { background: var(--xn-border); color: var(--xn-fg); } .btn-outline-primary { color: var(--xn-green-dark); border-color: var(--xn-green); } .btn-outline-primary:hover { background: var(--xn-green); color: var(--xn-green-fg); border-color: var(--xn-green); } /* ============================================================================= * Form refinement * ============================================================================= */ .form-control, .form-select { background: var(--xn-bg-card); border: 1px solid var(--xn-border-strong); border-radius: var(--xn-radius-sm); color: var(--xn-fg); padding: 7px 12px; font-size: 0.875rem; transition: border-color 120ms ease, box-shadow 120ms ease; } .form-control:focus, .form-select:focus { border-color: var(--xn-green); box-shadow: var(--xn-shadow-focus); } .form-control-sm, .form-select-sm { padding: 5px 10px; font-size: 0.8125rem; } .form-label { color: var(--xn-fg-muted); font-size: 0.8125rem; font-weight: 500; margin-bottom: 4px; } /* ============================================================================= * Table refinement — strong row separation, subtle column dividers, alternating * zebra stripes for dense-data readability. Header row gets a stronger bottom * border than body rows to anchor the table visually. * ============================================================================= */ .table { color: var(--xn-fg); --bs-table-bg: transparent; --bs-table-border-color: var(--xn-border); --bs-table-hover-bg: var(--xn-bg-elev1); border-color: var(--xn-border); font-size: 0.92rem; } .table thead { background: var(--xn-bg-elev1); } .table thead th { color: var(--xn-fg-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; /* Stronger bottom border to anchor the header against body rows. */ border-bottom: 2px solid var(--xn-border-strong); /* Subtle right border on every column except the last — gives a "grid" feel without the heaviness of full table-bordered. */ border-right: 1px solid var(--xn-divider); padding: 12px 14px; white-space: nowrap; } .table thead th:last-child { border-right: none; } .table tbody td { padding: 11px 14px; /* Visible-but-soft horizontal row separator. */ border-bottom: 1px solid var(--xn-divider); /* Mirror the header's subtle column dividers in the body. */ border-right: 1px solid var(--xn-divider); vertical-align: middle; } .table tbody td:last-child { border-right: none; } .table tbody tr:last-child td { border-bottom: none; } /* Zebra striping — applied as a soft tint on even rows so dense tables stay readable when scanning row-to-row. Subtle enough that it doesn't compete with hover state. */ .table tbody tr:nth-child(even) { background: rgba(0,0,0,0.012); } [data-bs-theme="dark"] .table tbody tr:nth-child(even) { background: rgba(255,255,255,0.020); } .table-hover tbody tr:hover { background: var(--xn-bg-elev1); box-shadow: inset 3px 0 0 var(--xn-green); /* left accent on hover */ } /* Compact variant — tighter padding for high-density inventory tables. */ .table-sm thead th { padding: 8px 10px; font-size: 0.74rem; } .table-sm tbody td { padding: 8px 10px; } .table-sm { font-size: 0.875rem; } /* Bordered variant (Bootstrap class) — keep enabled for tables that opt-in with .table-bordered. Otherwise our subtle column dividers above suffice. */ .table-bordered tbody td, .table-bordered thead th { border-right: 1px solid var(--xn-border); } .table-bordered tbody td:last-child, .table-bordered thead th:last-child { border-right: 1px solid var(--xn-border); } /* Make sure cards containing tables clip their corners cleanly. */ .card > .table:last-child, .card-body.p-0 > .table { margin-bottom: 0; border-bottom-left-radius: var(--xn-radius); border-bottom-right-radius: var(--xn-radius); overflow: hidden; } .card > .table:last-child tbody tr:last-child td:first-child { border-bottom-left-radius: var(--xn-radius); } .card > .table:last-child tbody tr:last-child td:last-child { border-bottom-right-radius: var(--xn-radius); } /* ============================================================================= * Badges + Status pills * ============================================================================= */ .badge { font-weight: 500; border-radius: var(--xn-radius-pill); padding: 3px 10px; font-size: 0.7rem; letter-spacing: 0.02em; } .status-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--xn-radius-pill); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; } .badge-available, .status-badge.badge-available { background: var(--xn-info-soft); color: var(--xn-info); } .badge-assigned, .status-badge.badge-assigned { background: var(--xn-success-soft); color: var(--xn-success); } .badge-active, .status-badge.badge-active { background: var(--xn-success-soft); color: var(--xn-success); } .badge-reserved, .status-badge.badge-reserved { background: var(--xn-warning-soft); color: var(--xn-warning); } .badge-suspended, .status-badge.badge-suspended { background: var(--xn-warning-soft); color: var(--xn-warning); } .badge-released, .status-badge.badge-released { background: var(--xn-bg-elev2); color: var(--xn-fg-muted); } .badge-quarantine,.status-badge.badge-quarantine{ background: var(--xn-danger-soft); color: var(--xn-danger); } /* ============================================================================= * Misc utilities (preserve names used across legacy views) * ============================================================================= */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--xn-divider); } .page-header h1 { margin-bottom: 4px; } .page-header .breadcrumb { margin: 0; padding: 0; font-size: 0.78rem; color: var(--xn-fg-muted); } .page-header .breadcrumb li:not(:last-child)::after { content: " / "; color: var(--xn-fg-subtle); padding: 0 4px; } .help-tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--xn-bg-elev2); color: var(--xn-fg-muted); font-size: 0.65rem; font-weight: 700; cursor: help; margin-left: 4px; } .help-tip:hover { background: var(--xn-border); color: var(--xn-fg); } .help-banner { background: var(--xn-info-soft); border-left: 3px solid var(--xn-info); border-radius: var(--xn-radius-sm); padding: 10px 14px; margin-bottom: 16px; color: var(--xn-fg); font-size: 0.84rem; } .help-banner-title { font-weight: 600; display: block; margin-bottom: 2px; color: var(--xn-info); } /* Bootstrap alert refinement */ .alert { border-radius: var(--xn-radius-sm); border: 1px solid transparent; padding: 10px 14px; font-size: 0.875rem; } .alert-success { background: var(--xn-success-soft); color: var(--xn-success); border-color: transparent; } .alert-danger { background: var(--xn-danger-soft); color: var(--xn-danger); border-color: transparent; } .alert-warning { background: var(--xn-warning-soft); color: var(--xn-warning); border-color: transparent; } .alert-info { background: var(--xn-info-soft); color: var(--xn-info); border-color: transparent; } .alert-secondary { background: var(--xn-bg-elev2); color: var(--xn-fg-muted); border-color: transparent; } /* Dropdown menu */ .dropdown-menu { border: 1px solid var(--xn-border); border-radius: var(--xn-radius); box-shadow: var(--xn-shadow-md); padding: 6px; font-size: 0.875rem; } .dropdown-item { border-radius: var(--xn-radius-sm); padding: 7px 10px; color: var(--xn-fg); } .dropdown-item:hover { background: var(--xn-bg-elev1); color: var(--xn-fg); } .dropdown-divider { border-color: var(--xn-divider); margin: 4px 0; } /* Pagination */ .pagination { gap: 4px; } .page-link { border: 1px solid var(--xn-border); color: var(--xn-fg-muted); border-radius: var(--xn-radius-sm) !important; padding: 4px 10px; font-size: 0.8125rem; } .page-link:hover { background: var(--xn-bg-elev2); color: var(--xn-fg); } .page-item.active .page-link { background: var(--xn-green); border-color: var(--xn-green); color: var(--xn-green-fg); } /* Modals */ .modal-content { background: var(--xn-bg-card); border: 1px solid var(--xn-border); border-radius: var(--xn-radius-lg); box-shadow: var(--xn-shadow-lg); color: var(--xn-fg); } .modal-header { border-bottom: 1px solid var(--xn-divider); } .modal-footer { border-top: 1px solid var(--xn-divider); } /* ============================================================================= * Responsive — mobile drawer behaviour * ============================================================================= */ @media (max-width: 991px) { .xn-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "content"; } .xn-sidebar { position: fixed; left: 0; top: 0; height: 100vh; width: var(--xn-sidebar-width); transform: translateX(-100%); transition: transform 200ms ease; box-shadow: var(--xn-shadow-lg); } .xn-shell.mobile-open .xn-sidebar { transform: translateX(0); } .xn-shell.mobile-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 30; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ============================================================================= * AUTH SCREENS — Login / Forgot Password / Reset / Denied / 2FA * ----------------------------------------------------------------------------- * Metronic-inspired centered-card pattern. Pre-login pages are often the * first thing a tender evaluator sees, so the design carries proportional * weight: generous whitespace, subtle brand-tinted gradient background, * rounded card with soft elevation, large clear typography. * * All colours come from CSS variables defined above, so dark mode and any * future tenant rebrand flow through automatically. * * Used by Views/Account/* via Views/Shared/_LayoutBlank.cshtml. * ============================================================================= */ .xims-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; /* Soft brand-tinted gradient — green sweeps from top-left, navy from bottom-right. Quiet enough not to fight the card; rich enough that the screen doesn't read as a plain white blank. */ background: radial-gradient(ellipse 80% 80% at 20% 10%, rgba(124, 179, 66, 0.10) 0%, transparent 50%), radial-gradient(ellipse 70% 70% at 90% 90%, rgba(26, 35, 126, 0.08) 0%, transparent 50%), var(--xn-bg-page); position: relative; } /* Tiny "Xonware" wordmark in the bottom corner for tender screenshots. */ .xims-login-wrap::after { content: "Xonware Pvt Ltd · XIMS Network Inventory"; position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 0.72rem; color: var(--xn-fg-subtle); letter-spacing: 0.03em; } .xims-login-card { width: 100%; max-width: 420px; background: var(--xn-bg-card); border: 1px solid var(--xn-border); border-radius: var(--xn-radius-lg); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.08); padding: 40px 36px 32px; } /* Top brand block — logo + product name + sub-headline. Tight stacking, center-aligned for that "you're at the front door" feel. */ .xims-login-card .brand-row { text-align: center; margin-bottom: 28px; } .xims-login-card .brand-row img { max-width: 160px; max-height: 48px; margin-bottom: 12px; } .xims-login-card .brand-row h4 { color: var(--xn-fg); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; margin: 4px 0 2px; } .xims-login-card .brand-row small { color: var(--xn-fg-muted); font-size: 0.82rem; } /* Section heading inside cards that don't have a logo block (Forgot, Reset, etc). */ .xims-login-card > h2 { color: var(--xn-fg); font-size: 1.35rem; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; } .xims-login-card > p.text-muted { margin-bottom: 20px; } /* Tighter Bootstrap form spacing — Metronic uses 18-20px gap between fields, Bootstrap default mb-3 = 16px which feels cramped at this card width. */ .xims-login-card .form-label { font-size: 0.8rem; font-weight: 500; color: var(--xn-fg-muted); margin-bottom: 6px; letter-spacing: 0.01em; } .xims-login-card .form-control { padding: 10px 12px; border-radius: var(--xn-radius); border-color: var(--xn-border-strong); background: var(--xn-bg-card); color: var(--xn-fg); font-size: 0.92rem; transition: border-color 120ms ease, box-shadow 120ms ease; } .xims-login-card .form-control:focus { border-color: var(--xn-green); box-shadow: var(--xn-shadow-focus); background: var(--xn-bg-card); } .xims-login-card .form-control::placeholder { color: var(--xn-fg-subtle); } /* Primary submit button — full width, slightly taller than default. */ .xims-login-card .btn-primary { padding: 11px 16px; font-weight: 500; font-size: 0.92rem; letter-spacing: 0.01em; border-radius: var(--xn-radius); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 2px 4px rgba(85, 139, 47, 0.18); } .xims-login-card .btn-primary i { margin-right: 4px; } .xims-login-card .btn-link { color: var(--xn-fg-muted); text-decoration: none; font-size: 0.85rem; } .xims-login-card .btn-link:hover { color: var(--xn-green-dark); text-decoration: underline; } /* Forgot-password link under the Sign-In button. */ .xims-login-card .form-check-label { font-size: 0.85rem; color: var(--xn-fg-muted); } .xims-login-card form > .text-center a.small { color: var(--xn-fg-muted); text-decoration: none; } .xims-login-card form > .text-center a.small:hover { color: var(--xn-green-dark); text-decoration: underline; } /* Bottom-of-card hint text ("Contact your administrator if you need access"). */ .xims-login-card > .text-muted.small.mt-3 { border-top: 1px solid var(--xn-divider); padding-top: 16px; margin-top: 24px !important; font-size: 0.8rem; } /* Validation-summary errors styled compact inside the card. */ .xims-login-card .text-danger { font-size: 0.82rem; margin-bottom: 8px; } /* Language switcher row at the bottom of the login card. */ .xims-login-card .dropdown .btn-outline-secondary { border-color: var(--xn-border); color: var(--xn-fg-muted); font-size: 0.78rem; padding: 4px 10px; } .xims-login-card .dropdown .btn-outline-secondary:hover { border-color: var(--xn-green); color: var(--xn-green-dark); background: transparent; } /* "Access Denied" page — same card but with a dramatic icon. */ .xims-login-card.text-center h4 { color: var(--xn-fg); font-weight: 600; } .xims-login-card.text-center p.text-muted { font-size: 0.92rem; } /* Responsive — collapse padding on narrow screens. */ @media (max-width: 480px) { .xims-login-card { padding: 28px 22px 24px; } .xims-login-card .brand-row { margin-bottom: 22px; } .xims-login-card .brand-row img { max-width: 130px; max-height: 40px; } } /* Dark-mode tweaks — soften the background blobs so they don't glow harshly. */ [data-bs-theme="dark"] .xims-login-wrap { background: radial-gradient(ellipse 80% 80% at 20% 10%, rgba(124, 179, 66, 0.06) 0%, transparent 50%), radial-gradient(ellipse 70% 70% at 90% 90%, rgba(26, 35, 126, 0.20) 0%, transparent 50%), var(--xn-bg-page); } [data-bs-theme="dark"] .xims-login-card .btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 4px rgba(0, 0, 0, 0.3); }