/* ============================================================ VaultOps - Inventory Intelligence Dashboard ------------------------------------------------------------ PURPOSE ------- This stylesheet controls the standalone Inventory Intelligence dashboard page. DESIGN INTENT ------------- 1. Keep the overall page background light gray so it does not feel too heavy or overly saturated. 2. Make the floating panels/cards the primary visual object using the branded blue treatment. 3. Maintain strong readability for white and near-white text. 4. Keep the layout responsive for smaller screens. IMPORTANT HTML DEPENDENCY ------------------------- In inventory-intelligence.html, the tag should be: That class is what activates the page-level theme below. CACHE NOTE ---------- After saving CSS changes in IIS/static environments, use: Ctrl + F5 to force a hard refresh. ============================================================ */ /* ============================================================ 1) PAGE-LEVEL THEME / CANVAS ------------------------------------------------------------ This section establishes the overall page background. The request was: - much lighter gray background - blue floating objects So the canvas is light steel gray, while cards remain blue. ============================================================ */ html, body.inventory-page { margin: 0; min-height: 100%; background: linear-gradient(180deg, #d9dee5 0%, #d1d7df 45%, #c8cfd8 100%); color: #eef4ff; opacity: 1; filter: none; } /* The site's internal wrapper should not add any competing background. We keep it transparent so the body gradient shows through cleanly. */ body.inventory-page .page { min-height: 100vh; padding: 24px 36px 40px; background: transparent; opacity: 1; filter: none; } /* Give the top bar a little breathing room from the hero. */ body.inventory-page .topbar { margin-bottom: 12px; } /* Defensive cleanup: If any inherited pseudo-overlays exist from another stylesheet, suppress them for this page. */ body.inventory-page::before, body.inventory-page::after, body.inventory-page .page::before, body.inventory-page .page::after { content: none; display: none; } /* ============================================================ 2) HERO LAYOUT ------------------------------------------------------------ Two-column layout: - left: title and meta - right: control card / published snapshot panel ============================================================ */ .inventory-hero { display: grid; grid-template-columns: 1.35fr 0.95fr; gap: 24px; margin: 18px 0 28px; align-items: stretch; } /* Small capsule label above the main title. */ .eyebrow { display: inline-block; padding: 8px 14px; border-radius: 999px; background: rgba(86, 132, 255, 0.22); color: #eff5ff; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } /* Main page title. */ .inventory-hero h1 { margin: 18px 0 10px; font-size: 2.35rem; line-height: 1.1; color: #ffffff; } /* Supporting hero copy under the title. */ .hero-copy { max-width: 880px; color: #e3edff; font-size: 1.02rem; line-height: 1.65; } /* Wrapper for the "Vault / Last Refresh / Status" pills. */ .hero-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } /* Shared pill style used in the hero strip. */ .meta-pill { padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.10); color: #eff4ff; font-size: 0.92rem; border: 1px solid rgba(255, 255, 255, 0.10); } /* ============================================================ 3) FLOATING OBJECT SYSTEM ------------------------------------------------------------ These are the key visual surfaces: - control card - dashboard panels - KPI cards The request was to make these blue while the page background stays light gray. This is the core branded treatment. ============================================================ */ .control-card, .dashboard-panel, .kpi-card { border-radius: 22px; border: 1px solid rgba(170, 205, 255, 0.24); background: linear-gradient( 180deg, rgba(47, 95, 178, 0.92) 0%, rgba(39, 81, 156, 0.92) 100% ); backdrop-filter: blur(4px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18); } /* Specific spacing for the top-right published snapshot card. */ .control-card { padding: 24px; height: 100%; } /* Card title text. */ .control-title { font-size: 1.1rem; font-weight: 700; color: #ffffff; } /* Supporting text under the control title. */ .control-subtitle { margin-top: 8px; color: #dce8ff; line-height: 1.5; } /* Mini stat grid inside the published snapshot card. */ .control-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0; } /* Mini stat cards inside the top-right control card. */ .mini-stat { padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.08); } /* Mini stat label. */ .mini-label { color: #d6e4ff; font-size: 0.82rem; margin-bottom: 6px; } /* Mini stat value. */ .mini-value { color: #ffffff; font-size: 1.15rem; font-weight: 700; } /* Main action button. */ .reload-btn { width: 100%; border: 0; border-radius: 16px; padding: 14px 16px; font-size: 0.96rem; font-weight: 700; color: #ffffff; background: linear-gradient(90deg, #5a86ff, #3f67ec); box-shadow: 0 10px 26px rgba(46, 92, 224, 0.30); cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease; } /* Slight hover lift for button affordance. */ .reload-btn:hover { transform: translateY(-1px); opacity: 0.96; } /* Small explanatory note beneath the button. */ .control-note { margin-top: 12px; color: #d7e4ff; font-size: 0.83rem; line-height: 1.5; } /* ============================================================ 4) DASHBOARD GRID ------------------------------------------------------------ This controls the main vertical stack of dashboard sections. ============================================================ */ .inventory-dashboard { display: flex; flex-direction: column; gap: 22px; margin-bottom: 36px; } /* KPI card grid: 4-up desktop layout. */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } /* Individual KPI card padding. */ .kpi-card { padding: 20px; } /* Small KPI heading. */ .kpi-label { color: #d9e6ff; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; } /* Large KPI number. */ .kpi-value { color: #ffffff; font-size: 2rem; font-weight: 800; margin-top: 8px; } /* KPI supporting text. */ .kpi-sub { color: #e1ebff; margin-top: 10px; font-size: 0.9rem; } /* Two-column panel rows for charts/tables. */ .panel-grid.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* Shared panel spacing. */ .dashboard-panel { padding: 22px; } /* Panel heading. */ .panel-header h2 { margin: 0; font-size: 1.25rem; color: #ffffff; } /* Panel descriptive text. */ .panel-header p { margin: 8px 0 18px; color: #dce8ff; line-height: 1.5; } /* ============================================================ 5) HORIZONTAL BAR VISUALS ------------------------------------------------------------ These are pure CSS bars used instead of a charting library. ============================================================ */ .bar-stack { display: flex; flex-direction: column; gap: 12px; } /* Each bar row contains: - label - track/fill - numeric value */ .bar-row { display: grid; grid-template-columns: 220px 1fr 96px; gap: 12px; align-items: center; } /* Left-side bar label. */ .bar-label { color: #eff4ff; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Bar track background. */ .bar-track { height: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; } /* Filled portion of the bar. */ .bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8db0ff, #5f88ff); } /* Right-side numeric value. */ .bar-value { color: #ffffff; text-align: right; font-size: 0.9rem; font-weight: 700; } /* ============================================================ 6) TABLE SYSTEM ------------------------------------------------------------ Detail tables for lower-page drill-down sections. ============================================================ */ /* Outer scroll wrapper. */ .table-wrap { overflow: auto; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.06); } /* Base table element. */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } /* Sticky table header row. */ .data-table thead th { position: sticky; top: 0; background: rgba(20, 42, 82, 0.96); color: #f0f5ff; text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); } /* Table body cells. */ .data-table tbody td { padding: 12px 14px; color: #ecf3ff; border-bottom: 1px solid rgba(255, 255, 255, 0.08); vertical-align: top; } /* Hover affordance to aid row scanning. */ .data-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); } /* Numeric columns right-aligned. */ .data-table td.num, .data-table th.num { text-align: right; } /* Friendly fallback when a panel has no rows. */ .empty-state { padding: 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.08); color: #d8e6ff; } /* Optional loading-state helper. */ .loading-state { color: #eef4ff; padding: 14px 0; } /* ============================================================ 8) CANVAS TEXT CORRECTION ------------------------------------------------------------ The page now uses a light gray background. That means text that sits directly on the page canvas (not inside blue cards) must use darker colors. Without this correction, the hero title, intro text, and status pills appear washed out. ============================================================ */ /* Main hero title sitting directly on the gray background */ .inventory-hero h1 { color: #24364f; } /* Supporting paragraph under the main hero title */ .hero-copy { color: #465c78; } /* Small capsule label above the title */ .eyebrow { background: rgba(70, 110, 190, 0.16); color: #2d4f87; } /* Hero status pills: These sit on the gray background, so they need darker text and a slightly more visible pill background/border. */ .meta-pill { background: rgba(255, 255, 255, 0.34); color: #2d486f; border: 1px solid rgba(90, 110, 140, 0.18); } /* Make the bold labels inside the pills slightly darker still */ .meta-pill strong { color: #1e3552; } /* ============================================================ 7) RESPONSIVE BEHAVIOR ------------------------------------------------------------ Desktop: - 4 KPI columns - 2 panel columns Medium: - 2 KPI columns - 2 panel columns Small/mobile: - single column ============================================================ */ @media (max-width: 1180px) { .inventory-hero, .panel-grid.two-up, .kpi-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 820px) { .inventory-hero, .panel-grid.two-up, .kpi-grid { grid-template-columns: 1fr; } .bar-row { grid-template-columns: 1fr; gap: 8px; } .bar-value { text-align: left; } body.inventory-page .page { padding: 18px 18px 28px; } }