/* ------------------------------------------------------------------ Global "#F1F5F8" surface knob — still used by the template surfaces that reference theme-2 (.footer, .dSite, report-box pseudo-elements): --menu-active-bg : "R, G, B" triplet (241, 245, 248 = #F1F5F8) Floating menu bar (see "Independent menu bar" section below): --menu-bar-bg : menu pill + dropdown card background --menu-bar-text : menu label colour --menu-bar-radius : nav bar corner radius (now --card-radius, 12px) --menu-item-radius: active/hover item corner radius (now --control-radius, 8px) Transparent content area: --heading-chip-bg : chip behind page-level headings, which sit on the bare site background once .content is transparent Card material (the single content surface — see the .box rule below): --card-bg / --card-border : near-solid white card over any background --card-radius : cards (12px) --control-radius: chips, buttons, badges (8px) ------------------------------------------------------------------ */ :root { --menu-active-bg: 241, 245, 248; --bs-theme-2-rgb: var(--menu-active-bg); /* Default accent for sites with no theme (and after "Kembalikan ke Default"). Blue, dark enough that white button text stays legible. SiteTheme::renderCss overrides these on for themed sites. */ --bs-theme-1-rgb: 28, 63, 170; /* Opaque pastel of the accent for .btn-primary-soft — mixWhite(#1c3faa, 0.18/0.28). */ --btn-soft-bg: #d6dcf0; --btn-soft-bg-hover: #bfc9e7; --menu-bar-bg: #ffffff; --menu-bar-text: #1f2937; /* Nav bar + items follow the same 12/8 system as every other surface — bar is a card, active/hover items are controls. (Was 999px pills.) */ --menu-bar-radius: var(--card-radius); --menu-item-radius: var(--control-radius); --heading-chip-bg: rgba(255, 255, 255, 0.85); /* Single card recipe — the ONLY content surface in the app. Near-solid white so text stays readable over any site background (colour, photo, dark or light); the thin blur + white border are what separate it from the page, not transparency. Deliberately not glassy: this is an emergency console. Applied to .box, which every page already uses. */ --card-bg: rgba(255, 255, 255, 0.94); --card-border: rgba(255, 255, 255, 0.6); --card-radius: 12px; /* Chips, buttons and badges — smaller radius than cards so a chip sitting on a card doesn't produce mismatched concentric corners. */ --control-radius: 8px; /* Dark-mode surfaces (see the "Dark mode" block at the bottom). Cards/bar/ dropdowns share one raised dark tone (template dark-3) with a faint light border for separation; shadow is heavier than light mode to read on dark. */ --card-bg-dark: rgb(var(--bs-dark-3-rgb)); --card-border-dark: rgba(255, 255, 255, 0.07); --card-shadow-dark: 0 4px 16px rgba(0, 0, 0, 0.45); } /* ------------------------------------------------------------------ Transparent page body — the site background shows straight through. Cards (.box) stay opaque white, so the page reads as floating elements. ------------------------------------------------------------------ */ html:not(.dark) .content { background-color: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } /* Same chip, as a reusable class for small standalone labels (status pills, "Live Monitoring", clocks, "last updated", …) sitting on the bare background / panel. inline-block so the chip hugs its own text instead of stretching to the container width (ignored when it's a flex item, which is already fine). */ html:not(.dark) .content .heading-chip { display: inline-block; background-color: var(--heading-chip-bg); padding: 0.35rem 0.75rem; border-radius: var(--control-radius); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } /* Several of these are filled by JS and start empty. Drop the chip styling while empty so no bare pill shows — but never `display: none`, or the element stays invisible if the request that fills it is slow or fails. */ html:not(.dark) .content .heading-chip:empty { background: none; box-shadow: none; padding: 0; } /* Group variant: wraps a small block of related lines (title + meta beneath it) instead of a single label, so it takes a softer corner rather than a full pill. */ html:not(.dark) .content .heading-chip--group { border-radius: var(--card-radius); padding: 0.65rem 1rem; } /* Monitoring pages title their sections with

rather than h2.fs-lg. Chip those too, but ONLY inside a section panel — there are ~159 h1s elsewhere in the app (ticket, mobileApp, user…) that must stay untouched. */ html:not(.dark) .content .section-panel h1 { background-color: var(--heading-chip-bg); padding: 0.35rem 0.9rem; border-radius: var(--control-radius); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } /* …but not in-card labels ("SLA %", "Total Call"), which live inside a .box. */ html:not(.dark) .content .section-panel .box h1 { background-color: transparent; padding: 0; border-radius: 0; box-shadow: none; } /* …and not inside a chip group either — the group already supplies the background, so nesting a chip per heading would double it up. Declared last on purpose: it ties on specificity with the chip rules above, so source order decides. */ html:not(.dark) .content .heading-chip h1, html:not(.dark) .content .heading-chip h2.fs-lg { background-color: transparent; padding: 0; border-radius: 0; box-shadow: none; } /* Section panel — now a pure spacing element, no surface of its own. The old semi-transparent white background went muddy over coloured and photo backgrounds, and its 1rem radius nested badly against the 12px cards inside it. The class is KEPT (not deleted from ~108 places in 58 views) because the h1 chip rule below is anchored to it, and because it still carries page rhythm. */ html:not(.dark) .content .section-panel { background-color: transparent; border-radius: 0; padding: 0; margin-bottom: 1.5rem; } /* ------------------------------------------------------------------ The card. One material, every page — a dashboard of small cards and a full-width table page read as one family because the surface is identical. Overrides app.css:21423 (.375rem radius, near-invisible shadow). ------------------------------------------------------------------ */ html:not(.dark) .box { background-color: var(--card-bg); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } /* ================================================================== DASHBOARD HERO & STATS PANEL (TIERED HIERARCHY) ================================================================== */ /* Main Wrapper - Layer 1 */ .dashboard-tiered-card { border-radius: var(--card-radius); overflow: hidden; background-color: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } /* Area Hero - Layer 2 */ .dashboard-hero-section { position: relative; display: flex; align-items: center; min-height: 120px; padding: 1.5rem 12rem 1.5rem 1.5rem; /* Memberi ruang di kanan untuk jam/logo DSI */ background-color: transparent; /* Mewarisi --card-bg */ } /* Mobile: padding kanan 12rem + dua overlay absolute (jam & logo DSI) menghimpit dan menimpa kolom teks di bawah 768px. Keluarkan kedua overlay ke alur normal, lalu tumpuk semuanya vertikal rata tengah. */ @media (max-width: 767.98px) { .dashboard-hero-section { flex-direction: column; justify-content: center; text-align: center; gap: 1rem; padding: 1.5rem 1.25rem; } /* .me-5 di wrapper logo site menggeser titik tengah kolom */ .dashboard-hero-section > .flex-shrink-0 { margin-right: 0 !important; } /* Jam + logo DSI masuk alur normal. .top-0/.end-0/dst dari Bootstrap ber-!important tapi jadi inert begitu position: static. `right: auto` diperlukan untuk mengalahkan inline `right: 1.5rem`. */ .dashboard-hero-section > .position-absolute { position: static !important; right: auto !important; } /* baris badge (role / ekstensi / nama site) wrap, bukan overflow */ .dashboard-hero-section .hero-meta { flex-wrap: wrap; justify-content: center; } } /* Area Panel Instrumen - Layer 3 */ .dashboard-stats-panel { background-color: #f8fafc; /* Abu-abu sangat muda */ border-top: 1px solid #e2e8f0; padding: 1.25rem; } /* Kartu Stat (Inset) - Layer 4 */ .dashboard-stat-inset { background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 1.25rem; height: 100%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); transition: transform 0.2s ease, box-shadow 0.2s ease; } .dashboard-stat-inset:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); } /* ------------------------------------------------------------------ DARK MODE PENYESUAIAN ------------------------------------------------------------------ */ .dark .dashboard-tiered-card { background-color: var(--card-bg-dark); border-color: var(--card-border-dark); box-shadow: var(--card-shadow-dark); } .dark .dashboard-stats-panel { background-color: rgba(0, 0, 0, 0.15); /* Gelap transparan agar membaur */ border-top-color: var(--card-border-dark); } .dark .dashboard-stat-inset { background-color: var(--card-bg-dark); border: 1px solid var(--card-border-dark); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } /* Accent for the few icons that mark priority (see index.blade.php quick nav). Everything else stays neutral grey — if every icon is coloured, none of them read as important. */ html:not(.dark) .text-accent { color: rgb(var(--bs-theme-1-rgb)) !important; } /* Stat-card icon badge — a soft rounded square (control radius) holding the glyph. Neutral by default; --accent variant reuses the per-site accent pastel so the priority stats (tickets) stand out while ambient ones (date/time) stay quiet. Feather icons stroke with currentColor, so `color` tints the glyph. */ html:not(.dark) .stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--control-radius); background: #eef2f6; color: #64748b; flex-shrink: 0; } html:not(.dark) .stat-icon--accent { background: var(--btn-soft-bg); color: rgb(var(--bs-theme-1-rgb)); } /* ------------------------------------------------------------------ Independent menu bar — a solid white floating pill holding every menu item. Deliberately NOT connected to the page content (the active-tab notch is hidden) and NOT frosted, so the nav reads as its own element. Active/hover tints use --bs-theme-1-rgb, which SiteTheme::renderCss overrides per site, so they follow each site's accent automatically. Light mode only. ------------------------------------------------------------------ */ html:not(.dark) .top-nav, html.dark .top-nav { display: flex; justify-content: center; width: 100%; position: relative; z-index: 50; margin-top: 0.5rem; } html:not(.dark) .top-nav>ul { display: inline-flex; justify-content: center; align-items: center; width: max-content; max-width: 95%; background: var(--menu-bar-bg); border-radius: var(--menu-bar-radius); padding: 0rem; margin: 0.25rem auto 1.25rem; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); gap: 0.05rem; -webkit-backdrop-filter: none; backdrop-filter: none; } body:not(.dark) .top-nav > ul li .top-menu.top-menu--active, body.dark .top-nav > ul li .top-menu.top-menu--active, body:not(.dark) .top-nav > ul > li:hover > .top-menu:not(.top-menu--active), body.dark .top-nav > ul > li:hover > .top-menu:not(.top-menu--active) { background-color: transparent !important; } .top-nav > ul { position: relative; z-index: 1; } .top-nav > ul > li { position: relative; z-index: 2; } /* Height is set by JS to match the hovered/active item. Spanning the full