:root { --civic-primary: #1B3A5C; --civic-primary-dark: #122842; --civic-primary-tint: #EAF0F6; --civic-success: #1F8A5C; --civic-success-tint: #E7F5EE; --civic-warning: #B7791F; --civic-warning-tint: #FBF1E1; --civic-danger: #B3261E; --civic-danger-tint: #FAEAEA; --civic-bg: #F5F6F8; --civic-surface: #FFFFFF; --civic-ink: #1C2126; --civic-ink-muted: #5B6470; --civic-border: #E1E4E9; } html, body { height: 100%; } body { background: var(--civic-bg); color: var(--civic-ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; } h1, h2, h3, h4, h5, h6 { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; letter-spacing: -0.01em; color: var(--civic-ink); } /* ---------- App shell ---------- */ /* Fixed sidebar + fixed-position topbar, only .civic-content scrolls. Sidebar and topbar never participate in page scroll — avoids the asymmetric look of a sticky sidebar staying put while the topbar (title, establishment switcher, logout) scrolls away with the page. */ .civic-sidebar { width: 250px; min-width: 250px; background: var(--civic-primary); color: #fff; position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 1030; transition: left 0.15s ease; } .civic-main { margin-left: 250px; min-height: 100vh; transition: margin-left 0.15s ease; } /* ---------- Sidebar collapse (desktop) ---------- */ /* Driven by a class on , set inline in before first paint (see _Layout.cshtml) so there is no flash of the expanded sidebar on load when the user's last state was collapsed. */ .sidebar-collapse-btn { position: absolute; top: 1.35rem; right: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--civic-surface); border: 1px solid var(--civic-border); color: var(--civic-ink-muted); align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(16,24,40,0.15); z-index: 1031; padding: 0; font-size: 0.8rem; transition: color 0.12s ease, border-color 0.12s ease; } .sidebar-collapse-btn:hover, .sidebar-collapse-btn:focus { color: var(--civic-primary); border-color: var(--civic-primary-tint); } .sidebar-collapse-btn .icon-collapsed { display: none; } html.sidebar-collapsed .sidebar-collapse-btn .icon-expanded { display: none; } html.sidebar-collapsed .sidebar-collapse-btn .icon-collapsed { display: inline-block; } @media (min-width: 992px) { html.sidebar-collapsed .civic-sidebar { width: 76px; min-width: 76px; } html.sidebar-collapsed .civic-main { margin-left: 76px; } html.sidebar-collapsed .civic-sidebar .brand { padding: 1.1rem 0.5rem; text-align: center; } html.sidebar-collapsed .civic-sidebar .brand-title, html.sidebar-collapsed .civic-sidebar .brand-sub, html.sidebar-collapsed .civic-sidebar .nav-label, html.sidebar-collapsed .civic-sidebar .nav-section-label { display: none; } html.sidebar-collapsed .civic-sidebar .civic-nav-item { justify-content: center; padding: 0.6rem; border-left-width: 0; } html.sidebar-collapsed .civic-sidebar .civic-nav-item i { font-size: 1.05rem; } } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 1025; } .sidebar-backdrop.show { display: block; } .sidebar-toggle-btn { border: 1px solid var(--civic-border); background: transparent; color: var(--civic-ink); border-radius: 6px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; } .civic-sidebar .brand { padding: 1.35rem 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); } .civic-sidebar .brand-title { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: #fff; } .civic-sidebar .brand-sub { font-size: 0.72rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); text-transform: uppercase; } /* Flat nav */ .civic-nav { padding: 0.75rem 0.6rem; list-style: none; margin: 0; } .civic-nav .nav-section-label { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: none; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); padding: 0.75rem 0.6rem 0.3rem; cursor: pointer; transition: color 0.12s ease; } .civic-nav .nav-section-label:hover, .civic-nav .nav-section-label:focus { color: rgba(255,255,255,0.75); } .civic-nav .nav-section-label .section-caret { font-size: 0.6rem; flex-shrink: 0; transition: transform 0.15s ease; } .civic-nav .nav-section.collapsed .nav-section-label .section-caret { transform: rotate(-90deg); } .civic-nav .nav-section-items { list-style: none; margin: 0; padding: 0; } html:not(.sidebar-collapsed) .civic-nav .nav-section.collapsed .nav-section-items { display: none; } .civic-nav-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem; margin: 0.15rem 0; border-radius: 8px; color: rgba(255,255,255,0.72); text-decoration: none; font-size: 0.9rem; border-left: 3px solid transparent; transition: background-color 0.12s ease, color 0.12s ease; } a.civic-nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; } .civic-nav-item.active { background: rgba(255,255,255,0.08); color: #fff; font-weight: 600; border-left-color: #fff; } .civic-nav-item.disabled { color: rgba(255,255,255,0.4); opacity: 0.7; cursor: not-allowed; } .civic-nav-item .soon-pill { margin-left: auto; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.6); padding: 0.1rem 0.4rem; border-radius: 10px; } /* ---------- Top bar ---------- */ .civic-topbar { background: var(--civic-surface); border-bottom: 1px solid var(--civic-border); padding: 0.85rem 1.75rem; position: sticky; top: 0; z-index: 1020; } .civic-topbar .context-crumb { font-size: 0.8rem; color: var(--civic-ink-muted); } .civic-topbar .role-badge { font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 6px; background: var(--civic-primary-tint); color: var(--civic-primary); font-weight: 600; } .btn-logout { color: var(--civic-ink-muted); background: transparent; border: 1px solid var(--civic-border); border-radius: 6px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .btn-logout:hover, .btn-logout:focus { background: var(--civic-danger-tint); color: var(--civic-danger); border-color: var(--civic-danger-tint); } /* ---------- Content ---------- */ .civic-content { flex: 1; padding: 1.75rem; } .civic-page-title { font-weight: 700; color: var(--civic-ink); } /* ---------- Cards ---------- */ .civic-card { background: var(--civic-surface); border: 1px solid var(--civic-border); border-radius: 10px; box-shadow: 0 1px 2px rgba(16,24,40,0.06); padding: 1.25rem 1.4rem; height: 100%; } .civic-card .stat-figure { font-weight: 700; font-size: 2rem; font-variant-numeric: tabular-nums; color: var(--civic-ink); line-height: 1.15; } .civic-card .stat-label { font-size: 0.82rem; color: var(--civic-ink-muted); } .civic-card .stat-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--civic-primary-tint); color: var(--civic-primary); font-size: 1.1rem; } .civic-card .stat-icon.success { background: var(--civic-success-tint); color: var(--civic-success); } .civic-card .stat-icon.warning { background: var(--civic-warning-tint); color: var(--civic-warning); } .civic-card .stat-icon.danger { background: var(--civic-danger-tint); color: var(--civic-danger); } /* Clickable stat cards — dashboard icons that open their module. Anchor-wrapped .civic-card gets a hover lift + arrow reveal so it reads as navigable without departing from the flat, restrained card style. */ a.civic-card { display: block; color: inherit; text-decoration: none; position: relative; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } a.civic-card:hover, a.civic-card:focus { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16,24,40,0.1); border-color: var(--civic-primary-tint); color: inherit; } a.civic-card .stat-go { position: absolute; top: 1.1rem; right: 1.1rem; color: var(--civic-ink-muted); opacity: 0; transform: translateX(-4px); transition: opacity 0.12s ease, transform 0.12s ease; font-size: 0.95rem; } a.civic-card:hover .stat-go, a.civic-card:focus .stat-go { opacity: 1; transform: translateX(0); } .civic-card.stat-static { cursor: default; } /* Compact horizontal stat card — icon + figure/label in one row, used on dashboards instead of the old stacked layout so more cards fit above the fold without losing scanability. */ .civic-card.stat-card { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0.9rem; } .civic-card.stat-card .stat-icon { width: 34px; height: 34px; min-width: 34px; font-size: 0.95rem; margin-bottom: 0 !important; } .civic-card.stat-card .stat-body { min-width: 0; flex: 1 1 auto; } .civic-card.stat-card .stat-figure { font-size: 1.3rem; line-height: 1.15; } .civic-card.stat-card .stat-label { font-size: 0.74rem; line-height: 1.25; } .civic-card.stat-card .stat-go { position: static; margin-left: auto; flex-shrink: 0; opacity: 0; transform: none; } a.civic-card.stat-card:hover .stat-go, a.civic-card.stat-card:focus .stat-go { opacity: 1; } .dashboard-section-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--civic-ink-muted); margin: 0 0 0.6rem; } .civic-card-header-link { font-size: 0.78rem; font-weight: 600; color: var(--civic-primary); text-decoration: none; } .civic-card-header-link:hover { text-decoration: underline; color: var(--civic-primary); } /* Status badges — tinted pill, not solid fill */ .status-badge { font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; display: inline-block; } .status-good, .status-in_stock, .status-active, .status-success { background: var(--civic-success-tint); color: var(--civic-success); } .status-issued, .status-fair, .status-pending, .status-warning { background: var(--civic-warning-tint); color: var(--civic-warning); } .status-poor, .status-under_repair, .status-low, .status-danger { background: var(--civic-danger-tint); color: var(--civic-danger); } .status-condemned, .status-returned, .status-inactive { background: rgba(91,100,112,0.12); color: var(--civic-ink-muted); } /* Lost is deliberately distinct from condemned — a missing/unaccounted-for asset (potential loss/theft, may need follow-up) reads differently from a routine worn-out-and-scrapped condemnation. */ .status-lost { background: var(--civic-primary-tint); color: var(--civic-primary); } /* Found at a different branch than fixed_assets.current_branch_id records — deliberately its own color too, not reused warning/danger: this is a discovery worth standing out on its own checklist row, distinct from an ordinary missing-asset or condition finding. */ .status-wrong_branch { background: #F1E9FB; color: #6E3B9E; } /* Whole-row treatment for a "Found at Wrong Branch" checklist/detail line — same family as the badge above, so the row reads as a distinct kind of finding at a glance rather than blending into an ordinary missing/danger row. */ .wrong-branch-row { background-color: #FBF7FE; } /* A fixed asset physically found during a verification visit that was never in the system at all, registered on the spot ("+ Register Unlisted Asset"). Its own teal-blue color, distinct from wrong_branch's violet and from success/warning/danger — this is a positive find with nothing left to follow up on, not a discrepancy needing correction. */ .status-newly_registered { background: #E3F2FA; color: #1B6E8C; } /* Whole-row treatment for a fixed asset whose most recent verification visit found it missing (docs/WORKFLOWS.md section 10) — reuses the existing warning tint rather than a new color, since this is the same "needs a look" severity as any other warning state, just surfaced on rows outside the Discrepancy Report (Fixed Asset Register, Branch Asset Report, Asset Detail). Auto-clears once a later visit finds it present again or it's Written Off — purely derived, never a stored flag. */ .flagged-missing-row { background-color: var(--civic-warning-tint); } .newly-registered-row { background-color: #F3FAFD; } .civic-empty-state { text-align: center; padding: 2rem 1rem; color: var(--civic-ink-muted); } .civic-empty-state i { font-size: 1.6rem; color: var(--civic-ink-muted); margin-bottom: 0.5rem; display: inline-block; } /* Tables */ .civic-table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--civic-ink-muted); background: var(--civic-surface); border-bottom: 1px solid var(--civic-border); font-weight: 600; } .civic-table tbody tr:hover { background: var(--civic-primary-tint); } /* Buttons */ .btn-civic-primary { background: var(--civic-primary); border-color: var(--civic-primary); color: #fff; border-radius: 8px; font-weight: 600; } .btn-civic-primary:hover { background: var(--civic-primary-dark); border-color: var(--civic-primary-dark); color: #fff; } /* Tabs — a segmented-control "track" instead of Bootstrap's default underlined-link look, so module screens (Repairs & Transfers, Fixed Asset Detail) read as a real toggle between views. Track is a sunken neutral rail; the active tab is a solid civic-primary pill so it's unambiguous at a glance which view is selected. */ .nav-tabs { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; background: var(--civic-bg); border: 1px solid var(--civic-border); border-bottom: 1px solid var(--civic-border); border-radius: 10px; padding: 0.25rem; margin-bottom: 1.25rem; } .nav-tabs .nav-item { margin-bottom: 0; } .nav-tabs .nav-link { border: none; border-radius: 8px; padding: 0.5rem 1.1rem; font-size: 0.875rem; font-weight: 600; color: var(--civic-ink-muted); background: transparent; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .nav-tabs .nav-link:hover { border: none; color: var(--civic-primary); background: var(--civic-surface); } .nav-tabs .nav-link.active { border: none; background: var(--civic-primary); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.15); } .nav-tabs .nav-link.active:hover { color: #fff; } .nav-tabs .nav-link.active .badge { background: rgba(255, 255, 255, 0.25) !important; color: #fff; } /* Toggle switches — Bootstrap's form-switch, themed to the civic palette so on/off flags (Fixed Asset, Personal Asset, condemn-instead-of-return) read as modern toggles rather than plain checkboxes. */ .form-switch .form-check-input { width: 2.5em; height: 1.4em; cursor: pointer; } .form-switch .form-check-input:checked { background-color: var(--civic-primary); border-color: var(--civic-primary); } .form-switch .form-check-input:focus { border-color: var(--civic-primary); box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.15); } .form-switch .form-check-label { padding-top: 0.15em; } /* Validation states — hidden until unobtrusive validation actually flags an error; without these rules the summary/field spans render as empty red boxes on every page load, even with no errors. */ .validation-summary-valid, .field-validation-valid { display: none; } .validation-summary-errors { color: var(--civic-danger); } .field-validation-error { color: var(--civic-danger); font-size: 0.82rem; } .input-validation-error { border-color: var(--civic-danger) !important; } /* Form pages — centered card instead of flush to one side */ .civic-form-page { display: flex; justify-content: center; } .civic-form-card { width: 100%; max-width: 560px; } /* Chart containers — fixed height wrapper prevents Chart.js responsive-resize feedback loop (unbounded canvas growth) */ .chart-wrap { position: relative; height: 260px; width: 100%; } @media (max-width: 991.98px) { .civic-sidebar { left: -250px; } .civic-sidebar.open { left: 0; } .civic-main { margin-left: 0; } } /* ---------- Reports — letterhead + formal print table ---------- */ .report-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; } /* Letterhead — centered masthead block, double rule underneath, the government-audit-document look the plain dashboard-style header didn't have. Always visible on screen too, not just in print, so what you see is what gets printed. Establishment identity sits left, document metadata sits right; if Content/images/logo.png hasn't been supplied yet, the broken hides itself (inline onerror on the tag) and the identity block still reads correctly with just the two text lines. */ .report-letterhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding-bottom: 1.1rem; margin-bottom: 1.75rem; border-bottom: 2px solid var(--civic-ink); } .report-letterhead-brand { display: flex; align-items: center; gap: 0.85rem; } .report-letterhead .report-logo { height: 46px; width: auto; max-width: 140px; object-fit: contain; flex-shrink: 0; } .report-letterhead .report-org { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--civic-ink-muted); } .report-letterhead .report-establishment { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--civic-primary); margin-top: 0.15rem; } .report-meta-table { display: grid; grid-template-columns: max-content max-content; column-gap: 0.6rem; row-gap: 0.3rem; margin: 0; flex-shrink: 0; } .report-meta-table dt { grid-column: 1; margin: 0; padding-right: 0.6rem; border-right: 1px solid var(--civic-border); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--civic-ink-muted); text-align: right; white-space: nowrap; } .report-meta-table dt::after { content: ":"; } .report-meta-table dd { grid-column: 2; margin: 0; font-size: 0.82rem; font-weight: 500; color: var(--civic-ink); text-align: left; white-space: nowrap; } /* Formal grid-lined table — distinct from the borderless .civic-table used in operational screens; a printed audit report reads as official with full ruled borders and a shaded header row, not a flat SaaS list. */ .report-table { border-collapse: collapse; width: 100%; } .report-table th, .report-table td { border: 1px solid var(--civic-border); padding: 0.5rem 0.7rem; font-size: 0.85rem; vertical-align: middle; } .report-table thead th { background: var(--civic-primary-tint); color: var(--civic-primary); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.03em; font-weight: 700; } .report-table td.sno, .report-table th.sno { width: 3rem; text-align: center; color: var(--civic-ink-muted); } .report-table tfoot th { background: var(--civic-bg); } .report-table tr { break-inside: avoid; } .report-signature-block { display: flex; justify-content: flex-end; gap: 3rem; margin-top: 3rem; } .report-signature-block .sig-line { width: 200px; border-top: 1px solid var(--civic-ink); padding-top: 0.35rem; font-size: 0.78rem; color: var(--civic-ink-muted); text-align: center; } /* Officio (legal/folio) — the standard sheet size for Pakistani government paperwork, 8.5in x 13in. Every report/print screen prints on this size rather than the browser's A4/Letter default. */ @page { size: 8.5in 13in; margin: 14mm 12mm; } @media print { .civic-sidebar, .civic-topbar, .sidebar-backdrop, .no-print { display: none !important; } .civic-main { margin-left: 0 !important; } .civic-content { padding: 0 !important; } body { background: #fff; } .civic-card { box-shadow: none; border-color: #ccc; } .report-letterhead { border-bottom-color: #000; } .report-table th, .report-table td { border-color: #000 !important; } .report-table thead th { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .report-signature-block .sig-line { border-top-color: #000; } }