/* Google Fonts loaded via preconnect in HTML head for non-blocking render */
/* ════════════════════════════════════════════════════════════════════════════
GLOBAL IMAGE RENDERING + LOGO RULES
════════════════════════════════════════════════════════════════════════════ */
/* Never stretch logos */
img[src*="matla"] {
object-fit: contain;
flex-shrink: 0;
}
/* Prevent layout shift on logo load */
.nav-logo, .adm-topbar-logo, .adm-rail-logo,
.smp-sidebar-logo, .u-auth-logo, .ml-auth-brand-logo, .footer-logo {
image-rendering: auto;
backface-visibility: hidden;
transform: translateZ(0);
}
/* Dark background logo inversion helper */
.on-dark img[src*="matla"], .navy-bg img[src*="matla"] {
filter: brightness(0) invert(1);
opacity: 0.92;
}
/* ── Navbar logo (User) ─────────────────────────────────────────────────── */
.nav-logo { height: 34px; width: auto; object-fit: contain; display: block; }
/* ── Admin topbar logo ──────────────────────────────────────────────────── */
.adm-topbar-logo {
height: 28px; width: auto; object-fit: contain;
filter: brightness(0) invert(1); opacity: 0.92; cursor: pointer;
}
/* ── Admin rail/sidebar logo ────────────────────────────────────────────── */
.adm-rail-logo {
height: 26px; width: auto; object-fit: contain;
filter: brightness(0) invert(1); opacity: 0.88; cursor: pointer;
}
/* ── SM sidebar logo ────────────────────────────────────────────────────── */
.smp-sidebar-logo {
height: 26px; width: auto; object-fit: contain;
filter: brightness(0) invert(1); opacity: 0.88;
}
/* ── Auth logos ─────────────────────────────────────────────────────────── */
.u-auth-logo, .ml-auth-logo {
height: 40px; width: auto; object-fit: contain;
filter: brightness(0) invert(1); opacity: 0.92;
}
.u-auth-form-logo {
height: 44px; width: 44px; object-fit: contain;
border-radius: 12px; flex-shrink: 0;
}
/* ── Page header watermark ──────────────────────────────────────────────── */
.page-header-watermark {
position: absolute; top: 14px; right: 16px;
height: 28px; width: auto; object-fit: contain;
filter: brightness(0) invert(1); opacity: 0.18;
pointer-events: none; user-select: none;
}
/* ── Hero logo + brand strip ─────────────────────────────────────────────── */
.hero-logo {
width: 72px; height: 72px; object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
display: block; margin: 0 auto 16px;
}
.hero-brand-strip { display: flex; justify-content: center; padding: 12px 0 4px; }
.hero-brand-logo {
height: 22px; width: auto; object-fit: contain;
filter: brightness(0) invert(1); opacity: 0.5;
}
/* ── Modal logos ────────────────────────────────────────────────────────── */
.modal-card .menu-logo, .admin-auth-brand .menu-logo {
width: 48px; height: 48px; object-fit: contain;
border-radius: 10px; flex-shrink: 0;
}
/* ── Site footer ────────────────────────────────────────────────────────── */
.site-footer {
display: flex; align-items: center; justify-content: center;
gap: 10px; padding: 14px 20px;
background: var(--brand, #0B2E52);
color: rgba(255,255,255,0.5); font-size: 0.76rem;
}
.footer-logo {
height: 18px; width: auto; object-fit: contain;
filter: brightness(0) invert(1); opacity: 0.55;
}
:root {
--ink: #0A1324;
--ink-2: #1B2743;
--muted: #5F6E86;
--bg: #F3F6FB;
--surface: #FFFFFF;
--surface-2: #EFF3F8;
--brand: #0B2E52;
--brand-2: #103B6B;
--accent: #F26A21;
--accent-2: #FFB27D;
--ring: rgba(242, 106, 33, 0.32);
--line: rgba(10, 19, 36, 0.08);
--shadow-1: 0 18px 44px rgba(10, 19, 36, 0.18);
--shadow-2: 0 8px 20px rgba(10, 19, 36, 0.12);
--shadow-soft: 0 4px 12px rgba(10, 19, 36, 0.08);
--surface-dark: #0E1626;
--text-darkmode: #E6ECF3;
--muted-darkmode: #9AA7B8;
--line-darkmode: rgba(255, 255, 255, 0.08);
--mx: 50vw;
--my: 30vh;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
--dur-fast: 180ms;
--dur-mid: 280ms;
--dur-page: 320ms;
/* ── Missing custom properties referenced elsewhere ── */
--text-primary: #0A1324;
--text-secondary: #5F6E86;
--accent-blue: #3676ff;
}
/* Mobile dashboard fit + readability hardening */
@media (max-width: 768px) {
#stats-page {
padding-left: 10px !important;
padding-right: 10px !important;
}
#stats-page .stats-dashboard {
gap: 12px !important;
}
#stats-page .stats-section {
padding: 14px !important;
border-radius: 14px !important;
}
#stats-page .targets-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
#stats-page .target-card {
min-width: 0 !important;
padding: 12px !important;
}
#stats-page .target-title,
#stats-page .target-value,
#stats-page .target-hint,
#stats-page .target-note,
#stats-page .target-sub {
word-break: break-word;
overflow-wrap: anywhere;
}
#stats-page .mini-table,
#stats-page .rankings-table {
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
#stats-page .mini-table table,
#stats-page .rankings-table table {
min-width: 520px !important;
}
#stats-page .team-stats,
#stats-page .facility-stats,
#stats-page .coverage-grid,
#stats-page .alert-panel,
#stats-page .heatmap-grid,
#stats-page .forecast-list {
grid-template-columns: 1fr !important;
}
#stats-page .trend-row {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
#stats-page .trend-axis {
margin-left: 0 !important;
}
}
@media (max-width: 768px) {
body.mobile-focus #landing-page .services-section,
body.mobile-focus #landing-page .about-section,
body.mobile-focus #landing-page .section-divider,
body.mobile-focus #stats-page .stats-column:nth-child(n+2),
body.mobile-focus #stats-page .audit-log {
display: none !important;
}
body.mobile-focus #stats-page #individualRankings {
display: block !important;
}
}
@media (max-width: 720px) {
body {
font-size: 15px;
}
.sidebar {
width: min(90vw, 360px);
}
.menu-page-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.menu-header-actions {
width: 100%;
justify-content: flex-start;
gap: 10px;
}
.menu-header-actions .action-btn {
width: auto;
}
.menu-page-actions {
flex-wrap: wrap;
gap: 10px;
}
.menu-page-actions .action-btn,
.menu-page-actions .submit-btn,
.menu-page-actions .back-btn {
width: 100%;
}
.insight-card,
.glass-card,
.modal-card {
padding: 16px;
}
.mini-table {
overflow-x: auto;
}
.mini-table table {
min-width: 680px;
}
.auth-gate-card {
width: min(92vw, 420px);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "IBM Plex Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: var(--ink);
background: radial-gradient(900px 600px at 12% 0%, rgba(16, 59, 107, 0.08), rgba(255, 255, 255, 0)),
radial-gradient(900px 600px at 88% 5%, rgba(23, 162, 164, 0.08), rgba(255, 255, 255, 0)),
var(--bg);
line-height: 1.6;
overflow-x: hidden;
transition: background 0.5s ease, color 0.5s ease;
}
body.app-locked {
overflow: hidden;
}
body.theme-transition,
body.theme-transition * {
transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, transform 0.45s ease;
}
html {
scroll-behavior: smooth;
scrollbar-color: rgba(10, 19, 36, 0.35) transparent;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: rgba(10, 19, 36, 0.25);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
body.dark *::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
}
.skip-link {
position: absolute;
left: -999px;
top: 10px;
background: #FFFFFF;
color: var(--ink-2);
padding: 8px 12px;
border-radius: 10px;
box-shadow: var(--shadow-soft);
z-index: 2000;
}
.skip-link:focus {
left: 12px;
}
.auth-gate {
position: fixed;
inset: 0;
z-index: 3000;
display: none;
align-items: center;
justify-content: center;
padding: 18px;
background:
radial-gradient(520px 300px at 15% 22%, rgba(242, 106, 33, 0.22), transparent 70%),
radial-gradient(620px 340px at 82% 18%, rgba(23, 162, 164, 0.2), transparent 72%),
linear-gradient(135deg, rgba(8, 14, 28, 0.94), rgba(10, 19, 36, 0.9));
backdrop-filter: blur(8px);
overflow-y: auto;
}
.auth-gate.is-open {
display: flex;
}
.auth-gate-card {
width: min(520px, 96vw);
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 22px;
padding: 22px;
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
max-height: calc(100vh - 48px);
overflow-y: auto;
}
.auth-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.auth-brand .menu-logo {
position: static;
width: 60px;
height: 60px;
max-width: none;
max-height: none;
margin: 0;
}
.auth-brand p {
color: var(--muted);
}
.password-strength {
margin-top: 8px;
font-size: 12px;
color: var(--muted);
}
.password-strength-track {
width: 100%;
height: 6px;
border-radius: 999px;
background: rgba(11, 46, 82, 0.12);
overflow: hidden;
margin-bottom: 6px;
}
.password-strength-fill {
height: 100%;
width: 0%;
border-radius: inherit;
transition: width 0.2s ease, background-color 0.2s ease;
}
.password-strength-fill.weak {
background: #dc2626;
}
.password-strength-fill.fair {
background: #f59e0b;
}
.password-strength-fill.good {
background: #0ea5e9;
}
.password-strength-fill.strong {
background: #16a34a;
}
.lead-draft-notice {
margin: 12px 0 14px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(11, 46, 82, 0.16);
background: rgba(11, 46, 82, 0.05);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.lead-draft-notice-text {
color: var(--ink-2);
font-size: 13px;
}
.auth-remember-row {
margin-top: -4px;
}
.auth-remember-label {
width: 100%;
justify-content: flex-start;
gap: 10px;
font-size: 14px;
}
.auth-remember-label input[type="checkbox"] {
margin-right: 4px;
}
.lead-draft-notice-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
body.dark .password-strength-track {
background: rgba(255, 255, 255, 0.18);
}
body.dark .lead-draft-notice {
border-color: rgba(255, 255, 255, 0.24);
background: rgba(255, 255, 255, 0.08);
}
body.dark .lead-draft-notice-text {
color: #f3f4f6;
}
.link-btn {
background: none;
border: none;
color: #0B2E52;
text-decoration: underline;
cursor: pointer;
padding: 0;
font-weight: 700;
}
body.dark .link-btn {
color: #FFD6BC;
}
.learning-body a,
.learning-panel a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(242, 106, 33, 0.12);
color: #9a3e0f;
text-decoration: none;
font-weight: 700;
margin: 8px 0;
}
.payments-tabs .action-btn {
min-width: 120px;
}
.payments-tabs .action-btn.is-active {
border-color: rgba(242, 106, 33, 0.8);
box-shadow: 0 10px 24px rgba(242, 106, 33, 0.18);
}
.payments-list {
margin-top: 14px;
display: grid;
gap: 12px;
}
.payment-card {
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding: 14px;
}
.payment-card h4 {
margin: 0 0 6px;
font-size: 16px;
}
.payment-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
color: var(--muted);
font-size: 13px;
}
.payment-meta span {
background: rgba(242, 106, 33, 0.14);
color: #a64b1a;
padding: 4px 10px;
border-radius: 999px;
font-weight: 700;
}
.copy-btn {
border: 1px solid rgba(242, 106, 33, 0.4);
background: rgba(242, 106, 33, 0.12);
color: #a64b1a;
padding: 4px 10px;
border-radius: 999px;
font-weight: 700;
cursor: pointer;
}
.onboarding-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
margin: 0 0 18px;
border-radius: 16px;
background: rgba(242, 106, 33, 0.12);
border: 1px solid rgba(242, 106, 33, 0.25);
}
.onboarding-banner h4 {
margin: 0 0 6px;
}
.onboarding-banner p {
margin: 0;
color: var(--muted);
}
body.dark .onboarding-banner {
background: rgba(242, 106, 33, 0.18);
border-color: rgba(242, 106, 33, 0.35);
}
@media (max-width: 720px) {
.onboarding-banner {
flex-direction: column;
align-items: flex-start;
}
.onboarding-banner .action-btn {
width: 100%;
}
}
body.dark .copy-btn {
color: #FFD6BC;
border-color: rgba(242, 106, 33, 0.5);
}
.mini-input-stack {
display: grid;
gap: 6px;
}
.mini-input-stack input {
width: 100%;
padding: 6px 10px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.08);
color: inherit;
}
body.dark .mini-input-stack input {
border-color: rgba(255, 255, 255, 0.08);
background: rgba(17, 17, 17, 0.5);
}
body.dark .payment-card {
background: rgba(19, 19, 19, 0.4);
border-color: rgba(255, 255, 255, 0.06);
}
.learning-body a:hover,
.learning-panel a:hover {
background: rgba(242, 106, 33, 0.22);
}
body.dark .learning-body a,
body.dark .learning-panel a {
color: #FFD6BC;
background: rgba(242, 106, 33, 0.18);
}
.auth-mode-switch {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 12px;
width: 100%;
}
.auth-mode-switch .action-btn {
min-width: 0;
width: 100%;
white-space: nowrap;
justify-content: center;
padding: 10px 12px;
}
#authAdminBtn {
display: inline-flex !important;
align-items: center;
justify-content: center;
}
@media (max-width: 560px) {
.auth-mode-switch {
grid-template-columns: 1fr;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
letter-spacing: -0.02em;
}
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid rgba(242, 106, 33, 0.55);
outline-offset: 2px;
}
body.dark {
color: var(--text-darkmode);
background: radial-gradient(900px 600px at 12% 0%, rgba(20, 69, 118, 0.16), rgba(0, 0, 0, 0)),
radial-gradient(900px 600px at 88% 5%, rgba(23, 162, 164, 0.16), rgba(0, 0, 0, 0)),
#0C1321;
}
body.dark .action-btn,
body.dark .sidebar-toggle,
body.dark .sidebar-settings-btn,
body.dark .sidebar-signout-btn,
body.dark .insight-card,
body.dark .modal-card,
body.dark .learning-panel,
body.dark .payment-card,
body.dark .admin-jfa-card,
body.dark .hero-jfa-card,
body.dark .team-card,
body.dark .facility-card,
body.dark .summary-card,
body.dark .target-card,
body.dark .archives-panel,
body.dark .menu-page-header {
transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 200ms ease,
background 200ms ease;
}
body.dark .insight-card:hover,
body.dark .learning-panel:hover,
body.dark .payment-card:hover,
body.dark .admin-jfa-card:hover,
body.dark .hero-jfa-card:hover,
body.dark .team-card:hover,
body.dark .facility-card:hover,
body.dark .summary-card:hover,
body.dark .target-card:hover,
body.dark .archives-panel:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(242, 106, 33, 0.2);
}
body.dark .action-btn:hover,
body.dark .sidebar-toggle:hover,
body.dark .sidebar-settings-btn:hover,
body.dark .sidebar-signout-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(242, 106, 33, 0.25);
}
body.dark .menu-page.is-open {
animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.dark .hero-orb,
body.dark .hero-particles {
filter: drop-shadow(0 0 16px rgba(242, 106, 33, 0.25));
}
body.dark .navbar,
body.dark .flow-stepper,
body.dark .about-card,
body.dark .service-item,
body.dark .registration-form-container,
body.dark .dbd-form-container,
body.dark .stats-section,
body.dark .summary-card,
body.dark .target-card,
body.dark .archives-panel,
body.dark .auto-assign-card,
body.dark .toast,
body.dark .modal-card {
background: rgba(14, 22, 38, 0.9);
border-color: var(--line-darkmode);
}
.navbar,
.flow-stepper,
.about-card,
.service-item,
.registration-form-container,
.dbd-form-container,
.stats-section,
.summary-card,
.target-card,
.archives-panel,
.auto-assign-card,
.toast,
.modal-card,
.action-btn,
.submit-btn,
.back-btn,
.hero-glass,
.trust-item,
.hero-mini-item,
.hero-top-item,
.hero-stat,
.coverage-chip,
.alert-item,
.forecast-item,
.heatmap-cell {
transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark p,
body.dark label,
body.dark strong,
body.dark .detail-label,
body.dark .detail-value,
body.dark .summary-title,
body.dark .summary-value,
body.dark .target-title,
body.dark .target-value,
body.dark .leaderboard-title,
body.dark .top-team-badge,
body.dark .status-pill,
body.dark .badge,
body.dark .assignment-badge,
body.dark .hero-tagline {
color: var(--text-darkmode);
}
body.dark .nav-info,
body.dark .page-subtitle,
body.dark .summary-label,
body.dark .target-sub,
body.dark .filter-count,
body.dark .tooltip,
body.dark .target-hint,
body.dark .date-display,
body.dark .auto-assign-card small {
color: var(--muted-darkmode);
}
body.dark .stats-section::after {
border-color: rgba(255, 255, 255, 0.1);
}
body.dark .icon {
color: var(--accent-2);
}
body.dark .radio-option,
body.dark .team-card,
body.dark .facility-card,
body.dark .summary-item {
background: rgba(20, 30, 48, 0.8);
border-color: var(--line-darkmode);
}
body.dark .form-group input,
body.dark .form-group select,
body.dark .form-group textarea,
body.dark .archives-controls select,
body.dark #facilityFilter,
body.dark .reset-time-control input {
background: rgba(14, 22, 38, 0.9);
color: var(--text-darkmode);
border-color: var(--line-darkmode);
}
body.dark .facility-edit-input {
background: rgba(14, 22, 38, 0.9);
color: var(--text-darkmode);
border-color: var(--line-darkmode);
}
body.dark .facility-edit-input:disabled {
color: var(--muted-darkmode);
opacity: 0.85;
}
body.dark .action-btn.secondary {
background: rgba(14, 22, 38, 0.9);
color: var(--text-darkmode);
border-color: var(--line-darkmode);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}
body.dark .rankings-table th,
body.dark .mini-table th {
background: rgba(13, 31, 56, 0.9);
color: var(--text-darkmode);
}
body.dark .rankings-table td,
body.dark .mini-table td {
color: var(--text-darkmode);
}
body.dark .rankings-table table tbody tr:nth-child(even),
body.dark .mini-table tr:nth-child(even) {
background: rgba(255, 255, 255, 0.03);
}
body.dark .mini-table table,
body.dark .rankings-table table {
background: rgba(14, 22, 38, 0.9);
color: var(--text-darkmode);
border-color: var(--line-darkmode);
}
body.dark .mini-table tr,
body.dark .rankings-table tr {
border-color: var(--line-darkmode);
}
body.dark .mini-table td strong,
body.dark .rankings-table td strong {
color: var(--text-darkmode);
}
body.dark .target-badge.met {
color: #7DE7D7;
background: rgba(26, 167, 161, 0.2);
}
body.dark .target-badge.missed {
color: #FFB4A6;
background: rgba(231, 76, 60, 0.2);
}
body.dark .status-pill {
background: rgba(26, 167, 161, 0.2);
border-color: rgba(26, 167, 161, 0.35);
}
body.dark .status-chip {
border-color: rgba(255, 255, 255, 0.18);
color: #F4F7FF;
}
body.dark .chip-ok {
color: #9AEBDD;
background: rgba(26, 167, 161, 0.24);
}
body.dark .chip-warn {
color: #FFD589;
background: rgba(246, 193, 78, 0.26);
}
body.dark .chip-danger {
color: #FFC0B4;
background: rgba(231, 76, 60, 0.24);
}
body.dark .highlight-band {
background: linear-gradient(135deg, rgba(23, 162, 164, 0.22), rgba(11, 46, 82, 0.2));
border-color: rgba(255, 255, 255, 0.12);
}
body.dark .sticky-summary {
background: rgba(14, 22, 38, 0.9);
border-color: var(--line-darkmode);
}
body.dark .sticky-value {
color: var(--text-darkmode);
}
body.dark .trust-item {
background: rgba(14, 22, 38, 0.9);
color: var(--text-darkmode);
border-color: var(--line-darkmode);
}
body.dark .site-footer {
color: var(--muted-darkmode);
}
.theme-toggle {
white-space: nowrap;
}
body::before {
content: "";
position: fixed;
inset: 0;
background-image: none;
background-size: 0 0;
pointer-events: none;
z-index: -1;
}
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(260px 260px at var(--mx) var(--my), rgba(242, 106, 33, 0.12), rgba(242, 106, 33, 0)),
radial-gradient(340px 340px at calc(var(--mx) * 0.6) calc(var(--my) * 1.2), rgba(23, 162, 164, 0.09), rgba(23, 162, 164, 0));
transition: background 0.18s linear;
}
@keyframes heroDrift {
0% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(10px, -6px, 0); }
100% { transform: translate3d(0, 0, 0); }
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(16px) saturate(140%);
border-bottom: 1px solid rgba(10, 19, 36, 0.12);
box-shadow: 0 10px 30px rgba(10, 19, 36, 0.08);
transition: transform 220ms ease, opacity 220ms ease;
will-change: transform, opacity;
}
body.navbar-scroll-hidden .navbar {
transform: translateY(calc(-100% - 10px));
opacity: 0.02;
pointer-events: none;
}
/* User-page top chrome hide/show with scroll */
body.navbar-scroll-hidden .flow-stepper,
body.navbar-scroll-hidden .sticky-summary {
transform: translateY(-14px);
opacity: 0;
pointer-events: none;
transition: transform 220ms ease, opacity 220ms ease;
}
/* Learning immersive mode: always hide top chrome while in learning pages */
body.learning-immersive .navbar,
body.learning-immersive .flow-stepper,
body.learning-immersive .sticky-summary {
transform: translateY(calc(-100% - 10px)) !important;
opacity: 0 !important;
pointer-events: none !important;
}
.navbar::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: linear-gradient(90deg, rgba(242, 106, 33, 0.9), rgba(11, 46, 82, 0.3));
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.nav-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(10, 19, 36, 0.08);
box-shadow: 0 8px 16px rgba(10, 19, 36, 0.08);
}
.nav-actions .status-pill {
margin-right: 2px;
}
body.dark .nav-actions {
background: rgba(12, 18, 32, 0.75);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35);
}
.logo-button {
border: none;
background: transparent;
padding: 0;
cursor: pointer;
appearance: none;
min-height: auto;
overflow: visible;
border-radius: 999px;
line-height: 0;
}
.logo-button-oval {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 6px 14px 6px 10px;
border-radius: 999px;
border: 1px solid rgba(10, 19, 36, 0.22);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(244, 248, 255, 0.85));
box-shadow: 0 6px 14px rgba(10, 19, 36, 0.12);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.logo-button-oval.compact {
padding: 4px 12px 4px 8px;
gap: 10px;
}
.logo-button-oval:hover {
transform: translateY(-1px);
box-shadow: 0 12px 22px rgba(10, 19, 36, 0.16), 0 0 0 2px rgba(242, 106, 33, 0.12);
border-color: rgba(242, 106, 33, 0.55);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 240, 0.9));
}
.logo-button-oval:active {
transform: translateY(0);
box-shadow: 0 6px 12px rgba(10, 19, 36, 0.14);
}
.logo-button:focus-visible .logo-button-oval {
outline: 2px solid rgba(242, 106, 33, 0.55);
outline-offset: 3px;
}
.logo-button:focus-visible {
outline: none;
}
.menu-icon {
width: 36px;
height: 28px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.menu-icon span {
display: block;
height: 3px;
border-radius: 999px;
background: #132845;
box-shadow: 0 2px 4px rgba(19, 40, 69, 0.2);
}
.logo-button-oval.compact .menu-icon {
width: 28px;
height: 22px;
gap: 5px;
}
.logo-button-oval.compact .menu-icon span {
height: 2px;
}
.menu-icon span:nth-child(2) {
width: 70%;
}
.sidebar-overlay {
position: fixed;
inset: 0;
background: rgba(10, 19, 36, 0.4);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 1100;
}
.sidebar-overlay.is-open {
opacity: 1;
pointer-events: all;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: min(360px, 90vw);
background: rgba(255, 255, 255, 0.96);
border-right: 1px solid rgba(10, 19, 36, 0.12);
box-shadow: 0 16px 34px rgba(10, 19, 36, 0.2);
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 1200;
padding: 18px 16px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.sidebar.is-open {
transform: translateX(0);
}
.sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.sidebar-section {
margin-bottom: 16px;
}
.sidebar-toggle {
width: 100%;
text-align: left;
background: rgba(10, 19, 36, 0.06);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 12px;
padding: 10px 12px;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.sidebar-toggle:hover {
transform: translateY(-1px);
border-color: rgba(242, 106, 33, 0.35);
box-shadow: 0 10px 18px rgba(10, 19, 36, 0.12);
}
.sidebar-toggle.is-active {
background: linear-gradient(135deg, rgba(242, 106, 33, 0.16), rgba(242, 106, 33, 0.08));
border-color: rgba(242, 106, 33, 0.42);
box-shadow: 0 10px 20px rgba(242, 106, 33, 0.2);
}
.sidebar-toggle.is-active .shortcut-pill {
background: rgba(242, 106, 33, 0.18);
border-color: rgba(242, 106, 33, 0.38);
color: #A84A11;
}
.shortcut-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
color: var(--ink-2);
background: rgba(10, 19, 36, 0.08);
border: 1px solid rgba(10, 19, 36, 0.12);
white-space: nowrap;
}
body.dark .shortcut-pill {
color: var(--text-darkmode);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
}
body.dark .auth-gate-card {
background: rgba(14, 22, 38, 0.96);
border-color: rgba(255, 255, 255, 0.12);
}
body.dark .auth-gate-card,
body.dark .auth-gate-card h1,
body.dark .auth-gate-card h2,
body.dark .auth-gate-card h3,
body.dark .auth-gate-card h4,
body.dark .auth-gate-card h5,
body.dark .auth-gate-card h6,
body.dark .auth-gate-card strong,
body.dark .auth-gate-card label,
body.dark .auth-gate-card .radio-label,
body.dark .auth-gate-card .auth-remember-label span,
body.dark .auth-gate-card #authModeHint,
body.dark .auth-gate-card #authApprovalNote,
body.dark .auth-gate-card .password-strength,
body.dark .auth-gate-card .auth-role-card strong,
body.dark .auth-gate-card .auth-mode-switch .action-btn,
body.dark .auth-gate-card .modal-actions .action-btn {
color: var(--text-darkmode);
}
body.dark .auth-brand p {
color: var(--muted-darkmode);
}
body.dark .auth-gate-card .auth-role-card,
body.dark .auth-gate-card .sales-manager-auth-stat-card,
body.dark .auth-gate-card .sales-manager-auth-topbar,
body.dark .auth-gate-card .sales-manager-auth-chart-card,
body.dark .auth-gate-card .sales-manager-auth-entry,
body.dark .auth-gate-card .sales-manager-auth-rail {
border-color: rgba(255, 255, 255, 0.12);
}
body.dark .auth-gate-card .auth-role-card span,
body.dark .auth-gate-card .sales-manager-auth-stat-card span,
body.dark .auth-gate-card .sales-manager-auth-chart-copy p,
body.dark .auth-gate-card .sales-manager-auth-topbar p,
body.dark .auth-gate-card .sales-manager-auth-rail-group small,
body.dark .auth-gate-card .sales-manager-auth-rail-brand span,
body.dark .auth-gate-card .password-strength {
color: var(--muted-darkmode);
}
body.dark .auth-gate-card .insight-chip {
color: var(--text-darkmode) !important;
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
}
body.dark .auth-gate-card .auth-role-card.is-active,
body.dark .auth-gate-card .sales-manager-auth-rail-link.is-active {
color: #ffffff;
}
body.dark .auth-gate-card .sales-manager-auth-stat-card em,
body.dark .auth-gate-card .sales-manager-auth-eyebrow {
color: #9cebe4;
}
.sidebar-content {
display: none;
padding: 10px 6px;
gap: 8px;
}
.sidebar-content.is-open {
display: grid;
}
.sidebar-sub-btn {
width: 100%;
text-align: left;
background: rgba(10, 19, 36, 0.04);
border: 1px solid rgba(10, 19, 36, 0.1);
border-radius: 10px;
padding: 8px 10px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sidebar-sub-btn:hover {
transform: translateY(-1px);
border-color: rgba(242, 106, 33, 0.28);
box-shadow: 0 8px 16px rgba(10, 19, 36, 0.12);
}
body.dark .sidebar-sub-btn {
background: rgba(255, 255, 255, 0.05);
border-color: var(--line-darkmode);
color: var(--text-darkmode);
}
.sidebar-note {
color: var(--muted);
font-size: 0.85rem;
margin-bottom: 6px;
}
.sidebar-footer {
margin-top: auto;
padding-top: 10px;
}
#adminHomeBtn {
margin-bottom: 18px;
}
#sidebarSettingsBtn {
margin-top: 8px;
}
.sidebar-settings-btn {
width: 100%;
border: 1px solid rgba(10, 19, 36, 0.14);
background: linear-gradient(135deg, rgba(10, 19, 36, 0.08), rgba(10, 19, 36, 0.03));
color: var(--ink-2);
border-radius: 12px;
padding: 10px 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.sidebar-settings-btn:hover {
transform: translateY(-1px);
border-color: rgba(242, 106, 33, 0.4);
box-shadow: 0 10px 18px rgba(10, 19, 36, 0.12);
}
.sidebar-settings-btn.is-active {
border-color: rgba(242, 106, 33, 0.5);
box-shadow: 0 10px 18px rgba(242, 106, 33, 0.2);
background: linear-gradient(135deg, rgba(242, 106, 33, 0.2), rgba(242, 106, 33, 0.1));
}
.sidebar-signout-btn {
width: 100%;
margin-top: 8px;
border: 1px solid rgba(190, 32, 32, 0.28);
background: linear-gradient(135deg, rgba(190, 32, 32, 0.12), rgba(190, 32, 32, 0.04));
color: #8b1d1d;
border-radius: 12px;
padding: 10px 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.sidebar-signout-btn:hover {
transform: translateY(-1px);
border-color: rgba(190, 32, 32, 0.5);
box-shadow: 0 10px 18px rgba(120, 16, 16, 0.16);
}
.gear-icon {
font-size: 1.05rem;
line-height: 1;
}
.learning-body {
background: rgba(10, 19, 36, 0.04);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 12px;
padding: 10px 12px;
font-size: 0.9rem;
line-height: 1.5;
max-height: 360px;
overflow-y: auto;
}
.learning-pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
}
.learning-page-indicator {
font-size: 0.9rem;
color: var(--muted);
}
body.dark .learning-page-indicator {
color: var(--muted-darkmode);
}
body.dark .sidebar {
background: rgba(14, 22, 38, 0.98);
border-color: var(--line-darkmode);
}
body.dark .sidebar-toggle,
body.dark .learning-body {
background: rgba(255, 255, 255, 0.05);
border-color: var(--line-darkmode);
color: var(--text-darkmode);
}
body.dark .sidebar-settings-btn {
background: rgba(255, 255, 255, 0.06);
color: var(--text-darkmode);
border-color: var(--line-darkmode);
}
body.dark .sidebar-settings-btn.is-active {
background: linear-gradient(135deg, rgba(242, 106, 33, 0.3), rgba(242, 106, 33, 0.14));
border-color: rgba(242, 106, 33, 0.58);
}
body.dark .sidebar-signout-btn {
color: #ffb8b8;
border-color: rgba(255, 130, 130, 0.35);
background: linear-gradient(135deg, rgba(153, 32, 32, 0.35), rgba(153, 32, 32, 0.15));
}
body.dark .sidebar-toggle.is-active {
background: linear-gradient(135deg, rgba(242, 106, 33, 0.26), rgba(242, 106, 33, 0.12));
border-color: rgba(242, 106, 33, 0.52);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}
body.dark .sidebar-toggle.is-active .shortcut-pill {
color: #FFD6BC;
background: rgba(242, 106, 33, 0.25);
border-color: rgba(242, 106, 33, 0.42);
}
body.dark .logo-button-oval {
background: linear-gradient(135deg, rgba(12, 18, 32, 0.95), rgba(16, 24, 40, 0.9));
border-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}
body.dark .menu-icon span {
background: #E6ECF3;
box-shadow: 0 2px 6px rgba(230, 236, 243, 0.2);
}
.nav-logo {
height: 48px;
filter: drop-shadow(0 6px 14px rgba(10, 19, 36, 0.15));
}
.logo-button-oval.compact .nav-logo {
height: 36px;
}
.nav-info {
display: flex;
gap: 24px;
color: var(--muted);
font-size: 0.95rem;
font-weight: 500;
}
/* Flow Stepper */
.flow-stepper {
margin: 74px auto 12px;
padding: 10px 20px;
max-width: 1100px;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
position: sticky;
top: 64px;
z-index: 900;
background: rgba(243, 246, 251, 0.68);
backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid rgba(10, 19, 36, 0.12);
box-shadow: 0 12px 26px rgba(10, 19, 36, 0.08);
--step-progress: 0%;
border-radius: 18px;
}
.sticky-summary {
position: sticky;
top: 114px;
z-index: 850;
margin: 10px auto 0;
max-width: 1100px;
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(10, 19, 36, 0.12);
backdrop-filter: blur(12px) saturate(140%);
font-weight: 600;
}
.sticky-label {
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.5px;
color: var(--muted);
}
.sticky-value {
color: var(--ink-2);
}
.sticky-divider {
width: 1px;
height: 16px;
background: rgba(10, 19, 36, 0.12);
}
.flow-stepper::before {
content: "";
position: absolute;
left: 8%;
right: 8%;
bottom: 6px;
height: 3px;
background: rgba(10, 19, 36, 0.1);
border-radius: 999px;
}
.flow-stepper::after {
content: "";
position: absolute;
left: 8%;
width: var(--step-progress);
bottom: 6px;
height: 2px;
background: linear-gradient(90deg, rgba(23, 162, 164, 0.3), rgba(23, 162, 164, 0.75));
border-radius: 999px;
opacity: 0.85;
transition: width 0.4s ease;
}
.flow-step {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(10, 19, 36, 0.14);
color: var(--muted);
font-weight: 600;
background: rgba(255, 255, 255, 0.7);
position: relative;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.flow-step::after {
content: "";
position: absolute;
right: -18px;
width: 12px;
height: 2px;
background: rgba(10, 19, 36, 0.18);
}
.flow-step:last-child::after {
display: none;
}
.step-index {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--surface-2);
color: var(--ink-2);
font-size: 0.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.flow-step.is-active,
body:has(#landing-page.page.active) .flow-step[data-step="1"],
body:has(#registration-page.page.active) .flow-step[data-step="2"],
body:has(#assignment-page.page.active) .flow-step[data-step="3"],
body:has(#dbd-page.page.active) .flow-step[data-step="4"],
body:has(#stats-page.page.active) .flow-step[data-step="5"] {
color: var(--brand);
border-color: rgba(11, 46, 82, 0.35);
box-shadow: 0 10px 22px rgba(11, 46, 82, 0.18);
transform: translateY(-1px);
}
.flow-step.is-active {
animation: stepPulse 1.6s ease-in-out infinite;
}
@keyframes stepPulse {
0%, 100% { box-shadow: 0 8px 18px rgba(11, 46, 82, 0.18); }
50% { box-shadow: 0 12px 26px rgba(11, 46, 82, 0.28); }
}
.flow-step.is-complete {
color: #0D7F7A;
border-color: rgba(23, 162, 164, 0.5);
background: rgba(23, 162, 164, 0.08);
}
.flow-step.is-active .step-index,
body:has(#landing-page.page.active) .flow-step[data-step="1"] .step-index,
body:has(#registration-page.page.active) .flow-step[data-step="2"] .step-index,
body:has(#assignment-page.page.active) .flow-step[data-step="3"] .step-index,
body:has(#dbd-page.page.active) .flow-step[data-step="4"] .step-index,
body:has(#stats-page.page.active) .flow-step[data-step="5"] .step-index {
background: var(--accent);
color: #FFFFFF;
}
.flow-step.is-complete .step-index {
background: #0D7F7A;
color: #FFFFFF;
}
/* Page System */
.page {
display: none;
min-height: 100vh;
padding-top: 120px;
opacity: 0;
transform: translateY(12px) scale(0.985);
filter: blur(3px);
transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
}
.page.active {
display: block;
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
animation: pageReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pageReveal {
0% { opacity: 0; transform: translateY(18px) scale(0.98); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.page.zoom-enter {
animation: zoomIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.page.zoom-exit {
animation: zoomOut 0.35s ease;
}
@keyframes zoomIn {
0% { opacity: 0; transform: translateY(10px) scale(0.97); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes zoomOut {
0% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(8px) scale(0.985); }
}
/* Hero */
.hero-section {
position: relative;
min-height: 70vh;
display: grid;
place-items: center;
text-align: center;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 55%, #091427 100%);
color: #FFFFFF;
overflow: hidden;
box-shadow: inset 0 -120px 140px rgba(10, 19, 36, 0.35);
animation: heroGlow 12s ease-in-out infinite;
}
/* Reduce unnecessary gap between sticky summary and hero content on landing page */
#landing-page {
padding-top: 10px;
}
#landing-page .hero-section {
min-height: 62vh;
place-items: start center;
padding-top: 10px;
}
.nav-notification-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(10, 19, 36, 0.22);
background: rgba(10, 19, 36, 0.06);
color: var(--ink-2);
box-shadow: 0 8px 18px rgba(10, 19, 36, 0.12);
cursor: pointer;
position: relative;
touch-action: manipulation;
pointer-events: auto;
transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.notification-dropdown {
position: fixed;
width: min(420px, 92vw);
z-index: 1400;
display: none;
}
.notification-dropdown.is-open {
display: block;
}
.notification-dropdown::before {
content: "";
position: absolute;
top: -8px;
right: 24px;
width: 16px;
height: 16px;
background: rgba(255, 255, 255, 0.96);
border-left: 1px solid rgba(10, 19, 36, 0.12);
border-top: 1px solid rgba(10, 19, 36, 0.12);
transform: rotate(45deg);
z-index: 1;
}
body.dark .notification-dropdown::before {
background: rgba(14, 22, 38, 0.96);
border-left-color: rgba(255, 255, 255, 0.1);
border-top-color: rgba(255, 255, 255, 0.1);
}
.notification-dropdown-card {
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 18px;
padding: 16px;
box-shadow: 0 24px 44px rgba(10, 19, 36, 0.22);
backdrop-filter: blur(14px) saturate(150%);
animation: dropdownIn 220ms var(--ease-out);
max-height: min(70vh, 520px);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
display: grid;
gap: 8px;
}
.notification-dropdown-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
position: sticky;
top: 0;
background: inherit;
padding-bottom: 6px;
z-index: 1;
}
.notification-dropdown-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.notification-close-btn {
font-weight: 700;
border-color: rgba(242, 106, 33, 0.45) !important;
}
.notification-dropdown-card .notification-list {
max-height: none;
overflow: visible;
padding-right: 0;
}
body.dark .notification-dropdown-card {
background: rgba(14, 22, 38, 0.96);
border-color: var(--line-darkmode);
}
@keyframes dropdownIn {
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.nav-notification-btn:hover {
transform: translateY(-1px);
background: rgba(242, 106, 33, 0.14);
border-color: rgba(242, 106, 33, 0.4);
box-shadow: 0 12px 22px rgba(10, 19, 36, 0.16);
}
body.dark .nav-notification-btn {
background: rgba(14, 22, 38, 0.7);
border-color: rgba(255, 255, 255, 0.12);
color: var(--text-darkmode);
}
body.dark .nav-notification-btn:hover {
background: rgba(242, 106, 33, 0.18);
border-color: rgba(242, 106, 33, 0.45);
}
.nav-notification-btn.has-unread {
animation: notifPulse 1.8s ease-in-out infinite;
}
.nav-notification-btn.has-unread .hero-notification-icon {
animation: notifWiggle 1.2s ease-in-out infinite;
}
.nav-notification-btn.has-unread:hover {
animation-play-state: paused;
}
.nav-notification-btn:focus-visible {
outline: 2px solid rgba(242, 106, 33, 0.6);
outline-offset: 3px;
}
.hero-notification-icon {
font-size: 1.1rem;
}
.hero-notification-badge {
position: absolute;
top: 6px;
right: 6px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #F26A21;
color: #FFFFFF;
font-size: 0.65rem;
font-weight: 800;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 6px 12px rgba(242, 106, 33, 0.35);
}
.nav-notification-btn.has-unread .hero-notification-badge {
display: inline-flex;
}
.notification-list {
display: grid;
gap: 12px;
margin: 12px 0 8px;
max-height: min(44vh, 340px);
overflow-y: auto;
padding-right: 4px;
}
.notification-filter-bar {
display: flex;
gap: 8px;
margin: 10px 0 6px;
flex-wrap: wrap;
}
.notification-filter-btn {
min-width: 92px;
}
.notification-filter-btn.is-active {
border-color: rgba(242, 106, 33, 0.55);
box-shadow: 0 8px 18px rgba(242, 106, 33, 0.2);
}
.notification-search-row {
margin: 8px 0 10px;
}
.notification-search-row input {
width: 100%;
min-height: 40px;
border-radius: 12px;
border: 1px solid rgba(10, 19, 36, 0.14);
background: rgba(255, 255, 255, 0.88);
color: var(--ink);
padding: 8px 12px;
}
body.dark .notification-search-row input {
border-color: rgba(126, 173, 220, 0.28);
background: rgba(8, 16, 32, 0.82);
color: var(--text-darkmode);
}
.notification-pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 8px;
}
.notification-card {
width: 100%;
display: block;
text-align: left;
font: inherit;
border: 1px solid rgba(10, 19, 36, 0.12);
background: rgba(255, 255, 255, 0.92);
border-radius: 14px;
padding: 12px 14px;
box-shadow: var(--shadow-soft);
transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), border-color 160ms var(--ease-out);
cursor: pointer;
}
.notification-card:hover {
transform: translateY(-1px);
border-color: rgba(242, 106, 33, 0.3);
box-shadow: 0 12px 22px rgba(10, 19, 36, 0.16);
}
.notification-card.is-unread {
border-color: rgba(242, 106, 33, 0.35);
box-shadow: 0 10px 20px rgba(242, 106, 33, 0.18);
}
.notification-card h4 {
margin: 0 0 6px;
}
.notification-card p {
margin: 0 0 8px;
color: var(--muted);
}
@keyframes notifPulse {
0% { box-shadow: 0 0 0 0 rgba(242, 106, 33, 0.28); }
70% { box-shadow: 0 0 0 10px rgba(242, 106, 33, 0); }
100% { box-shadow: 0 0 0 0 rgba(242, 106, 33, 0); }
}
@keyframes notifWiggle {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(-8deg); }
40% { transform: rotate(8deg); }
60% { transform: rotate(-6deg); }
80% { transform: rotate(6deg); }
}
.notification-meta {
font-size: 0.75rem;
color: var(--muted);
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.notification-new {
background: rgba(242, 106, 33, 0.16);
color: #9a3e0f;
border: 1px solid rgba(242, 106, 33, 0.35);
padding: 2px 8px;
border-radius: 999px;
font-weight: 700;
}
body.dark .notification-card {
background: rgba(14, 22, 38, 0.92);
border-color: var(--line-darkmode);
}
body.dark .notification-card p,
body.dark .notification-meta {
color: var(--muted-darkmode);
}
#notificationDetailBody p {
margin: 0;
white-space: pre-wrap;
}
body.dark .hero-section {
background: radial-gradient(circle at top, rgba(28, 45, 76, 0.85), rgba(8, 12, 22, 0.98));
}
body.dark::after {
background:
radial-gradient(260px 260px at var(--mx) var(--my), rgba(242, 106, 33, 0.16), rgba(242, 106, 33, 0)),
radial-gradient(340px 340px at calc(var(--mx) * 0.6) calc(var(--my) * 1.2), rgba(23, 162, 164, 0.13), rgba(23, 162, 164, 0));
}
body.dark .hero-overlay {
background: linear-gradient(120deg, rgba(5, 12, 24, 0.75), rgba(9, 18, 34, 0.65));
}
body.dark .hero-glass {
background: rgba(8, 14, 26, 0.72);
border-color: rgba(255, 255, 255, 0.12);
}
body.dark .hero-orb {
opacity: 0.35;
}
body.dark .hero-particles {
opacity: 0.35;
}
.menu-page-overlay {
position: fixed;
inset: 0;
background: rgba(6, 12, 22, 0.55);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 1300;
}
.menu-page-overlay.is-open {
opacity: 1;
pointer-events: all;
}
.menu-page {
position: fixed;
inset: 0;
display: none;
z-index: 1400;
padding: 24px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
background: rgba(246, 248, 252, 0.98);
animation: menuFadeIn 0.25s ease;
}
#authSalesManagerBtn {
background: linear-gradient(135deg, rgba(15, 163, 155, 0.18), rgba(27, 110, 190, 0.2));
border-color: rgba(15, 163, 155, 0.28);
}
.sales-manager-auth-shell {
display: block;
}
.sales-manager-auth-rail,
.sales-manager-auth-topbar,
.sales-manager-auth-preview,
.sales-manager-auth-chart-card {
display: none;
}
.auth-gate-card.is-sales-manager-auth {
max-width: 1380px;
width: min(1380px, calc(100vw - 48px));
padding: 24px;
background: #fffaf7;
}
.auth-gate-card.is-sales-manager-auth .sales-manager-auth-shell {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.auth-gate-card.is-sales-manager-auth .sales-manager-auth-rail {
display: flex;
flex-direction: column;
gap: 16px;
min-height: 720px;
border: 1px solid rgba(10, 19, 36, 0.08);
border-radius: 24px;
padding: 22px 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 253, 0.96));
box-shadow: 0 18px 36px rgba(10, 19, 36, 0.07);
}
.sales-manager-auth-rail-brand {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(10, 19, 36, 0.08);
}
.sales-manager-auth-rail-brand img {
width: 44px;
height: 44px;
object-fit: contain;
}
.sales-manager-auth-rail-brand strong,
.sales-manager-auth-rail-brand span {
display: block;
}
.sales-manager-auth-rail-brand span {
color: var(--text-muted-light);
font-size: 0.82rem;
}
.sales-manager-auth-rail-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.sales-manager-auth-rail-group.account {
margin-top: auto;
}
.sales-manager-auth-rail-group small {
padding: 0 6px;
color: var(--text-muted-light);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.74rem;
font-weight: 700;
}
.sales-manager-auth-rail-link {
min-height: 42px;
border: 1px solid rgba(10, 19, 36, 0.08);
border-radius: 12px;
background: rgba(255, 255, 255, 0.82);
color: var(--ink);
font: inherit;
font-weight: 600;
text-align: left;
padding: 10px 14px;
}
.sales-manager-auth-rail-link.is-active {
background: linear-gradient(135deg, rgba(242, 106, 33, 0.16), rgba(15, 143, 156, 0.14));
border-color: rgba(242, 106, 33, 0.2);
color: #d85f1d;
}
.auth-gate-card.is-sales-manager-auth .sales-manager-auth-main {
display: grid;
gap: 18px;
}
.auth-gate-card.is-sales-manager-auth .sales-manager-auth-topbar,
.auth-gate-card.is-sales-manager-auth .sales-manager-auth-preview,
.auth-gate-card.is-sales-manager-auth .sales-manager-auth-chart-card {
display: block;
}
.sales-manager-auth-topbar,
.sales-manager-auth-entry {
border: 1px solid rgba(10, 19, 36, 0.08);
border-radius: 24px;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 16px 32px rgba(10, 19, 36, 0.07);
}
.sales-manager-auth-topbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 24px 26px;
}
.sales-manager-auth-eyebrow {
display: inline-block;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.74rem;
font-weight: 700;
color: #0f8f9c;
}
.sales-manager-auth-topbar h2 {
margin: 0 0 6px;
font-size: 2rem;
line-height: 1.05;
}
.sales-manager-auth-topbar p {
margin: 0;
color: var(--text-muted-light);
max-width: 640px;
}
.sales-manager-auth-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.sales-manager-auth-preview {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.sales-manager-auth-stat-card {
border: 1px solid rgba(10, 19, 36, 0.08);
border-radius: 20px;
padding: 18px 18px 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
box-shadow: 0 12px 24px rgba(10, 19, 36, 0.05);
}
.sales-manager-auth-stat-card span {
display: block;
color: var(--text-muted-light);
font-size: 0.82rem;
font-weight: 600;
}
.sales-manager-auth-stat-card strong {
display: block;
margin-top: 10px;
font-size: 2rem;
line-height: 1;
}
.sales-manager-auth-stat-card em {
display: block;
margin-top: 6px;
color: #0f8f9c;
font-style: normal;
font-size: 0.8rem;
}
.sales-manager-auth-stat-card.leads { border-color: rgba(242, 106, 33, 0.18); background: linear-gradient(180deg, rgba(242, 106, 33, 0.12), rgba(255,255,255,0.98)); }
.sales-manager-auth-stat-card.sales { border-color: rgba(15, 143, 156, 0.18); background: linear-gradient(180deg, rgba(15, 143, 156, 0.12), rgba(255,255,255,0.98)); }
.sales-manager-auth-stat-card.attendance { border-color: rgba(42, 117, 255, 0.16); background: linear-gradient(180deg, rgba(42, 117, 255, 0.1), rgba(255,255,255,0.98)); }
.sales-manager-auth-stat-card.reports { border-color: rgba(246, 193, 78, 0.2); background: linear-gradient(180deg, rgba(246, 193, 78, 0.12), rgba(255,255,255,0.98)); }
.sales-manager-auth-chart-card {
display: grid;
grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
gap: 20px;
align-items: end;
border: 1px solid rgba(10, 19, 36, 0.08);
border-radius: 24px;
padding: 24px 26px;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 14px 30px rgba(10, 19, 36, 0.06);
}
.sales-manager-auth-chart-copy h3 {
margin: 0 0 8px;
font-size: 1.32rem;
}
.sales-manager-auth-chart-copy p {
margin: 0;
color: var(--text-muted-light);
}
.sales-manager-auth-chart-visual {
min-height: 180px;
}
.sales-manager-auth-chart-svg {
width: 100%;
height: auto;
display: block;
}
.sales-manager-auth-chart-axis {
stroke: rgba(111, 135, 168, 0.22);
stroke-width: 1.5;
}
.sales-manager-auth-chart-series.leads rect {
fill: rgba(242, 106, 33, 0.82);
}
.sales-manager-auth-chart-series.sales rect {
fill: rgba(242, 106, 33, 0.32);
}
.sales-manager-auth-entry {
padding: 24px 26px;
}
.auth-role-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.auth-role-card {
border: 1px solid rgba(10, 19, 36, 0.08);
border-radius: 18px;
background: rgba(255, 255, 255, 0.88);
padding: 14px 16px;
text-align: left;
color: var(--ink);
font: inherit;
cursor: pointer;
box-shadow: 0 12px 22px rgba(10, 19, 36, 0.05);
}
.auth-role-card strong,
.auth-role-card span {
display: block;
}
.auth-role-card span {
margin-top: 6px;
color: var(--text-muted-light);
font-size: 0.82rem;
}
.auth-role-card.is-active {
border-color: rgba(242, 106, 33, 0.24);
background: linear-gradient(135deg, rgba(242, 106, 33, 0.12), rgba(15, 143, 156, 0.1));
}
.auth-gate-card.is-sales-manager-auth .auth-brand {
margin-bottom: 18px;
}
.auth-gate-card.is-sales-manager-auth .auth-brand .menu-logo {
position: static;
max-width: 64px;
max-height: 64px;
margin: 0;
filter: none;
}
body.dark .auth-gate-card.is-sales-manager-auth {
background: #08141f;
}
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-rail,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-topbar,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-chart-card,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-entry,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-stat-card {
background: linear-gradient(180deg, rgba(10, 24, 38, 0.98), rgba(8, 18, 30, 0.96));
border-color: rgba(138, 220, 219, 0.14);
color: #eef7ff;
}
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-topbar p,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-stat-card span,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-chart-copy p,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-rail-group small,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-rail-brand span {
color: var(--text-muted-dark);
}
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-topbar h2,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-chart-copy h3,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-rail-brand strong,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-stat-card strong,
body.dark .auth-gate-card.is-sales-manager-auth .auth-brand h2,
body.dark .auth-gate-card.is-sales-manager-auth .auth-brand p,
body.dark .auth-gate-card.is-sales-manager-auth .auth-mode-switch .action-btn,
body.dark .auth-gate-card.is-sales-manager-auth .form-group label,
body.dark .auth-gate-card.is-sales-manager-auth .radio-label,
body.dark .auth-gate-card.is-sales-manager-auth .link-btn,
body.dark .auth-gate-card.is-sales-manager-auth #authModeHint,
body.dark .auth-gate-card.is-sales-manager-auth #authApprovalNote,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-meta .insight-chip,
body.dark .auth-gate-card.is-sales-manager-auth .auth-remember-label span {
color: #eef7ff;
}
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-stat-card em,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-eyebrow {
color: #9cebe4;
}
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-chart-axis {
stroke: rgba(172, 208, 235, 0.28);
}
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-chart-series.leads rect {
fill: rgba(242, 106, 33, 0.92);
}
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-chart-series.sales rect {
fill: rgba(255, 189, 141, 0.42);
}
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-rail-link {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
color: #eef7ff;
}
body.dark .auth-role-card {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
color: #eef7ff;
}
body.dark .auth-role-card span {
color: var(--text-muted-dark);
}
body.dark .auth-role-card strong {
color: #eef7ff;
}
body.dark .auth-role-card.is-active {
border-color: rgba(242, 106, 33, 0.28);
background: linear-gradient(135deg, rgba(242, 106, 33, 0.16), rgba(15, 143, 156, 0.14));
}
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-rail-link.is-active {
color: #fff;
}
.sales-manager-choice-card {
max-width: 1180px;
}
.sales-manager-choice-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-top: 14px;
}
.sales-manager-choice-btn {
min-height: 240px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
text-align: left;
padding: 20px 18px;
border-radius: 22px;
border: 1px solid rgba(10, 19, 36, 0.1);
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,254,0.96));
box-shadow: 0 16px 34px rgba(10, 19, 36, 0.08);
}
.sales-manager-choice-head {
display: grid;
gap: 8px;
}
.sales-manager-choice-head strong {
font-size: 1.08rem;
line-height: 1.15;
}
.sales-manager-choice-btn span {
font-size: 0.88rem;
opacity: 0.82;
}
.sales-manager-choice-stats {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.sales-manager-choice-stats span {
display: grid;
gap: 3px;
padding: 10px;
border-radius: 14px;
background: rgba(10, 19, 36, 0.04);
opacity: 1;
}
.sales-manager-choice-stats strong {
font-size: 1.05rem;
line-height: 1;
}
.sales-manager-choice-stats em {
font-style: normal;
font-size: 0.74rem;
color: var(--text-muted-light);
}
body.dark .sales-manager-choice-btn {
background: linear-gradient(180deg, rgba(11, 28, 40, 0.96), rgba(10, 24, 34, 0.94));
border-color: rgba(138, 220, 219, 0.14);
color: var(--text-strong-dark);
}
body.dark .sales-manager-choice-stats span {
background: rgba(255, 255, 255, 0.05);
}
body.dark .sales-manager-choice-stats em,
body.dark .sales-manager-choice-head span {
color: var(--text-muted-dark);
}
.menu-page.is-open {
display: block;
}
.menu-page-inner {
max-width: 1000px;
margin: 40px auto;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 24px;
padding: 28px;
box-shadow: 0 18px 40px rgba(10, 19, 36, 0.18);
animation: menuCardIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
overflow: hidden;
}
@media (max-width: 992px) {
.auth-gate-card.is-sales-manager-auth {
width: min(100vw - 20px, 1380px);
padding: 14px;
}
.auth-gate-card.is-sales-manager-auth .sales-manager-auth-shell {
grid-template-columns: 1fr;
}
.auth-gate-card.is-sales-manager-auth .sales-manager-auth-rail {
min-height: auto;
}
.auth-gate-card.is-sales-manager-auth .sales-manager-auth-preview,
.auth-gate-card.is-sales-manager-auth .sales-manager-auth-chart-card {
grid-template-columns: 1fr 1fr;
}
.auth-role-cards {
grid-template-columns: 1fr;
}
.menu-page {
padding: 12px 12px 24px;
animation-duration: 0.18s;
}
.menu-page-inner {
margin: 8px auto 16px;
border-radius: 16px;
}
.action-btn,
.sidebar-toggle,
.sidebar-profile-button {
touch-action: manipulation;
}
/* Mobile app-sheet mode: when any menu page is open, hide top chrome for focus. */
body.menu-panel-open .navbar,
body.menu-panel-open .flow-stepper,
body.menu-panel-open .mobile-today-strip,
body.menu-panel-open .mobile-sticky-cta,
body.menu-panel-open .mobile-dock,
body.menu-panel-open .quick-actions,
body.menu-panel-open .mobile-contact-footer {
display: none !important;
}
body.menu-panel-open .menu-page {
inset: 0;
padding: 0 !important;
background: rgba(246, 248, 252, 0.995);
}
body.dark.menu-panel-open .menu-page {
background: rgba(8, 15, 27, 0.995);
}
body.menu-panel-open .menu-page-inner {
margin: 0 !important;
max-width: none !important;
min-height: 100dvh;
border-radius: 0 !important;
border-left: 0;
border-right: 0;
border-bottom: 0;
box-shadow: none;
padding: 16px 14px calc(20px + env(safe-area-inset-bottom));
}
body.menu-panel-open .menu-page-header {
position: sticky;
top: 0;
z-index: 20;
padding-top: calc(6px + env(safe-area-inset-top));
background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.9));
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(10, 19, 36, 0.1);
}
body.dark.menu-panel-open .menu-page-header {
background: linear-gradient(180deg, rgba(10, 19, 34, 0.97), rgba(10, 19, 34, 0.9));
border-bottom-color: rgba(255, 255, 255, 0.12);
}
body.menu-panel-open .menu-page-actions {
gap: 8px;
}
body.menu-panel-open .menu-page-actions .action-btn,
body.menu-panel-open .menu-page-actions .submit-btn,
body.menu-panel-open .menu-page-actions .back-btn {
min-height: 44px;
}
}
@media (max-width: 768px) {
.auth-gate-card.is-sales-manager-auth .sales-manager-auth-preview,
.auth-gate-card.is-sales-manager-auth .sales-manager-auth-chart-card {
grid-template-columns: 1fr;
}
.auth-gate-card.is-sales-manager-auth .sales-manager-auth-topbar {
flex-direction: column;
padding: 18px;
}
.auth-gate-card.is-sales-manager-auth .sales-manager-auth-entry {
padding: 18px;
}
}
.menu-page-inner::before {
content: "";
position: absolute;
top: 0;
left: 12%;
right: 12%;
height: 4px;
background: linear-gradient(90deg, rgba(242, 106, 33, 0.85), rgba(23, 162, 164, 0.35));
border-radius: 999px;
opacity: 0.75;
}
.menu-illustration {
width: 100%;
height: 180px;
border-radius: 18px;
margin-bottom: 16px;
background-size: cover;
background-position: center;
border: 1px solid rgba(10, 19, 36, 0.12);
box-shadow: inset 0 0 40px rgba(10, 19, 36, 0.18);
position: relative;
overflow: hidden;
}
.menu-illustration::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 45%);
opacity: 0.6;
z-index: 1;
}
.menu-logo {
position: absolute;
inset: 0;
margin: auto;
max-width: 220px;
max-height: 120px;
width: auto;
height: auto;
filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.35));
z-index: 1;
opacity: 0.95;
}
.menu-logo {
position: absolute;
inset: 0;
margin: auto;
max-width: 220px;
max-height: 120px;
width: auto;
height: auto;
filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.35));
z-index: 1;
opacity: 0.95;
}
.menu-illustration-text {
position: absolute;
bottom: 12px;
left: 16px;
right: 16px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(10, 19, 36, 0.6);
color: #FFFFFF;
font-weight: 600;
font-size: 0.95rem;
font-family: "The Magic Castle", "Space Grotesk", "IBM Plex Sans", cursive;
text-align: center;
backdrop-filter: blur(6px);
z-index: 2;
}
body.dark .menu-illustration-text {
background: rgba(8, 14, 26, 0.7);
}
body.dark .menu-illustration::after {
opacity: 0.95;
}
body.dark .menu-page-header {
background: rgba(14, 22, 38, 0.9);
border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.dark .menu-scope-chip {
background: rgba(242, 106, 33, 0.18);
border-color: rgba(242, 106, 33, 0.4);
color: #FFBD8D;
}
.admin-illustration {
background-image:
radial-gradient(circle at 20% 30%, rgba(242, 106, 33, 0.55), transparent 45%),
radial-gradient(circle at 70% 40%, rgba(23, 162, 164, 0.45), transparent 50%),
linear-gradient(120deg, rgba(12, 28, 52, 0.95), rgba(8, 14, 26, 0.9)),
url("data:image/svg+xml;utf8,");
}
.learning-illustration {
background-image:
radial-gradient(circle at 30% 40%, rgba(242, 106, 33, 0.5), transparent 55%),
radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.2), transparent 60%),
linear-gradient(120deg, rgba(9, 20, 40, 0.98), rgba(12, 24, 48, 0.92)),
url("data:image/svg+xml;utf8,");
}
.forms-illustration {
background-image:
radial-gradient(circle at 35% 30%, rgba(23, 162, 164, 0.45), transparent 55%),
radial-gradient(circle at 80% 40%, rgba(242, 106, 33, 0.4), transparent 50%),
linear-gradient(120deg, rgba(10, 19, 36, 0.96), rgba(9, 18, 34, 0.9)),
url("data:image/svg+xml;utf8,");
}
body.dark .menu-illustration {
border-color: rgba(255, 255, 255, 0.08);
box-shadow: inset 0 0 50px rgba(5, 10, 20, 0.6);
}
.menu-page-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin: 0 -8px 18px;
padding: 12px 8px;
border-bottom: 1px solid rgba(10, 19, 36, 0.1);
position: sticky;
top: 0;
z-index: 2;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px) saturate(150%);
}
.menu-page.is-scrolled .menu-page-header {
border-bottom-color: rgba(242, 106, 33, 0.24);
box-shadow: 0 10px 20px rgba(10, 19, 36, 0.08);
}
/* Profile page: Instagram-like header behavior (hide on scroll down, show on scroll up) */
#profilePage .menu-page-header {
transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
@media (max-width: 768px) {
#profilePage.profile-header-hidden .menu-page-header {
transform: translateY(calc(-100% - 12px));
opacity: 0;
pointer-events: none;
}
}
@media (min-width: 769px) {
#profilePage.profile-header-hidden .menu-page-header {
transform: none;
opacity: 1;
pointer-events: auto;
}
}
body.dark .menu-page.is-scrolled .menu-page-header {
border-bottom-color: rgba(242, 106, 33, 0.34);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
}
.menu-header-actions {
display: inline-flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.menu-scope-chip {
margin-left: auto;
padding: 6px 12px;
border-radius: 999px;
background: rgba(242, 106, 33, 0.12);
border: 1px solid rgba(242, 106, 33, 0.28);
color: #C85A12;
font-size: 0.85rem;
font-weight: 600;
}
.menu-page-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 18px;
}
.menu-page-actions .action-btn,
.menu-page-actions .submit-btn,
.menu-page-actions .back-btn {
transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-smooth);
}
.menu-page-actions .action-btn:hover,
.menu-page-actions .submit-btn:hover,
.menu-page-actions .back-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(10, 19, 36, 0.12);
}
.menu-page-actions .action-btn {
min-width: 160px;
}
.menu-page-actions .action-btn.is-active {
background: linear-gradient(135deg, var(--accent), #D85A19);
color: #FFFFFF;
border-color: transparent;
box-shadow: 0 10px 22px rgba(242, 106, 33, 0.24);
}
.menu-page-note {
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(10, 19, 36, 0.1);
border-radius: 12px;
padding: 10px 12px;
}
.menu-page.menu-page-enter .menu-page-note,
.menu-page.menu-page-enter .menu-page-scope,
.menu-page.menu-page-enter .menu-page-actions,
.menu-page.menu-page-enter .menu-page-subsection,
.menu-page.menu-page-enter .lead-panel,
.menu-page.menu-page-enter .admin-detail-section,
.menu-page.menu-page-enter .admin-jfa-list,
.menu-page.menu-page-enter .learning-body {
opacity: 0;
transform: translateY(8px);
animation: menuSectionIn 320ms var(--ease-out) forwards;
}
.menu-page.menu-page-enter .menu-page-note { animation-delay: 20ms; }
.menu-page.menu-page-enter .menu-page-scope { animation-delay: 40ms; }
.menu-page.menu-page-enter .menu-page-actions { animation-delay: 60ms; }
.menu-page.menu-page-enter .menu-page-subsection { animation-delay: 90ms; }
.menu-page.menu-page-enter .lead-panel { animation-delay: 100ms; }
.menu-page.menu-page-enter .admin-detail-section { animation-delay: 120ms; }
.menu-page.menu-page-enter .admin-jfa-list { animation-delay: 140ms; }
.menu-page.menu-page-enter .learning-body { animation-delay: 160ms; }
@keyframes menuSectionIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.learning-search {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
.learning-search input {
flex: 1 1 240px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(10, 19, 36, 0.18);
background: rgba(255, 255, 255, 0.9);
}
.learning-search input:focus {
outline: none;
border-color: rgba(242, 106, 33, 0.55);
box-shadow: 0 0 0 3px rgba(242, 106, 33, 0.15);
}
.learning-search-filters {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
padding: 8px 10px;
border-radius: 12px;
border: 1px solid rgba(10, 19, 36, 0.12);
background: rgba(255, 255, 255, 0.7);
}
.learning-filter-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.learning-search-filters label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
color: var(--ink-2);
}
.learning-search-filters input {
accent-color: var(--accent);
}
.learning-mark {
background: rgba(242, 106, 33, 0.35);
padding: 0 2px;
border-radius: 4px;
}
.learning-search-results {
margin-bottom: 18px;
display: grid;
gap: 10px;
}
.learning-search-item {
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(10, 19, 36, 0.12);
background: rgba(255, 255, 255, 0.85);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.learning-search-item:hover {
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(10, 19, 36, 0.12);
}
.learning-search-item:active {
transform: translateY(0);
}
.learning-search-item strong {
display: block;
margin-bottom: 4px;
}
.learning-search-item span {
color: var(--muted);
font-size: 0.88rem;
}
body.dark .learning-search-item {
background: rgba(10, 18, 34, 0.86);
border-color: var(--line-darkmode);
}
body.dark .learning-search-item span {
color: var(--muted-darkmode);
}
body.dark .learning-search input {
background: rgba(10, 18, 34, 0.9);
border-color: rgba(255, 255, 255, 0.16);
color: var(--text-darkmode);
}
body.dark .learning-search-filters {
background: rgba(10, 18, 34, 0.9);
border-color: rgba(255, 255, 255, 0.16);
}
body.dark .learning-search-filters label {
color: var(--text-darkmode);
}
.menu-page-note,
.menu-page-scope {
color: var(--muted);
font-size: 0.95rem;
margin-bottom: 12px;
}
.menu-page-body {
margin-bottom: 20px;
}
.menu-fab {
position: fixed;
right: 24px;
bottom: 24px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid rgba(10, 19, 36, 0.2);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 12px 24px rgba(10, 19, 36, 0.16);
font-weight: 600;
display: none;
z-index: 1500;
cursor: pointer;
}
.menu-fab.is-visible {
display: inline-flex;
}
body.dark .menu-fab {
background: rgba(10, 18, 34, 0.9);
border-color: rgba(255, 255, 255, 0.16);
color: var(--text-darkmode);
}
.reduce-motion * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.menu-page-subsection h3 {
margin: 10px 0 12px;
}
.form-list {
display: grid;
gap: 14px;
}
.form-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(10, 19, 36, 0.12);
box-shadow: 0 10px 18px rgba(10, 19, 36, 0.08);
}
.lead-panel {
background: rgba(255, 255, 255, 0.86);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 18px;
padding: 16px;
box-shadow: 0 10px 18px rgba(10, 19, 36, 0.08);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.lead-panel + .lead-panel {
margin-top: 14px;
}
.lead-panel-head {
margin-bottom: 12px;
}
.lead-authority-code {
display: inline-flex;
align-items: center;
margin-top: 8px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(10, 19, 36, 0.14);
background: rgba(242, 106, 33, 0.1);
color: #0A1324;
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.lead-form-grid {
display: grid;
gap: 10px;
}
.lead-consent-check {
margin-top: 4px;
}
.lead-section {
border: 1px solid rgba(10, 19, 36, 0.1);
border-radius: 16px;
padding: 14px;
background: rgba(255, 255, 255, 0.75);
box-shadow: var(--shadow-soft);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.lead-panel:hover,
.lead-panel:focus-within {
transform: translateY(-2px);
box-shadow: 0 14px 24px rgba(10, 19, 36, 0.12);
}
.lead-section:hover,
.lead-section:focus-within {
transform: translateY(-1px);
border-color: rgba(23, 162, 164, 0.36);
box-shadow: 0 10px 20px rgba(10, 19, 36, 0.12);
}
.lead-section + .lead-section {
margin-top: 12px;
}
.lead-section-title {
font-weight: 700;
color: var(--ink-2);
margin-bottom: 10px;
}
.lead-tc-box {
border-radius: 12px;
border: 1px solid rgba(10, 19, 36, 0.12);
padding: 12px;
background: rgba(10, 19, 36, 0.04);
max-height: 220px;
overflow: auto;
font-size: 0.9rem;
}
.lead-tc-box ul {
padding-left: 18px;
margin: 8px 0;
}
.lead-checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 8px;
margin-bottom: 10px;
font-size: 0.9rem;
}
.lead-policy-table {
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.7);
}
.lead-policy-row {
display: grid;
grid-template-columns: repeat(4, minmax(140px, 1fr));
border-top: 1px solid rgba(10, 19, 36, 0.08);
}
.lead-policy-row:first-child {
border-top: none;
}
.lead-policy-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-right: 1px solid rgba(10, 19, 36, 0.08);
font-size: 0.9rem;
}
.lead-policy-item:last-child {
border-right: none;
}
body.dark .lead-policy-table {
background: rgba(14, 22, 38, 0.85);
border-color: var(--line-darkmode);
}
body.dark .lead-policy-row {
border-top-color: var(--line-darkmode);
}
body.dark .lead-policy-item {
border-right-color: var(--line-darkmode);
}
@media (max-width: 720px) {
.lead-policy-row {
grid-template-columns: repeat(2, minmax(140px, 1fr));
}
}
.lead-signature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.lead-signature-pad-wrap {
width: 100%;
border-radius: 12px;
border: 1px solid rgba(10, 19, 36, 0.18);
background: #FFFFFF;
overflow: hidden;
}
.lead-signature-pad {
display: block;
width: 100%;
height: 180px;
cursor: crosshair;
}
.lead-signature-preview-wrap {
width: 100%;
border: 1px solid rgba(10, 19, 36, 0.16);
border-radius: 12px;
background: #FFFFFF;
padding: 8px;
}
.lead-signature-preview-image {
width: 100%;
height: auto;
max-height: 260px;
object-fit: contain;
display: block;
}
body.dark .lead-panel {
background: rgba(10, 18, 34, 0.9);
border-color: var(--line-darkmode);
}
body.dark .lead-section {
background: rgba(14, 22, 38, 0.9);
border-color: var(--line-darkmode);
}
body.dark .lead-authority-code {
background: rgba(242, 106, 33, 0.2);
border-color: var(--line-darkmode);
color: #F8FBFF;
}
body.dark .lead-tc-box {
background: rgba(255, 255, 255, 0.04);
border-color: var(--line-darkmode);
color: var(--text-darkmode);
}
body.dark .lead-signature-pad-wrap {
border-color: var(--line-darkmode);
background: rgba(255, 255, 255, 0.96);
}
body.dark .lead-signature-preview-wrap {
border-color: var(--line-darkmode);
background: rgba(255, 255, 255, 0.96);
}
body.dark .form-card {
background: rgba(10, 18, 34, 0.9);
border-color: var(--line-darkmode);
}
.learning-detail-progress {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.learning-detail-bar {
flex: 1;
height: 10px;
border-radius: 999px;
background: rgba(10, 19, 36, 0.1);
overflow: hidden;
}
.learning-detail-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--accent), rgba(242, 106, 33, 0.5));
transition: width 0.3s ease;
}
.learning-detail-body {
display: grid;
gap: 16px;
}
.learning-panel {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 18px;
padding: 16px;
box-shadow: 0 10px 18px rgba(10, 19, 36, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.learning-panel:hover {
transform: translateY(-2px);
box-shadow: 0 14px 24px rgba(10, 19, 36, 0.14);
border-color: rgba(242, 106, 33, 0.35);
}
.learning-panel h4 {
margin: 0 0 10px;
}
.learning-topic-logo {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 14px;
margin: 0 0 16px;
padding: 6px 0 10px;
border-radius: 0;
border: 0;
border-bottom: 2px solid rgba(10, 19, 36, 0.14);
background: transparent;
}
.learning-topic-logo.compact {
margin-top: 4px;
}
.learning-topic-logo img,
.learning-topic-logo-image {
width: min(220px, 92%);
height: auto;
max-height: 90px;
object-fit: contain;
border-radius: 0;
background: transparent;
box-shadow: none;
border: 0;
display: block;
margin-inline: auto;
}
.learning-topic-logo-image.is-capital {
width: min(560px, 100%);
max-width: 100%;
height: auto;
max-height: none;
object-fit: contain;
object-position: center;
}
.learning-topic-logo-copy {
display: grid;
gap: 2px;
text-align: center;
justify-items: center;
}
.learning-topic-logo-copy strong {
font-size: 1.08rem;
font-weight: 800;
letter-spacing: 0.2px;
line-height: 1.2;
text-transform: uppercase;
}
.learning-topic-logo-copy span {
font-size: 0.84rem;
opacity: 0.88;
}
.learning-checklist label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.learning-quiz {
display: grid;
gap: 10px;
}
.learning-quiz button {
justify-content: flex-start;
}
.learning-reflection textarea {
width: 100%;
min-height: 120px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(10, 19, 36, 0.16);
background: rgba(255, 255, 255, 0.95);
}
body.dark .learning-panel {
background: rgba(10, 18, 34, 0.9);
border-color: var(--line-darkmode);
}
body.dark .learning-topic-logo {
background: transparent;
border-color: rgba(255, 255, 255, 0.22);
}
body.dark .learning-topic-logo img {
background: transparent;
}
body.dark .learning-detail-bar {
background: rgba(255, 255, 255, 0.1);
}
body.dark .learning-reflection textarea {
background: rgba(10, 18, 34, 0.9);
border-color: var(--line-darkmode);
color: var(--text-darkmode);
}
.admin-insights {
margin-top: 18px;
display: grid;
gap: 14px;
}
.admin-detail-section {
display: grid;
gap: 14px;
margin-top: 8px;
}
.admin-jfa-list {
margin-top: 14px;
display: grid;
gap: 10px;
}
.admin-jfa-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(10, 19, 36, 0.12);
background: rgba(255, 255, 255, 0.9);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.admin-jfa-card:active {
transform: scale(0.99);
}
.admin-jfa-card .restore-btn {
margin-left: auto;
}
.admin-jfa-card:hover {
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(10, 19, 36, 0.12);
}
.admin-jfa-card.is-selected {
border-color: rgba(242, 106, 33, 0.55);
box-shadow: 0 0 0 2px rgba(242, 106, 33, 0.2), 0 10px 18px rgba(10, 19, 36, 0.12);
}
.admin-jfa-card:focus-visible {
outline: 2px solid rgba(242, 106, 33, 0.55);
outline-offset: 2px;
}
.admin-jfa-status {
padding: 6px 10px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
}
.admin-jfa-status.under {
background: rgba(231, 76, 60, 0.18);
color: #C0392B;
}
.admin-jfa-status.on {
background: rgba(11, 46, 82, 0.18);
color: #0B2E52;
}
.admin-jfa-status.over {
background: rgba(39, 174, 96, 0.18);
color: #1E8449;
}
.admin-graph {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
align-items: end;
height: 120px;
margin-top: 10px;
}
.admin-graph-bar {
background: rgba(23, 162, 164, 0.2);
border-radius: 8px;
position: relative;
}
.admin-graph-bar span {
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
font-size: 0.75rem;
color: var(--muted);
}
body.dark .admin-jfa-card {
background: rgba(10, 18, 34, 0.9);
border-color: var(--line-darkmode);
}
body.dark .admin-graph-bar span {
color: var(--muted-darkmode);
}
.insight-card {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 16px;
padding: 14px 16px;
box-shadow: 0 10px 22px rgba(10, 19, 36, 0.08);
transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
}
.insight-card h4 {
margin: 0 0 8px;
}
.insight-card:hover,
.insight-card:focus-within {
transform: translateY(-2px);
box-shadow: 0 14px 26px rgba(10, 19, 36, 0.12);
border-color: rgba(242, 106, 33, 0.22);
}
.insight-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.insight-chip {
padding: 6px 10px;
border-radius: 999px;
background: rgba(10, 19, 36, 0.08);
font-size: 0.85rem;
}
.insight-chip.danger {
background: rgba(231, 76, 60, 0.18);
color: #C0392B;
}
body.dark .insight-card {
background: rgba(10, 18, 34, 0.86);
border-color: var(--line-darkmode);
}
body.dark .insight-chip {
background: rgba(255, 255, 255, 0.08);
color: var(--text-darkmode);
}
body.dark .insight-chip.danger {
background: rgba(231, 76, 60, 0.22);
color: #F2B4AE;
}
body.dark .menu-page {
background: rgba(6, 10, 20, 0.98);
}
body.dark .menu-page-inner {
background: rgba(10, 18, 34, 0.92);
border-color: var(--line-darkmode);
}
body.dark .menu-page-note,
body.dark .menu-page-scope {
color: var(--muted-darkmode);
}
@keyframes menuFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes menuCardIn {
0% { opacity: 0; transform: translateY(12px) scale(0.98); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-orb {
position: absolute;
width: 320px;
height: 320px;
border-radius: 50%;
opacity: 0.55;
background: radial-gradient(circle at 30% 30%, rgba(23, 162, 164, 0.9), rgba(11, 46, 82, 0.2));
animation: orbFloat 12s ease-in-out infinite;
z-index: 0;
}
.hero-orb.orb-one {
top: -80px;
left: -60px;
}
.hero-orb.orb-two {
bottom: -120px;
right: -40px;
width: 260px;
height: 260px;
animation-delay: -4s;
}
@keyframes orbFloat {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(18px) scale(1.05); }
}
.hero-particles {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.hero-particles span {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(23, 162, 164, 0.55);
animation: particleDrift 10s ease-in-out infinite;
}
.hero-particles span:nth-child(1) { top: 20%; left: 15%; animation-delay: -1s; }
.hero-particles span:nth-child(2) { top: 35%; left: 80%; animation-delay: -3s; }
.hero-particles span:nth-child(3) { top: 70%; left: 25%; animation-delay: -5s; }
.hero-particles span:nth-child(4) { top: 60%; left: 70%; animation-delay: -2s; }
.hero-particles span:nth-child(5) { top: 15%; left: 55%; animation-delay: -6s; }
.hero-particles span:nth-child(6) { top: 80%; left: 55%; animation-delay: -4s; }
@keyframes particleDrift {
0%, 100% { transform: translateY(0); opacity: 0.4; }
50% { transform: translateY(-16px); opacity: 0.8; }
}
.hero-spotlight {
position: absolute;
inset: -10%;
pointer-events: none;
z-index: 0;
background: radial-gradient(420px 300px at var(--spot-x, 50%) var(--spot-y, 35%), rgba(255, 255, 255, 0.22), transparent 65%);
mix-blend-mode: screen;
transition: background 0.12s ease;
}
.hero-section::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
opacity: 0.5;
mix-blend-mode: soft-light;
pointer-events: none;
z-index: 0;
}
.hero-section::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -20%;
height: 50%;
background: radial-gradient(closest-side, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
filter: blur(8px);
opacity: 0.7;
z-index: 0;
pointer-events: none;
}
.hero-overlay {
position: absolute;
inset: 0;
background: radial-gradient(700px 420px at 18% 20%, rgba(242, 106, 33, 0.2), transparent 60%),
radial-gradient(600px 420px at 80% 10%, rgba(11, 46, 82, 0.35), transparent 65%);
opacity: 1;
animation: heroDrift 14s ease-in-out infinite;
}
.hero-content {
position: relative;
z-index: 1;
animation: floatIn 1.1s ease;
display: flex;
flex-direction: column;
align-items: center;
animation: floatIn 1.1s ease, heroFloat 10s ease-in-out infinite;
}
.hero-stage {
opacity: 1;
transform: translateY(0);
}
.js-enhanced .hero-stage {
opacity: 1;
transform: translateY(0);
transition: opacity 420ms var(--ease-smooth), transform 420ms var(--ease-smooth);
transition-delay: var(--stage-delay, 0ms);
}
.js-enhanced .hero-content.is-revealed .hero-stage {
opacity: 1;
transform: translateY(0);
}
.hero-headline {
font-size: clamp(0.85rem, 1.6vw, 1.05rem);
font-weight: 700;
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.88);
text-transform: uppercase;
letter-spacing: 0.6px;
display: inline-block;
transform: translateY(38px);
animation: taglineReveal 1s ease forwards;
background: linear-gradient(90deg, #ffffff 0%, #ffd2b8 28%, #ffffff 50%, #ffe0cf 72%, #ffffff 100%);
background-size: 240% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: taglineReveal 1s ease forwards, headlineSheen 8s ease-in-out infinite;
}
.hero-subheadline {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-block;
transform: translateY(38px);
animation: taglineReveal 1s ease 0.15s forwards;
text-shadow: 0 0 18px rgba(242, 106, 33, 0.2);
}
@keyframes headlineSheen {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero-logo {
width: clamp(180px, 28vw, 360px);
height: auto;
display: block;
margin: 0 auto 12px;
filter: drop-shadow(0 10px 24px rgba(10, 19, 36, 0.25));
transition: transform 0.3s ease, filter 0.3s ease;
transform-style: preserve-3d;
animation: heroLogoPulse 5s ease-in-out infinite;
}
.hero-logo:hover {
transform: translateY(-2px) scale(1.02);
filter: drop-shadow(0 14px 28px rgba(242, 106, 33, 0.35));
}
.hero-tagline {
font-size: clamp(1.1rem, 2vw, 1.5rem);
color: rgba(255, 255, 255, 0.9);
font-family: "The Magic Castle", "Space Grotesk", "IBM Plex Sans", cursive;
margin-bottom: 10px;
}
.hero-status-ribbon {
width: 100%;
text-align: center;
font-size: 0.74rem;
letter-spacing: 0.35px;
text-transform: uppercase;
border-radius: 999px;
padding: 6px 12px;
background: rgba(23, 162, 164, 0.16);
border: 1px solid rgba(23, 162, 164, 0.35);
color: rgba(255, 255, 255, 0.92);
}
.hero-status-strip {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.hero-status-strip .status-chip {
margin-top: 0;
background: rgba(255, 255, 255, 0.82);
border-color: rgba(10, 19, 36, 0.18);
color: #0A1324;
font-size: 0.7rem;
}
.hero-actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.hero-primary-cta {
animation-duration: 7s;
}
.hero-secondary-cta {
min-width: 148px;
position: relative;
overflow: hidden;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
border-radius: 14px !important;
font-weight: 700;
letter-spacing: 0.2px;
padding: 11px 18px;
transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
body:not(.dark) .hero-secondary-cta {
color: #08233f !important;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(229, 243, 255, 0.92)) !important;
border-color: rgba(11, 46, 82, 0.32) !important;
box-shadow: 0 10px 20px rgba(8, 35, 63, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
body.dark .hero-secondary-cta {
color: #f1f7ff !important;
background: linear-gradient(135deg, rgba(18, 117, 147, 0.52), rgba(19, 155, 154, 0.38), rgba(242, 106, 33, 0.32)) !important;
border-color: rgba(214, 231, 255, 0.34) !important;
box-shadow: 0 12px 24px rgba(2, 8, 18, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.hero-secondary-cta::after {
content: "";
position: absolute;
inset: -140% -25%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.34), transparent);
transform: translateX(-120%);
transition: transform 0.55s ease;
pointer-events: none;
}
.hero-secondary-cta:hover {
transform: translateY(-1px);
}
.hero-secondary-cta:hover::after {
transform: translateX(120%);
}
.hero-secondary-cta:focus-visible {
outline: 2px solid rgba(242, 106, 33, 0.75);
outline-offset: 2px;
}
.hero-secondary-cta:active {
transform: translateY(0);
box-shadow: 0 6px 14px rgba(8, 35, 63, 0.2);
}
.fa-hero-cta {
min-width: 182px;
background: linear-gradient(135deg, #0d7f7a, #0b5f73);
box-shadow: 0 14px 30px rgba(11, 95, 115, 0.42);
}
.fa-hero-cta:hover {
box-shadow: 0 18px 36px rgba(11, 95, 115, 0.38);
}
.hero-ribbon {
width: clamp(120px, 20vw, 180px);
height: 6px;
margin: 0 auto 18px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(242, 106, 33, 0.95), rgba(11, 46, 82, 0.35));
box-shadow: 0 12px 20px rgba(242, 106, 33, 0.25);
animation: ribbonPulse 6s ease-in-out infinite, ribbonShimmer 8s ease-in-out infinite;
}
.hero-glass {
display: inline-flex;
flex-direction: column;
gap: 18px;
padding: 20px 28px;
border-radius: 20px;
background: rgba(12, 19, 33, 0.35);
border: 1px solid rgba(242, 106, 33, 0.22);
backdrop-filter: blur(18px) saturate(140%);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
position: relative;
overflow: hidden;
}
.hero-glass::after {
content: "";
position: absolute;
inset: -40% -60%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.12), transparent);
transform: translateX(-60%);
animation: glassShimmer 0.6s ease forwards, glassShimmerRepeat 12s ease-in-out infinite;
pointer-events: none;
}
.hero-glass > * {
position: relative;
z-index: 1;
}
@keyframes glassShimmer {
0% { transform: translateX(-60%); }
100% { transform: translateX(60%); }
}
.hero-badges {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.badge {
padding: 9px 20px;
border-radius: 999px;
background: rgba(12, 19, 33, 0.35);
border: 1px solid rgba(242, 106, 33, 0.22);
font-weight: 600;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
}
.hero-mini {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
.hero-top3 {
display: grid;
gap: 8px;
}
.hero-top-title {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.4px;
color: rgba(255, 255, 255, 0.7);
}
.hero-top-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hero-top-item {
background: rgba(12, 19, 33, 0.4);
border: 1px solid rgba(242, 106, 33, 0.22);
border-radius: 999px;
padding: 6px 12px;
font-weight: 600;
font-size: 0.82rem;
}
.hero-mini-item {
background: rgba(12, 19, 33, 0.4);
border: 1px solid rgba(242, 106, 33, 0.22);
border-radius: 12px;
padding: 10px 12px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hero-mini-item:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(242, 106, 33, 0.25);
border-color: rgba(242, 106, 33, 0.45);
}
.hero-mini-item:focus-visible {
outline: 2px solid rgba(242, 106, 33, 0.6);
outline-offset: 2px;
}
.hero-mini-value {
display: block;
font-size: 1.1rem;
font-weight: 700;
}
.hero-mini-label {
font-size: 0.75rem;
letter-spacing: 0.4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.hero-stat {
background: rgba(12, 19, 33, 0.4);
border: 1px solid rgba(242, 106, 33, 0.22);
border-radius: 12px;
padding: 10px 12px;
}
.hero-stat-value {
display: block;
font-size: 1.2rem;
font-weight: 700;
}
.hero-stat-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.75);
}
.hero-progress {
display: grid;
gap: 6px;
}
.hero-progress-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.4px;
color: rgba(255, 255, 255, 0.7);
}
.hero-progress-bar {
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
overflow: hidden;
}
.hero-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, rgba(242, 106, 33, 0.9), rgba(11, 46, 82, 0.35));
border-radius: 999px;
transition: width 0.3s ease;
}
.hero-progress-fill.metric-up,
.hero-mini-value.metric-up {
animation: metricPulseUp 420ms ease;
}
.hero-progress-fill.metric-down,
.hero-mini-value.metric-down {
animation: metricPulseDown 420ms ease;
}
.hero-progress-value {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.8);
}
.hero-last {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.7);
}
.hero-assist {
font-size: 0.76rem;
color: rgba(255, 255, 255, 0.82);
border-top: 1px dashed rgba(255, 255, 255, 0.2);
padding-top: 8px;
}
@keyframes metricPulseUp {
0% { transform: scale(1); filter: brightness(1); }
40% { transform: scale(1.08); filter: brightness(1.22); }
100% { transform: scale(1); filter: brightness(1); }
}
@keyframes metricPulseDown {
0% { transform: scale(1); filter: brightness(1); }
40% { transform: scale(0.96); filter: brightness(0.92); }
100% { transform: scale(1); filter: brightness(1); }
}
.start-here {
margin-top: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
color: var(--accent-2);
}
.start-arrow {
animation: arrowBounce 1.6s ease-in-out infinite;
}
@keyframes arrowBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
@keyframes heroFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes taglineReveal {
0% { opacity: 0; transform: translateY(38px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes ribbonShimmer {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.15); }
}
@keyframes glassShimmerRepeat {
0%, 90% { transform: translateX(-60%); opacity: 0; }
95% { opacity: 0.35; }
100% { transform: translateX(60%); opacity: 0; }
}
@keyframes heroGlow {
0%, 100% { filter: saturate(100%); }
50% { filter: saturate(125%); }
}
@keyframes ribbonPulse {
0%, 100% { transform: scaleX(1); opacity: 0.9; }
50% { transform: scaleX(1.05); opacity: 1; }
}
@keyframes heroLogoPulse {
0%, 100% { filter: drop-shadow(0 10px 24px rgba(10, 19, 36, 0.25)); }
50% { filter: drop-shadow(0 16px 32px rgba(242, 106, 33, 0.35)); }
}
.trust-strip {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 18px;
padding: 24px 16px 10px;
color: var(--muted);
font-weight: 600;
}
.trust-item {
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(10, 19, 36, 0.12);
}
.section-divider + .about-section {
border-top: 1px solid rgba(23, 162, 164, 0.18);
}
.back-to-top {
position: fixed;
right: 18px;
bottom: 86px;
border: none;
border-radius: 999px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.9);
color: var(--ink-2);
font-weight: 700;
box-shadow: var(--shadow-soft);
cursor: pointer;
z-index: 1200;
display: none;
}
.site-footer {
text-align: center;
padding: 18px 10px 28px;
color: var(--muted);
font-size: 0.85rem;
}
.admin-brand-stack {
display: grid;
justify-items: center;
gap: 8px;
margin: 6px 0 2px;
}
.admin-brand-title {
font-size: 0.85rem;
font-weight: 700;
color: var(--muted);
letter-spacing: 0.02em;
}
.admin-brand-logo {
display: block;
width: min(110px, 38vw);
height: auto;
max-height: 88px;
object-fit: contain;
margin: 4px auto 2px;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
filter: drop-shadow(0 4px 10px rgba(10, 19, 36, 0.12));
}
body.dark .admin-brand-title {
color: #C6D3E5;
}
body.dark .admin-brand-logo {
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}
@keyframes floatIn {
0% { opacity: 0; transform: translateY(24px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Section Divider */
.section-divider {
position: relative;
height: 1px;
background: linear-gradient(90deg, rgba(10, 19, 36, 0), rgba(10, 19, 36, 0.2), rgba(10, 19, 36, 0));
margin: 36px auto;
max-width: 860px;
}
.section-divider::after {
content: attr(data-label);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 4px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(10, 19, 36, 0.14);
color: var(--muted);
font-size: 0.78rem;
letter-spacing: 0.4px;
text-transform: uppercase;
box-shadow: 0 8px 16px rgba(10, 19, 36, 0.08);
}
/* About */
.about-section {
padding: 76px 0 46px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(239, 243, 248, 0.95));
}
body.dark .about-section {
background:
radial-gradient(900px 420px at 14% 0%, rgba(242, 106, 33, 0.09), transparent 72%),
radial-gradient(860px 400px at 86% 8%, rgba(23, 162, 164, 0.08), transparent 74%),
linear-gradient(180deg, rgba(10, 16, 29, 0.96), rgba(14, 22, 38, 0.98));
}
body.dark .section-divider {
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}
body.dark .section-divider::after {
background: rgba(14, 22, 38, 0.9);
border-color: var(--line-darkmode);
color: var(--muted-darkmode);
}
.summary-panel {
margin-bottom: 26px;
}
.summary-card {
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 18px;
padding: 20px 22px;
box-shadow: var(--shadow-soft);
backdrop-filter: blur(10px) saturate(140%);
opacity: 0;
transform: translateY(12px) scale(0.98);
filter: blur(4px);
transition: opacity 0.55s ease, transform 0.55s ease, filter 0.55s ease;
position: relative;
overflow: hidden;
}
.summary-card::before,
.about-card::before,
.service-item::before,
.registration-form-container::before,
.dbd-form-container::before {
content: "";
position: absolute;
inset: -45% -60%;
background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.24) 48%, transparent 70%);
transform: translateX(-65%);
transition: transform 0.7s ease;
pointer-events: none;
z-index: 0;
}
.summary-card > *,
.about-card > *,
.service-item > *,
.registration-form-container > *,
.dbd-form-container > * {
position: relative;
z-index: 1;
}
.summary-card.is-visible,
.about-card.is-visible,
.service-item.is-visible,
.registration-form-container.is-visible,
.dbd-form-container.is-visible,
.stats-section.is-visible,
.archives-panel.is-visible,
.assignment-card.is-visible,
.lead-panel.is-visible,
.lead-section.is-visible,
.target-card.is-visible,
.insight-card.is-visible {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
.summary-card:hover,
.summary-card:focus-within,
.about-card:hover,
.service-item:hover,
.registration-form-container:hover,
.dbd-form-container:hover,
.stats-section:hover,
.archives-panel:hover,
.team-card:hover,
.facility-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-1);
}
.summary-card:hover::before,
.about-card:hover::before,
.service-item:hover::before,
.registration-form-container:hover::before,
.dbd-form-container:hover::before {
transform: translateX(65%);
}
.highlight-band {
background: linear-gradient(135deg, rgba(23, 162, 164, 0.12), rgba(11, 46, 82, 0.08));
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 14px;
padding: 14px 16px;
}
.summary-title {
font-weight: 700;
color: var(--ink-2);
margin-bottom: 12px;
letter-spacing: 0.2px;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
}
.summary-item {
background: rgba(239, 243, 248, 0.7);
border: 1px solid rgba(10, 19, 36, 0.08);
border-radius: 14px;
padding: 12px 14px;
text-align: center;
backdrop-filter: blur(8px) saturate(140%);
}
.summary-value {
display: block;
font-size: 1.6rem;
font-weight: 700;
color: var(--brand);
}
.summary-label {
color: var(--muted);
font-size: 0.9rem;
}
.about-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 22px;
margin-bottom: 24px;
}
.about-card {
background: rgba(255, 255, 255, 0.78);
border-radius: 18px;
padding: 28px;
box-shadow: var(--shadow-2);
border: 1px solid rgba(10, 19, 36, 0.1);
backdrop-filter: blur(10px) saturate(140%);
transition: transform 0.28s ease, box-shadow 0.28s ease;
position: relative;
}
.about-card:hover,
.about-card:focus-within {
transform: translateY(-6px);
box-shadow: var(--shadow-1);
}
.about-card:hover::after,
.service-item:hover::after,
.target-card:hover::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, 0.6);
pointer-events: none;
}
.icon {
color: var(--accent);
margin-bottom: 12px;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.icon svg {
width: 100%;
height: 100%;
}
.about-card h3 {
color: var(--brand);
margin-bottom: 10px;
font-size: 1.32rem;
}
/* Services */
.services-section {
margin: 36px 0 46px;
}
.services-section h2 {
text-align: center;
font-size: 2.05rem;
color: var(--ink);
margin-bottom: 28px;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
}
.service-item {
background: rgba(255, 255, 255, 0.78);
padding: 22px;
border-radius: 16px;
border: 1px solid rgba(10, 19, 36, 0.1);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(10px) saturate(140%);
transition: transform 0.25s ease, box-shadow 0.25s ease;
position: relative;
}
.service-item:hover,
.service-item:focus-within {
transform: translateY(-4px);
box-shadow: var(--shadow-1);
}
.service-item h4 {
color: var(--brand);
margin-bottom: 8px;
}
.target-card:hover,
.target-card:focus-within {
transform: translateY(-2px);
box-shadow: var(--shadow-2);
}
/* CTA */
.cta-section {
text-align: center;
padding-bottom: 40px;
}
.jfa-register-btn {
border: none;
background: linear-gradient(135deg, var(--accent), #0D8F92);
color: #FFFFFF;
padding: 16px 46px;
border-radius: 999px;
font-size: 1.15rem;
font-weight: 700;
box-shadow: 0 14px 30px rgba(23, 162, 164, 0.55);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 12px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
overflow: hidden;
animation: ctaPulse 6s ease-in-out infinite;
}
.jfa-register-btn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 18px 36px rgba(23, 162, 164, 0.45);
}
.jfa-register-btn::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 80%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
transform: skewX(-20deg);
transition: left 0.6s ease;
}
.jfa-register-btn:hover::after {
left: 140%;
}
.jfa-register-btn:hover {
animation-play-state: paused;
}
@keyframes ctaPulse {
0%, 100% { box-shadow: 0 14px 30px rgba(23, 162, 164, 0.5); transform: translateY(0); }
50% { box-shadow: 0 20px 40px rgba(23, 162, 164, 0.75); transform: translateY(-1px); }
}
.jfa-register-btn:active,
.submit-btn:active,
.action-btn:active,
.back-btn:active {
transform: translateY(1px) scale(0.99);
}
.jfa-register-btn:focus-visible,
.submit-btn:focus-visible,
.action-btn:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 3px;
}
.btn-icon {
font-size: 1.5rem;
transition: transform 0.2s ease;
}
.jfa-register-btn:hover .btn-icon {
transform: translateX(6px);
}
/* Headers */
.page-header {
text-align: center;
margin: 28px 0 26px;
}
.section-heading {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
letter-spacing: 0.35px;
text-transform: uppercase;
color: var(--muted);
font-weight: 700;
position: relative;
padding-bottom: 8px;
margin-bottom: 6px;
}
.section-heading::before {
content: attr(data-icon);
font-size: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(23, 162, 164, 0.16);
color: var(--brand);
animation: iconFloat 3s ease-in-out infinite;
}
.section-heading::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 56px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(23, 162, 164, 0.75), rgba(11, 46, 82, 0.2));
}
h2.section-heading {
font-size: 1.35rem;
text-transform: none;
color: var(--ink);
margin-bottom: 14px;
}
body.dark h2.section-heading {
color: var(--text-darkmode);
}
@keyframes iconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
.page-header h1 {
font-size: 2.05rem;
color: var(--ink);
}
.page-subtitle {
color: var(--muted);
}
.scope-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(10, 19, 36, 0.15);
background: rgba(10, 19, 36, 0.06);
font-size: 0.9rem;
font-weight: 600;
}
.scope-badge.admin {
background: rgba(242, 106, 33, 0.12);
border-color: rgba(242, 106, 33, 0.3);
color: #C85A12;
}
.scope-badge.team {
background: rgba(23, 162, 164, 0.12);
border-color: rgba(23, 162, 164, 0.35);
color: #0D7F7A;
}
.scope-badge.personal {
background: rgba(11, 46, 82, 0.12);
border-color: rgba(11, 46, 82, 0.35);
color: #0B2E52;
}
body.dark .scope-badge {
border-color: var(--line-darkmode);
background: rgba(255, 255, 255, 0.06);
color: var(--text-darkmode);
}
body.dark .scope-badge.admin {
background: rgba(242, 106, 33, 0.2);
border-color: rgba(242, 106, 33, 0.45);
color: #F4B57F;
}
body.dark .scope-badge.team {
background: rgba(23, 162, 164, 0.2);
border-color: rgba(23, 162, 164, 0.45);
color: #87E4E0;
}
body.dark .scope-badge.personal {
background: rgba(11, 46, 82, 0.3);
border-color: rgba(11, 46, 82, 0.5);
color: #BBD0E8;
}
.reset-time-control {
margin-top: 12px;
display: inline-flex;
gap: 10px;
align-items: center;
padding: 8px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(10, 19, 36, 0.12);
}
.reset-time-control label {
font-weight: 600;
color: var(--ink-2);
}
.reset-time-control input {
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 8px;
padding: 6px 8px;
}
.back-btn {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(10, 19, 36, 0.12);
background: rgba(255, 255, 255, 0.8);
color: var(--ink-2);
padding: 8px 14px;
border-radius: 999px;
font-weight: 600;
cursor: pointer;
margin-bottom: 12px;
backdrop-filter: blur(8px) saturate(140%);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.back-btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-soft);
border-color: rgba(10, 19, 36, 0.2);
}
.back-btn:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
}
button,
.action-btn,
.submit-btn,
.back-btn {
min-height: 44px;
position: relative;
overflow: hidden;
isolation: isolate;
}
.logo-button {
isolation: auto;
}
button:focus-visible,
.action-btn:focus-visible,
.submit-btn:focus-visible,
.back-btn:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 3px;
}
.status-chip {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid rgba(10, 19, 36, 0.12);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.chip-ok {
background: rgba(23, 162, 164, 0.16);
color: #0D7F7A;
}
.chip-warn {
background: rgba(246, 193, 78, 0.2);
color: #B97300;
}
.chip-danger {
background: rgba(231, 76, 60, 0.16);
color: #B44438;
}
/* Forms */
.registration-form-container,
.dbd-form-container {
max-width: 720px;
margin: 0 auto 60px;
background: rgba(255, 255, 255, 0.82);
padding: 34px;
border-radius: 18px;
box-shadow: var(--shadow-1);
border: 1px solid rgba(10, 19, 36, 0.12);
backdrop-filter: blur(12px) saturate(140%);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.resume-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 14px;
padding: 14px 16px;
box-shadow: var(--shadow-soft);
margin-bottom: 18px;
backdrop-filter: blur(10px) saturate(140%);
}
.attendance-verify-card {
margin: 18px 0 20px;
padding: 18px;
border-radius: 18px;
border: 1px solid rgba(10, 19, 36, 0.12);
background: linear-gradient(135deg, rgba(11, 46, 82, 0.05), rgba(242, 106, 33, 0.08));
box-shadow: var(--shadow-soft);
display: grid;
gap: 12px;
}
.attendance-verify-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.attendance-verify-head h3 {
margin: 0 0 4px;
}
.attendance-verify-meta,
.attendance-verify-actions,
.attendance-verify-audit {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.attendance-manual-entry {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
}
.attendance-manual-entry input {
width: 100%;
}
.attendance-scan-card {
max-width: 560px;
}
.attendance-scan-stage {
position: relative;
border-radius: 18px;
overflow: hidden;
min-height: 280px;
background: rgba(10, 19, 36, 0.92);
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.attendance-scan-video {
width: 100%;
height: auto;
min-height: 280px;
object-fit: cover;
display: block;
background: #08111f;
}
.attendance-scan-fallback {
display: grid;
gap: 8px;
padding: 20px;
color: #F5F9FF;
text-align: center;
}
body.dark .attendance-verify-card {
border-color: rgba(255, 255, 255, 0.1);
background: linear-gradient(135deg, rgba(10, 18, 34, 0.92), rgba(39, 24, 18, 0.88));
}
body.dark .attendance-scan-stage {
border-color: rgba(255, 255, 255, 0.1);
}
.input-hint {
display: block;
margin-top: 6px;
color: var(--muted);
font-size: 0.78rem;
}
.facility-legend {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 8px;
}
.legend-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(10, 19, 36, 0.12);
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.35px;
}
.chip-muted {
background: rgba(10, 19, 36, 0.12);
color: var(--ink-2);
}
body.dark .chip-muted {
background: rgba(255, 255, 255, 0.12);
color: var(--text-darkmode);
}
.registration-form-container:focus-within,
.dbd-form-container:focus-within {
transform: translateY(-4px);
box-shadow: 0 18px 34px rgba(10, 19, 36, 0.2);
}
.form-group {
margin-bottom: 20px;
transition: transform 0.2s ease;
}
.form-group:focus-within {
transform: translateY(-2px);
}
.form-group label {
font-weight: 600;
margin-bottom: 8px;
display: block;
}
.field-error {
margin-top: 6px;
font-size: 0.88rem;
color: #C0392B;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 13px 16px;
border-radius: 12px;
border: 1.5px solid rgba(10, 19, 36, 0.15);
font-size: 1rem;
background: #FFFFFF;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: rgba(10, 19, 36, 0.45);
}
body.dark .form-group input::placeholder,
body.dark .form-group textarea::placeholder {
color: rgba(230, 236, 243, 0.55);
}
#facilityFilter {
margin-bottom: 0;
}
.facility-filter-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}
.form-group .facility-checkbox {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: var(--ink-2);
margin-bottom: 0;
}
.form-group .facility-checkbox input {
accent-color: var(--accent);
margin: 0;
width: auto;
flex: 0 0 auto;
}
body.dark .facility-checkbox {
color: var(--text-darkmode);
}
.filter-count {
font-size: 0.85rem;
color: var(--muted);
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 999px;
padding: 4px 10px;
white-space: nowrap;
}
/* User page gap filler brand strip (Intro/Register/Assignment/DBD/Dashboard) */
.page-gap-brand-strip {
margin: 10px 0 18px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(10, 19, 36, 0.12);
background:
radial-gradient(120% 120% at 0% 0%, rgba(242, 106, 33, 0.14), transparent 55%),
linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 248, 255, 0.92));
display: flex;
align-items: center;
justify-content: center;
min-height: 88px;
box-shadow: 0 10px 22px rgba(10, 19, 36, 0.08);
}
.page-gap-brand-strip.compact {
margin-top: 6px;
min-height: 76px;
}
.page-gap-brand-logo {
width: 76px;
height: 76px;
object-fit: contain;
border-radius: 0;
background: transparent;
border: 0;
padding: 0;
}
.page-gap-brand-copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.page-gap-brand-copy strong {
color: #0A1324;
font-size: 0.98rem;
line-height: 1.2;
}
.page-gap-brand-copy span {
color: rgba(10, 19, 36, 0.74);
font-size: 0.86rem;
line-height: 1.25;
}
body.dark .page-gap-brand-strip {
border-color: rgba(255, 255, 255, 0.14);
background:
radial-gradient(120% 120% at 0% 0%, rgba(242, 106, 33, 0.22), transparent 55%),
linear-gradient(135deg, rgba(19, 34, 60, 0.9), rgba(12, 24, 45, 0.88));
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}
body.dark .page-gap-brand-logo {
background: transparent;
border-color: transparent;
}
body.dark .page-gap-brand-copy strong {
color: #EAF2FF;
}
body.dark .page-gap-brand-copy span {
color: rgba(234, 242, 255, 0.75);
}
@media (max-width: 768px) {
.page-gap-brand-strip {
padding: 8px 10px;
border-radius: 12px;
min-height: 64px;
}
.page-gap-brand-logo {
width: 64px;
height: 64px;
border-radius: 0;
padding: 0;
}
.page-gap-brand-copy strong {
font-size: 0.93rem;
}
.page-gap-brand-copy span {
font-size: 0.8rem;
}
}
body.dark #facilityFilterCount,
body.dark .filter-count {
color: #F5F9FF !important;
background: rgba(10, 18, 34, 0.92) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
}
#showMoreFacilities {
margin-top: 8px;
}
.auto-assign-card {
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 12px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
color: var(--ink-2);
}
.available-today {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.available-today-actions {
margin-top: 8px;
}
.available-chip {
padding: 6px 10px;
border-radius: 999px;
font-size: 0.8rem;
border: 1px solid rgba(10, 19, 36, 0.12);
background: rgba(23, 162, 164, 0.12);
color: #0D7F7A;
cursor: pointer;
}
.available-chip:hover {
background: rgba(23, 162, 164, 0.2);
}
body.dark .available-chip {
border-color: rgba(255, 255, 255, 0.16);
color: #87E4E0;
}
.auto-assign-card small {
color: var(--muted);
}
#customFacilityFields input {
margin-bottom: 8px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--ring);
transform: translateY(-1px);
}
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
}
.radio-group {
display: grid;
gap: 12px;
}
.radio-option {
display: grid;
grid-template-columns: 24px 1fr;
gap: 14px;
align-items: center;
padding: 14px;
border-radius: 14px;
background: rgba(239, 243, 248, 0.7);
border: 1px solid rgba(10, 19, 36, 0.12);
cursor: pointer;
backdrop-filter: blur(8px) saturate(140%);
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.radio-option:hover,
.radio-option:focus-within {
border-color: rgba(23, 162, 164, 0.4);
box-shadow: 0 10px 20px rgba(10, 19, 36, 0.12);
transform: translateY(-2px);
}
.radio-option input[type="radio"] {
width: 20px;
height: 20px;
accent-color: var(--accent);
}
.radio-option.inline-check {
display: inline-flex;
align-items: center;
gap: 8px;
}
.radio-label strong {
display: block;
}
.radio-label small {
color: var(--muted);
}
.submit-btn {
width: 100%;
padding: 15px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, var(--accent), #0D8F92);
color: #FFFFFF;
font-size: 1.05rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.submit-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 22px rgba(11, 46, 82, 0.32);
}
/* Assignment */
.assignment-reveal {
max-width: 820px;
margin: 0 auto 60px;
}
.reveal-header {
text-align: center;
margin-bottom: 22px;
}
.reveal-header h1 {
font-size: 2.3rem;
}
.assignment-card {
background: linear-gradient(135deg, #0B2E52 0%, #103B6B 100%);
border-radius: 22px;
padding: 34px;
color: #FFFFFF;
box-shadow: var(--shadow-1);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.assignment-card:hover,
.assignment-card:focus-within {
transform: translateY(-4px);
box-shadow: 0 18px 38px rgba(11, 46, 82, 0.32);
}
.assignment-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.18);
padding: 8px 16px;
border-radius: 999px;
letter-spacing: 1px;
font-size: 0.78rem;
margin-bottom: 16px;
}
.facility-reveal-name {
font-size: 2.05rem;
margin-bottom: 18px;
}
.facility-details {
background: rgba(255, 255, 255, 0.12);
padding: 18px 20px;
border-radius: 14px;
margin-bottom: 22px;
}
.detail-item {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.detail-item:last-child {
border-bottom: none;
}
.action-btn {
border: none;
border-radius: 999px;
padding: 12px 32px;
background: linear-gradient(135deg, var(--accent), #D85A19);
color: #FFFFFF;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.action-btn::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(255, 255, 255, 0.25), transparent 55%);
opacity: 0;
transition: opacity 0.2s ease;
z-index: 0;
}
.action-btn::after {
content: "•";
margin-left: 8px;
color: rgba(255, 255, 255, 0.7);
font-weight: 700;
}
.action-btn.secondary::after {
color: rgba(10, 19, 36, 0.4);
}
.action-btn:hover {
transform: translateY(-2px) scale(1.01);
box-shadow: 0 14px 26px rgba(242, 106, 33, 0.35);
filter: brightness(1.03);
}
.action-btn:hover::before {
opacity: 1;
}
.btn-press {
animation: btnPress 0.18s ease;
}
.btn-ripple::before {
content: "";
position: absolute;
left: var(--ripple-x, 50%);
top: var(--ripple-y, 50%);
width: 6px;
height: 6px;
border-radius: 999px;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.45);
pointer-events: none;
z-index: 0;
animation: btnRipple 0.36s ease-out forwards;
}
/* Subtle click feedback across button controls */
button:active,
.action-btn:active,
.submit-btn:active,
.back-btn:active,
.jfa-register-btn:active,
.sidebar-toggle:active,
.sidebar-settings-btn:active,
.sidebar-signout-btn:active,
.menu-fab:active,
.nav-notification-btn:active,
.copy-btn:active,
.link-btn:active {
transform: translateY(0.5px) scale(0.996) !important;
filter: brightness(0.985);
}
.btn-press,
.btn-ripple::before {
animation: none !important;
}
button > *,
.action-btn > *,
.submit-btn > *,
.back-btn > * {
position: relative;
z-index: 1;
}
@keyframes btnPress {
0% { transform: scale(1); }
50% { transform: scale(0.96); }
100% { transform: scale(1); }
}
@keyframes btnRipple {
0% { opacity: 0.45; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(32); }
}
.action-btn.secondary {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 246, 251, 0.95));
color: var(--ink-2);
border: 1px solid rgba(10, 19, 36, 0.14);
box-shadow: 0 8px 16px rgba(10, 19, 36, 0.08);
}
.action-btn.secondary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 22px rgba(10, 19, 36, 0.12);
border-color: rgba(242, 106, 33, 0.35);
}
/* DBD */
.current-facility-info {
background: rgba(11, 46, 82, 0.08);
padding: 18px;
border-radius: 12px;
text-align: center;
margin-bottom: 20px;
}
.highlight-text {
color: var(--accent);
font-weight: 700;
font-size: 1.15rem;
}
/* Stats */
.stats-dashboard {
display: grid;
gap: 22px;
}
.stats-section {
background: rgba(255, 255, 255, 0.82);
padding: 24px;
border-radius: 18px;
box-shadow: var(--shadow-2);
border: 1px solid rgba(10, 19, 36, 0.12);
backdrop-filter: blur(12px) saturate(140%);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stats-section + .stats-section {
border-top: 1px solid rgba(242, 106, 33, 0.12);
padding-top: 28px;
}
.stats-section:hover,
.stats-section:focus-within {
transform: translateY(-4px);
box-shadow: var(--shadow-1);
}
.stats-section h2 {
margin-bottom: 14px;
}
.leaderboard-card {
background: linear-gradient(135deg, #1AA7A1 0%, #3CCFC7 100%);
color: #FFFFFF;
padding: 22px;
border-radius: 16px;
text-align: center;
}
.team-stats,
.facility-stats {
display: grid;
gap: 12px;
}
.coverage-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.coverage-chip {
padding: 6px 12px;
border-radius: 999px;
background: rgba(23, 162, 164, 0.12);
border: 1px solid rgba(23, 162, 164, 0.22);
font-weight: 600;
font-size: 0.82rem;
}
.alert-panel {
display: grid;
gap: 10px;
}
.alert-item {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 12px;
padding: 10px 12px;
}
.alert-item strong {
color: var(--ink-2);
}
.heatmap-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
.heatmap-cell {
padding: 10px 12px;
border-radius: 12px;
background: rgba(10, 19, 36, 0.06);
border: 1px solid rgba(10, 19, 36, 0.12);
font-weight: 600;
}
.forecast-list {
display: grid;
gap: 10px;
}
.forecast-item {
padding: 10px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(10, 19, 36, 0.12);
}
.audit-log {
display: grid;
gap: 8px;
}
.audit-item {
font-size: 0.85rem;
color: var(--muted);
}
.attendance-panel {
display: grid;
gap: 10px;
}
.attendance-table {
width: 100%;
border-collapse: collapse;
}
.attendance-table th,
.attendance-table td {
padding: 10px 12px;
border-bottom: 1px solid rgba(10, 19, 36, 0.12);
text-align: left;
}
.attendance-table th {
background: rgba(10, 19, 36, 0.06);
color: var(--ink-2);
}
.attendance-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
border: 1px solid rgba(10, 19, 36, 0.12);
background: rgba(10, 19, 36, 0.04);
}
.stats-controls {
display: grid;
gap: 12px;
margin-top: 12px;
}
.stats-search input {
width: 100%;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(10, 19, 36, 0.12);
background: rgba(255, 255, 255, 0.9);
}
.range-export {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 10px;
align-items: center;
}
.range-export select,
.range-export input {
width: 100%;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(10, 19, 36, 0.12);
background: rgba(255, 255, 255, 0.9);
}
.stats-export {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.toggle-row {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: var(--ink-2);
}
.switch {
position: relative;
display: inline-block;
width: 46px;
height: 26px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
inset: 0;
background: rgba(10, 19, 36, 0.2);
transition: 0.2s ease;
border-radius: 999px;
}
.slider::before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
top: 3px;
background: #FFFFFF;
transition: 0.2s ease;
border-radius: 50%;
}
.switch input:checked + .slider {
background: rgba(23, 162, 164, 0.8);
}
.switch input:checked + .slider::before {
transform: translateX(20px);
}
.team-trend {
display: grid;
gap: 12px;
}
.trend-row {
display: grid;
grid-template-columns: 160px 1fr;
gap: 14px;
align-items: center;
}
.trend-label {
font-weight: 600;
color: var(--ink-2);
}
.trend-bars {
display: flex;
gap: 6px;
align-items: flex-end;
height: 46px;
}
.trend-bar {
width: 16px;
border-radius: 6px 6px 3px 3px;
background: linear-gradient(180deg, rgba(23, 162, 164, 0.9), rgba(11, 46, 82, 0.6));
box-shadow: 0 6px 14px rgba(11, 46, 82, 0.18);
}
.trend-axis {
display: flex;
gap: 6px;
margin-left: 174px;
color: var(--muted);
font-size: 0.74rem;
}
body.dark .trend-label {
color: var(--text-darkmode);
}
.team-card,
.facility-card {
background: rgba(239, 243, 248, 0.65);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
padding: 16px;
border-radius: 12px;
border-left: 4px solid var(--brand);
backdrop-filter: blur(8px) saturate(140%);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rankings-table {
max-height: 420px;
overflow: auto;
}
.rankings-table table thead th {
position: sticky;
top: 0;
z-index: 1;
}
.rankings-table table tbody tr:nth-child(even) {
background: rgba(12, 46, 82, 0.035);
}
.rankings-table table tbody tr:nth-child(-n+3) {
background: rgba(26, 167, 161, 0.08);
}
.rankings-table table tbody tr:nth-child(-n+3) td:first-child {
font-weight: 700;
}
.skeleton {
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.6);
}
.skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
animation: skeleton 1.2s infinite;
}
@keyframes skeleton {
100% { transform: translateX(100%); }
}
.page.page-loading .stats-section,
.page.page-loading .about-card,
.page.page-loading .service-item,
.page.page-loading .registration-form-container,
.page.page-loading .dbd-form-container {
position: relative;
overflow: hidden;
}
.page.page-loading .stats-section::before,
.page.page-loading .about-card::before,
.page.page-loading .service-item::before,
.page.page-loading .registration-form-container::before,
.page.page-loading .dbd-form-container::before {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
animation: skeleton 1.2s infinite;
pointer-events: none;
}
.btn-text {
position: relative;
}
.btn-text::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 2px;
background: rgba(255, 255, 255, 0.7);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.jfa-register-btn:hover .btn-text::after {
transform: scaleX(1);
}
.targets-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.target-card {
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 14px;
padding: 16px;
box-shadow: var(--shadow-soft);
backdrop-filter: blur(10px) saturate(140%);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
}
.target-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-2);
}
.target-title {
font-weight: 700;
color: var(--ink-2);
margin-bottom: 6px;
}
.target-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--brand);
margin-bottom: 6px;
}
.target-bar {
height: 8px;
background: rgba(10, 19, 36, 0.08);
border-radius: 999px;
overflow: hidden;
margin: 6px 0;
}
.target-bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #F39C12, #F1C40F);
transition: width 0.4s ease;
}
.target-bar-fill.is-ontrack {
background: linear-gradient(90deg, #1ABC9C, #16A085);
}
.target-bar-fill.is-behind {
background: linear-gradient(90deg, #F39C12, #F1C40F);
}
.target-bar-fill.is-critical {
background: linear-gradient(90deg, #E67E22, #E74C3C);
}
.target-hint {
font-size: 0.85rem;
color: var(--muted);
margin-bottom: 6px;
}
.target-note {
font-size: 0.85rem;
color: #a34b10;
margin-bottom: 8px;
}
body.dark .target-note {
color: #f1b27a;
}
.target-tooltips {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 14px;
}
.tooltip {
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(10, 19, 36, 0.12);
padding: 6px 10px;
border-radius: 999px;
font-size: 0.82rem;
color: var(--muted);
}
.mini-table table {
width: 100%;
border-collapse: collapse;
}
.mini-table {
border: 1px solid rgba(10, 19, 36, 0.1);
border-radius: 12px;
overflow: auto;
background: rgba(255, 255, 255, 0.84);
}
.mini-table th,
.mini-table td {
padding: 8px;
border-bottom: 1px solid rgba(10, 19, 36, 0.08);
text-align: left;
font-size: 0.92rem;
}
.mini-table th {
color: var(--muted);
font-weight: 600;
position: sticky;
top: 0;
background: rgba(246, 249, 253, 0.96);
z-index: 1;
}
.mini-table tr:nth-child(even) {
background: rgba(12, 46, 82, 0.035);
}
.mini-table tr:hover td {
background: rgba(23, 162, 164, 0.08);
}
body.dark .mini-table tr:hover td {
background: rgba(23, 162, 164, 0.14);
}
.leaderboard-block {
margin-top: 14px;
}
.leaderboard-title {
font-weight: 700;
color: var(--ink-2);
margin: 8px 0 10px;
}
.top-team-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(10, 19, 36, 0.12);
padding: 6px 12px;
border-radius: 999px;
font-weight: 600;
color: var(--ink-2);
margin-bottom: 12px;
}
.top-badges {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.target-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
margin-left: 6px;
}
.target-badge.met {
background: rgba(26, 167, 161, 0.18);
color: #0D7F7A;
}
.target-badge.missed {
background: rgba(231, 76, 60, 0.12);
color: #C0392B;
}
.stats-section {
position: relative;
}
.stats-section::before {
content: "";
position: absolute;
inset: 0;
border-radius: 18px;
background-image: radial-gradient(rgba(10, 19, 36, 0.06) 1px, transparent 1px);
background-size: 22px 22px;
opacity: 0.25;
pointer-events: none;
}
.stats-section::after {
content: "";
position: absolute;
inset: 8px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.5);
pointer-events: none;
}
.stats-section > * {
position: relative;
z-index: 1;
}
.status-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
margin-left: 6px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
color: #0D7F7A;
background: rgba(26, 167, 161, 0.15);
border: 1px solid rgba(26, 167, 161, 0.25);
}
.status-pill[data-last-saved]::after {
content: "• " attr(data-last-saved);
margin-left: 8px;
font-size: 0.7rem;
color: inherit;
opacity: 0.7;
}
/* Dashboard Theme Pass */
#stats-page .stats-dashboard {
gap: 18px;
}
#stats-page .stats-section {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 250, 255, 0.86));
border: 1px solid rgba(10, 19, 36, 0.1);
box-shadow: 0 14px 28px rgba(10, 19, 36, 0.1);
}
#stats-page .stats-section::before {
opacity: 0.14;
}
#stats-page .stats-section::after {
inset: 10px;
border-color: rgba(255, 255, 255, 0.58);
}
#stats-page .stats-section h2.section-heading {
margin-bottom: 16px;
}
#stats-page .targets-grid {
gap: 12px;
}
#stats-page .target-card {
border-radius: 16px;
border: 1px solid rgba(10, 19, 36, 0.1);
box-shadow: 0 10px 20px rgba(10, 19, 36, 0.08);
}
#stats-page .target-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 28px rgba(10, 19, 36, 0.14);
}
#stats-page .target-value {
font-size: 1.65rem;
letter-spacing: -0.01em;
}
#stats-page .target-bar {
height: 9px;
}
#stats-page .target-bar-fill {
position: relative;
}
#stats-page .target-bar-fill::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg,
rgba(255, 255, 255, 0.18) 0,
rgba(255, 255, 255, 0.18) 8px,
rgba(255, 255, 255, 0.02) 8px,
rgba(255, 255, 255, 0.02) 16px
);
opacity: 0.6;
}
#stats-page .top-team-badge {
border-color: rgba(242, 106, 33, 0.24);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 246, 239, 0.86));
}
#stats-page .mini-table,
#stats-page .rankings-table {
border: 1px solid rgba(10, 19, 36, 0.08);
border-radius: 12px;
overflow: auto;
background: rgba(255, 255, 255, 0.74);
}
#stats-page .mini-table th,
#stats-page .rankings-table th {
position: sticky;
top: 0;
z-index: 2;
background: linear-gradient(180deg, rgba(237, 243, 252, 0.98), rgba(228, 236, 248, 0.95));
border-bottom: 1px solid rgba(10, 19, 36, 0.14);
}
#stats-page .mini-table tr:hover td,
#stats-page .rankings-table tr:hover td {
background: rgba(242, 106, 33, 0.06);
}
#stats-page .team-card,
#stats-page .facility-card,
#stats-page .alert-item,
#stats-page .forecast-item,
#stats-page .heatmap-cell {
border-radius: 14px;
border: 1px solid rgba(10, 19, 36, 0.1);
box-shadow: 0 8px 16px rgba(10, 19, 36, 0.06);
}
#stats-page .coverage-chip {
border-color: rgba(242, 106, 33, 0.24);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 246, 239, 0.84));
}
#stats-page .status-pill {
background: rgba(242, 106, 33, 0.14);
border-color: rgba(242, 106, 33, 0.3);
color: #C85A12;
}
body.dark #stats-page .stats-section {
background: linear-gradient(180deg, rgba(12, 20, 36, 0.9), rgba(10, 18, 34, 0.9));
border-color: rgba(255, 255, 255, 0.09);
box-shadow: 0 16px 28px rgba(0, 0, 0, 0.34);
}
body.dark #stats-page .mini-table,
body.dark #stats-page .rankings-table {
background: rgba(10, 18, 34, 0.82);
border-color: rgba(255, 255, 255, 0.1);
}
body.dark #stats-page .mini-table th,
body.dark #stats-page .rankings-table th {
background: linear-gradient(180deg, rgba(18, 30, 52, 0.95), rgba(12, 22, 40, 0.95));
border-bottom-color: rgba(255, 255, 255, 0.12);
}
body.dark #stats-page .mini-table tr:hover td,
body.dark #stats-page .rankings-table tr:hover td {
background: rgba(242, 106, 33, 0.12);
}
body.dark #stats-page .coverage-chip {
border-color: rgba(242, 106, 33, 0.34);
background: linear-gradient(135deg, rgba(18, 29, 49, 0.9), rgba(32, 23, 17, 0.86));
}
body.dark #stats-page .status-pill {
background: rgba(242, 106, 33, 0.2);
border-color: rgba(242, 106, 33, 0.4);
color: #FFBD8D;
}
/* Dashboard text safety: keep all labels readable in both themes */
#stats-page,
#stats-page .stats-section,
#stats-page .target-card,
#stats-page .leaderboard-card,
#stats-page .mini-table,
#stats-page .rankings-table {
color: var(--text-strong-light);
}
#stats-page .page-subtitle,
#stats-page .target-sub,
#stats-page .target-note,
#stats-page .target-hint,
#stats-page .leaderboard-title,
#stats-page .hero-assist {
color: var(--text-muted-light);
}
#stats-page .mini-table td,
#stats-page .mini-table th,
#stats-page .rankings-table td,
#stats-page .rankings-table th,
#stats-page .mini-table td *,
#stats-page .rankings-table td * {
color: var(--text-strong-light);
}
body.dark #stats-page,
body.dark #stats-page .stats-section,
body.dark #stats-page .target-card,
body.dark #stats-page .leaderboard-card,
body.dark #stats-page .mini-table,
body.dark #stats-page .rankings-table,
body.dark #stats-page .target-title,
body.dark #stats-page .target-value,
body.dark #stats-page .section-heading,
body.dark #stats-page h1,
body.dark #stats-page h2,
body.dark #stats-page h3,
body.dark #stats-page h4 {
color: var(--text-strong-dark) !important;
}
body.dark #stats-page .page-subtitle,
body.dark #stats-page .target-sub,
body.dark #stats-page .target-note,
body.dark #stats-page .target-hint,
body.dark #stats-page .leaderboard-title {
color: var(--text-muted-dark) !important;
}
body.dark #stats-page .mini-table td,
body.dark #stats-page .mini-table th,
body.dark #stats-page .rankings-table td,
body.dark #stats-page .rankings-table th,
body.dark #stats-page .mini-table td *,
body.dark #stats-page .rankings-table td * {
color: var(--text-strong-dark) !important;
}
/* Dashboard dark-mode visibility lock for reset controls, target guidance and month leaders */
body.dark #stats-page .reset-time-control {
background: rgba(12, 22, 38, 0.94) !important;
border-color: rgba(255, 255, 255, 0.14) !important;
}
body.dark #stats-page .reset-time-control label {
color: #EAF2FF !important;
}
body.dark #stats-page .reset-time-control input {
background: rgba(10, 18, 34, 0.92) !important;
color: #F5F9FF !important;
border-color: rgba(255, 255, 255, 0.18) !important;
}
body.dark #stats-page .reset-time-control .action-btn.secondary {
background: rgba(10, 18, 34, 0.92) !important;
color: #F5F9FF !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
body.dark #stats-page .tooltip {
background: rgba(12, 22, 38, 0.94) !important;
border-color: rgba(255, 255, 255, 0.18) !important;
color: #DCE8F9 !important;
}
body.dark #stats-page .top-team-badge,
body.dark #stats-page #topTeamOfMonth,
body.dark #stats-page #topJfaOfMonth {
color: #F4F8FF !important;
}
body.dark #stats-page .top-team-badge {
background: linear-gradient(135deg, rgba(16, 27, 47, 0.94), rgba(12, 21, 37, 0.92)) !important;
border-color: rgba(255, 255, 255, 0.16) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
body.dark #stats-page #topTeamOfMonth,
body.dark #stats-page #topJfaOfMonth {
color: #FFCB9F !important;
font-weight: 700 !important;
}
.target-sub {
color: var(--muted);
font-size: 0.92rem;
}
.team-card:hover,
.facility-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-2);
}
.rankings-table table {
width: 100%;
border-collapse: collapse;
}
.rankings-table th,
.rankings-table td {
padding: 12px;
border-bottom: 1px solid rgba(10, 19, 36, 0.1);
}
.rankings-table th {
background: var(--brand);
color: #FFFFFF;
}
.rankings-table tr:hover {
background: rgba(11, 46, 82, 0.06);
}
.rank-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-weight: 700;
font-size: 0.85rem;
}
.rank-1 { background: #B6E8E2; color: #0A1324; }
.rank-2 { background: #DDE5F0; color: #0A1324; }
.rank-3 { background: #A7C7E7; color: #0A1324; }
.no-data {
text-align: center;
color: var(--muted);
padding: 18px;
}
.stats-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
margin: 24px 0 60px;
}
.complete-day-panel {
margin: 20px auto 60px;
padding: 22px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(10, 19, 36, 0.12);
box-shadow: var(--shadow-2);
backdrop-filter: blur(12px) saturate(140%);
}
.complete-summary {
display: grid;
gap: 10px;
margin: 10px 0 16px;
}
.complete-graph {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12px, 1fr));
gap: 6px;
align-items: end;
height: 120px;
background: rgba(10, 19, 36, 0.04);
border-radius: 14px;
padding: 12px;
margin-bottom: 18px;
}
.complete-bar {
width: 100%;
border-radius: 8px 8px 4px 4px;
background: linear-gradient(180deg, rgba(23, 162, 164, 0.9), rgba(11, 46, 82, 0.6));
}
.complete-calendar {
margin-bottom: 18px;
}
.calendar-header {
font-weight: 700;
margin-bottom: 8px;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
.calendar-day {
aspect-ratio: 1 / 1;
border-radius: 10px;
background: rgba(10, 19, 36, 0.06);
display: grid;
place-items: center;
font-size: 0.8rem;
font-weight: 600;
}
.calendar-day.present { background: rgba(23, 162, 164, 0.18); }
.calendar-day.content { background: rgba(246, 193, 78, 0.2); }
.calendar-day.not-productive { background: rgba(231, 76, 60, 0.18); }
.calendar-day.most { outline: 2px solid rgba(23, 162, 164, 0.8); }
.calendar-day.least { outline: 2px solid rgba(231, 76, 60, 0.6); }
.calendar-day.absent { background: rgba(10, 19, 36, 0.04); color: var(--muted); }
.calendar-day.weekend { background: rgba(10, 19, 36, 0.08); color: var(--muted); }
.complete-message {
font-weight: 700;
color: var(--ink-2);
}
body.dark .complete-day-panel {
background: rgba(14, 22, 38, 0.9);
border-color: var(--line-darkmode);
}
body.dark .calendar-day {
background: rgba(255, 255, 255, 0.05);
}
/* Archives */
.archives-panel {
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 18px;
padding: 22px;
box-shadow: var(--shadow-2);
backdrop-filter: blur(12px) saturate(140%);
position: relative;
}
.archives-panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: 18px;
background-image: radial-gradient(rgba(10, 19, 36, 0.05) 1px, transparent 1px);
background-size: 22px 22px;
opacity: 0.2;
pointer-events: none;
}
.archives-panel > * {
position: relative;
z-index: 1;
}
.archives-controls {
display: grid;
gap: 10px;
grid-template-columns: 1fr auto;
align-items: end;
margin-bottom: 16px;
}
.archives-controls label {
font-weight: 600;
color: var(--ink-2);
}
.archives-controls select {
width: 100%;
padding: 12px 14px;
border-radius: 12px;
border: 1.5px solid rgba(10, 19, 36, 0.15);
background: #FFFFFF;
}
.archives-summary {
margin-bottom: 18px;
}
/* Toasts */
.toast-container {
position: fixed;
right: 20px;
bottom: 20px;
display: grid;
gap: 10px;
z-index: 1200;
}
.confetti-container {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 1400;
}
.confetti {
position: absolute;
width: 8px;
height: 12px;
background: var(--accent);
opacity: 0.9;
animation: confettiFall 1.8s ease forwards;
}
.hero-list-body {
display: grid;
gap: 10px;
max-height: 50vh;
overflow: auto;
padding-right: 4px;
}
.hero-list-search {
width: 100%;
margin: 8px 0 10px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(10, 19, 36, 0.12);
background: rgba(255, 255, 255, 0.9);
}
.hero-list-search:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--ring);
}
body.dark .hero-list-search {
background: rgba(14, 22, 38, 0.9);
color: var(--text-darkmode);
border-color: var(--line-darkmode);
}
.hero-list-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(10, 19, 36, 0.12);
background: rgba(255, 255, 255, 0.85);
}
.hero-list-item strong {
color: var(--ink-2);
}
.hero-list-item span {
color: var(--muted);
font-weight: 600;
}
.hero-jfa-body {
display: grid;
gap: 10px;
}
.hero-jfa-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
.hero-jfa-card {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 12px;
padding: 10px 12px;
}
.hero-jfa-card strong {
display: block;
color: var(--ink-2);
font-size: 1rem;
}
.hero-jfa-card span {
color: var(--muted);
font-size: 0.8rem;
}
body.dark .hero-jfa-card {
background: rgba(14, 22, 38, 0.9);
border-color: var(--line-darkmode);
}
.hero-mark {
background: rgba(23, 162, 164, 0.2);
color: inherit;
border-radius: 6px;
padding: 1px 3px;
}
body.dark .hero-list-item {
background: rgba(14, 22, 38, 0.9);
border-color: var(--line-darkmode);
}
body.dark .hero-jfa-card {
background: rgba(14, 22, 38, 0.9);
border-color: var(--line-darkmode);
}
body.dark .hero-jfa-card strong,
body.dark .hero-jfa-card span,
body.dark .complete-message,
body.dark .calendar-header {
color: var(--text-darkmode);
}
body.dark .stats-search input {
background: rgba(14, 22, 38, 0.9);
color: var(--text-darkmode);
border-color: var(--line-darkmode);
}
body.dark .alert-item {
background: rgba(14, 22, 38, 0.9);
border-color: var(--line-darkmode);
}
body.dark .coverage-chip {
border-color: rgba(23, 162, 164, 0.4);
}
body.dark .complete-day-panel {
background: rgba(14, 22, 38, 0.9);
border-color: var(--line-darkmode);
}
body.dark .calendar-day {
color: var(--text-darkmode);
}
body.dark .calendar-day.absent,
body.dark .calendar-day.weekend {
color: var(--muted-darkmode);
}
body.dark .toggle-row {
color: var(--text-darkmode);
}
body.dark .range-export select,
body.dark .range-export input {
background: rgba(14, 22, 38, 0.9);
color: var(--text-darkmode);
border-color: var(--line-darkmode);
}
body.dark .heatmap-cell,
body.dark .forecast-item {
color: var(--text-darkmode);
}
body.dark .range-export select,
body.dark .range-export input {
background: rgba(14, 22, 38, 0.9);
color: var(--text-darkmode);
border-color: var(--line-darkmode);
}
body.dark .heatmap-cell,
body.dark .forecast-item {
background: rgba(14, 22, 38, 0.9);
border-color: var(--line-darkmode);
}
body.dark .audit-item {
color: var(--muted-darkmode);
}
@keyframes confettiFall {
0% { transform: translateY(-10vh) rotate(0deg); opacity: 0.9; }
100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}
@keyframes quickActionsTogglePulse {
0% { transform: scale(1); }
50% { transform: scale(0.96); }
100% { transform: scale(1); }
}
@keyframes quickActionsMenuIn {
0% { opacity: 0; transform: translateY(8px) scale(0.96); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.quick-actions {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 1300;
display: none;
flex-direction: column;
gap: 10px;
}
.quick-actions-toggle {
border: none;
border-radius: 999px;
padding: 12px 16px;
background: linear-gradient(135deg, var(--accent), #D85A19);
color: #FFFFFF;
font-weight: 700;
box-shadow: 0 10px 24px rgba(242, 106, 33, 0.3);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.quick-actions-toggle.is-clicked {
animation: quickActionsTogglePulse 220ms var(--ease-out);
}
.quick-actions-toggle:hover {
transform: translateY(-1px);
box-shadow: 0 12px 22px rgba(242, 106, 33, 0.25);
}
.quick-actions-menu {
display: none;
flex-direction: column;
gap: 8px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 12px;
padding: 10px;
box-shadow: var(--shadow-2);
backdrop-filter: blur(12px) saturate(140%);
}
.quick-actions-menu.is-open {
display: flex;
transform-origin: bottom right;
animation: quickActionsMenuIn 220ms var(--ease-out);
}
.quick-actions-menu button {
border: none;
background: transparent;
padding: 8px 10px;
text-align: left;
font-weight: 600;
color: var(--ink-2);
cursor: pointer;
}
.quick-actions-menu button:hover {
color: var(--brand);
}
.quick-actions-menu button:focus-visible {
outline: 2px solid rgba(242, 106, 33, 0.45);
outline-offset: 2px;
border-radius: 8px;
}
.toast {
min-width: 240px;
max-width: 320px;
background: rgba(255, 255, 255, 0.92);
color: var(--ink);
border: 1px solid rgba(10, 19, 36, 0.12);
border-left: 4px solid var(--accent);
padding: 12px 14px;
border-radius: 12px;
box-shadow: var(--shadow-2);
backdrop-filter: blur(10px) saturate(140%);
animation: toastIn 0.35s ease;
}
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(10, 19, 36, 0.35);
display: none;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 1300;
}
.modal-overlay.is-open {
display: flex;
}
#policy-modal.modal-overlay {
z-index: 3205;
}
#forgot-password-modal.modal-overlay,
#reset-password-modal.modal-overlay {
z-index: 3206;
}
#notification-clear-confirm-modal.modal-overlay {
z-index: 3300;
}
/* Notification detail must open above everything and block full UI */
#notification-detail-modal.modal-overlay {
z-index: 3405 !important;
background: rgba(4, 10, 22, 0.78) !important;
backdrop-filter: blur(4px);
}
#notification-detail-modal .modal-card {
width: min(760px, 94vw);
max-height: min(88vh, 920px);
overflow: auto;
}
#app-confirm-modal.modal-overlay {
z-index: 3350;
}
#shortcuts-modal.modal-overlay {
z-index: 3360;
}
.modal-overlay.is-contextual {
align-items: flex-start;
justify-content: flex-start;
}
.modal-card {
width: min(520px, 90vw);
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(10, 19, 36, 0.12);
border-radius: 18px;
padding: 20px 22px;
box-shadow: var(--shadow-1);
backdrop-filter: blur(12px) saturate(140%);
animation: menuCardIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-transition-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1500;
opacity: 0;
background:
radial-gradient(260px 220px at 18% 38%, rgba(242, 106, 33, 0.25), rgba(242, 106, 33, 0)),
radial-gradient(320px 280px at 78% 30%, rgba(23, 162, 164, 0.22), rgba(23, 162, 164, 0)),
linear-gradient(120deg, rgba(9, 16, 30, 0.86), rgba(9, 16, 30, 0.68));
transform: scale(1.03);
}
.page-transition-overlay.is-active {
animation: cinematicWipe 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cinematicWipe {
0% {
opacity: 0;
transform: scale(1.03);
}
30% {
opacity: 0.92;
transform: scale(1);
}
70% {
opacity: 0.85;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.995);
}
}
.modal-card h3 {
margin-bottom: 10px;
color: var(--ink);
}
.modal-card p {
color: var(--muted);
margin-bottom: 16px;
}
.modal-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.modal-form-grid {
display: grid;
gap: 10px;
}
.modal-error {
color: #C0392B;
font-weight: 700;
font-size: 0.85rem;
}
.admin-auth-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.admin-auth-brand .menu-logo {
width: 56px;
height: 56px;
object-fit: contain;
position: static;
inset: auto;
margin: 0;
flex-shrink: 0;
}
.admin-all-access-card {
width: min(440px, 92vw);
}
.admin-inline-auth .modal-card {
width: min(520px, 100%);
margin: 0;
}
.master-capture-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.mini-table th[colspan="2"] {
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.74rem;
}
.ui-reveal {
opacity: 0;
transform: translateY(12px) scale(0.995);
filter: saturate(0.94);
}
.ui-reveal.ui-visible {
opacity: 1;
transform: translateY(0) scale(1);
filter: saturate(1);
transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out), filter 380ms var(--ease-out);
transition-delay: var(--ui-delay, 0ms);
}
.is-keyboard-card {
cursor: pointer;
}
.page .form-group input,
.page .form-group select,
.page .form-group textarea {
transition: border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth), background-color var(--dur-fast) var(--ease-smooth);
}
.page .form-group input:focus,
.page .form-group select:focus,
.page .form-group textarea:focus {
transform: translateY(-1px);
}
.toast.toast-error {
border-left-color: #E74C3C;
}
.toast.toast-success {
border-left-color: #27AE60;
}
@keyframes toastIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Motion Preferences */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
.page-transition-overlay {
display: none !important;
}
}
/* ---------- Ultra-compact mobile navbar pass ---------- */
@media (max-width: 768px) {
.navbar {
min-height: 56px;
}
.nav-container {
flex-wrap: nowrap;
align-items: center;
padding: 6px 8px;
gap: 6px;
}
.logo-button-oval.compact {
padding: 2px 8px 2px 6px;
gap: 6px;
}
.logo-button-oval.compact .nav-logo {
height: 26px;
}
.nav-info {
display: none;
}
.nav-info span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-actions {
width: auto;
margin-left: auto;
max-width: calc(100vw - 74px);
padding: 4px 6px;
gap: 3px;
border-radius: 999px;
flex-wrap: nowrap;
overflow: visible;
}
.nav-actions .status-pill {
font-size: 0.58rem;
padding: 3px 5px;
min-width: 0;
white-space: nowrap;
line-height: 1;
}
.nav-actions .action-btn {
min-height: 28px;
height: 28px;
min-width: 0;
padding: 0 6px;
font-size: 0.56rem;
line-height: 1;
white-space: nowrap;
}
#appUserBadge {
max-width: 82px;
overflow: hidden;
text-overflow: ellipsis;
}
#offlineStatus {
max-width: 46px;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-notification-btn {
width: 28px;
height: 28px;
min-width: 28px;
}
.flow-stepper {
margin-top: 64px;
top: 52px;
padding: 7px 8px;
border-radius: 14px;
}
.sticky-summary {
top: 98px;
}
}
/* Ben System dark-mode text visibility lock */
body.dark #benSystemPage .menu-page-note,
body.dark #benSystemPage .page-subtitle,
body.dark #benSystemPage .ben-facility-card .menu-page-note,
body.dark #benSystemPage .ben-facility-card h4 {
color: #EAF3FF !important;
opacity: 1 !important;
text-shadow: none !important;
}
body.dark #benSystemPage .ben-system-primary-note,
body.dark #benSystemPage .ben-system-secondary-note,
body.dark #benSystemPage .ben-system-section-title {
color: #F4F8FF !important;
background: rgba(13, 27, 45, 0.92) !important;
border: 1px solid rgba(160, 196, 236, 0.28) !important;
border-left: 3px solid #19B4B5 !important;
font-weight: 700 !important;
opacity: 1 !important;
text-shadow: none !important;
}
/* Final lock: prevent white-on-white on Ben System note text in dark mode */
body.dark #benSystemPage .menu-page-note.ben-system-primary-note,
body.dark #benSystemPage .menu-page-note.ben-system-secondary-note,
body.dark #benSystemPage .menu-page-note.ben-system-section-title {
color: #F4F8FF !important;
background-color: rgba(13, 27, 45, 0.92) !important;
}
/* Admin Master Logger action tabs: enforce white labels */
#admin-standalone-page #adminHeroTabLeads,
#admin-standalone-page #adminHeroTabFacilities,
#admin-standalone-page #adminHeroTabJfas,
#admin-standalone-page #adminHeroTabFas,
#admin-standalone-page #adminHeroTabFasInRegister,
#admin-standalone-page #adminHeroTabTeams,
#admin-standalone-page #adminHeroTabPerformance,
#admin-standalone-page #adminHeroTabClients,
#admin-standalone-page #adminHeroTabLearning,
#admin-standalone-page #adminHeroTabForms {
color: #FFFFFF !important;
}
#admin-standalone-page #adminHeroTabLeads:hover,
#admin-standalone-page #adminHeroTabFacilities:hover,
#admin-standalone-page #adminHeroTabJfas:hover,
#admin-standalone-page #adminHeroTabFas:hover,
#admin-standalone-page #adminHeroTabFasInRegister:hover,
#admin-standalone-page #adminHeroTabTeams:hover,
#admin-standalone-page #adminHeroTabPerformance:hover,
#admin-standalone-page #adminHeroTabClients:hover,
#admin-standalone-page #adminHeroTabLearning:hover,
#admin-standalone-page #adminHeroTabForms:hover,
#admin-standalone-page #adminHeroTabLeads:focus-visible,
#admin-standalone-page #adminHeroTabFacilities:focus-visible,
#admin-standalone-page #adminHeroTabJfas:focus-visible,
#admin-standalone-page #adminHeroTabFas:focus-visible,
#admin-standalone-page #adminHeroTabFasInRegister:focus-visible,
#admin-standalone-page #adminHeroTabTeams:focus-visible,
#admin-standalone-page #adminHeroTabPerformance:focus-visible,
#admin-standalone-page #adminHeroTabClients:focus-visible,
#admin-standalone-page #adminHeroTabLearning:focus-visible,
#admin-standalone-page #adminHeroTabForms:focus-visible {
color: #FFFFFF !important;
}
/* Team portal center note readability in dark mode (white card + dark text) */
body.dark #adminPage .team-portal-center-note {
color: #102743 !important;
background: #FFFFFF !important;
border-color: rgba(16, 39, 67, 0.2) !important;
text-shadow: none !important;
}
/* Team portal mobile fit lock */
@media (max-width: 768px) {
#teamDetailPage .menu-page-inner {
padding: 12px !important;
overflow-x: hidden !important;
}
#teamDetailPage .menu-page-header {
gap: 8px !important;
}
#teamDetailPage .menu-page-header h2 {
font-size: 1rem !important;
line-height: 1.25 !important;
word-break: break-word !important;
}
#teamDetailPage .menu-header-actions {
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
#teamDetailPage .menu-header-actions .action-btn {
min-width: 0 !important;
width: 100% !important;
padding: 8px 10px !important;
font-size: 0.82rem !important;
white-space: normal !important;
line-height: 1.25 !important;
}
#teamDetailPage .insight-card {
padding: 10px !important;
margin-bottom: 10px !important;
overflow: hidden !important;
}
#teamDetailPage .insight-list {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
#teamDetailPage .insight-chip {
max-width: 100% !important;
font-size: 0.74rem !important;
line-height: 1.2 !important;
white-space: normal !important;
word-break: break-word !important;
}
#teamDetailPage .menu-page-actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
#teamDetailPage .menu-page-actions .action-btn,
#teamDetailPage .menu-page-actions .submit-btn,
#teamDetailPage .menu-page-actions .back-btn,
#teamDetailPage .menu-page-actions input,
#teamDetailPage .menu-page-actions select,
#teamDetailPage .menu-page-actions textarea {
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
font-size: 0.84rem !important;
}
#teamDetailPage .admin-graph {
height: 120px !important;
overflow: hidden !important;
}
#teamDetailPage .admin-graph-bar span {
font-size: 0.68rem !important;
}
#teamDetailPage .mini-table {
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
#teamDetailPage .mini-table table {
min-width: 520px !important;
width: 100% !important;
}
#teamDetailPage .mini-table th,
#teamDetailPage .mini-table td {
font-size: 0.76rem !important;
padding: 6px 7px !important;
white-space: normal !important;
word-break: break-word !important;
}
}
/* Ben System readability hardening */
body:not(.dark) #benSystemPage .menu-page-note,
body:not(.dark) #benSystemPage .page-subtitle,
body:not(.dark) #benSystemPage h4,
body:not(.dark) #benSystemPage .mini-table th,
body:not(.dark) #benSystemPage .mini-table td,
body:not(.dark) #benSystemPage .mini-table td * {
color: #0d2f52 !important;
}
body:not(.dark) #benSystemPage .menu-page-note {
color: #123a64 !important;
opacity: 1 !important;
}
body:not(.dark) #benSystemPage .mini-table thead th {
color: #0d2f52 !important;
background: linear-gradient(125deg, #eaf4ff, #f6fbff) !important;
}
body:not(.dark) #benSystemPage .mini-table table {
background: #ffffff !important;
border-color: rgba(13, 47, 82, 0.18) !important;
}
body:not(.dark) #benSystemPage .mini-table tr:nth-child(even) td {
background: rgba(240, 247, 255, 0.78) !important;
}
body.dark #benSystemPage .menu-page-note,
body.dark #benSystemPage .page-subtitle,
body.dark #benSystemPage h4,
body.dark #benSystemPage .mini-table th,
body.dark #benSystemPage .mini-table td,
body.dark #benSystemPage .mini-table td * {
color: #eaf4ff !important;
}
body.dark #benSystemPage .menu-page-note {
color: #dbeaff !important;
opacity: 1 !important;
}
body.dark #benSystemPage .mini-table thead th {
color: #eaf4ff !important;
background: linear-gradient(125deg, rgba(18, 40, 66, 0.98), rgba(15, 34, 58, 0.98)) !important;
}
body.dark #benSystemPage .mini-table table {
background: rgba(10, 22, 38, 0.95) !important;
border-color: rgba(214, 231, 255, 0.22) !important;
}
body.dark #benSystemPage .mini-table tr:nth-child(even) td {
background: rgba(14, 31, 52, 0.74) !important;
}
@media (max-width: 430px) {
.nav-info {
display: none;
}
.nav-actions {
max-width: calc(100vw - 68px);
padding: 3px 4px;
gap: 2px;
}
.nav-actions .status-pill,
.nav-actions .action-btn {
font-size: 0.5rem;
padding: 0 4px;
}
#appUserBadge {
max-width: 66px;
}
#offlineStatus {
max-width: 38px;
}
.flow-stepper {
margin-top: 62px;
}
}
/* ---------- Mobile top banner compact fix (prevent obstruction) ---------- */
@media (max-width: 768px) {
.navbar {
min-height: 52px !important;
padding: 6px 10px !important;
}
.flow-stepper {
margin-top: 64px !important;
top: 52px !important;
padding: 6px 8px !important;
gap: 6px !important;
}
.sticky-summary {
top: 94px !important;
margin-top: 6px !important;
padding: 6px 10px !important;
gap: 8px !important;
max-width: calc(100vw - 14px) !important;
font-size: 0.74rem !important;
}
.sticky-label {
font-size: 0.62rem !important;
}
.sticky-divider {
height: 12px !important;
}
body.sidebar-open .flow-stepper,
body.sidebar-open .sticky-summary {
display: none !important;
}
}
/* ---------- Professional mobile navbar + auth refinement ---------- */
@media (max-width: 768px) {
.navbar {
min-height: 86px;
}
.nav-container {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"logo actions"
"info info";
align-items: center;
gap: 8px 10px;
padding: 8px 10px;
}
.logo-button {
grid-area: logo;
}
.logo-button-oval.compact {
padding: 3px 10px 3px 7px;
gap: 7px;
}
.logo-button-oval.compact .nav-logo {
height: 28px;
}
.nav-actions {
grid-area: actions;
margin-left: 0;
width: 100%;
max-width: none;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: center;
gap: 6px;
padding: 6px;
border-radius: 12px;
overflow: hidden;
}
.nav-actions .status-pill,
.nav-actions .action-btn {
min-width: 0;
width: 100%;
height: 34px;
min-height: 34px;
padding: 0 8px;
font-size: 0.72rem;
line-height: 1.1;
white-space: nowrap;
text-align: center;
justify-content: center;
}
.nav-notification-btn {
width: 34px;
height: 34px;
min-width: 34px;
justify-self: center;
}
.nav-info {
grid-area: info;
display: inline-flex;
width: 100%;
justify-content: flex-start;
align-items: center;
gap: 8px;
padding: 0 2px 1px;
font-size: 0.72rem;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-info span {
white-space: nowrap;
}
.flow-stepper {
margin-top: 98px;
top: 82px;
}
.sticky-summary {
top: 132px;
}
.auth-gate {
padding: 14px;
}
.auth-gate-card {
width: min(96vw, 430px);
border-radius: 20px;
padding: 18px;
}
.auth-brand h2 {
font-size: 1.1rem;
}
.auth-brand p {
font-size: 0.85rem;
line-height: 1.35;
}
.auth-mode-switch {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.auth-mode-switch .action-btn {
min-height: 40px;
font-size: 0.78rem;
padding: 0 8px;
}
.auth-gate-card .form-group label,
.auth-gate-card .radio-label {
font-size: 0.86rem;
line-height: 1.35;
}
}
@media (max-width: 560px) {
.nav-actions {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nav-actions .status-pill,
.nav-actions .action-btn {
font-size: 0.74rem;
}
.flow-stepper {
margin-top: 110px;
top: 92px;
}
.sticky-summary {
top: 144px;
}
.auth-mode-switch {
grid-template-columns: 1fr;
}
.auth-mode-switch .action-btn {
min-height: 42px;
font-size: 0.84rem;
}
}
@media (max-width: 430px) {
.nav-container {
padding: 8px 8px;
gap: 7px 8px;
}
.nav-actions {
gap: 5px;
padding: 5px;
}
.nav-actions .status-pill,
.nav-actions .action-btn {
font-size: 0.7rem;
padding: 0 6px;
}
.nav-info {
font-size: 0.68rem;
gap: 6px;
}
.flow-stepper {
margin-top: 108px;
top: 90px;
}
}
/* ---------- Mobile contact info at bottom (hours + phone) ---------- */
@media (max-width: 768px) {
.nav-container {
grid-template-areas: "logo actions";
}
.nav-info {
position: fixed;
left: 8px;
right: 8px;
bottom: calc(6px + env(safe-area-inset-bottom));
z-index: 940;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 10px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(10, 19, 36, 0.12);
box-shadow: 0 8px 20px rgba(10, 19, 36, 0.14);
font-size: 0.68rem;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.dark .nav-info {
background: rgba(12, 20, 33, 0.9);
border-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.36);
}
body {
padding-bottom: calc(44px + env(safe-area-inset-bottom));
}
.quick-actions,
.back-to-top,
.menu-fab {
bottom: calc(56px + env(safe-area-inset-bottom));
}
.toast-container {
bottom: calc(56px + env(safe-area-inset-bottom));
}
}
@media (max-width: 430px) {
.nav-info {
gap: 8px;
font-size: 0.62rem;
padding: 5px 8px;
}
}
/* ---------- Mobile footer contact (non-obstructive) ---------- */
.mobile-contact-footer {
display: none;
}
/* Overall Stats (Admin) */
.overall-stats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 10px 0;
}
.overall-stats-grid-wide {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.overall-kpi-card {
position: relative;
overflow: hidden;
}
.overall-kpi-card.is-clickable,
.overall-progress-card.is-clickable {
cursor: pointer;
}
.overall-kpi-card.is-clickable:hover,
.overall-progress-card.is-clickable:hover {
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(8, 16, 33, 0.16);
}
.overall-kpi-card.is-clickable:focus-visible,
.overall-progress-card.is-clickable:focus-visible {
outline: 2px solid var(--accent-blue, #3676ff);
outline-offset: 2px;
}
.overall-kpi-card::after {
content: "";
position: absolute;
inset: auto -20% -35% -20%;
height: 70%;
background: linear-gradient(120deg, rgba(46, 194, 126, 0.16), rgba(54, 118, 255, 0.12));
pointer-events: none;
}
.overall-kpi-value {
font-size: clamp(1.4rem, 2.4vw, 2.1rem);
font-weight: 800;
line-height: 1.1;
}
.overall-donut-wrap {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: center;
}
.overall-donut {
width: 104px;
height: 104px;
border-radius: 50%;
display: grid;
place-items: center;
box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.22);
}
.overall-donut > span {
font-weight: 800;
font-size: 1rem;
}
.overall-donut-legend {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.overall-team-bars {
display: grid;
gap: 10px;
}
.overall-team-bar-row {
display: grid;
gap: 6px;
}
.overall-team-bar-label {
font-weight: 700;
display: flex;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.overall-team-bar-label span {
opacity: 0.85;
font-weight: 600;
}
.overall-team-bar-track {
height: 10px;
border-radius: 999px;
background: rgba(130, 146, 170, 0.3);
overflow: hidden;
}
.overall-team-bar-fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #2ec27e, #3676ff);
transition: width 240ms ease;
}
.overall-team-bar-fill.leader {
background: linear-gradient(90deg, #f59e0b, #f97316);
}
.overall-progress-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.overall-progress-card.is-ready {
outline: 1px solid rgba(46, 194, 126, 0.5);
}
.overall-progress-row {
display: grid;
grid-template-columns: 120px 1fr auto;
gap: 8px;
align-items: center;
margin: 8px 0;
}
.overall-progress-track {
height: 9px;
border-radius: 999px;
background: rgba(130, 146, 170, 0.28);
overflow: hidden;
}
.overall-progress-fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #3676ff, #59c6ff);
transition: width 220ms ease;
}
.overall-progress-fill.sales {
background: linear-gradient(90deg, #2ec27e, #7ddc92);
}
.overall-actions-row {
gap: 8px;
flex-wrap: wrap;
}
body.dark .overall-kpi-card.is-clickable:hover,
body.dark .overall-progress-card.is-clickable:hover {
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}
/* Overall Stats table contrast lock (light + dark) */
body:not(.dark) #overallStatsPage .mini-table table,
body:not(.dark) #overallStatsPage .mini-table th,
body:not(.dark) #overallStatsPage .mini-table td,
body:not(.dark) #overallStatsPage .mini-table td *,
body:not(.dark) #hero-jfa-modal .mini-table table,
body:not(.dark) #hero-jfa-modal .mini-table th,
body:not(.dark) #hero-jfa-modal .mini-table td,
body:not(.dark) #hero-jfa-modal .mini-table td * {
color: #0A1324 !important;
}
body:not(.dark) #overallStatsPage .mini-table thead th,
body:not(.dark) #hero-jfa-modal .mini-table thead th {
background: linear-gradient(180deg, rgba(232, 241, 251, 0.98), rgba(223, 234, 248, 0.96)) !important;
border-bottom: 1px solid rgba(10, 19, 36, 0.2) !important;
}
body:not(.dark) #overallStatsPage .mini-table table,
body:not(.dark) #hero-jfa-modal .mini-table table {
border-color: rgba(10, 19, 36, 0.24) !important;
}
body:not(.dark) #overallStatsPage .mini-table .link-btn,
body:not(.dark) #hero-jfa-modal .mini-table .link-btn {
color: #0C3E75 !important;
}
body.dark #overallStatsPage .mini-table table,
body.dark #overallStatsPage .mini-table th,
body.dark #overallStatsPage .mini-table td,
body.dark #overallStatsPage .mini-table td *,
body.dark #hero-jfa-modal .mini-table table,
body.dark #hero-jfa-modal .mini-table th,
body.dark #hero-jfa-modal .mini-table td,
body.dark #hero-jfa-modal .mini-table td * {
color: #EAF3FF !important;
}
body.dark #overallStatsPage .mini-table thead th,
body.dark #hero-jfa-modal .mini-table thead th {
background: linear-gradient(180deg, rgba(20, 35, 58, 0.96), rgba(14, 28, 47, 0.96)) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}
body.dark #overallStatsPage .mini-table table,
body.dark #hero-jfa-modal .mini-table table {
border-color: rgba(255, 255, 255, 0.2) !important;
}
body.dark #overallStatsPage .mini-table .link-btn,
body.dark #hero-jfa-modal .mini-table .link-btn {
color: #A6D2FF !important;
}
@media (max-width: 1024px) {
.overall-stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.overall-stats-grid,
.overall-stats-grid-wide,
.overall-progress-grid {
grid-template-columns: 1fr;
}
.overall-donut-wrap {
grid-template-columns: 1fr;
justify-items: start;
}
.overall-progress-row {
grid-template-columns: 1fr;
}
}
/* Overall Stats full mobile fit lock */
@media (max-width: 768px) {
#overallStatsPage .menu-page-inner {
padding: 10px !important;
gap: 10px !important;
}
#overallStatsPage .menu-page-header {
gap: 8px !important;
align-items: flex-start !important;
}
#overallStatsPage .menu-page-header h2 {
font-size: 1.04rem !important;
line-height: 1.25 !important;
margin: 0 !important;
max-width: 100% !important;
word-break: break-word;
}
#overallStatsPage .menu-page-note,
#overallStatsPage .page-subtitle {
font-size: 0.83rem !important;
line-height: 1.34 !important;
margin-top: 2px !important;
word-break: break-word;
}
#overallStatsSummary {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px !important;
width: 100%;
}
#overallStatsSummary .insight-chip {
width: 100%;
min-height: 34px;
justify-content: center;
text-align: center;
font-size: 0.74rem !important;
line-height: 1.22 !important;
padding: 6px 8px !important;
border-radius: 10px !important;
white-space: normal !important;
}
#overallStatsBody {
width: 100%;
overflow: hidden;
}
#overallStatsBody .overall-actions-row {
display: grid !important;
grid-template-columns: 1fr;
gap: 8px !important;
margin-top: 0 !important;
}
#overallStatsBody .overall-actions-row .action-btn {
width: 100%;
min-height: 38px !important;
font-size: 0.82rem !important;
line-height: 1.2;
padding: 8px 10px !important;
text-align: center;
}
#overallStatsBody .overall-kpi-card {
padding: 10px !important;
min-height: 108px;
}
#overallStatsBody .overall-kpi-card h4 {
font-size: 0.9rem !important;
line-height: 1.25 !important;
margin-bottom: 5px !important;
}
#overallStatsBody .overall-kpi-value {
font-size: 1.35rem !important;
line-height: 1.08 !important;
}
#overallStatsBody .overall-kpi-card .page-subtitle {
font-size: 0.77rem !important;
line-height: 1.28 !important;
}
#overallStatsBody .overall-donut-wrap {
grid-template-columns: 1fr !important;
justify-items: center !important;
gap: 10px !important;
text-align: center;
}
#overallStatsBody .overall-donut {
width: 88px !important;
height: 88px !important;
box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.22);
}
#overallStatsBody .overall-donut > span {
font-size: 0.9rem !important;
}
#overallStatsBody .overall-donut-legend {
justify-content: center !important;
gap: 6px !important;
}
#overallStatsBody .overall-team-bar-label {
display: grid !important;
gap: 2px !important;
font-size: 0.84rem !important;
}
#overallStatsBody .overall-team-bar-label span {
font-size: 0.75rem !important;
}
#overallStatsBody .overall-progress-card {
padding: 10px !important;
}
#overallStatsBody .overall-progress-row {
grid-template-columns: 1fr !important;
gap: 5px !important;
margin: 7px 0 !important;
}
#overallStatsBody .overall-progress-row span,
#overallStatsBody .overall-progress-row strong {
font-size: 0.8rem !important;
}
#overallStatsBody .mini-table {
margin-top: 8px !important;
border-radius: 12px !important;
overflow: hidden !important;
}
#overallStatsBody .mini-table table.mobile-stack-table td {
font-size: 0.82rem !important;
line-height: 1.3 !important;
}
#hero-jfa-modal .modal-card {
width: min(96vw, 560px) !important;
max-height: min(88vh, calc(var(--mobile-vh) - 24px)) !important;
}
#hero-jfa-modal .hero-jfa-body {
max-height: min(64vh, calc(var(--mobile-vh) - 210px)) !important;
overflow: auto !important;
padding-right: 2px;
}
#hero-jfa-modal .hero-jfa-grid {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
#hero-jfa-modal .hero-jfa-card {
min-height: 62px;
padding: 10px !important;
}
#hero-jfa-modal .mini-table table.mobile-stack-table td {
font-size: 0.81rem !important;
line-height: 1.3 !important;
}
}
@media (max-width: 430px) {
#overallStatsSummary {
grid-template-columns: 1fr !important;
}
#overallStatsBody .overall-kpi-card {
min-height: 98px;
}
#overallStatsBody .overall-kpi-value {
font-size: 1.22rem !important;
}
#overallStatsPage .menu-page-note,
#overallStatsPage .page-subtitle {
font-size: 0.79rem !important;
}
}
@media (max-width: 768px) {
.navbar .nav-info {
display: none !important;
}
.mobile-contact-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
margin: 20px 0 calc(10px + env(safe-area-inset-bottom));
padding: 8px 10px;
font-size: 0.72rem;
line-height: 1.2;
color: var(--muted);
border-top: 1px solid rgba(10, 19, 36, 0.08);
background: transparent;
}
body.dark .mobile-contact-footer {
color: var(--muted-darkmode);
border-top-color: var(--line-darkmode);
}
body {
padding-bottom: 0;
}
.quick-actions,
.back-to-top,
.menu-fab,
.toast-container {
bottom: calc(16px + env(safe-area-inset-bottom));
}
}
@media (max-width: 430px) {
.mobile-contact-footer {
gap: 8px;
font-size: 0.66rem;
padding: 7px 8px;
}
}
/* ---------- Mobile top-notch polish pass ---------- */
@media (max-width: 768px) {
:root {
--mobile-radius: 14px;
--mobile-gap: 10px;
}
html, body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
background:
radial-gradient(640px 420px at 10% -10%, rgba(16, 59, 107, 0.09), transparent 72%),
radial-gradient(760px 460px at 95% 2%, rgba(23, 162, 164, 0.08), transparent 70%),
var(--bg);
}
.navbar {
border-bottom: 1px solid rgba(10, 19, 36, 0.1);
box-shadow: 0 8px 18px rgba(10, 19, 36, 0.1);
}
.flow-stepper {
border-radius: 12px;
box-shadow: 0 8px 20px rgba(10, 19, 36, 0.08);
}
.page {
padding-top: 108px;
}
#landing-page {
padding-top: 4px;
}
#landing-page .hero-section {
min-height: 56vh;
padding-top: 6px;
}
.container {
padding: 0 10px;
}
.hero-content {
gap: var(--mobile-gap);
}
.hero-glass,
.summary-card,
.about-card,
.service-item,
.stats-section,
.insight-card,
.target-card,
.archives-panel,
.complete-day-panel,
.assignment-card,
.lead-panel,
.lead-section,
.modal-card,
.auth-gate-card {
border-radius: var(--mobile-radius);
}
.stats-section,
.insight-card,
.lead-panel,
.lead-section {
box-shadow: 0 8px 18px rgba(10, 19, 36, 0.1);
}
.menu-page {
align-items: flex-end;
padding: 0;
}
.menu-page-inner {
width: 100%;
margin: 0;
min-height: min(88vh, calc(var(--mobile-vh) - 72px));
max-height: calc(var(--mobile-vh) - 56px);
border-radius: 18px 18px 0 0;
border-left: none;
border-right: none;
border-bottom: none;
padding: 14px 12px calc(20px + env(safe-area-inset-bottom));
box-shadow: 0 -10px 28px rgba(10, 19, 36, 0.2);
overflow-y: auto;
}
.menu-page-header {
position: sticky;
top: 0;
z-index: 2;
margin: -14px -12px 12px;
padding: 10px 12px;
backdrop-filter: blur(10px) saturate(130%);
background: rgba(255, 255, 255, 0.82);
border-bottom: 1px solid rgba(10, 19, 36, 0.08);
}
body.dark .menu-page-header {
background: rgba(12, 20, 33, 0.86);
border-bottom-color: rgba(255, 255, 255, 0.1);
}
.menu-page-actions {
gap: 8px;
}
.menu-page-actions .action-btn,
.menu-page-actions .submit-btn,
.menu-page-actions .back-btn {
min-height: 42px;
border-radius: 12px;
}
.action-btn,
.submit-btn,
.back-btn,
.sidebar-toggle,
.sidebar-sub-btn,
.sidebar-settings-btn,
.sidebar-signout-btn,
.quick-actions-toggle {
transition: transform 160ms var(--ease-out), filter 160ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.action-btn:active,
.submit-btn:active,
.back-btn:active,
.sidebar-toggle:active,
.sidebar-sub-btn:active,
.sidebar-settings-btn:active,
.sidebar-signout-btn:active,
.quick-actions-toggle:active {
transform: translateY(1px) scale(0.985);
filter: brightness(0.97);
}
.form-group input,
.form-group textarea,
.form-group select,
input,
textarea,
select {
border-radius: 12px;
}
.mini-table {
border-radius: 12px;
overflow: hidden;
}
.notification-dropdown {
left: 8px !important;
right: 8px !important;
bottom: calc(56px + env(safe-area-inset-bottom));
top: auto !important;
width: auto !important;
}
.notification-dropdown-card {
border-radius: 16px;
max-height: min(62vh, 520px);
box-shadow: 0 12px 30px rgba(10, 19, 36, 0.24);
}
.quick-actions {
right: 12px;
bottom: calc(14px + env(safe-area-inset-bottom));
}
.quick-actions-toggle {
border-radius: 999px;
min-height: 40px;
padding: 10px 14px;
}
.quick-actions-menu {
border-radius: 14px;
}
.toast {
border-radius: 12px;
}
.page.active .stats-section,
.page.active .target-card,
.page.active .summary-card,
.page.active .lead-panel,
.page.active .lead-section,
.page.active .insight-card {
animation: mobileCardIn 260ms var(--ease-out) both;
}
.page.active .stats-section:nth-of-type(2),
.page.active .target-card:nth-of-type(2),
.page.active .summary-card:nth-of-type(2),
.page.active .insight-card:nth-of-type(2) {
animation-delay: 40ms;
}
.page.active .stats-section:nth-of-type(3),
.page.active .target-card:nth-of-type(3),
.page.active .summary-card:nth-of-type(3),
.page.active .insight-card:nth-of-type(3) {
animation-delay: 70ms;
}
}
@media (max-width: 430px) {
.menu-page-inner {
min-height: min(90vh, calc(var(--mobile-vh) - 64px));
max-height: calc(var(--mobile-vh) - 50px);
padding: 12px 10px calc(18px + env(safe-area-inset-bottom));
border-radius: 16px 16px 0 0;
}
.menu-page-header {
margin: -12px -10px 10px;
padding: 9px 10px;
}
.action-btn,
.submit-btn,
.back-btn {
font-size: 0.82rem;
}
.hero-glass {
padding: 12px;
}
/* Compact menu-page top banner on small phones */
.menu-page-header {
margin: -10px -8px 8px;
padding: 6px 8px;
gap: 6px;
}
.menu-page-header h2 {
font-size: 0.94rem;
line-height: 1.1;
margin: 0;
}
.menu-scope-chip {
padding: 3px 8px;
font-size: 0.7rem;
line-height: 1.1;
border-radius: 999px;
}
.menu-header-actions {
gap: 5px;
}
.menu-header-actions .action-btn {
min-height: 30px;
padding: 4px 8px;
font-size: 0.72rem;
border-radius: 9px;
}
}
@media (max-width: 768px) {
/* Reduce menu-page banner height for mobile/tablet portrait */
.menu-page-header {
margin: -12px -10px 10px;
padding: 8px 10px;
gap: 8px;
}
.menu-page-header h2 {
font-size: 1rem;
line-height: 1.15;
margin: 0;
}
.menu-scope-chip {
padding: 4px 10px;
font-size: 0.75rem;
}
.menu-header-actions .action-btn {
min-height: 34px;
padding: 5px 10px;
font-size: 0.76rem;
}
}
@keyframes mobileCardIn {
0% {
opacity: 0;
transform: translateY(8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* ---------- Mobile flow-step compact fit ---------- */
@media (max-width: 768px) {
.flow-stepper {
display: flex;
flex-wrap: nowrap;
gap: 3px;
justify-content: space-between;
overflow: hidden;
padding: 5px 4px;
}
.flow-stepper::before,
.flow-stepper::after,
.flow-step::after {
display: none;
}
.flow-step {
flex: 1 1 0;
min-width: 0;
gap: 3px;
padding: 5px 3px;
border-radius: 8px;
justify-content: center;
}
.step-index {
width: 16px;
height: 16px;
font-size: 0.58rem;
}
.step-label {
font-size: 0.54rem;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
}
@media (max-width: 560px) {
.flow-step {
padding: 4px 1px;
border-radius: 7px;
flex-direction: column;
gap: 1px;
}
.step-label {
display: block;
font-size: 0.44rem;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.step-index {
width: 14px;
height: 14px;
font-size: 0.52rem;
}
}
@media (max-width: 430px) {
.flow-stepper {
gap: 2px;
padding: 4px 3px;
}
.flow-step {
padding: 3px 1px;
}
.step-label {
font-size: 0.4rem;
}
.step-index {
width: 13px;
height: 13px;
font-size: 0.48rem;
}
}
/* ---------- Global button no-overlap safety pass ---------- */
.menu-page-actions,
.modal-actions,
.sidebar-footer,
.auth-mode-switch {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: stretch;
}
.quick-actions-menu {
display: none;
}
.quick-actions-menu.is-open {
display: flex;
}
.menu-page-actions > .action-btn,
.menu-page-actions > .submit-btn,
.menu-page-actions > .back-btn,
.modal-actions > .action-btn,
.modal-actions > .submit-btn {
flex: 1 1 160px;
max-width: 100%;
min-width: 0;
}
.menu-page-actions .action-btn,
.menu-page-actions .submit-btn,
.menu-page-actions .back-btn,
.modal-actions .action-btn,
.modal-actions .submit-btn,
.sidebar-footer .sidebar-settings-btn,
.sidebar-footer .sidebar-signout-btn {
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
line-height: 1.2;
}
.nav-actions > * {
min-width: 0;
}
.nav-actions .action-btn,
.nav-actions .status-pill {
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-only-menu-control {
display: none;
}
@media (max-width: 768px) {
.nav-actions .mobile-move-to-menu {
display: none !important;
}
.sidebar-footer .mobile-only-menu-control {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
}
@media (max-width: 768px) {
.menu-page-actions,
.modal-actions {
gap: 8px;
}
.menu-page-actions > .action-btn,
.menu-page-actions > .submit-btn,
.menu-page-actions > .back-btn,
.modal-actions > .action-btn,
.modal-actions > .submit-btn {
flex: 1 1 100%;
}
.sidebar-footer .sidebar-settings-btn,
.sidebar-footer .sidebar-signout-btn {
width: 100%;
}
#forgot-password-modal .modal-actions,
#reset-password-modal .modal-actions {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
#forgot-password-modal .modal-actions > .action-btn,
#forgot-password-modal .modal-actions > .submit-btn,
#reset-password-modal .modal-actions > .action-btn,
#reset-password-modal .modal-actions > .submit-btn {
flex: 1 1 auto !important;
min-height: 38px !important;
width: 100% !important;
font-size: 0.78rem !important;
padding: 0 8px !important;
white-space: nowrap !important;
}
/* Team portal access modal buttons: keep compact and always visible */
#team-auth-modal .modal-actions {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
#team-auth-modal .modal-actions > .action-btn,
#team-auth-modal .modal-actions > .submit-btn {
flex: 1 1 auto !important;
width: 100% !important;
min-height: 36px !important;
font-size: 0.76rem !important;
padding: 0 8px !important;
white-space: nowrap !important;
}
/* Global mobile button sizing guardrail */
.action-btn,
.submit-btn,
.back-btn,
.sidebar-toggle,
.sidebar-sub-btn,
.sidebar-settings-btn,
.sidebar-signout-btn {
min-height: 36px !important;
font-size: 0.78rem !important;
padding: 0 10px !important;
max-width: 100%;
}
}
@media (max-width: 420px) {
#forgot-password-modal .modal-actions,
#reset-password-modal .modal-actions,
#team-auth-modal .modal-actions {
grid-template-columns: 1fr !important;
}
}
/* Responsive */
@media (max-width: 900px) {
.nav-info {
flex-direction: column;
align-items: flex-end;
font-size: 0.85rem;
}
.flow-stepper {
top: 72px;
}
}
@media (max-width: 768px) {
.nav-notification-btn {
width: 40px;
height: 40px;
}
.nav-container {
flex-direction: column;
align-items: flex-start;
}
.nav-actions {
width: 100%;
justify-content: flex-start;
}
.flow-stepper {
position: static;
margin-top: 92px;
border-radius: 14px;
padding: 8px 10px;
}
.hero-section {
min-height: 62vh;
}
.hero-logo {
width: clamp(150px, 60vw, 260px);
}
.hero-glass {
padding: 16px 18px;
gap: 12px;
border-radius: 16px;
}
.hero-headline {
font-size: 0.8rem;
letter-spacing: 0.45px;
}
.hero-subheadline {
font-size: 0.72rem;
}
.hero-top3 {
display: grid;
gap: 6px;
}
.hero-top-title {
font-size: 0.72rem;
}
.hero-top-list {
gap: 6px;
}
.hero-top-item {
font-size: 0.74rem;
padding: 5px 10px;
}
.hero-badges .badge:nth-child(n+2) {
display: none;
}
.hero-secondary-cta {
min-width: 102px;
width: auto;
padding: 8px 10px;
font-size: 0.8rem;
line-height: 1.1;
border-radius: 12px !important;
}
.hero-actions {
gap: 8px;
justify-content: center;
}
.menu-page {
padding: 14px;
}
.menu-page-inner {
margin: 18px auto;
padding: 18px;
border-radius: 18px;
}
.menu-page-actions .action-btn {
min-width: 0;
}
.menu-header-actions {
width: 100%;
justify-content: flex-end;
}
.menu-header-actions .action-btn {
min-width: 0;
padding: 8px 12px;
}
.hero-ribbon {
margin-bottom: 12px;
}
.hero-tagline {
margin-bottom: 12px;
}
.hero-stats {
grid-template-columns: 1fr;
}
.hero-mini {
grid-template-columns: 1fr;
}
.trust-strip {
padding-top: 10px;
}
.stats-export {
flex-direction: column;
}
.coverage-grid {
gap: 8px;
}
.range-export {
grid-template-columns: 1fr;
}
.back-to-top {
display: inline-flex;
align-items: center;
justify-content: center;
}
.registration-form-container,
.dbd-form-container {
padding: 24px;
}
.assignment-card {
padding: 26px;
}
.stats-actions {
flex-direction: column;
}
.action-btn {
width: 100%;
}
.modal-actions {
flex-direction: column;
align-items: stretch;
}
.archives-controls {
grid-template-columns: 1fr;
}
.facility-filter-row {
grid-template-columns: 1fr;
}
.team-trend {
gap: 16px;
}
.trend-row {
grid-template-columns: 1fr;
}
.trend-axis {
margin-left: 0;
flex-wrap: wrap;
}
.section-heading {
justify-content: center;
text-align: center;
}
.section-heading::after {
left: 50%;
transform: translateX(-50%);
}
.quick-actions {
display: flex;
bottom: calc(18px + env(safe-area-inset-bottom));
}
}
/* Dark Mode Contrast Hardening */
body.dark .toast {
background: rgba(18, 30, 48, 0.98);
color: #F2F7FF;
border-color: rgba(255, 255, 255, 0.2);
border-left-color: #F26A21;
}
body.dark .toast.toast-error {
background: rgba(66, 21, 25, 0.98);
color: #FFE0DD;
border-color: rgba(255, 140, 140, 0.35);
border-left-color: #FF6B63;
}
body.dark .toast.toast-success {
background: rgba(18, 55, 34, 0.98);
color: #DBFBE9;
border-color: rgba(104, 228, 162, 0.35);
border-left-color: #42D392;
}
body.dark .modal-error {
color: #FFB8AF;
}
body.high-contrast-tables .mini-table th,
body.high-contrast-tables .rankings-table th,
body.high-contrast-tables .attendance-table th {
background: #0f172a;
color: #f8fafc;
border-color: #334155;
}
body.high-contrast-tables .mini-table td,
body.high-contrast-tables .rankings-table td,
body.high-contrast-tables .attendance-table td {
color: #0f172a;
border-color: #cbd5e1;
}
body.dark.high-contrast-tables .mini-table td,
body.dark.high-contrast-tables .rankings-table td,
body.dark.high-contrast-tables .attendance-table td {
color: #f8fafc;
border-color: #475569;
background: #0b1220;
}
body.compact-ui .insight-card,
body.compact-ui .stats-section,
body.compact-ui .menu-page-inner {
padding-top: 10px;
padding-bottom: 10px;
}
body.compact-ui .action-btn,
body.compact-ui .sidebar-toggle,
body.compact-ui .sidebar-sub-btn {
padding: 9px 12px;
}
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
body.dark .no-data,
body.dark .page-subtitle,
body.dark .summary-label,
body.dark .target-hint,
body.dark .target-sub {
color: #C6D3E5;
}
body.dark input::placeholder,
body.dark textarea::placeholder {
color: #AEBBD0;
opacity: 1;
}
body.dark .mini-table td input,
body.dark .mini-table td select,
body.dark .mini-table td textarea,
body.dark .rankings-table td input,
body.dark .rankings-table td select,
body.dark .rankings-table td textarea {
color: #F0F5FF;
background: rgba(14, 24, 40, 0.95);
border-color: rgba(255, 255, 255, 0.2);
}
body.dark .mini-table td input:focus,
body.dark .mini-table td select:focus,
body.dark .mini-table td textarea:focus,
body.dark .rankings-table td input:focus,
body.dark .rankings-table td select:focus,
body.dark .rankings-table td textarea:focus {
border-color: rgba(242, 106, 33, 0.6);
box-shadow: 0 0 0 3px rgba(242, 106, 33, 0.2);
}
/* Performance mode (auto-enabled on low-end devices) */
body.performance .page {
filter: none !important;
transition: opacity 0.2s ease, transform 0.2s ease !important;
}
body.performance .page.zoom-enter,
body.performance .page.zoom-exit,
body.performance .hero-overlay {
animation: none !important;
}
body.performance .page-transition-overlay {
display: none !important;
}
body.performance::after,
body.reduce-motion::after {
display: none !important;
}
body.performance .navbar,
body.performance .flow-stepper,
body.performance .about-card,
body.performance .service-item,
body.performance .registration-form-container,
body.performance .dbd-form-container,
body.performance .radio-option,
body.performance .stats-section,
body.performance .team-card,
body.performance .facility-card,
body.performance .target-card,
body.performance .summary-card,
body.performance .archives-panel,
body.performance .toast,
body.performance .modal-card {
backdrop-filter: none !important;
}
body.performance .hero-logo,
body.performance .jfa-register-btn,
body.performance .action-btn,
body.performance .back-btn {
transition: none !important;
}
/* UI polish overrides */
.action-btn,
.submit-btn,
.back-btn {
transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-smooth), background-color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
button {
position: relative;
overflow: hidden;
}
button.is-pressed {
transform: translateY(0.5px) scale(0.998);
opacity: 0.95;
}
button.is-fading {
animation: btnFade 160ms var(--ease-out);
}
button.is-click-subtle,
.action-btn.is-click-subtle,
.submit-btn.is-click-subtle,
.back-btn.is-click-subtle,
.sidebar-toggle.is-click-subtle,
.sidebar-sub-btn.is-click-subtle,
.sidebar-settings-btn.is-click-subtle,
.sidebar-signout-btn.is-click-subtle,
.nav-notification-btn.is-click-subtle,
.copy-btn.is-click-subtle,
.link-btn.is-click-subtle,
.insight-chip.is-click-subtle {
animation: subtleButtonTap 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes btnFade {
0% { opacity: 0.85; }
100% { opacity: 1; }
}
@keyframes subtleButtonTap {
0% { transform: scale(1); filter: brightness(1); }
45% { transform: scale(0.988); filter: brightness(0.98); }
100% { transform: scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
button.is-pressed {
transform: none !important;
}
button.is-fading {
animation: none !important;
}
button.is-click-subtle,
.action-btn.is-click-subtle,
.submit-btn.is-click-subtle,
.back-btn.is-click-subtle,
.sidebar-toggle.is-click-subtle,
.sidebar-sub-btn.is-click-subtle,
.sidebar-settings-btn.is-click-subtle,
.sidebar-signout-btn.is-click-subtle,
.nav-notification-btn.is-click-subtle,
.copy-btn.is-click-subtle,
.link-btn.is-click-subtle,
.insight-chip.is-click-subtle {
animation: none !important;
}
}
.action-btn.key-action {
box-shadow: 0 14px 28px rgba(242, 106, 33, 0.33), 0 0 0 1px rgba(242, 106, 33, 0.2);
border: 1px solid rgba(255, 255, 255, 0.35);
}
.action-btn.key-action:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 18px 34px rgba(242, 106, 33, 0.4);
}
.summary-value {
font-size: clamp(1.75rem, 2.4vw, 2.3rem);
font-weight: 800;
letter-spacing: -0.02em;
}
.summary-label {
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.9;
}
.status-pill {
transition: background-color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
}
.status-pill.is-online {
background: rgba(26, 167, 161, 0.14);
border-color: rgba(26, 167, 161, 0.35);
color: #0D7F7A;
}
.status-pill.is-offline {
background: rgba(231, 76, 60, 0.12);
border-color: rgba(231, 76, 60, 0.25);
color: #C0392B;
}
.status-pill.is-syncing {
box-shadow: 0 0 0 0 rgba(26, 167, 161, 0.34);
animation: syncPulse 1.15s ease-in-out infinite;
}
.status-pill.is-saved {
animation: syncSettle 460ms var(--ease-out);
}
@keyframes syncPulse {
0% { box-shadow: 0 0 0 0 rgba(26, 167, 161, 0.34); }
70% { box-shadow: 0 0 0 8px rgba(26, 167, 161, 0); }
100% { box-shadow: 0 0 0 0 rgba(26, 167, 161, 0); }
}
@keyframes syncSettle {
0% { transform: translateY(0); }
50% { transform: translateY(-1px); }
100% { transform: translateY(0); }
}
.sidebar .sidebar-section {
opacity: 0;
transform: translateX(-8px);
transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.sidebar.is-open .sidebar-section {
opacity: 1;
transform: translateX(0);
}
.sidebar.is-open .sidebar-section:nth-child(1) { transition-delay: 30ms; }
.sidebar.is-open .sidebar-section:nth-child(2) { transition-delay: 70ms; }
.sidebar.is-open .sidebar-section:nth-child(3) { transition-delay: 110ms; }
.sidebar.is-open .sidebar-section:nth-child(4) { transition-delay: 150ms; }
.sidebar.is-open .sidebar-section:nth-child(5) { transition-delay: 190ms; }
.menu-page-overlay {
transition: opacity var(--dur-mid) var(--ease-smooth);
}
.menu-page {
transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.page {
transition: opacity var(--dur-page) var(--ease-out), transform var(--dur-page) var(--ease-out), filter var(--dur-page) var(--ease-out);
}
.page.zoom-enter-forward { animation: pageInForward var(--dur-page) var(--ease-out); }
.page.zoom-enter-backward { animation: pageInBackward var(--dur-page) var(--ease-out); }
.page.zoom-exit-forward { animation: pageOutForward 220ms var(--ease-smooth); }
.page.zoom-exit-backward { animation: pageOutBackward 220ms var(--ease-smooth); }
@keyframes pageInForward {
from { opacity: 0; transform: translateX(26px) translateY(8px) scale(0.992); }
to { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}
@keyframes pageInBackward {
from { opacity: 0; transform: translateX(-26px) translateY(8px) scale(0.992); }
to { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}
@keyframes pageOutForward {
from { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
to { opacity: 0; transform: translateX(-16px) translateY(6px) scale(0.992); }
}
@keyframes pageOutBackward {
from { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
to { opacity: 0; transform: translateX(16px) translateY(6px) scale(0.992); }
}
body.page-direction-forward .page-transition-overlay {
background:
radial-gradient(280px 220px at 15% 40%, rgba(242, 106, 33, 0.24), rgba(242, 106, 33, 0)),
radial-gradient(320px 280px at 82% 30%, rgba(23, 162, 164, 0.2), rgba(23, 162, 164, 0)),
linear-gradient(120deg, rgba(9, 16, 30, 0.82), rgba(9, 16, 30, 0.66));
}
body.page-direction-backward .page-transition-overlay {
background:
radial-gradient(280px 220px at 82% 42%, rgba(242, 106, 33, 0.24), rgba(242, 106, 33, 0)),
radial-gradient(320px 280px at 22% 28%, rgba(23, 162, 164, 0.2), rgba(23, 162, 164, 0)),
linear-gradient(300deg, rgba(9, 16, 30, 0.82), rgba(9, 16, 30, 0.66));
}
body.data-focus::after {
opacity: 0.32;
}
body.data-focus .hero-orb,
body.data-focus .hero-particles,
body.data-focus .hero-spotlight,
body.data-focus .hero-section::before,
body.data-focus .hero-section::after {
opacity: 0.28;
}
#stats-page.page-loading .stats-section,
#archives-page.page-loading .archives-panel {
position: relative;
overflow: hidden;
}
#stats-page.page-loading .stats-section::before,
#archives-page.page-loading .archives-panel::before {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
animation: skeleton 1s linear infinite;
pointer-events: none;
z-index: 2;
}
@media (max-width: 768px) {
.action-btn,
.submit-btn,
.back-btn,
.flow-step,
.sidebar-toggle,
.sidebar-sub-btn {
min-height: 44px;
}
.sticky-summary {
cursor: pointer;
gap: 10px;
width: calc(100% - 16px);
max-width: none;
justify-content: flex-start;
overflow: hidden;
transition: max-height var(--dur-fast) var(--ease-smooth), padding var(--dur-fast) var(--ease-smooth);
}
.sticky-summary::after {
content: "Tap to collapse";
font-size: 0.66rem;
color: var(--muted);
margin-left: auto;
}
.sticky-summary.is-collapsed {
padding: 6px 12px;
}
.sticky-summary.is-collapsed .sticky-divider,
.sticky-summary.is-collapsed .sticky-value:not(:first-of-type) {
display: none;
}
.sticky-summary.is-collapsed::after {
content: "Tap to expand";
}
.attendance-verify-head {
display: grid;
}
.attendance-manual-entry,
.sales-manager-attendance-grid {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.page.zoom-enter-forward,
.page.zoom-enter-backward,
.page.zoom-exit-forward,
.page.zoom-exit-backward,
.status-pill.is-syncing {
animation: none !important;
}
.hero-stage {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
.mini-table tr.is-present {
background: rgba(26, 167, 161, 0.1);
}
.mini-table tr.is-absent {
background: rgba(231, 76, 60, 0.08);
}
.mini-table tr.is-present td:first-child strong::before {
content: "● ";
color: #0D7F7A;
}
.mini-table tr.is-absent td:first-child strong::before {
content: "● ";
color: #C0392B;
}
.mini-table tr.is-present,
.mini-table tr.is-absent {
cursor: pointer;
}
.danger-text {
color: #C0392B;
font-weight: 700;
}
.intervention-form {
margin-top: 10px;
display: grid;
gap: 10px;
}
.intervention-note {
width: 100%;
resize: vertical;
}
.intervention-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.intervention-row label {
font-size: 0.85rem;
color: var(--muted);
}
.intervention-status-select {
min-width: 150px;
}
.admin-standalone-hero {
border: 1px solid rgba(10, 19, 36, 0.12);
background: linear-gradient(135deg, rgba(11, 46, 82, 0.95), rgba(16, 59, 107, 0.92));
color: #FFFFFF;
border-radius: 20px;
padding: 18px;
margin: 0 0 16px;
box-shadow: 0 16px 30px rgba(10, 19, 36, 0.2);
}
.admin-hero-head h2 {
margin: 0 0 4px;
color: #FFFFFF;
}
.admin-hero-head .page-subtitle {
color: rgba(255, 255, 255, 0.88);
margin-bottom: 12px;
}
.admin-hero-sync {
margin-top: -4px;
margin-bottom: 10px;
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.8);
}
.admin-hero-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.admin-hero-stat {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
padding: 10px 12px;
}
.admin-hero-stat.is-clickable {
cursor: pointer;
transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.admin-hero-stat.is-clickable:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
.admin-hero-stat.is-clickable:focus-visible {
outline: 2px solid rgba(242, 106, 33, 0.9);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(242, 106, 33, 0.2);
}
.admin-hero-value {
display: block;
font-size: 1.4rem;
font-weight: 800;
color: #FFFFFF;
line-height: 1.1;
}
.admin-hero-label {
display: block;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.85);
margin-top: 2px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
body.dark .admin-standalone-hero {
border-color: rgba(255, 255, 255, 0.12);
background: linear-gradient(135deg, rgba(9, 26, 48, 0.96), rgba(13, 36, 63, 0.95));
}
.admin-standalone-hero .menu-page-actions .action-btn.admin-tab-active {
background: rgba(11, 46, 82, 0.16);
color: #0A1324;
border-color: rgba(11, 46, 82, 0.3);
box-shadow: 0 8px 16px rgba(10, 19, 36, 0.12);
}
body.dark .admin-standalone-hero .menu-page-actions .action-btn.admin-tab-active {
background: rgba(242, 106, 33, 0.24);
border-color: rgba(242, 106, 33, 0.45);
}
.facility-inline-actions {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
white-space: nowrap;
}
.facility-inline-actions .action-btn {
min-width: 88px;
padding: 6px 10px;
}
#adminMasterBody .mini-table td input[id^="mf-"] {
width: 100%;
min-width: 120px;
}
#adminMasterBody .mini-table td:last-child {
white-space: nowrap;
}
#adminMasterBody .mini-table {
max-height: 62vh;
overflow: auto;
}
#adminMasterBody .mini-table thead th {
position: sticky;
top: 0;
z-index: 2;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(6px);
}
body.dark #adminMasterBody .mini-table thead th {
background: rgba(14, 22, 38, 0.96);
}
#adminStandaloneRecentActivity {
max-height: 260px;
overflow: auto;
}
#adminStandaloneHealth {
gap: 10px;
}
.admin-command-bar {
display: grid;
grid-template-columns: minmax(220px, 1fr) 220px auto;
gap: 10px;
align-items: center;
margin: 10px 0 10px;
}
.admin-command-bar input,
.admin-command-bar select,
.admin-filter-ribbon select {
width: 100%;
min-height: 38px;
border-radius: 10px;
}
.admin-filter-ribbon {
display: grid;
grid-template-columns: repeat(3, minmax(140px, 1fr));
gap: 10px;
margin: 0 0 10px;
}
.admin-hero-trend {
display: block;
margin-top: 6px;
font-size: 0.72rem;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.85);
line-height: 1.35;
}
#adminStandaloneRecentActivity {
position: relative;
padding-left: 12px;
}
#adminStandaloneRecentActivity::before {
content: "";
position: absolute;
left: 3px;
top: 6px;
bottom: 6px;
width: 2px;
background: linear-gradient(180deg, rgba(242, 106, 33, 0.8), rgba(242, 106, 33, 0.05));
}
#adminStandaloneRecentActivity .timeline-item {
position: relative;
margin: 0 0 8px;
padding-left: 10px;
}
#adminStandaloneRecentActivity .timeline-item::before {
content: "";
position: absolute;
left: -1px;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #F26A21;
box-shadow: 0 0 0 2px rgba(242, 106, 33, 0.2);
}
#adminStandaloneRecentActivity .timeline-time {
display: block;
font-size: 0.72rem;
opacity: 0.85;
}
#adminStandaloneRecentActivity .timeline-content {
display: block;
margin-top: 2px;
}
.admin-master-tabs .action-btn {
letter-spacing: 0.01em;
}
#adminMasterBody .mini-table table th {
position: sticky;
top: 0;
z-index: 3;
}
#adminMasterBody .mini-table table th:first-child,
#adminMasterBody .mini-table table td:first-child {
position: sticky;
left: 0;
z-index: 2;
background: inherit;
}
body.dark #adminMasterBody .mini-table table th:first-child,
body.dark #adminMasterBody .mini-table table td:first-child {
background: #0e1626;
}
body:not(.dark) #adminMasterBody .mini-table table th:first-child,
body:not(.dark) #adminMasterBody .mini-table table td:first-child {
background: #ffffff;
}
/* Mobile compatibility hardening */
:root {
--mobile-vh: 100vh;
}
html,
body {
min-height: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
img,
svg,
canvas,
video {
max-width: 100%;
height: auto;
}
.menu-page,
.auth-gate,
.sidebar {
min-height: var(--mobile-vh);
}
.mini-table,
.rankings-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mini-table table,
.rankings-table table {
min-width: 620px;
}
.toast-container {
bottom: calc(14px + env(safe-area-inset-bottom));
right: calc(14px + env(safe-area-inset-right));
}
.back-to-top,
.quick-actions,
.menu-fab {
bottom: calc(16px + env(safe-area-inset-bottom));
}
/* Keep mobile toast notifications above Quick Actions button */
@media (max-width: 768px) {
.admin-command-bar {
grid-template-columns: 1fr;
}
.admin-filter-ribbon {
grid-template-columns: 1fr;
}
.toast-container {
bottom: calc(92px + env(safe-area-inset-bottom)) !important;
right: calc(12px + env(safe-area-inset-right));
z-index: 1350;
}
}
@media (max-width: 1024px) {
.menu-page-inner {
margin: 20px auto;
padding: 20px;
}
}
@media (max-width: 768px) {
.navbar {
padding-top: env(safe-area-inset-top);
}
.nav-container {
width: 100%;
padding: 10px 12px;
gap: 10px;
}
.nav-info {
width: 100%;
align-items: flex-start;
font-size: 0.78rem;
}
.nav-actions {
width: 100%;
padding: 8px;
border-radius: 14px;
gap: 8px;
}
.nav-actions .action-btn,
.nav-actions .status-pill {
flex: 1 1 auto;
min-width: 120px;
}
.flow-stepper {
margin-top: 88px;
padding: 8px;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.flow-step {
flex: 1 0 120px;
}
.sidebar {
width: 100vw;
max-width: 100vw;
border-radius: 0;
padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
}
.sidebar-footer {
margin-top: 24px;
padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.menu-page {
padding: 10px 10px calc(16px + env(safe-area-inset-bottom));
}
.menu-page-inner {
margin: 10px auto;
padding: 14px;
border-radius: 16px;
}
.menu-page-header {
gap: 8px;
}
.menu-page-actions {
width: 100%;
gap: 8px;
}
.menu-page-actions .action-btn,
.menu-page-actions .submit-btn,
.menu-page-actions .back-btn {
flex: 1 1 100%;
width: 100%;
min-height: 44px;
}
.modal-overlay {
padding: 12px;
}
.modal-card {
width: min(96vw, 560px);
max-height: calc(var(--mobile-vh) - 24px);
overflow-y: auto;
}
.notification-dropdown {
left: 8px !important;
right: 8px !important;
width: auto !important;
max-width: none !important;
}
.notification-dropdown-card {
max-height: min(70vh, 560px);
}
input,
select,
textarea,
button {
font-size: 16px;
}
.lead-signature-pad {
height: 170px;
}
.hero-section {
min-height: 58vh;
}
}
@media (max-width: 560px) {
.auth-gate {
padding: 10px;
}
.auth-gate-card {
width: 100%;
padding: 16px;
border-radius: 16px;
}
.auth-mode-switch {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.mini-table table,
.rankings-table table {
min-width: 560px;
}
.menu-illustration {
height: 140px;
}
#settingsBody .master-capture-grid {
grid-template-columns: 1fr;
}
#settingsBody .insight-list {
gap: 8px;
}
#settingsBody .insight-chip {
width: 100%;
justify-content: flex-start;
}
#settingsBody #teamLeaderAccountCard input {
width: 100%;
}
}
@media (max-width: 430px) {
.nav-container {
padding: 8px 10px;
}
.nav-actions {
gap: 6px;
padding: 7px;
}
.nav-actions .status-pill,
.nav-actions .action-btn {
min-width: 0;
width: 100%;
}
.nav-notification-btn {
width: 38px;
height: 38px;
min-width: 38px;
}
.flow-step {
flex: 1 0 108px;
}
.step-label {
font-size: 0.7rem;
}
.auth-gate-card {
padding: 14px;
}
.menu-page-inner {
padding: 12px;
border-radius: 14px;
}
.admin-hero-stats {
grid-template-columns: 1fr 1fr;
}
.mini-table table,
.rankings-table table {
min-width: 520px;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.nav-container {
padding: 12px 16px;
}
.menu-page-inner {
width: min(96vw, 980px);
}
.menu-page-actions .action-btn {
min-width: 132px;
}
}
@media (max-height: 740px) {
.menu-page-inner {
margin: 8px auto;
}
.menu-illustration {
height: 120px;
}
.notification-dropdown-card {
max-height: calc(var(--mobile-vh) - 90px);
}
.modal-card {
max-height: calc(var(--mobile-vh) - 18px);
}
}
/* Device-profile tuning: iPhone 12 / Galaxy S23 / iPad */
@media (min-width: 386px) and (max-width: 394px) and (min-height: 830px) and (max-height: 860px) and (orientation: portrait) {
.nav-container {
padding: 9px 11px;
}
.flow-stepper {
margin-top: 86px;
padding: 8px 9px;
}
.hero-glass {
padding: 14px 15px;
border-radius: 15px;
}
.hero-headline {
font-size: 0.78rem;
}
.hero-subheadline {
font-size: 0.7rem;
}
.menu-page-inner {
padding: 13px;
border-radius: 15px;
}
.auth-gate-card {
padding: 15px;
}
}
@media (min-width: 391px) and (max-width: 399px) and (min-height: 844px) and (max-height: 880px) and (orientation: portrait) {
.flow-step {
flex: 1 0 114px;
}
.hero-section {
min-height: 60vh;
}
.notification-dropdown-card {
max-height: min(66vh, 560px);
}
.menu-page {
padding: 10px 10px calc(18px + env(safe-area-inset-bottom));
}
}
@media (min-width: 760px) and (max-width: 834px) and (min-height: 1000px) and (max-height: 1220px) and (orientation: portrait) {
.nav-container {
padding: 12px 16px;
}
.flow-stepper {
max-width: 96vw;
margin-top: 94px;
}
.hero-content {
max-width: 95vw;
}
.hero-glass {
padding: 18px 20px;
}
.menu-page {
padding: 14px 14px calc(22px + env(safe-area-inset-bottom));
}
.menu-page-inner {
width: min(96vw, 780px);
margin: 14px auto;
padding: 18px;
}
.menu-page-actions .action-btn {
min-width: 144px;
}
.sidebar {
width: min(72vw, 460px);
}
}
@media (min-width: 1000px) and (max-width: 1210px) and (orientation: landscape) {
.menu-page-inner {
width: min(94vw, 1040px);
margin: 10px auto;
}
.menu-illustration {
height: 150px;
}
.modal-card {
max-height: calc(var(--mobile-vh) - 20px);
}
}
/* ---------- Global Polish Pass ---------- */
:root {
--ui-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.8));
--ui-glass-dark: linear-gradient(180deg, rgba(18, 27, 43, 0.94), rgba(12, 20, 33, 0.9));
--ui-border-soft: rgba(11, 46, 82, 0.12);
--ui-elev-1: 0 10px 28px rgba(10, 19, 36, 0.1);
--ui-elev-2: 0 18px 42px rgba(10, 19, 36, 0.16);
--ui-card-radius: 18px;
--ui-accent-soft: rgba(242, 106, 33, 0.26);
}
body::after {
animation: ambientFieldDrift 20s ease-in-out infinite;
}
body.dark::after {
background:
radial-gradient(300px 300px at var(--mx) var(--my), rgba(242, 106, 33, 0.16), rgba(242, 106, 33, 0)),
radial-gradient(380px 380px at calc(var(--mx) * 0.6) calc(var(--my) * 1.2), rgba(23, 162, 164, 0.14), rgba(23, 162, 164, 0));
}
@keyframes ambientFieldDrift {
0% { filter: saturate(1) brightness(1); transform: translate3d(0, 0, 0); }
50% { filter: saturate(1.08) brightness(1.02); transform: translate3d(8px, -6px, 0); }
100% { filter: saturate(1) brightness(1); transform: translate3d(0, 0, 0); }
}
.navbar,
.flow-stepper,
.menu-page-inner,
.modal-card,
.insight-card,
.stats-section,
.target-card,
.summary-card,
.archives-panel {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.insight-card,
.stats-section,
.target-card,
.summary-card,
.archives-panel,
.menu-page-inner,
.modal-card {
border: 1px solid var(--ui-border-soft);
box-shadow: var(--ui-elev-1);
transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out), background 280ms var(--ease-smooth);
}
.hero-glass,
.about-card,
.summary-card,
.target-card,
.archives-panel,
.insight-card,
.stats-section,
.menu-page-inner,
.modal-card,
.auth-gate-card,
.payment-card,
.learning-panel,
.lead-panel,
.form-card,
.team-card,
.facility-card,
.assignment-card,
.complete-day-panel,
.notification-dropdown-card,
.notification-card,
.leaderboard-card,
.alert-panel,
.attendance-panel,
.admin-jfa-card,
.hero-jfa-card,
.auto-assign-card,
.admin-standalone-hero,
.admin-brand-logo,
.master-stat-grid .admin-hero-stat {
border-radius: var(--ui-card-radius);
}
.mini-table {
border-radius: var(--ui-card-radius);
overflow: hidden;
}
.insight-card:hover,
.stats-section:hover,
.target-card:hover,
.summary-card:hover,
.archives-panel:hover {
box-shadow: var(--ui-elev-2);
transform: translateY(-2px);
border-color: var(--ui-accent-soft);
}
.action-btn,
.submit-btn,
.back-btn,
.sidebar-toggle,
.sidebar-sub-btn,
.sidebar-settings-btn,
.sidebar-signout-btn {
will-change: transform, box-shadow, filter;
}
.action-btn:hover,
.submit-btn:hover,
.back-btn:hover,
.sidebar-toggle:hover,
.sidebar-sub-btn:hover,
.sidebar-settings-btn:hover,
.sidebar-signout-btn:hover {
filter: saturate(1.08);
box-shadow: 0 10px 22px rgba(10, 19, 36, 0.14);
transform: translateY(-1px);
}
.action-btn:focus-visible,
.submit-btn:focus-visible,
.back-btn:focus-visible,
.sidebar-toggle:focus-visible,
.sidebar-sub-btn:focus-visible,
.sidebar-settings-btn:focus-visible,
.sidebar-signout-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid rgba(242, 106, 33, 0.5);
outline-offset: 2px;
}
.menu-page.is-open .menu-page-inner,
.modal-overlay.is-open .modal-card {
animation: subtleLiftIn 260ms var(--ease-out);
}
.page.active .insight-card,
.page.active .stats-section,
.page.active .target-card,
.page.active .summary-card {
animation: subtleFadeUp 360ms var(--ease-out);
}
.page.active .insight-card:nth-of-type(2),
.page.active .stats-section:nth-of-type(2) {
animation-delay: 40ms;
}
.page.active .insight-card:nth-of-type(3),
.page.active .stats-section:nth-of-type(3) {
animation-delay: 80ms;
}
.mini-table table tbody tr,
.rankings-table table tbody tr,
.attendance-table tbody tr {
transition: background-color 140ms var(--ease-smooth), transform 140ms var(--ease-smooth);
}
.mini-table table tbody tr:hover,
.rankings-table table tbody tr:hover,
.attendance-table tbody tr:hover {
transform: translateX(2px);
}
.nav-notification-btn {
box-shadow: 0 6px 14px rgba(10, 19, 36, 0.14);
transition: transform 180ms var(--ease-smooth), box-shadow 180ms var(--ease-smooth), background 220ms var(--ease-smooth);
}
.nav-notification-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(10, 19, 36, 0.16);
}
.hero-glass,
.about-card,
.service-item {
border: 1px solid var(--ui-border-soft);
box-shadow: var(--ui-elev-1);
}
body.dark .navbar,
body.dark .flow-stepper,
body.dark .menu-page-inner,
body.dark .modal-card,
body.dark .insight-card,
body.dark .stats-section,
body.dark .target-card,
body.dark .summary-card,
body.dark .archives-panel,
body.dark .hero-glass,
body.dark .about-card,
body.dark .service-item {
background: var(--ui-glass-dark);
border-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}
body.dark .mini-table tr:hover td,
body.dark .rankings-table tr:hover td,
body.dark .attendance-table tr:hover td {
background: rgba(255, 255, 255, 0.08);
}
@keyframes subtleLiftIn {
from {
opacity: 0;
transform: translateY(8px) scale(0.995);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes subtleFadeUp {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Section motion profiles */
@keyframes sectionAdminReveal {
0% { opacity: 0; transform: translateY(10px) scale(0.992); filter: saturate(0.92); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); }
}
@keyframes sectionLearningReveal {
0% { opacity: 0; transform: translateY(12px); clip-path: inset(0 0 22% 0 round 18px); }
100% { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0 round 18px); }
}
@keyframes sectionLeadsReveal {
0% { opacity: 0; transform: translateX(10px); }
100% { opacity: 1; transform: translateX(0); }
}
@keyframes sectionPaymentsReveal {
0% { opacity: 0; transform: translateY(10px) scale(0.996); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
body.menu-motion-admin #adminPage.is-open .menu-page-inner {
animation: sectionAdminReveal 280ms var(--ease-out);
}
body.menu-motion-teamdetail #teamDetailPage.is-open .menu-page-inner,
body.menu-motion-archivedjfas #archivedJfaPage.is-open .menu-page-inner {
animation: sectionAdminReveal 260ms var(--ease-out);
}
body.menu-motion-learning #learningPage.is-open .menu-page-inner,
body.menu-motion-learningdetail #learningDetailPage.is-open .menu-page-inner {
animation: sectionLearningReveal 300ms var(--ease-out);
}
body.menu-motion-learning #learningPage.is-open .learning-panel,
body.menu-motion-learningdetail #learningDetailPage.is-open .learning-panel {
animation: subtleFadeUp 320ms var(--ease-out);
}
body.menu-motion-learning #learningPage.is-open .learning-panel:nth-of-type(2),
body.menu-motion-learningdetail #learningDetailPage.is-open .learning-panel:nth-of-type(2) {
animation-delay: 40ms;
}
body.menu-motion-learning #learningPage.is-open .learning-panel:nth-of-type(3),
body.menu-motion-learningdetail #learningDetailPage.is-open .learning-panel:nth-of-type(3) {
animation-delay: 80ms;
}
body.menu-motion-leads #leadsPage.is-open .menu-page-inner,
body.menu-motion-appointments #appointmentsPage.is-open .menu-page-inner {
animation: sectionLeadsReveal 270ms var(--ease-out);
}
body.menu-motion-leads #leadsPage.is-open .lead-panel,
body.menu-motion-leads #leadsPage.is-open .form-card {
animation: subtleFadeUp 300ms var(--ease-out);
}
body.menu-motion-payments #paymentsPage.is-open .menu-page-inner {
animation: sectionPaymentsReveal 280ms var(--ease-out);
}
body.menu-motion-payments #paymentsPage.is-open .payment-card,
body.menu-motion-payments #paymentsPage.is-open .insight-chip {
animation: subtleFadeUp 300ms var(--ease-out);
}
body.menu-motion-forms #formsPage.is-open .menu-page-inner,
body.menu-motion-settings #settingsPage.is-open .menu-page-inner {
animation: subtleLiftIn 260ms var(--ease-out);
}
body.page-motion-landing .hero-content {
animation: floatIn 1s ease, heroFloat 12s ease-in-out infinite;
}
body.page-motion-stats #stats-page.page.active .target-card,
body.page-motion-stats #stats-page.page.active .leaderboard-card {
animation: subtleFadeUp 320ms var(--ease-out);
}
@media (max-width: 768px) {
.menu-page-inner,
.modal-card,
.insight-card,
.stats-section {
box-shadow: 0 8px 20px rgba(10, 19, 36, 0.14);
}
.mini-table table tbody tr:hover,
.rankings-table table tbody tr:hover,
.attendance-table tbody tr:hover {
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
body::after {
animation: none !important;
}
.menu-page.is-open .menu-page-inner,
.modal-overlay.is-open .modal-card,
.page.active .insight-card,
.page.active .stats-section,
.page.active .target-card,
.page.active .summary-card {
animation: none !important;
}
body.menu-motion-admin #adminPage.is-open .menu-page-inner,
body.menu-motion-teamdetail #teamDetailPage.is-open .menu-page-inner,
body.menu-motion-archivedjfas #archivedJfaPage.is-open .menu-page-inner,
body.menu-motion-learning #learningPage.is-open .menu-page-inner,
body.menu-motion-learningdetail #learningDetailPage.is-open .menu-page-inner,
body.menu-motion-leads #leadsPage.is-open .menu-page-inner,
body.menu-motion-appointments #appointmentsPage.is-open .menu-page-inner,
body.menu-motion-payments #paymentsPage.is-open .menu-page-inner,
body.menu-motion-forms #formsPage.is-open .menu-page-inner,
body.menu-motion-settings #settingsPage.is-open .menu-page-inner,
body.page-motion-landing .hero-content,
body.page-motion-stats #stats-page.page.active .target-card,
body.page-motion-stats #stats-page.page.active .leaderboard-card,
body.menu-motion-learning #learningPage.is-open .learning-panel,
body.menu-motion-learningdetail #learningDetailPage.is-open .learning-panel,
body.menu-motion-leads #leadsPage.is-open .lead-panel,
body.menu-motion-leads #leadsPage.is-open .form-card,
body.menu-motion-payments #paymentsPage.is-open .payment-card,
body.menu-motion-payments #paymentsPage.is-open .insight-chip {
animation: none !important;
}
body.admin-standalone-active .admin-hero-value::before {
animation: none !important;
}
.insight-card:hover,
.stats-section:hover,
.target-card:hover,
.summary-card:hover,
.archives-panel:hover,
.action-btn:hover,
.submit-btn:hover,
.back-btn:hover,
.sidebar-toggle:hover,
.sidebar-sub-btn:hover,
.sidebar-settings-btn:hover,
.sidebar-signout-btn:hover,
.nav-notification-btn:hover {
transform: none !important;
}
}
/* ---------- Admin Distinct Visual Language ---------- */
body.admin-standalone-active {
background:
radial-gradient(1000px 620px at 8% 4%, rgba(242, 106, 33, 0.12), transparent 70%),
radial-gradient(900px 540px at 92% 6%, rgba(49, 112, 173, 0.18), transparent 68%),
linear-gradient(180deg, #eef3fb 0%, #e7edf7 100%);
}
body.admin-standalone-active .page-header {
border: 1px solid rgba(11, 46, 82, 0.15);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 255, 0.9));
box-shadow: 0 14px 32px rgba(10, 19, 36, 0.12);
}
body.admin-standalone-active .admin-top-shell {
position: relative;
overflow: hidden;
margin-bottom: 18px;
border-radius: 26px;
border: 1px solid rgba(11, 46, 82, 0.18);
background:
radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.24), transparent 56%),
linear-gradient(155deg, rgba(13, 51, 89, 0.96) 0%, rgba(18, 74, 124, 0.95) 56%, rgba(10, 53, 92, 0.96) 100%);
box-shadow: 0 24px 48px rgba(7, 20, 38, 0.3);
}
body.admin-standalone-active .admin-top-shell .page-header,
body.admin-standalone-active .admin-top-shell .admin-standalone-hero {
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
}
body.admin-standalone-active .admin-top-shell .page-header {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
body.admin-standalone-active .admin-top-shell .page-header h1,
body.admin-standalone-active .admin-top-shell .page-header .section-heading,
body.admin-standalone-active .admin-top-shell .page-header .page-subtitle,
body.admin-standalone-active .admin-top-shell .admin-brand-title {
color: #F8FBFF;
}
body.admin-standalone-active .admin-top-shell #adminStandaloneScope {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.14);
font-weight: 600;
}
body.admin-standalone-active .admin-top-shell .back-btn {
border-color: rgba(255, 255, 255, 0.36);
color: #F8FBFF;
background: rgba(255, 255, 255, 0.12);
margin-bottom: 0;
}
body.admin-standalone-active .admin-top-shell .back-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
body.admin-standalone-active .admin-brand-stack {
display: grid;
place-items: center;
gap: 6px;
margin: 0;
padding: 8px 14px;
border-radius: var(--ui-card-radius);
border: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
backdrop-filter: blur(6px) saturate(110%);
-webkit-backdrop-filter: blur(6px) saturate(110%);
box-shadow: 0 6px 14px rgba(7, 20, 38, 0.1);
}
body.admin-standalone-active .admin-brand-stack.admin-brand-stack-tight {
gap: 2px;
padding: 0;
border: none;
background: transparent;
box-shadow: none;
margin: 0;
}
body.admin-standalone-active .admin-brand-logo {
width: clamp(78px, 8vw, 104px);
height: auto;
max-height: 92px;
margin: 0 auto;
padding: 0;
border-radius: var(--ui-card-radius);
background: transparent;
border: none;
box-shadow: none;
object-fit: contain;
overflow: hidden;
}
body.admin-standalone-active .admin-standalone-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 52%),
linear-gradient(140deg, #0b2e52 0%, #114879 55%, #0f3d69 100%);
border-color: rgba(255, 255, 255, 0.24);
box-shadow: 0 20px 44px rgba(7, 20, 38, 0.3);
}
body.admin-standalone-active .admin-standalone-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.16) 48%, transparent 62%);
transform: translateX(-120%);
animation: adminHeroSweep 5.8s ease-in-out infinite;
pointer-events: none;
}
body.admin-standalone-active .admin-hero-stat {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.28);
}
body.admin-standalone-active .admin-hero-stat.is-clickable:hover {
transform: translateY(-2px);
box-shadow: 0 10px 18px rgba(2, 10, 22, 0.24);
}
body.admin-standalone-active #admin-standalone-page .insight-card {
border: 1px solid rgba(11, 46, 82, 0.13);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(251, 252, 255, 0.92));
}
body.admin-standalone-active #admin-standalone-page .menu-page-actions .action-btn {
border-radius: 12px;
}
body.admin-standalone-active #admin-standalone-page .menu-page-actions .action-btn:not(.secondary) {
background: linear-gradient(135deg, #f26a21, #d95a15);
border-color: rgba(242, 106, 33, 0.65);
}
body.admin-standalone-active #admin-standalone-page .menu-page-actions .action-btn.admin-tab-active {
background: linear-gradient(140deg, rgba(11, 46, 82, 0.18), rgba(11, 46, 82, 0.1));
color: #0A1324;
border-color: rgba(11, 46, 82, 0.34);
}
/* Light-mode readability hardening for Admin Performance Review */
body.admin-standalone-active #adminMasterBody .insight-card,
body.admin-standalone-active #adminMasterBody .insight-card h4,
body.admin-standalone-active #adminMasterBody .insight-card strong,
body.admin-standalone-active #adminMasterBody .mini-table td,
body.admin-standalone-active #adminMasterBody .mini-table th,
body.admin-standalone-active #adminMasterBody .insight-chip {
color: #0A1324;
}
body.admin-standalone-active #adminMasterBody .page-subtitle {
color: #4A5870;
}
body.admin-standalone-active #adminMasterBody .mini-table table,
body.admin-standalone-active #adminMasterBody .mini-table th,
body.admin-standalone-active #adminMasterBody .mini-table td,
body.admin-standalone-active #adminMasterBody select,
body.admin-standalone-active #adminMasterBody option {
color: #0A1324;
}
body.admin-standalone-active #adminMasterBody .mini-table thead th {
background: rgba(11, 46, 82, 0.08);
}
body.admin-standalone-active #admin-standalone-page .audit-log .audit-item {
border-left: 3px solid rgba(242, 106, 33, 0.72);
padding-left: 10px;
}
body.dark.admin-standalone-active {
background:
radial-gradient(960px 620px at 10% 2%, rgba(242, 106, 33, 0.16), transparent 70%),
radial-gradient(960px 620px at 95% 0%, rgba(58, 129, 198, 0.22), transparent 68%),
linear-gradient(180deg, #0a1322 0%, #0b1525 100%);
}
body.dark.admin-standalone-active .page-header {
border-color: rgba(255, 255, 255, 0.14);
background: linear-gradient(180deg, rgba(16, 25, 40, 0.94), rgba(12, 20, 33, 0.9));
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.36);
}
body.dark.admin-standalone-active .admin-top-shell {
border-color: rgba(255, 255, 255, 0.16);
background:
radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.08), transparent 58%),
linear-gradient(155deg, rgba(11, 28, 47, 0.96) 0%, rgba(13, 46, 78, 0.96) 56%, rgba(9, 32, 58, 0.98) 100%);
box-shadow: 0 24px 46px rgba(0, 0, 0, 0.4);
}
body.dark.admin-standalone-active .admin-brand-logo {
background: transparent;
border: none;
box-shadow: none;
}
body.dark.admin-standalone-active .admin-brand-stack {
border-color: rgba(255, 255, 255, 0.12);
background: linear-gradient(180deg, rgba(19, 30, 48, 0.24), rgba(12, 22, 36, 0.18));
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}
body.dark.admin-standalone-active #admin-standalone-page .insight-card {
border-color: rgba(255, 255, 255, 0.14);
background: linear-gradient(180deg, rgba(16, 25, 40, 0.96), rgba(12, 20, 33, 0.92));
}
body.dark.admin-standalone-active #admin-standalone-page .menu-page-actions .action-btn.admin-tab-active {
background: linear-gradient(140deg, rgba(242, 106, 33, 0.28), rgba(242, 106, 33, 0.14));
border-color: rgba(242, 106, 33, 0.56);
}
/* Admin visual upgrade pass */
body.admin-standalone-active #admin-standalone-page .container {
position: relative;
}
body.admin-standalone-active #admin-standalone-page .container::before {
content: "";
position: absolute;
inset: -24px -14px auto -14px;
height: 240px;
background:
radial-gradient(520px 220px at 10% 0%, rgba(242, 106, 33, 0.16), transparent 70%),
radial-gradient(620px 260px at 90% 0%, rgba(78, 156, 230, 0.18), transparent 72%);
pointer-events: none;
z-index: 0;
}
body.admin-standalone-active #admin-standalone-page .page-header,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body.admin-standalone-active #admin-standalone-page .stats-section {
position: relative;
z-index: 1;
}
body.admin-standalone-active #admin-standalone-page .page-header {
border-image: linear-gradient(90deg, rgba(242, 106, 33, 0.44), rgba(16, 59, 107, 0.32), rgba(23, 162, 164, 0.36)) 1;
}
body.admin-standalone-active #admin-standalone-page .section-heading[data-icon="🛡️"] {
letter-spacing: 0.06em;
text-transform: uppercase;
}
body.admin-standalone-active .admin-hero-stats {
gap: 12px;
}
body.admin-standalone-active .admin-hero-stat {
position: relative;
overflow: hidden;
border-width: 1px;
border-color: rgba(255, 255, 255, 0.24);
background: linear-gradient(165deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
box-shadow: 0 10px 22px rgba(2, 10, 22, 0.22);
}
body.admin-standalone-active .admin-hero-stat::before {
content: none;
display: none;
}
body.admin-standalone-active .admin-hero-stat::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 3px;
background: linear-gradient(90deg, rgba(242, 106, 33, 0.94), rgba(255, 255, 255, 0.5));
opacity: 0.86;
}
body.admin-standalone-active .admin-hero-value {
position: relative;
display: inline-grid;
place-items: center;
min-width: 52px;
min-height: 52px;
z-index: 1;
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}
body.admin-standalone-active .admin-hero-value::before {
content: "";
position: absolute;
width: 52px;
height: 52px;
border-radius: 50%;
background:
radial-gradient(circle at center, rgba(255, 255, 255, 0) 61%, rgba(255, 255, 255, 0.12) 62%, rgba(255, 255, 255, 0.12) 65%, transparent 66%),
conic-gradient(from 0deg, rgba(242, 106, 33, 0.85), rgba(255, 255, 255, 0.18), rgba(23, 162, 164, 0.62), rgba(242, 106, 33, 0.85));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
opacity: 0.9;
pointer-events: none;
animation: adminRingSweep 9s linear infinite;
}
body.admin-standalone-active .admin-hero-value::after {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.16);
opacity: 0.9;
pointer-events: none;
}
body.admin-standalone-active .admin-standalone-hero > .menu-page-actions {
margin-top: 2px;
padding: 8px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
}
body.admin-standalone-active .admin-standalone-hero > .menu-page-actions .action-btn {
min-height: 40px;
border-radius: 10px;
font-size: 0.84rem;
}
body.admin-standalone-active #admin-standalone-page .stats-section .insight-card h4 {
position: relative;
padding-left: 12px;
}
body.admin-standalone-active #admin-standalone-page .stats-section .insight-card h4::before {
content: "";
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(242, 106, 33, 0.95), rgba(11, 46, 82, 0.6));
}
body.admin-standalone-active #admin-standalone-page .stats-section:last-of-type > .menu-page-actions {
padding: 10px;
border-radius: 14px;
border: 1px solid rgba(11, 46, 82, 0.16);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(247, 250, 255, 0.82));
}
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar {
width: 100%;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
align-items: stretch;
margin-top: 2px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar > .action-btn {
width: 100%;
min-height: 44px;
justify-content: center;
}
body.dark.admin-standalone-active #admin-standalone-page .page-header {
border-image: linear-gradient(90deg, rgba(242, 106, 33, 0.5), rgba(122, 176, 235, 0.35), rgba(42, 190, 182, 0.35)) 1;
}
body.dark.admin-standalone-active .admin-hero-stat {
border-color: rgba(255, 255, 255, 0.2);
background: linear-gradient(165deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}
body.dark.admin-standalone-active .admin-hero-stat::before {
background: rgba(255, 255, 255, 0.16);
}
body.dark.admin-standalone-active .admin-hero-value::before {
background:
radial-gradient(circle at center, rgba(255, 255, 255, 0) 61%, rgba(255, 255, 255, 0.1) 62%, rgba(255, 255, 255, 0.1) 65%, transparent 66%),
conic-gradient(from 0deg, rgba(242, 106, 33, 0.82), rgba(146, 179, 224, 0.22), rgba(46, 189, 181, 0.62), rgba(242, 106, 33, 0.82));
}
body.dark.admin-standalone-active .admin-standalone-hero > .menu-page-actions {
border-color: rgba(255, 255, 255, 0.16);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
}
body.dark.admin-standalone-active #admin-standalone-page .stats-section:last-of-type > .menu-page-actions {
border-color: rgba(255, 255, 255, 0.14);
background: linear-gradient(180deg, rgba(16, 25, 40, 0.82), rgba(12, 20, 33, 0.78));
}
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar {
grid-template-columns: 1fr 1fr;
}
}
@keyframes adminRingSweep {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes adminHeroSweep {
0% { transform: translateX(-120%); opacity: 0; }
18% { opacity: 1; }
52% { transform: translateX(120%); opacity: 0.8; }
100% { transform: translateX(120%); opacity: 0; }
}
@media (max-width: 768px) {
body.admin-standalone-active .admin-standalone-hero {
padding: 14px;
}
body.admin-standalone-active .admin-brand-logo {
border-radius: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
body.admin-standalone-active .admin-standalone-hero::after {
animation: none !important;
}
}
/* ---------- Quick Actions Placement Override ---------- */
.quick-actions {
left: calc(16px + env(safe-area-inset-left)) !important;
right: auto !important;
bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}
.quick-actions-menu.is-open {
transform-origin: bottom left;
}
@media (max-width: 768px) {
.quick-actions {
left: calc(12px + env(safe-area-inset-left)) !important;
right: auto !important;
bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}
}
/* ---------- Settings Mobile Fit ---------- */
@media (max-width: 768px) {
#settingsPage .menu-page-inner {
overflow-x: hidden;
}
#settingsPage .insight-card {
padding: 12px;
overflow: hidden;
}
#settingsPage .master-capture-grid {
grid-template-columns: 1fr !important;
gap: 10px;
}
#settingsPage .menu-page-actions,
#settingsPage .modal-actions {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
#settingsPage .menu-page-actions > .action-btn,
#settingsPage .menu-page-actions > .submit-btn,
#settingsPage .menu-page-actions > .back-btn,
#settingsPage .modal-actions > .action-btn,
#settingsPage .modal-actions > .submit-btn {
width: 100%;
min-width: 0;
}
#settingsPage .form-group input,
#settingsPage .form-group select,
#settingsPage .form-group textarea,
#settingsPage .learning-search input {
width: 100%;
max-width: 100%;
}
#settingsPage .insight-list {
flex-wrap: wrap;
gap: 8px;
}
#settingsPage .insight-chip {
width: 100%;
justify-content: flex-start;
min-width: 0;
}
#settingsPage .mini-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#settingsPage .mini-table table {
min-width: 460px;
}
}
@media (max-width: 430px) {
#settingsPage .menu-page-inner {
padding: 12px 10px calc(18px + env(safe-area-inset-bottom));
}
#settingsPage .insight-card {
padding: 10px;
}
#settingsPage .menu-page-actions .action-btn,
#settingsPage .menu-page-actions .submit-btn,
#settingsPage .menu-page-actions .back-btn {
font-size: 0.82rem;
}
#settingsPage .mini-table table {
min-width: 420px;
}
}
/* ---------- Team Leader Distinct Visual Language ---------- */
body.team-portal-active {
background:
radial-gradient(940px 560px at 4% 0%, rgba(15, 163, 155, 0.13), transparent 70%),
radial-gradient(980px 620px at 98% 4%, rgba(29, 111, 184, 0.15), transparent 68%),
linear-gradient(180deg, #edf8f7 0%, #e6f2f8 100%);
}
body.team-portal-active #teamDetailPage .menu-page-inner {
border: 1px solid rgba(14, 114, 129, 0.2);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 253, 253, 0.92));
box-shadow: 0 16px 34px rgba(10, 19, 36, 0.14);
}
body.team-portal-active #teamDetailPage .menu-page-header h2 {
color: #0d5f73;
letter-spacing: 0.01em;
}
body.team-portal-active #teamDetailPage .scope-badge.team {
background: linear-gradient(140deg, rgba(15, 163, 155, 0.2), rgba(42, 129, 196, 0.2));
border-color: rgba(15, 163, 155, 0.4);
color: #0a4454;
}
body.team-portal-active #teamDetailPage .insight-card {
border: 1px solid rgba(14, 114, 129, 0.16);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 254, 254, 0.94));
}
body.team-portal-active #teamDetailPage .team-card {
border: 1px solid rgba(15, 163, 155, 0.18);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 251, 252, 0.92));
box-shadow: 0 10px 24px rgba(10, 19, 36, 0.1);
}
body.team-portal-active #teamDetailPage .team-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(10, 19, 36, 0.14);
}
body.team-portal-active #teamDetailPage .menu-page-actions .action-btn:not(.secondary) {
background: linear-gradient(135deg, #0fa39b, #0b7c8d);
border-color: rgba(15, 163, 155, 0.5);
}
body.team-portal-active #teamDetailPage .status-pill {
border-color: rgba(15, 163, 155, 0.32);
background: rgba(15, 163, 155, 0.12);
color: #0a4752;
}
body.team-portal-active #teamDetailPage .audit-item {
border-left: 3px solid rgba(15, 163, 155, 0.66);
padding-left: 10px;
}
body.dark.team-portal-active {
background:
radial-gradient(950px 600px at 8% 0%, rgba(25, 170, 161, 0.2), transparent 72%),
radial-gradient(1000px 620px at 96% 4%, rgba(50, 127, 194, 0.24), transparent 68%),
linear-gradient(180deg, #081824 0%, #0a1d2b 100%);
}
body.dark.team-portal-active #teamDetailPage .menu-page-inner {
border-color: rgba(138, 220, 219, 0.24);
background: linear-gradient(180deg, rgba(10, 30, 38, 0.96), rgba(8, 25, 33, 0.92));
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
}
body.dark.team-portal-active #teamDetailPage .menu-page-header h2 {
color: #a8f0ea;
}
body.dark.team-portal-active #teamDetailPage .scope-badge.team {
background: linear-gradient(140deg, rgba(22, 162, 153, 0.32), rgba(54, 136, 206, 0.26));
border-color: rgba(134, 224, 220, 0.5);
color: #d9fcf8;
}
body.dark.team-portal-active #teamDetailPage .insight-card,
body.dark.team-portal-active #teamDetailPage .team-card {
border-color: rgba(138, 220, 219, 0.2);
background: linear-gradient(180deg, rgba(10, 30, 38, 0.96), rgba(8, 25, 33, 0.92));
}
body.dark.team-portal-active #teamDetailPage .status-pill {
border-color: rgba(134, 224, 220, 0.45);
background: rgba(25, 170, 161, 0.22);
color: #d9fcf8;
}
#teamDetailPage .menu-illustration.admin-illustration,
#teamDetailPage .menu-page-scope {
display: none;
}
.sales-manager-portal {
display: grid;
grid-template-columns: 284px minmax(0, 1fr);
gap: 20px;
margin-top: 8px;
align-items: start;
}
.sales-manager-portal.is-collapsed {
grid-template-columns: 84px minmax(0, 1fr);
}
.sales-manager-sidebar {
position: sticky;
top: 18px;
border: 1px solid rgba(10, 19, 36, 0.08);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
color: var(--ink);
border-radius: 24px;
padding: 20px 16px 18px;
box-shadow: 0 20px 40px rgba(10, 19, 36, 0.08);
display: flex;
flex-direction: column;
gap: 18px;
}
.sales-manager-brand {
display: flex;
align-items: center;
gap: 14px;
padding: 0 2px 14px;
border-bottom: 1px solid rgba(10, 19, 36, 0.08);
}
.sales-manager-brand img {
width: 46px;
height: 46px;
object-fit: contain;
}
.sales-manager-sidebar-logo-btn {
width: 46px;
height: 46px;
border-radius: 14px;
border: 1px solid rgba(10, 19, 36, 0.08);
background: rgba(255, 255, 255, 0.86);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
box-shadow: 0 10px 20px rgba(10, 19, 36, 0.08);
}
.sales-manager-sidebar-logo-btn img {
width: 28px;
height: 28px;
}
.sales-manager-brand strong,
.sales-manager-brand span {
display: block;
}
.sales-manager-brand strong {
font-size: 1rem;
color: var(--ink);
line-height: 1.2;
}
.sales-manager-brand span {
font-size: 0.82rem;
color: var(--text-muted-light);
}
.sales-manager-sidebar-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.sales-manager-sidebar-group.account {
margin-top: auto;
}
.sales-manager-sidebar-divider {
height: 1px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(10, 19, 36, 0.02), rgba(10, 19, 36, 0.12), rgba(10, 19, 36, 0.02));
margin: 2px 2px 0;
}
.sales-manager-sidebar-group small {
color: var(--text-muted-light);
font-size: 0.74rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0 6px;
font-weight: 700;
}
.sales-manager-nav-btn,
.sales-manager-quick-btn {
display: flex;
align-items: center;
gap: 10px;
min-height: 42px;
border: 1px solid rgba(10, 19, 36, 0.08);
background: rgba(255, 255, 255, 0.78);
color: var(--ink);
border-radius: 12px;
padding: 10px 12px;
font: inherit;
text-align: left;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.sales-manager-nav-btn span:nth-child(2),
.sales-manager-quick-btn span:nth-child(2) {
flex: 1 1 auto;
}
.sales-manager-nav-count {
min-width: 28px;
height: 28px;
padding: 0 8px;
border-radius: 999px;
border: 1px solid rgba(10, 19, 36, 0.08);
background: rgba(10, 19, 36, 0.04);
color: #5f718d;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.74rem;
font-weight: 800;
}
.sales-manager-nav-icon {
width: 18px;
min-width: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
color: currentColor;
}
.sales-manager-nav-icon svg,
.sales-manager-kpi-icon svg,
.sales-manager-mini-stat-icon svg,
.sales-manager-topbar-action svg {
width: 18px;
height: 18px;
display: block;
fill: currentColor;
}
.sales-manager-nav-btn:hover,
.sales-manager-quick-btn:hover,
.sales-manager-nav-btn.is-active {
background: linear-gradient(135deg, rgba(242, 106, 33, 0.14), rgba(15, 143, 156, 0.14));
border-color: rgba(242, 106, 33, 0.28);
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(10, 19, 36, 0.08);
}
.sales-manager-nav-btn.is-active {
background: linear-gradient(135deg, #f26a21, #0f8f9c);
color: #fff;
border-color: transparent;
box-shadow: 0 12px 22px rgba(15, 111, 132, 0.22);
}
.sales-manager-nav-btn.is-active .sales-manager-nav-count {
border-color: rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
.sales-manager-portal.is-collapsed .sales-manager-sidebar {
padding-inline: 10px;
align-items: center;
}
.sales-manager-portal.is-collapsed .sales-manager-brand {
justify-content: center;
}
.sales-manager-portal.is-collapsed .sales-manager-brand > div,
.sales-manager-portal.is-collapsed .sales-manager-sidebar-group small,
.sales-manager-portal.is-collapsed .sales-manager-nav-btn span:nth-child(2),
.sales-manager-portal.is-collapsed .sales-manager-quick-btn span:nth-child(2),
.sales-manager-portal.is-collapsed .sales-manager-nav-count,
.sales-manager-portal.is-collapsed .sales-manager-sidebar-divider {
display: none;
}
.sales-manager-portal.is-collapsed .sales-manager-nav-btn,
.sales-manager-portal.is-collapsed .sales-manager-quick-btn {
justify-content: center;
width: 100%;
padding-inline: 0;
}
.sales-manager-main {
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}
.sales-manager-content-canvas {
border: 1px solid rgba(10, 19, 36, 0.08);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 254, 0.98));
border-radius: 28px;
padding: 18px;
box-shadow: 0 18px 36px rgba(10, 19, 36, 0.08);
}
.sales-manager-topbar-stack {
display: grid;
gap: 12px;
position: sticky;
top: 18px;
z-index: 5;
}
.sales-manager-topbar,
.sales-manager-panel,
.sales-manager-kpi-card {
border: 1px solid rgba(10, 19, 36, 0.08);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.96));
border-radius: 22px;
box-shadow: 0 16px 34px rgba(10, 19, 36, 0.08);
}
.sales-manager-topbar {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: flex-start;
padding: 24px 26px;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(16px) saturate(140%);
}
.sales-manager-topbar h3 {
margin: 6px 0 4px;
font-size: 2rem;
line-height: 1.08;
}
.sales-manager-topbar p {
margin: 0;
color: var(--text-muted-light);
max-width: 720px;
}
.sales-manager-eyebrow {
font-size: 0.76rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #0f8f9c;
font-weight: 700;
}
.sales-manager-topbar-meta {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
max-width: 360px;
}
.sales-manager-topbar-right {
display: grid;
gap: 12px;
justify-items: end;
}
.sales-manager-topbar-utility {
display: flex;
align-items: center;
gap: 12px;
}
.sales-manager-utility-btn {
position: relative;
width: 46px;
height: 46px;
border-radius: 14px;
border: 1px solid rgba(10, 19, 36, 0.08);
background: rgba(255, 255, 255, 0.9);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 18px rgba(10, 19, 36, 0.08);
cursor: pointer;
}
.sales-manager-utility-btn svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.sales-manager-utility-badge {
position: absolute;
top: -6px;
right: -4px;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: #ff4242;
color: #fff;
font-size: 0.72rem;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 18px rgba(255, 66, 66, 0.25);
}
.sales-manager-profile-chip {
min-height: 46px;
border-radius: 16px;
border: 1px solid rgba(10, 19, 36, 0.08);
background: rgba(255, 255, 255, 0.9);
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 12px;
padding: 6px 12px 6px 8px;
box-shadow: 0 10px 18px rgba(10, 19, 36, 0.06);
cursor: pointer;
}
.sales-manager-profile-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #f26a21, #0f8f9c);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
background-size: cover;
background-position: center;
}
.sales-manager-profile-avatar.has-photo {
color: transparent;
}
.sales-manager-profile-meta {
display: grid;
gap: 1px;
text-align: left;
}
.sales-manager-profile-meta strong {
font-size: 0.92rem;
line-height: 1.1;
}
.sales-manager-profile-meta span {
font-size: 0.78rem;
color: var(--text-muted-light);
}
.sales-manager-topbar-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.sales-manager-topbar-action {
min-height: 42px;
border: 1px solid rgba(10, 19, 36, 0.08);
background: rgba(255, 255, 255, 0.9);
color: var(--ink);
border-radius: 12px;
padding: 10px 14px;
display: inline-flex;
align-items: center;
gap: 8px;
font: inherit;
font-weight: 600;
cursor: pointer;
box-shadow: 0 10px 20px rgba(10, 19, 36, 0.06);
}
.sales-manager-topbar-action:hover {
border-color: rgba(242, 106, 33, 0.22);
background: linear-gradient(135deg, rgba(242, 106, 33, 0.08), rgba(15, 143, 156, 0.08));
}
.sales-manager-snapshot-hero {
border: 1px solid rgba(10, 19, 36, 0.08);
border-radius: 28px;
background:
radial-gradient(520px 220px at 0% 0%, rgba(242, 106, 33, 0.1), transparent 68%),
radial-gradient(520px 240px at 100% 0%, rgba(15, 143, 156, 0.12), transparent 70%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
box-shadow: 0 18px 36px rgba(10, 19, 36, 0.08);
padding: 22px;
display: grid;
gap: 18px;
}
.sales-manager-snapshot-copy h4 {
margin: 6px 0 6px;
font-size: 1.5rem;
line-height: 1.1;
}
.sales-manager-snapshot-copy p {
margin: 0;
color: var(--text-muted-light);
max-width: 760px;
}
.sales-manager-snapshot-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.sales-manager-snapshot-tile {
border-radius: 20px;
border: 1px solid rgba(10, 19, 36, 0.08);
background: rgba(255, 255, 255, 0.72);
padding: 18px;
box-shadow: 0 12px 22px rgba(10, 19, 36, 0.05);
}
.sales-manager-snapshot-tile span,
.sales-manager-snapshot-tile em {
display: block;
}
.sales-manager-snapshot-tile span {
color: var(--text-muted-light);
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sales-manager-snapshot-tile strong {
display: block;
margin-top: 12px;
font-size: 2rem;
line-height: 1;
}
.sales-manager-snapshot-tile em {
margin-top: 8px;
color: var(--text-muted-light);
font-style: normal;
font-size: 0.82rem;
}
.sales-manager-snapshot-tile.lead { border-color: rgba(242, 106, 33, 0.22); }
.sales-manager-snapshot-tile.sales { border-color: rgba(15, 143, 156, 0.22); }
.sales-manager-snapshot-tile.stable { border-color: rgba(42, 117, 255, 0.18); }
.sales-manager-snapshot-tile.danger { border-color: rgba(210, 77, 87, 0.2); }
.sales-manager-quick-actions-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.sales-manager-action-pill {
min-height: 44px;
border: 1px solid rgba(10, 19, 36, 0.08);
border-radius: 14px;
background: rgba(255, 255, 255, 0.9);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font: inherit;
font-weight: 700;
padding: 10px 14px;
cursor: pointer;
box-shadow: 0 12px 22px rgba(10, 19, 36, 0.05);
}
.sales-manager-action-pill svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.sales-manager-mini-stat-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.sales-manager-mini-stat-card {
border: 1px solid rgba(10, 19, 36, 0.08);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
border-radius: 18px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 12px 24px rgba(10, 19, 36, 0.06);
}
.sales-manager-mini-stat-icon {
width: 42px;
height: 42px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(242, 106, 33, 0.14), rgba(15, 143, 156, 0.14));
display: inline-flex;
align-items: center;
justify-content: center;
color: #0f8f9c;
flex: 0 0 auto;
}
.sales-manager-mini-stat-card strong {
display: block;
font-size: 1.2rem;
line-height: 1.05;
}
.sales-manager-mini-stat-card span {
display: block;
color: var(--text-muted-light);
font-size: 0.8rem;
margin-top: 2px;
}
.sales-manager-kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.sales-manager-kpi-card {
min-height: 132px;
padding: 20px 20px 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sales-manager-kpi-head {
display: flex;
align-items: center;
gap: 12px;
}
.sales-manager-kpi-icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: rgba(255, 255, 255, 0.72);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 18px rgba(10, 19, 36, 0.08);
font-size: 1.18rem;
}
.sales-manager-kpi-card span {
color: var(--text-muted-light);
font-size: 0.88rem;
font-weight: 600;
}
.sales-manager-kpi-card strong {
font-size: 2rem;
line-height: 1;
}
.sales-manager-kpi-card em {
font-style: normal;
font-size: 0.82rem;
color: #0f8f9c;
}
.sales-manager-kpi-card.leads {
background: linear-gradient(180deg, rgba(242, 106, 33, 0.12), rgba(255, 255, 255, 0.98));
border-color: rgba(242, 106, 33, 0.22);
}
.sales-manager-kpi-card.sales {
background: linear-gradient(180deg, rgba(15, 143, 156, 0.12), rgba(255, 255, 255, 0.98));
border-color: rgba(15, 143, 156, 0.22);
}
.sales-manager-kpi-card.attendance {
background: linear-gradient(180deg, rgba(42, 117, 255, 0.1), rgba(255, 255, 255, 0.98));
border-color: rgba(42, 117, 255, 0.18);
}
.sales-manager-kpi-card.warning {
background: linear-gradient(180deg, rgba(246, 193, 78, 0.14), rgba(255, 255, 255, 0.98));
border-color: rgba(246, 193, 78, 0.24);
}
.sales-manager-control-strip {
padding-top: 18px;
}
.sales-manager-health-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.sales-manager-health-card,
.sales-manager-compare-card {
border: 1px solid rgba(10, 19, 36, 0.08);
border-radius: 18px;
background: rgba(248, 251, 255, 0.98);
padding: 16px;
}
.sales-manager-health-card span,
.sales-manager-compare-card span {
display: block;
color: var(--text-muted-light);
font-size: 0.8rem;
font-weight: 600;
}
.sales-manager-health-card strong,
.sales-manager-compare-card strong {
display: block;
margin-top: 10px;
font-size: 1.6rem;
line-height: 1;
}
.sales-manager-health-card em,
.sales-manager-compare-card em {
display: block;
margin-top: 6px;
color: #0f8f9c;
font-style: normal;
font-size: 0.78rem;
}
.sales-manager-compare-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.sales-manager-dashboard-shell {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.72fr);
gap: 18px;
align-items: start;
}
.sales-manager-dashboard-main {
display: grid;
gap: 18px;
}
.sales-manager-priority-rail {
display: grid;
gap: 18px;
position: sticky;
top: 170px;
}
.sales-manager-dashboard-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
gap: 18px;
}
.sales-manager-chart-tools {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.sales-manager-trend-toggle {
display: inline-flex;
gap: 6px;
padding: 4px;
border-radius: 999px;
background: rgba(10, 19, 36, 0.05);
border: 1px solid rgba(10, 19, 36, 0.08);
}
.sales-manager-trend-btn {
min-height: 34px;
padding: 7px 14px;
border-radius: 999px;
border: 0;
background: transparent;
color: var(--text-muted-light);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.sales-manager-trend-btn.is-active {
background: linear-gradient(135deg, #f26a21, #0f8f9c);
color: #fff;
box-shadow: 0 10px 18px rgba(15, 111, 132, 0.2);
}
.sales-manager-panel {
padding: 22px;
min-width: 0;
min-height: 100%;
}
.sales-manager-panel-lg {
grid-column: span 1;
}
.sales-manager-panel-full {
grid-column: 1 / -1;
}
.sales-manager-attendance-grid {
display: grid;
grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
gap: 18px;
align-items: center;
}
.sales-manager-attendance-qr {
display: grid;
gap: 10px;
justify-items: center;
padding: 14px;
border-radius: 18px;
border: 1px solid rgba(10, 19, 36, 0.12);
background: rgba(255, 255, 255, 0.72);
}
.sales-manager-attendance-qr img {
width: 100%;
max-width: 220px;
height: auto;
border-radius: 14px;
background: #fff;
padding: 8px;
}
.sales-manager-attendance-meta {
display: grid;
gap: 12px;
}
body.dark .sales-manager-attendance-qr {
border-color: rgba(255, 255, 255, 0.1);
background: rgba(8, 15, 28, 0.86);
}
.sales-manager-panel-head {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: flex-start;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(10, 19, 36, 0.06);
}
.sales-manager-panel-head h4 {
margin: 0 0 4px;
font-size: 1.06rem;
line-height: 1.2;
}
.sales-manager-panel-head p {
margin: 0;
color: var(--text-muted-light);
font-size: 0.88rem;
}
.sales-manager-mini-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.sales-manager-trend-svg {
width: 100%;
height: auto;
display: block;
}
.sales-manager-grid-line {
stroke: rgba(111, 135, 168, 0.18);
stroke-width: 1;
}
.sales-manager-line {
fill: none;
stroke-width: 3.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.sales-manager-line.leads,
.sales-manager-line-dot.leads {
stroke: #f26a21;
fill: #f26a21;
}
.sales-manager-line.sales,
.sales-manager-line-dot.sales {
stroke: #0f8f9c;
fill: #0f8f9c;
}
.sales-manager-axis-label {
fill: #5f718d;
font-size: 12px;
}
.sales-manager-overview-list,
.sales-manager-rank-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.sales-manager-overview-row,
.sales-manager-rank-row {
border: 1px solid rgba(10, 19, 36, 0.08);
background: rgba(248, 251, 255, 0.96);
border-radius: 16px;
padding: 13px 14px;
}
.sales-manager-overview-row strong,
.sales-manager-rank-row strong {
display: block;
}
.sales-manager-overview-row span,
.sales-manager-rank-row em {
color: var(--text-muted-light);
font-style: normal;
font-size: 0.84rem;
}
.sales-manager-overview-meter {
margin-top: 10px;
width: 100%;
height: 8px;
border-radius: 999px;
background: rgba(104, 126, 160, 0.16);
overflow: hidden;
}
.sales-manager-overview-meter span {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #f26a21, #0f8f9c);
}
.sales-manager-rank-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.sales-manager-rank-row span {
color: #0f8f9c;
font-weight: 700;
}
.sales-manager-rank-row:hover,
.sales-manager-overview-row:hover {
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(10, 19, 36, 0.08);
border-color: rgba(242, 106, 33, 0.18);
}
.sales-manager-rank-row.danger {
border-color: rgba(210, 77, 87, 0.18);
background: rgba(255, 242, 244, 0.9);
}
.sales-manager-priority-list,
.sales-manager-notification-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.sales-manager-priority-item,
.sales-manager-notification-item {
border: 1px solid rgba(10, 19, 36, 0.08);
border-radius: 16px;
background: rgba(248, 251, 255, 0.96);
padding: 14px;
}
.sales-manager-priority-item {
width: 100%;
text-align: left;
cursor: pointer;
font: inherit;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.sales-manager-priority-item:hover {
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(10, 19, 36, 0.08);
}
.sales-manager-priority-item strong,
.sales-manager-notification-item strong {
display: block;
}
.sales-manager-priority-item p,
.sales-manager-notification-item p,
.sales-manager-empty-state p {
margin: 6px 0 0;
color: var(--text-muted-light);
font-size: 0.84rem;
}
.sales-manager-priority-item.danger {
border-color: rgba(210, 77, 87, 0.2);
background: rgba(255, 242, 244, 0.92);
}
.sales-manager-priority-item.warn {
border-color: rgba(246, 193, 78, 0.28);
background: rgba(255, 250, 239, 0.96);
}
.sales-manager-priority-item.info {
border-color: rgba(42, 117, 255, 0.18);
background: rgba(243, 248, 255, 0.96);
}
.sales-manager-notification-item span {
display: inline-block;
margin-top: 8px;
color: var(--text-muted-light);
font-size: 0.76rem;
}
.sales-manager-empty-state {
border: 1px dashed rgba(10, 19, 36, 0.12);
border-radius: 16px;
padding: 16px;
background: rgba(248, 251, 255, 0.86);
}
.sales-manager-empty-state strong {
display: block;
}
.sales-manager-inline-chip {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 4px 6px 0 0;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid rgba(10, 19, 36, 0.08);
background: rgba(10, 19, 36, 0.04);
color: #5f718d;
font-size: 0.72rem;
font-weight: 700;
}
.sales-manager-inline-chip.success {
border-color: rgba(33, 146, 102, 0.16);
background: rgba(33, 146, 102, 0.12);
color: #177250;
}
.sales-manager-inline-chip.warn {
border-color: rgba(246, 193, 78, 0.22);
background: rgba(246, 193, 78, 0.12);
color: #9d6a00;
}
.sales-manager-inline-chip.danger {
border-color: rgba(210, 77, 87, 0.18);
background: rgba(210, 77, 87, 0.12);
color: #a2313b;
}
.sales-manager-inline-chip.role {
border-color: rgba(42, 117, 255, 0.16);
background: rgba(42, 117, 255, 0.1);
color: #295fbd;
}
.sales-manager-data-table thead th {
position: sticky;
top: 0;
z-index: 2;
background: rgba(248, 251, 255, 0.98);
}
.sales-manager-facility-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.sales-manager-facility-card {
border: 1px solid rgba(10, 19, 36, 0.08);
border-radius: 16px;
background: rgba(248, 251, 255, 0.96);
padding: 15px 14px;
}
.sales-manager-facility-card h5 {
margin: 0 0 6px;
}
.sales-manager-facility-card p,
.sales-manager-facility-card span {
margin: 0;
color: var(--text-muted-light);
font-size: 0.84rem;
}
body.dark .sales-manager-sidebar {
background: linear-gradient(180deg, rgba(8, 24, 37, 0.98), rgba(8, 33, 48, 0.96));
border-color: rgba(138, 220, 219, 0.18);
color: #eef7ff;
}
body.dark .sales-manager-topbar {
background: rgba(11, 28, 40, 0.94);
}
body.dark .sales-manager-topbar,
body.dark .sales-manager-panel,
body.dark .sales-manager-kpi-card,
body.dark .sales-manager-content-canvas,
body.dark .sales-manager-overview-row,
body.dark .sales-manager-rank-row,
body.dark .sales-manager-facility-card,
body.dark .sales-manager-health-card,
body.dark .sales-manager-compare-card,
body.dark .sales-manager-priority-item,
body.dark .sales-manager-notification-item,
body.dark .sales-manager-empty-state {
background: linear-gradient(180deg, rgba(11, 28, 40, 0.96), rgba(10, 24, 34, 0.94));
border-color: rgba(138, 220, 219, 0.14);
}
body.dark .sales-manager-topbar p,
body.dark .sales-manager-panel-head p,
body.dark .sales-manager-overview-row span,
body.dark .sales-manager-rank-row em,
body.dark .sales-manager-kpi-card span,
body.dark .sales-manager-facility-card p,
body.dark .sales-manager-facility-card span,
body.dark .sales-manager-axis-label {
color: var(--text-muted-dark);
}
body.dark .sales-manager-nav-btn,
body.dark .sales-manager-quick-btn,
body.dark .sales-manager-topbar-action,
body.dark .sales-manager-action-pill,
body.dark .sales-manager-utility-btn,
body.dark .sales-manager-profile-chip,
body.dark .sales-manager-sidebar-logo-btn {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
color: #eef7ff;
box-shadow: none;
}
body.dark .sales-manager-nav-count {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.08);
color: #d8e9fb;
}
body.dark .sales-manager-sidebar-divider {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(138, 220, 219, 0.16), rgba(255, 255, 255, 0.02));
}
body.dark .sales-manager-kpi-icon {
background: rgba(255, 255, 255, 0.08);
box-shadow: none;
}
body.dark .sales-manager-mini-stat-card {
background: linear-gradient(180deg, rgba(11, 28, 40, 0.96), rgba(10, 24, 34, 0.94));
border-color: rgba(138, 220, 219, 0.14);
}
body.dark .sales-manager-mini-stat-card span {
color: var(--text-muted-dark);
}
body.dark .sales-manager-profile-meta strong {
color: var(--text-strong-dark);
}
body.dark .sales-manager-profile-meta span {
color: var(--text-muted-dark);
}
body.dark .sales-manager-snapshot-copy p,
body.dark .sales-manager-snapshot-tile span,
body.dark .sales-manager-snapshot-tile em,
body.dark .sales-manager-trend-btn {
color: var(--text-muted-dark);
}
body.dark .sales-manager-snapshot-tile {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(138, 220, 219, 0.14);
}
body.dark .sales-manager-trend-btn.is-active {
color: #fff;
}
body.dark .sales-manager-mini-stat-icon {
background: linear-gradient(135deg, rgba(242, 106, 33, 0.18), rgba(15, 143, 156, 0.18));
color: #bdf6f1;
}
body.dark .sales-manager-inline-chip {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.08);
color: #d8e9fb;
}
body.dark .sales-manager-data-table thead th {
background: rgba(10, 24, 34, 0.98);
}
body.dark .sales-manager-nav-btn.is-active {
color: #fff;
}
/* ---------- Sales Manager Theme Normalization ---------- */
body:not(.dark) .auth-gate-card.is-sales-manager-auth {
background: #fffaf7;
color: var(--text-strong-light);
}
body:not(.dark) .auth-gate-card.is-sales-manager-auth .sales-manager-auth-rail,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .sales-manager-auth-topbar,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .sales-manager-auth-chart-card,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .sales-manager-auth-entry,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .sales-manager-auth-stat-card,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .auth-role-card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
border-color: rgba(10, 19, 36, 0.08);
color: var(--text-strong-light);
}
body:not(.dark) .auth-gate-card.is-sales-manager-auth .sales-manager-auth-topbar h2,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .sales-manager-auth-chart-copy h3,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .sales-manager-auth-rail-brand strong,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .sales-manager-auth-stat-card strong,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .auth-brand h2,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .auth-role-card strong,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .form-group label,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .radio-label,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .auth-remember-label span,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .link-btn,
body:not(.dark) .auth-gate-card.is-sales-manager-auth #authModeHint,
body:not(.dark) .auth-gate-card.is-sales-manager-auth #authApprovalNote,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .auth-mode-switch .action-btn {
color: var(--text-strong-light);
}
body:not(.dark) .auth-gate-card.is-sales-manager-auth .sales-manager-auth-topbar p,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .sales-manager-auth-chart-copy p,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .sales-manager-auth-stat-card span,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .sales-manager-auth-rail-group small,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .sales-manager-auth-rail-brand span,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .auth-role-card span,
body:not(.dark) .auth-gate-card.is-sales-manager-auth .password-strength {
color: var(--text-muted-light);
}
body:not(.dark) .auth-gate-card.is-sales-manager-auth input,
body:not(.dark) .auth-gate-card.is-sales-manager-auth select,
body:not(.dark) .auth-gate-card.is-sales-manager-auth textarea {
background: rgba(255, 255, 255, 0.95);
color: var(--text-strong-light);
border-color: rgba(10, 19, 36, 0.12);
}
body:not(.dark) .auth-gate-card.is-sales-manager-auth input::placeholder,
body:not(.dark) .auth-gate-card.is-sales-manager-auth textarea::placeholder {
color: var(--text-muted-light);
}
body.dark .auth-gate-card.is-sales-manager-auth,
body.dark .sales-manager-content-canvas {
background: linear-gradient(180deg, rgba(7, 18, 29, 0.98), rgba(7, 16, 27, 0.98));
color: var(--text-strong-dark);
}
body.dark .auth-gate-card.is-sales-manager-auth *,
body.dark .sales-manager-portal *,
body.dark .sales-manager-main *,
body.dark .sales-manager-content-canvas * {
border-color: rgba(138, 220, 219, 0.14);
}
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-topbar h2,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-chart-copy h3,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-rail-brand strong,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-stat-card strong,
body.dark .auth-gate-card.is-sales-manager-auth .auth-brand h2,
body.dark .auth-gate-card.is-sales-manager-auth .auth-brand p,
body.dark .auth-gate-card.is-sales-manager-auth .auth-role-card strong,
body.dark .auth-gate-card.is-sales-manager-auth .form-group label,
body.dark .auth-gate-card.is-sales-manager-auth .radio-label,
body.dark .auth-gate-card.is-sales-manager-auth .auth-remember-label span,
body.dark .auth-gate-card.is-sales-manager-auth .link-btn,
body.dark .auth-gate-card.is-sales-manager-auth #authModeHint,
body.dark .auth-gate-card.is-sales-manager-auth #authApprovalNote,
body.dark .auth-gate-card.is-sales-manager-auth .auth-mode-switch .action-btn,
body.dark .sales-manager-brand strong,
body.dark .sales-manager-topbar h3,
body.dark .sales-manager-panel-head h4,
body.dark .sales-manager-mini-stat-card strong,
body.dark .sales-manager-kpi-card strong,
body.dark .sales-manager-health-card strong,
body.dark .sales-manager-compare-card strong,
body.dark .sales-manager-priority-item strong,
body.dark .sales-manager-notification-item strong,
body.dark .sales-manager-empty-state strong,
body.dark .sales-manager-facility-card h5,
body.dark .sales-manager-overview-row strong,
body.dark .sales-manager-rank-row strong,
body.dark .sales-manager-sidebar-group small {
color: var(--text-strong-dark);
}
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-topbar p,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-chart-copy p,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-stat-card span,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-rail-group small,
body.dark .auth-gate-card.is-sales-manager-auth .sales-manager-auth-rail-brand span,
body.dark .auth-gate-card.is-sales-manager-auth .auth-role-card span,
body.dark .auth-gate-card.is-sales-manager-auth .password-strength,
body.dark .sales-manager-brand span,
body.dark .sales-manager-topbar p,
body.dark .sales-manager-panel-head p,
body.dark .sales-manager-mini-stat-card span,
body.dark .sales-manager-kpi-card span,
body.dark .sales-manager-health-card span,
body.dark .sales-manager-compare-card span,
body.dark .sales-manager-health-card em,
body.dark .sales-manager-compare-card em,
body.dark .sales-manager-overview-row span,
body.dark .sales-manager-rank-row em,
body.dark .sales-manager-priority-item p,
body.dark .sales-manager-notification-item p,
body.dark .sales-manager-notification-item span,
body.dark .sales-manager-empty-state p,
body.dark .sales-manager-facility-card p,
body.dark .sales-manager-facility-card span,
body.dark .sales-manager-axis-label {
color: var(--text-muted-dark);
}
body.dark .auth-gate-card.is-sales-manager-auth input,
body.dark .auth-gate-card.is-sales-manager-auth select,
body.dark .auth-gate-card.is-sales-manager-auth textarea {
background: rgba(255, 255, 255, 0.06);
color: var(--text-strong-dark);
border-color: rgba(255, 255, 255, 0.12);
}
body.dark .auth-gate-card.is-sales-manager-auth input::placeholder,
body.dark .auth-gate-card.is-sales-manager-auth textarea::placeholder {
color: var(--text-muted-dark);
}
body.dark .sales-manager-sidebar,
body.dark .sales-manager-topbar,
body.dark .sales-manager-panel,
body.dark .sales-manager-kpi-card,
body.dark .sales-manager-content-canvas,
body.dark .sales-manager-snapshot-hero,
body.dark .sales-manager-overview-row,
body.dark .sales-manager-rank-row,
body.dark .sales-manager-facility-card,
body.dark .sales-manager-health-card,
body.dark .sales-manager-compare-card,
body.dark .sales-manager-priority-item,
body.dark .sales-manager-notification-item,
body.dark .sales-manager-empty-state,
body.dark .sales-manager-mini-stat-card {
background: linear-gradient(180deg, rgba(11, 28, 40, 0.96), rgba(10, 24, 34, 0.94));
border-color: rgba(138, 220, 219, 0.14);
}
body.dark .sales-manager-nav-btn,
body.dark .sales-manager-quick-btn,
body.dark .sales-manager-topbar-action,
body.dark .sales-manager-action-pill,
body.dark .sales-manager-utility-btn,
body.dark .sales-manager-profile-chip,
body.dark .sales-manager-sidebar-logo-btn,
body.dark .sales-manager-trend-toggle {
background: rgba(255, 255, 255, 0.04);
color: var(--text-strong-dark);
border-color: rgba(255, 255, 255, 0.08);
}
body.dark .sales-manager-nav-count,
body.dark .sales-manager-inline-chip {
background: rgba(255, 255, 255, 0.06);
color: #d8e9fb;
border-color: rgba(255, 255, 255, 0.08);
}
body.dark .sales-manager-data-table thead th {
background: rgba(10, 24, 34, 0.98);
color: var(--text-strong-dark);
}
@media (max-width: 1180px) {
.sales-manager-portal {
grid-template-columns: 1fr;
}
.sales-manager-snapshot-grid,
.sales-manager-choice-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sales-manager-dashboard-shell {
grid-template-columns: 1fr;
}
.sales-manager-priority-rail {
position: static;
}
.sales-manager-sidebar {
order: 2;
position: static;
}
.sales-manager-topbar-stack {
position: static;
}
.sales-manager-kpi-grid,
.sales-manager-dashboard-grid,
.sales-manager-mini-stat-strip,
.sales-manager-health-grid,
.sales-manager-quick-actions-row {
grid-template-columns: 1fr 1fr;
}
.sales-manager-content-canvas {
padding: 14px;
}
}
@media (max-width: 768px) {
.sales-manager-choice-grid {
grid-template-columns: 1fr;
}
.sales-manager-snapshot-grid {
grid-template-columns: 1fr;
}
.sales-manager-topbar {
flex-direction: column;
padding: 18px;
}
.sales-manager-topbar-right {
width: 100%;
justify-items: stretch;
}
.sales-manager-topbar-meta,
.sales-manager-topbar-utility {
justify-content: flex-start;
}
.sales-manager-topbar h3 {
font-size: 1.42rem;
}
.sales-manager-kpi-grid,
.sales-manager-dashboard-grid,
.sales-manager-mini-stat-strip,
.sales-manager-health-grid,
.sales-manager-quick-actions-row,
.sales-manager-compare-grid {
grid-template-columns: 1fr;
}
.sales-manager-panel,
.sales-manager-kpi-card {
padding: 16px;
}
.sales-manager-sidebar {
border-radius: 20px;
}
.sales-manager-topbar-actions {
display: grid;
grid-template-columns: 1fr;
}
.sales-manager-profile-chip {
width: 100%;
justify-content: flex-start;
}
.sales-manager-chart-tools {
justify-content: flex-start;
}
}
/* Final rounding enforcement for all card surfaces */
:where(
.auth-gate-card,
.hero-glass,
.summary-card,
.about-card,
.target-card,
.insight-card,
.archives-panel,
.assignment-card,
.auto-assign-card,
.form-card,
.lead-panel,
.payment-card,
.learning-panel,
.team-card,
.facility-card,
.admin-jfa-card,
.hero-jfa-card,
.leaderboard-card,
.alert-panel,
.attendance-panel,
.modal-card,
.notification-dropdown-card,
.notification-card,
.menu-page-inner,
.admin-standalone-hero,
.admin-brand-stack,
.admin-brand-logo,
.master-stat-grid .admin-hero-stat,
.complete-day-panel,
.stats-section,
.mini-table
) {
border-radius: var(--ui-card-radius) !important;
}
@media (max-width: 768px) {
body.team-portal-active #teamDetailPage .menu-page-inner {
box-shadow: 0 10px 22px rgba(10, 19, 36, 0.18);
}
}
/* Team-specific variants */
body.team-portal-active.team-theme-thando {
background:
radial-gradient(960px 580px at 6% 0%, rgba(17, 157, 170, 0.18), transparent 70%),
radial-gradient(980px 620px at 98% 6%, rgba(27, 106, 178, 0.2), transparent 68%),
linear-gradient(180deg, #e8f8fb 0%, #e2eef8 100%);
}
body.team-portal-active.team-theme-thando #teamDetailPage .menu-page-actions .action-btn:not(.secondary) {
background: linear-gradient(135deg, #0ea5b5, #1378a8);
border-color: rgba(14, 165, 181, 0.55);
}
body.team-portal-active.team-theme-thato {
background:
radial-gradient(940px 560px at 4% 0%, rgba(244, 122, 51, 0.18), transparent 70%),
radial-gradient(980px 620px at 97% 6%, rgba(191, 80, 22, 0.18), transparent 68%),
linear-gradient(180deg, #fff2e8 0%, #f9e8dd 100%);
}
body.team-portal-active.team-theme-thato #teamDetailPage .menu-page-inner {
border-color: rgba(188, 89, 37, 0.24);
}
body.team-portal-active.team-theme-thato #teamDetailPage .menu-page-header h2 {
color: #9d3f0f;
}
body.team-portal-active.team-theme-thato #teamDetailPage .scope-badge.team {
background: linear-gradient(140deg, rgba(244, 122, 51, 0.2), rgba(168, 82, 29, 0.2));
border-color: rgba(188, 89, 37, 0.42);
color: #7b2f0b;
}
body.team-portal-active.team-theme-thato #teamDetailPage .menu-page-actions .action-btn:not(.secondary) {
background: linear-gradient(135deg, #f26a21, #c64d13);
border-color: rgba(242, 106, 33, 0.58);
}
body.team-portal-active.team-theme-rhulani {
background:
radial-gradient(960px 580px at 6% 0%, rgba(124, 88, 220, 0.18), transparent 70%),
radial-gradient(980px 620px at 98% 6%, rgba(72, 122, 220, 0.2), transparent 68%),
linear-gradient(180deg, #f1ecff 0%, #e8e7fb 100%);
}
body.team-portal-active.team-theme-rhulani #teamDetailPage .menu-page-inner {
border-color: rgba(92, 76, 170, 0.24);
}
body.team-portal-active.team-theme-rhulani #teamDetailPage .menu-page-header h2 {
color: #4b3f87;
}
body.team-portal-active.team-theme-rhulani #teamDetailPage .scope-badge.team {
background: linear-gradient(140deg, rgba(124, 88, 220, 0.2), rgba(72, 122, 220, 0.2));
border-color: rgba(92, 76, 170, 0.42);
color: #3e356f;
}
body.team-portal-active.team-theme-rhulani #teamDetailPage .menu-page-actions .action-btn:not(.secondary) {
background: linear-gradient(135deg, #6e5cc5, #445cb8);
border-color: rgba(92, 76, 170, 0.58);
}
body.dark.team-portal-active.team-theme-thato #teamDetailPage .menu-page-header h2,
body.dark.team-portal-active.team-theme-rhulani #teamDetailPage .menu-page-header h2 {
color: #f7f8fc;
}
body.team-portal-active.team-theme-generic {
background:
radial-gradient(940px 560px at 4% 0%, hsl(var(--team-hue, 190) 72% 50% / 0.16), transparent 70%),
radial-gradient(980px 620px at 97% 6%, hsl(var(--team-hue-2, 222) 68% 48% / 0.16), transparent 68%),
linear-gradient(180deg, #eef8fb 0%, #e8eff8 100%);
}
body.team-portal-active.team-theme-generic #teamDetailPage .menu-page-inner {
border-color: hsl(var(--team-hue, 190) 48% 44% / 0.24);
}
body.team-portal-active.team-theme-generic #teamDetailPage .menu-page-header h2 {
color: var(--team-headline, #1a4f62);
}
body.team-portal-active.team-theme-generic #teamDetailPage .scope-badge.team {
background: linear-gradient(
140deg,
hsl(var(--team-hue, 190) 72% 50% / 0.2),
hsl(var(--team-hue-2, 222) 68% 48% / 0.2)
);
border-color: hsl(var(--team-hue, 190) 52% 44% / 0.42);
color: hsl(var(--team-hue, 190) 62% 22%);
}
body.team-portal-active.team-theme-generic #teamDetailPage .menu-page-actions .action-btn:not(.secondary) {
background: linear-gradient(
135deg,
hsl(var(--team-hue, 190) 72% 45%),
hsl(var(--team-hue-2, 222) 68% 43%)
);
border-color: hsl(var(--team-hue, 190) 52% 44% / 0.58);
}
body.dark.team-portal-active.team-theme-generic {
background:
radial-gradient(950px 600px at 8% 0%, hsl(var(--team-hue, 190) 72% 50% / 0.2), transparent 72%),
radial-gradient(1000px 620px at 96% 4%, hsl(var(--team-hue-2, 222) 70% 48% / 0.22), transparent 68%),
linear-gradient(180deg, #091622 0%, #0a1b2a 100%);
}
body.dark.team-portal-active.team-theme-generic #teamDetailPage .menu-page-inner {
border-color: hsl(var(--team-hue, 190) 48% 64% / 0.24);
}
body.dark.team-portal-active.team-theme-generic #teamDetailPage .menu-page-header h2 {
color: #f7f8fc;
}
body.dark.team-portal-active.team-theme-generic #teamDetailPage .scope-badge.team {
background: linear-gradient(
140deg,
hsl(var(--team-hue, 190) 72% 50% / 0.28),
hsl(var(--team-hue-2, 222) 68% 48% / 0.24)
);
border-color: hsl(var(--team-hue, 190) 62% 68% / 0.5);
color: #eafcff;
}
/* ---------- Accessibility Contrast Guardrail ---------- */
:root {
--text-strong-light: #0A1324;
--text-muted-light: #4A5870;
--text-strong-dark: #F2F7FF;
--text-muted-dark: #C6D3E5;
}
body {
color: var(--text-strong-light);
}
body .page-subtitle,
body .menu-page-note,
body .notification-card p,
body .notification-meta,
body .modal-card p {
color: var(--text-muted-light);
}
body .mini-table th,
body .mini-table td,
body .rankings-table th,
body .rankings-table td,
body .attendance-table th,
body .attendance-table td,
body .lead-policy-item,
body .insight-chip,
body .notification-card,
body .notification-card h4,
body .notification-filter-btn,
body .notification-dropdown-card,
body .notification-dropdown-header,
body .toast {
color: var(--text-strong-light);
}
body.dark {
color: var(--text-strong-dark);
}
body.dark .page-subtitle,
body.dark .menu-page-note,
body.dark .no-data,
body.dark .notification-card p,
body.dark .notification-meta,
body.dark .modal-card p {
color: var(--text-muted-dark) !important;
}
/* Final mobile lock: Dashboard fit on phone screens */
@media (max-width: 768px) {
#stats-page .container {
padding-left: 10px !important;
padding-right: 10px !important;
}
#stats-page .page-header {
margin-bottom: 10px !important;
}
#stats-page .section-heading,
#stats-page h1 {
line-height: 1.2 !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
#stats-page .stats-controls {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
#stats-page .range-export {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
#stats-page .stats-export {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
#stats-page .stats-export .action-btn,
#stats-page .range-export .action-btn {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
#stats-page .stats-dashboard {
gap: 12px !important;
}
#stats-page .stats-section {
padding: 12px !important;
border-radius: 14px !important;
min-width: 0 !important;
}
#stats-page .targets-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
#stats-page .target-card {
min-width: 0 !important;
padding: 12px !important;
}
#stats-page .target-title,
#stats-page .target-value,
#stats-page .target-hint,
#stats-page .target-note,
#stats-page .target-sub,
#stats-page .top-team-badge,
#stats-page .tooltip,
#stats-page .audit-item,
#stats-page .trend-label {
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
#stats-page .top-badges,
#stats-page .target-tooltips {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
#stats-page .team-stats,
#stats-page .facility-stats,
#stats-page .coverage-grid,
#stats-page .alert-panel,
#stats-page .heatmap-grid,
#stats-page .forecast-list {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
#stats-page .trend-row {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
#stats-page .trend-axis {
margin-left: 0 !important;
flex-wrap: wrap !important;
}
#stats-page .mini-table,
#stats-page .rankings-table,
#stats-page .attendance-panel {
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
#stats-page .mini-table table,
#stats-page .rankings-table table,
#stats-page .attendance-table {
min-width: 560px !important;
}
#stats-page .stats-actions {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
#stats-page .stats-actions .action-btn {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
}
body.dark .mini-table th,
body.dark .mini-table td,
body.dark .rankings-table th,
body.dark .rankings-table td,
body.dark .attendance-table th,
body.dark .attendance-table td,
body.dark .lead-policy-item,
body.dark .insight-chip,
body.dark .notification-card,
body.dark .notification-card h4,
body.dark .notification-filter-btn,
body.dark .notification-dropdown-card,
body.dark .notification-dropdown-header,
body.dark .toast,
body.dark .toast * {
color: var(--text-strong-dark) !important;
}
/* ---------- Light Mode Menu Contrast Guardrail ---------- */
body:not(.dark) .sidebar-toggle,
body:not(.dark) .sidebar-sub-btn,
body:not(.dark) .sidebar-settings-btn,
body:not(.dark) .sidebar-signout-btn,
body:not(.dark) .menu-page-header h2,
body:not(.dark) .menu-page-subsection h3,
body:not(.dark) .menu-page .page-subtitle,
body:not(.dark) .menu-page-note,
body:not(.dark) .menu-page-scope,
body:not(.dark) .menu-page label,
body:not(.dark) .menu-page p,
body:not(.dark) .menu-page strong,
body:not(.dark) .menu-page .no-data,
body:not(.dark) .menu-page .admin-jfa-card,
body:not(.dark) .menu-page .admin-jfa-card .page-subtitle,
body:not(.dark) .menu-page .mini-table th,
body:not(.dark) .menu-page .mini-table td,
body:not(.dark) .menu-page .rankings-table th,
body:not(.dark) .menu-page .rankings-table td,
body:not(.dark) .menu-page input,
body:not(.dark) .menu-page select,
body:not(.dark) .menu-page textarea,
body:not(.dark) .menu-page option {
color: #0A1324 !important;
}
body:not(.dark) .menu-page .page-subtitle,
body:not(.dark) .menu-page-note,
body:not(.dark) .menu-page-scope,
body:not(.dark) .menu-page .no-data {
color: #46556f !important;
}
body.dark .mini-table td input,
body.dark .mini-table td select,
body.dark .mini-table td textarea,
body.dark .rankings-table td input,
body.dark .rankings-table td select,
body.dark .rankings-table td textarea {
color: var(--text-strong-dark) !important;
background: rgba(14, 22, 38, 0.94);
border-color: rgba(255, 255, 255, 0.18);
}
/* ===== 2026 UI Polish Layer ===== */
:root {
--polish-radius-sm: 12px;
--polish-radius-md: 16px;
--polish-radius-lg: 22px;
--polish-shadow-soft: 0 10px 26px rgba(12, 18, 32, 0.10);
--polish-shadow-hover: 0 16px 34px rgba(12, 18, 32, 0.14);
--polish-ring: 0 0 0 3px rgba(242, 106, 33, 0.24);
}
body {
text-rendering: geometricPrecision;
}
.navbar {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.hero-section {
border-radius: var(--polish-radius-lg);
box-shadow: var(--polish-shadow-soft);
overflow: hidden;
}
.hero-section::before {
opacity: 0.72;
}
.hero-glass {
border-radius: calc(var(--polish-radius-lg) - 6px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 26px rgba(0, 0, 0, 0.10);
}
.insight-card,
.summary-card,
.target-card,
.admin-jfa-card,
.hero-jfa-card,
.payment-card,
.menu-page-inner,
.modal-card,
.stats-section,
.archives-panel,
.registration-form-container,
.dbd-form-container,
.about-card,
.service-item {
border-radius: var(--polish-radius-md) !important;
box-shadow: var(--polish-shadow-soft);
}
.insight-card:hover,
.summary-card:hover,
.target-card:hover,
.admin-jfa-card:hover,
.hero-jfa-card:hover,
.payment-card:hover {
transform: translateY(-2px);
box-shadow: var(--polish-shadow-hover);
}
.action-btn,
.submit-btn,
.back-btn,
.sidebar-toggle,
.sidebar-sub-btn,
.sidebar-settings-btn,
.sidebar-signout-btn {
border-radius: var(--polish-radius-sm);
transition: transform 150ms ease, box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}
.action-btn:hover,
.submit-btn:hover,
.back-btn:hover,
.sidebar-toggle:hover,
.sidebar-sub-btn:hover,
.sidebar-settings-btn:hover,
.sidebar-signout-btn:hover {
transform: translateY(-1px);
}
.action-btn:focus-visible,
.submit-btn:focus-visible,
.back-btn:focus-visible,
.sidebar-toggle:focus-visible,
.sidebar-sub-btn:focus-visible,
.sidebar-settings-btn:focus-visible,
.sidebar-signout-btn:focus-visible,
.nav-notification-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
box-shadow: var(--polish-ring);
outline: none;
}
.menu-page-header {
border-radius: var(--polish-radius-md);
}
.menu-page-actions {
gap: 10px;
}
.notification-dropdown-card,
.notification-card {
border-radius: var(--polish-radius-sm);
}
.notification-list {
scrollbar-width: thin;
}
.flow-stepper {
border-radius: var(--polish-radius-md);
box-shadow: var(--polish-shadow-soft);
}
.flow-step .step-index {
box-shadow: 0 4px 12px rgba(18, 26, 42, 0.18);
}
.quick-actions-toggle {
border-radius: 999px;
box-shadow: 0 10px 22px rgba(16, 22, 38, 0.22);
}
.quick-actions-menu {
border-radius: var(--polish-radius-md);
box-shadow: 0 16px 38px rgba(10, 15, 28, 0.24);
}
body.dark .hero-section,
body.dark .insight-card,
body.dark .summary-card,
body.dark .target-card,
body.dark .admin-jfa-card,
body.dark .hero-jfa-card,
body.dark .payment-card,
body.dark .menu-page-inner,
body.dark .modal-card,
body.dark .stats-section,
body.dark .archives-panel {
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
}
body.dark .hero-section {
background: radial-gradient(1200px 380px at 12% -10%, rgba(45, 90, 150, 0.20), transparent 62%),
radial-gradient(1000px 460px at 92% 0%, rgba(242, 106, 33, 0.12), transparent 62%),
linear-gradient(180deg, rgba(15, 21, 32, 0.98), rgba(8, 13, 22, 0.98));
}
@media (max-width: 900px) {
.hero-content {
padding: 14px;
}
.hero-glass {
padding: 14px;
}
}
@media (max-width: 768px) {
.navbar {
border-radius: 0 0 14px 14px;
}
.flow-stepper {
padding: 8px 6px;
gap: 6px;
}
.flow-step {
min-width: 54px;
}
.flow-step .step-label {
font-size: 0.7rem;
}
.menu-page-inner {
padding: 12px;
}
.menu-page-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.menu-page-actions > .action-btn,
.menu-page-actions > .submit-btn,
.menu-page-actions > .back-btn {
min-height: 42px;
}
.quick-actions-menu {
max-width: min(90vw, 320px);
}
}
@media (max-width: 430px) {
.hero-headline {
font-size: clamp(1.24rem, 4.8vw, 1.46rem);
}
.hero-subheadline {
font-size: 0.86rem;
}
.hero-actions {
gap: 8px;
}
.action-btn,
.submit-btn,
.back-btn {
font-size: 0.84rem;
}
}
@media (prefers-reduced-motion: reduce) {
.insight-card:hover,
.summary-card:hover,
.target-card:hover,
.admin-jfa-card:hover,
.hero-jfa-card:hover,
.payment-card:hover,
.action-btn:hover,
.submit-btn:hover,
.back-btn:hover,
.sidebar-toggle:hover,
.sidebar-sub-btn:hover,
.sidebar-settings-btn:hover,
.sidebar-signout-btn:hover {
transform: none !important;
}
}
/* Admin Register Editing readability guard (light mode) */
body.admin-standalone-active:not(.dark) #adminMasterBody,
body.admin-standalone-active:not(.dark) #adminMasterBody h1,
body.admin-standalone-active:not(.dark) #adminMasterBody h2,
body.admin-standalone-active:not(.dark) #adminMasterBody h3,
body.admin-standalone-active:not(.dark) #adminMasterBody h4,
body.admin-standalone-active:not(.dark) #adminMasterBody h5,
body.admin-standalone-active:not(.dark) #adminMasterBody p,
body.admin-standalone-active:not(.dark) #adminMasterBody label,
body.admin-standalone-active:not(.dark) #adminMasterBody strong,
body.admin-standalone-active:not(.dark) #adminMasterBody span,
body.admin-standalone-active:not(.dark) #adminMasterBody th,
body.admin-standalone-active:not(.dark) #adminMasterBody td,
body.admin-standalone-active:not(.dark) #adminMasterBody .page-subtitle,
body.admin-standalone-active:not(.dark) #adminMasterBody .menu-page-note,
body.admin-standalone-active:not(.dark) #adminMasterBody .admin-jfa-card,
body.admin-standalone-active:not(.dark) #adminMasterBody .admin-jfa-card .page-subtitle,
body.admin-standalone-active:not(.dark) #adminMasterBody .admin-jfa-status {
color: #0A1324 !important;
}
body.admin-standalone-active:not(.dark) #adminMasterBody input,
body.admin-standalone-active:not(.dark) #adminMasterBody select,
body.admin-standalone-active:not(.dark) #adminMasterBody textarea,
body.admin-standalone-active:not(.dark) #adminMasterBody option {
color: #0A1324 !important;
background: #FFFFFF !important;
border-color: rgba(10, 19, 36, 0.18) !important;
}
body.admin-standalone-active:not(.dark) #adminMasterBody input::placeholder,
body.admin-standalone-active:not(.dark) #adminMasterBody textarea::placeholder {
color: #5D6C84 !important;
}
/* Hard fix: JFA Register (All) readability in light mode */
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel h1,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel h2,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel h3,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel h4,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel p,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel label,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel strong,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel span,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel th,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel td {
color: #0A1324 !important;
}
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel input,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel select,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel textarea {
color: #0A1324 !important;
background: #FFFFFF !important;
border-color: rgba(10, 19, 36, 0.2) !important;
}
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel input::placeholder,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel textarea::placeholder {
color: #5D6C84 !important;
}
/* Final guard: force readable text inside Admin > JFA Register (All) in light mode */
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel *:not(.action-btn):not(.submit-btn):not(.back-btn) {
color: #0A1324 !important;
}
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .page-subtitle {
color: #4A5870 !important;
}
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .mini-table table,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .mini-table th,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .mini-table td {
color: #0A1324 !important;
background-color: rgba(255, 255, 255, 0.98) !important;
}
/* Master file table (JFA personal details capture) explicit readability */
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .master-file-table,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .master-file-table table,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .master-file-table th,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .master-file-table td,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .master-file-table strong {
color: #0A1324 !important;
background: #FFFFFF !important;
}
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .master-file-table th[colspan="2"] {
color: #0A1324 !important;
background: rgba(11, 46, 82, 0.08) !important;
}
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .master-file-table input,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .master-file-table select,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .master-file-table textarea {
color: #0A1324 !important;
background: #FFFFFF !important;
border-color: rgba(10, 19, 36, 0.25) !important;
}
body.dark.admin-standalone-active #adminMasterBody .register-editor-panel .master-file-table,
body.dark.admin-standalone-active #adminMasterBody .register-editor-panel .master-file-table table,
body.dark.admin-standalone-active #adminMasterBody .register-editor-panel .master-file-table th,
body.dark.admin-standalone-active #adminMasterBody .register-editor-panel .master-file-table td,
body.dark.admin-standalone-active #adminMasterBody .register-editor-panel .master-file-table strong {
color: #F3F7FF !important;
background: rgba(12, 21, 36, 0.94) !important;
}
body.dark.admin-standalone-active #adminMasterBody .register-editor-panel .master-file-table th[colspan="2"] {
color: #F3F7FF !important;
background: rgba(31, 57, 92, 0.75) !important;
}
body.dark.admin-standalone-active #adminMasterBody .register-editor-panel .master-file-table input,
body.dark.admin-standalone-active #adminMasterBody .register-editor-panel .master-file-table select,
body.dark.admin-standalone-active #adminMasterBody .register-editor-panel .master-file-table textarea {
color: #F3F7FF !important;
background: rgba(18, 30, 48, 0.96) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
}
/* JFA + FA register name visibility guard (both themes) */
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .admin-jfa-card strong,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .admin-jfa-card .page-subtitle,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .mini-table tbody td,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .mini-table tbody td *,
body.admin-standalone-active:not(.dark) #adminMasterBody .register-editor-panel .mini-table tbody th {
color: #0A1324 !important;
}
body.dark.admin-standalone-active #adminMasterBody .register-editor-panel .admin-jfa-card strong,
body.dark.admin-standalone-active #adminMasterBody .register-editor-panel .admin-jfa-card .page-subtitle,
body.dark.admin-standalone-active #adminMasterBody .register-editor-panel .mini-table tbody td,
body.dark.admin-standalone-active #adminMasterBody .register-editor-panel .mini-table tbody td *,
body.dark.admin-standalone-active #adminMasterBody .register-editor-panel .mini-table tbody th {
color: #F3F7FF !important;
}
/* Mobile admin + settings fit hardening */
@media (max-width: 768px) {
#settingsPage .menu-page-inner,
#adminMasterBody .menu-page-inner,
#admin-standalone-page .menu-page-inner {
padding-inline: 10px;
}
#settingsPage .menu-page-actions,
#adminMasterBody .menu-page-actions {
grid-template-columns: 1fr;
gap: 8px;
}
#settingsPage .menu-page-actions .action-btn,
#settingsPage .menu-page-actions .submit-btn,
#adminMasterBody .menu-page-actions .action-btn,
#adminMasterBody .menu-page-actions .submit-btn {
width: 100%;
min-height: 42px;
font-size: 0.9rem;
}
.mini-table {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mini-table table {
min-width: 720px;
}
}
/* Admin Master Logger readability fix (light mode) */
body:not(.dark) #adminMasterLogger,
body:not(.dark) #adminMasterLogger h1,
body:not(.dark) #adminMasterLogger h2,
body:not(.dark) #adminMasterLogger h3,
body:not(.dark) #adminMasterLogger h4,
body:not(.dark) #adminMasterLogger h5,
body:not(.dark) #adminMasterLogger p,
body:not(.dark) #adminMasterLogger label,
body:not(.dark) #adminMasterLogger strong,
body:not(.dark) #adminMasterLogger span,
body:not(.dark) #adminMasterLogger th,
body:not(.dark) #adminMasterLogger td,
body:not(.dark) #adminStandaloneMasterLogger,
body:not(.dark) #adminStandaloneMasterLogger h1,
body:not(.dark) #adminStandaloneMasterLogger h2,
body:not(.dark) #adminStandaloneMasterLogger h3,
body:not(.dark) #adminStandaloneMasterLogger h4,
body:not(.dark) #adminStandaloneMasterLogger h5,
body:not(.dark) #adminStandaloneMasterLogger p,
body:not(.dark) #adminStandaloneMasterLogger label,
body:not(.dark) #adminStandaloneMasterLogger strong,
body:not(.dark) #adminStandaloneMasterLogger span,
body:not(.dark) #adminStandaloneMasterLogger th,
body:not(.dark) #adminStandaloneMasterLogger td {
color: #0A1324 !important;
}
body:not(.dark) #adminMasterLogger .page-subtitle,
body:not(.dark) #adminStandaloneMasterLogger .page-subtitle,
body:not(.dark) #adminMasterLogger .menu-page-note,
body:not(.dark) #adminStandaloneMasterLogger .menu-page-note {
color: #4A5870 !important;
}
body:not(.dark) #adminMasterLogger .mini-table,
body:not(.dark) #adminStandaloneMasterLogger .mini-table {
background: rgba(255, 255, 255, 0.96) !important;
}
/* Auth remember row */
.auth-remember-row {
margin: 2px 0 0;
}
.auth-remember-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.86rem;
color: var(--text-secondary);
}
/* User badge role tones */
#appUserBadge[data-role="ADMIN"] {
background: rgba(202, 55, 80, 0.14);
border-color: rgba(202, 55, 80, 0.42);
color: #7B1326;
}
#appUserBadge[data-role="TEAM"] {
background: rgba(11, 121, 93, 0.14);
border-color: rgba(11, 121, 93, 0.34);
color: #0C5A46;
}
body.dark #appUserBadge[data-role="ADMIN"] {
color: #FFD6DC;
}
body.dark #appUserBadge[data-role="TEAM"] {
color: #C8F7EB;
}
/* Settings session skeleton */
.skeleton-grid {
display: grid;
gap: 8px;
}
/* Mobile bottom nav */
.mobile-bottom-nav {
display: none;
}
@media (max-width: 768px) {
.mobile-bottom-nav {
position: fixed;
left: 10px;
right: 10px;
bottom: max(10px, env(safe-area-inset-bottom));
z-index: 910;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
padding: 6px;
border-radius: 14px;
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(10, 28, 61, 0.16);
box-shadow: 0 12px 30px rgba(10, 28, 61, 0.14);
}
body.dark .mobile-bottom-nav {
background: rgba(12, 21, 36, 0.92);
border-color: rgba(231, 243, 255, 0.14);
}
.mobile-nav-btn {
min-height: 34px;
border-radius: 10px;
border: 1px solid rgba(10, 28, 61, 0.14);
background: rgba(255, 255, 255, 0.86);
color: var(--text-primary);
font-weight: 700;
font-size: 0.82rem;
}
body.dark .mobile-nav-btn {
background: rgba(21, 35, 58, 0.92);
border-color: rgba(231, 243, 255, 0.16);
color: #F5FAFF;
}
.mobile-nav-btn.is-active {
background: linear-gradient(140deg, #123B67, #1B5D95);
border-color: transparent;
color: #FFFFFF;
}
.menu-page-header {
padding: 10px 10px 8px;
gap: 8px;
}
.menu-page-header h2 {
font-size: 1.02rem;
line-height: 1.2;
}
.menu-page .menu-header-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
width: 100%;
}
.menu-page .menu-header-actions .action-btn {
min-height: 34px;
font-size: 0.78rem;
padding: 0 8px;
}
.menu-page-inner {
padding-bottom: 108px;
}
.quick-actions {
bottom: max(10px, env(safe-area-inset-bottom));
}
.toast-container {
bottom: calc(max(10px, env(safe-area-inset-bottom)) + 122px);
}
}
/* Appointments + Leads explicit contrast guardrail */
body:not(.dark) #leadsPage .menu-page-note,
body:not(.dark) #appointmentsPage .menu-page-note {
color: #1E2A3F !important;
background: rgba(255, 255, 255, 0.94) !important;
border-color: rgba(10, 19, 36, 0.16) !important;
}
body.dark #leadsPage .menu-page-note,
body.dark #appointmentsPage .menu-page-note {
color: #E3EEFF !important;
background: rgba(14, 24, 42, 0.94) !important;
border-color: rgba(255, 255, 255, 0.18) !important;
}
body:not(.dark) #leadsPage .lead-panel,
body:not(.dark) #leadsPage .lead-section {
color: #0A1324 !important;
}
body.dark #leadsPage .lead-panel,
body.dark #leadsPage .lead-section {
color: #F3F8FF !important;
}
body:not(.dark) #leadsPage label,
body:not(.dark) #leadsPage p,
body:not(.dark) #leadsPage .page-subtitle,
body:not(.dark) #leadsPage .lead-section-title,
body:not(.dark) #leadsPage .lead-policy-item,
body:not(.dark) #leadsPage .lead-tc-box,
body:not(.dark) #leadsPage input,
body:not(.dark) #leadsPage select,
body:not(.dark) #leadsPage textarea {
color: #0A1324 !important;
}
body.dark #leadsPage label,
body.dark #leadsPage p,
body.dark #leadsPage .page-subtitle,
body.dark #leadsPage .lead-section-title,
body.dark #leadsPage .lead-policy-item,
body.dark #leadsPage .lead-tc-box,
body.dark #leadsPage input,
body.dark #leadsPage select,
body.dark #leadsPage textarea {
color: #F3F8FF !important;
}
body:not(.dark) #leadsPage input::placeholder,
body:not(.dark) #leadsPage textarea::placeholder {
color: #5D6A80;
opacity: 1;
}
body.dark #leadsPage input::placeholder,
body.dark #leadsPage textarea::placeholder {
color: #B7C9E3;
opacity: 1;
}
/* QA hardening: modal action fit + ben/team contrast */
@media (max-width: 560px) {
#team-auth-modal .modal-actions,
#forgot-password-modal .modal-actions,
#reset-password-modal .modal-actions,
#admin-auth-modal .modal-actions,
#admin-menu-auth-modal .modal-actions {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
#team-auth-modal .modal-actions > .action-btn,
#team-auth-modal .modal-actions > .submit-btn,
#forgot-password-modal .modal-actions > .action-btn,
#forgot-password-modal .modal-actions > .submit-btn,
#reset-password-modal .modal-actions > .action-btn,
#reset-password-modal .modal-actions > .submit-btn,
#admin-auth-modal .modal-actions > .action-btn,
#admin-auth-modal .modal-actions > .submit-btn,
#admin-menu-auth-modal .modal-actions > .action-btn,
#admin-menu-auth-modal .modal-actions > .submit-btn {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 40px !important;
font-size: 0.86rem !important;
white-space: normal !important;
}
}
body.dark #benSystemPage .ben-system-secondary-note,
body.dark #benSystemPage .ben-system-section-title,
body.dark #benSystemPage .ben-facility-card .page-subtitle,
body.dark #benSystemPage .ben-facility-card .mini-table th,
body.dark #benSystemPage .ben-facility-card .mini-table td,
body.dark #benSystemPage .ben-facility-card .mini-table td * {
color: #EAF2FF !important;
}
body.dark #benSystemPage .ben-system-secondary-note,
body.dark #benSystemPage .ben-system-section-title {
background: rgba(17, 30, 50, 0.92) !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
}
body:not(.dark) #benSystemPage .ben-system-secondary-note,
body:not(.dark) #benSystemPage .ben-system-section-title,
body:not(.dark) .team-portal-center-note {
color: #0D1A2E !important;
}
body.dark .team-portal-center-note {
color: #EAF2FF !important;
background: rgba(17, 30, 50, 0.92) !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
}
/* Dedicated export reason window */
#export-reason-modal {
z-index: 2600 !important;
}
.export-reason-card {
max-width: 520px !important;
border-radius: 16px !important;
border: 1px solid rgba(13, 33, 60, 0.16) !important;
box-shadow: 0 24px 56px rgba(10, 25, 45, 0.24) !important;
}
body.dark .export-reason-card {
border-color: rgba(211, 229, 255, 0.2) !important;
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.48) !important;
}
/* Final override: Facility Directory mobile/tablet readability everywhere */
@media (max-width: 1024px) {
.facility-directory-table.mobile-stack-table {
width: 100% !important;
min-width: 0 !important;
border-collapse: separate !important;
border-spacing: 0 10px !important;
}
.facility-directory-table.mobile-stack-table thead {
display: none !important;
}
.facility-directory-table.mobile-stack-table tbody,
.facility-directory-table.mobile-stack-table tr,
.facility-directory-table.mobile-stack-table td {
display: block !important;
width: 100% !important;
}
.facility-directory-table.mobile-stack-table tr {
background: rgba(255, 255, 255, 0.94) !important;
border: 1px solid rgba(10, 19, 36, 0.12) !important;
border-radius: 14px !important;
padding: 10px !important;
margin-bottom: 0 !important;
}
body.dark .facility-directory-table.mobile-stack-table tr {
background: rgba(12, 26, 44, 0.94) !important;
border-color: rgba(214, 231, 255, 0.2) !important;
}
.facility-directory-table.mobile-stack-table td {
padding: 6px 0 !important;
border: 0 !important;
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
color: inherit !important;
}
.facility-directory-table.mobile-stack-table td::before {
content: attr(data-label);
display: block;
font-size: 0.72rem;
font-weight: 700;
margin-bottom: 4px;
color: #2b486b;
}
body.dark .facility-directory-table.mobile-stack-table td::before {
color: #b8d6fb;
}
.facility-directory-table.mobile-stack-table td input {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
font-size: 0.86rem !important;
line-height: 1.3 !important;
}
}
body:not(.dark) #appointmentsPage,
body:not(.dark) #appointmentsPage .page-subtitle,
body:not(.dark) #appointmentsPage label,
body:not(.dark) #appointmentsPage .mini-table th,
body:not(.dark) #appointmentsPage .mini-table td {
color: #0A1324 !important;
}
body.dark #appointmentsPage,
body.dark #appointmentsPage .page-subtitle,
body.dark #appointmentsPage label,
body.dark #appointmentsPage .mini-table th,
body.dark #appointmentsPage .mini-table td {
color: #F3F8FF !important;
}
/* ---------- Final UI Polish Layer (Visual only) ---------- */
:root {
--ui-card-radius: 18px;
--ui-control-radius: 12px;
--ui-shadow-soft: 0 12px 28px rgba(10, 19, 36, 0.10);
--ui-shadow-hover: 0 16px 34px rgba(10, 19, 36, 0.14);
}
.menu-page-inner,
.summary-card,
.target-card,
.insight-card,
.lead-panel,
.lead-section,
.mini-table,
.notification-dropdown-card,
.modal-card {
border-radius: var(--ui-card-radius) !important;
}
.action-btn,
.submit-btn,
.back-btn,
.sidebar-toggle,
.sidebar-sub-btn,
.sidebar-settings-btn,
.sidebar-signout-btn,
.form-group input,
.form-group select,
.form-group textarea,
.learning-search input {
border-radius: var(--ui-control-radius) !important;
}
.summary-card,
.target-card,
.insight-card,
.lead-panel,
.menu-page-inner {
box-shadow: var(--ui-shadow-soft) !important;
}
.summary-card:hover,
.target-card:hover,
.insight-card:hover,
.lead-panel:hover {
box-shadow: var(--ui-shadow-hover) !important;
}
.menu-page-header h2,
.page-header h1 {
letter-spacing: 0.01em;
}
.page-subtitle {
line-height: 1.45;
}
.mini-table th {
font-weight: 700;
letter-spacing: 0.01em;
}
.mini-table td {
line-height: 1.4;
}
.menu-page-note {
box-shadow: inset 0 0 0 1px rgba(10, 19, 36, 0.04);
}
body.dark .menu-page-note {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.form-group input,
.form-group select,
.form-group textarea {
transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
box-shadow: 0 0 0 3px rgba(23, 162, 164, 0.14) !important;
}
@media (max-width: 768px) {
.page-header,
.menu-page-header {
gap: 8px;
}
.page-header h1 {
font-size: 1.28rem;
}
.menu-page-inner {
padding: 14px;
}
.insight-card,
.summary-card,
.target-card,
.lead-panel {
padding: 12px;
}
.mini-table th,
.mini-table td {
font-size: 0.86rem;
padding: 7px 8px;
}
}
/* ---------- Matla Signature Theme Pass ---------- */
:root {
--matla-deep: #08233F;
--matla-deep-2: #0D355D;
--matla-cyan: #19B4B5;
--matla-orange: #F26A21;
--matla-surface-glow: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.9));
}
body {
background:
radial-gradient(760px 520px at 6% -4%, rgba(25, 180, 181, 0.10), rgba(255, 255, 255, 0)),
radial-gradient(840px 520px at 94% 0%, rgba(242, 106, 33, 0.10), rgba(255, 255, 255, 0)),
var(--bg);
}
.navbar {
border-bottom: 1px solid rgba(8, 35, 63, 0.12);
background: linear-gradient(125deg, rgba(255, 255, 255, 0.92), rgba(245, 250, 255, 0.86));
backdrop-filter: blur(10px) saturate(160%);
}
.summary-card,
.target-card,
.insight-card,
.lead-panel,
.menu-page-inner {
background: var(--matla-surface-glow) !important;
border: 1px solid rgba(8, 35, 63, 0.12) !important;
}
.summary-card::before,
.target-card::before,
.insight-card::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(120deg, rgba(25, 180, 181, 0.06), rgba(255, 255, 255, 0) 45%),
linear-gradient(300deg, rgba(242, 106, 33, 0.05), rgba(255, 255, 255, 0) 48%);
pointer-events: none;
border-radius: inherit;
}
.action-btn {
border: 1px solid rgba(8, 35, 63, 0.16) !important;
}
.action-btn:not(.secondary) {
background: linear-gradient(135deg, var(--matla-deep), var(--matla-deep-2)) !important;
color: #F8FCFF !important;
}
.action-btn.secondary {
background: linear-gradient(135deg, rgba(25, 180, 181, 0.10), rgba(242, 106, 33, 0.12)) !important;
border-color: rgba(8, 35, 63, 0.16) !important;
}
.sidebar-toggle.is-active,
.sidebar-settings-btn.is-active {
background: linear-gradient(135deg, rgba(8, 35, 63, 0.95), rgba(13, 53, 93, 0.9)) !important;
color: #F8FCFF !important;
}
.menu-page-header {
background: linear-gradient(120deg, rgba(255, 255, 255, 0.92), rgba(246, 251, 255, 0.85));
}
.menu-page-note {
border-left: 3px solid var(--matla-cyan);
}
.mini-table th {
background: linear-gradient(125deg, rgba(236, 245, 255, 0.98), rgba(247, 251, 255, 0.98));
color: #123A64 !important;
}
.mini-table tr:hover td {
background: linear-gradient(120deg, rgba(25, 180, 181, 0.08), rgba(242, 106, 33, 0.07)) !important;
}
.status-pill {
border-color: rgba(8, 35, 63, 0.24) !important;
}
body.dark {
background:
radial-gradient(760px 520px at 8% -6%, rgba(25, 180, 181, 0.16), rgba(0, 0, 0, 0)),
radial-gradient(840px 520px at 94% 0%, rgba(242, 106, 33, 0.14), rgba(0, 0, 0, 0)),
#070F1B;
}
body.dark .navbar {
border-bottom-color: rgba(214, 231, 255, 0.12);
background: linear-gradient(125deg, rgba(9, 20, 35, 0.92), rgba(12, 28, 49, 0.88));
}
body.dark .summary-card,
body.dark .target-card,
body.dark .insight-card,
body.dark .lead-panel,
body.dark .menu-page-inner {
background: linear-gradient(145deg, rgba(10, 21, 37, 0.94), rgba(12, 27, 47, 0.9)) !important;
border-color: rgba(214, 231, 255, 0.14) !important;
}
body.dark .action-btn.secondary {
background: linear-gradient(135deg, rgba(25, 180, 181, 0.16), rgba(242, 106, 33, 0.16)) !important;
color: #EAF4FF !important;
}
body.dark .mini-table th {
background: linear-gradient(125deg, rgba(14, 32, 55, 0.96), rgba(17, 37, 63, 0.94));
color: #DDEBFF !important;
}
@media (max-width: 768px) {
.navbar {
backdrop-filter: blur(8px) saturate(145%);
}
.summary-card,
.target-card,
.insight-card {
border-width: 1px;
}
}
/* ---------- Enterprise polish: visibility + mobile fit ---------- */
body:not(.dark) .menu-page h2,
body:not(.dark) .menu-page h3,
body:not(.dark) .menu-page h4,
body:not(.dark) .menu-page .page-subtitle,
body:not(.dark) .menu-page .menu-page-note,
body:not(.dark) .menu-page .mini-table td,
body:not(.dark) .menu-page .mini-table td *,
body:not(.dark) .menu-page .mini-table th {
color: #102743 !important;
}
body.dark .menu-page h2,
body.dark .menu-page h3,
body.dark .menu-page h4,
body.dark .menu-page .page-subtitle,
body.dark .menu-page .menu-page-note,
body.dark .menu-page .mini-table td,
body.dark .menu-page .mini-table td *,
body.dark .menu-page .mini-table th {
color: #E6EEF8 !important;
}
body.dark .menu-page .mini-table table,
body:not(.dark) .menu-page .mini-table table {
border-color: rgba(17, 39, 67, 0.24) !important;
}
.menu-page .menu-page-actions .action-btn,
.menu-page .menu-page-actions .submit-btn,
.menu-page .menu-page-actions .back-btn {
min-height: 40px;
}
@media (max-width: 768px) {
.menu-page .menu-page-actions {
gap: 8px;
}
.menu-page .menu-page-actions .action-btn,
.menu-page .menu-page-actions .submit-btn,
.menu-page .menu-page-actions .back-btn {
min-height: 36px;
padding: 8px 10px;
font-size: 0.84rem;
line-height: 1.25;
white-space: normal;
text-align: center;
justify-content: center;
}
.modal-actions {
gap: 8px;
}
.modal-actions > .action-btn,
.modal-actions > .submit-btn {
min-height: 36px;
padding: 8px 10px;
font-size: 0.84rem;
flex: 1 1 0;
min-width: 0;
}
#team-auth-modal .modal-actions > .action-btn,
#team-auth-modal .modal-actions > .submit-btn,
#forgot-password-modal .modal-actions > .action-btn,
#forgot-password-modal .modal-actions > .submit-btn,
#reset-password-modal .modal-actions > .action-btn,
#reset-password-modal .modal-actions > .submit-btn {
width: 100%;
}
}
/* ---------- Final visibility + mobile-fit lock (latest pass) ---------- */
body.dark #benSystemPage .ben-system-primary-note,
body.dark #benSystemPage .ben-system-secondary-note,
body.dark #benSystemPage .ben-system-section-title {
background: rgba(12, 27, 45, 0.96) !important;
color: #e9f2ff !important;
border-color: rgba(166, 198, 232, 0.34) !important;
}
body.dark #benSystemPage .ben-facility-card,
body.dark #benSystemPage .ben-facility-card h4,
body.dark #benSystemPage .ben-facility-card .page-subtitle,
body.dark #benSystemPage .ben-facility-card .mini-table th,
body.dark #benSystemPage .ben-facility-card .mini-table td,
body.dark #benSystemPage .ben-facility-card .mini-table td * {
color: #eaf3ff !important;
}
body:not(.dark) #benSystemPage .ben-facility-card h4,
body:not(.dark) #benSystemPage .ben-facility-card .page-subtitle,
body:not(.dark) #benSystemPage .ben-facility-card .mini-table th,
body:not(.dark) #benSystemPage .ben-facility-card .mini-table td,
body:not(.dark) #benSystemPage .ben-facility-card .mini-table td * {
color: #123457 !important;
}
body.dark #adminPage .team-portal-center-note,
body.dark #teamDetailPage .team-portal-center-note {
background: #ffffff !important;
color: #102743 !important;
}
body.dark.admin-standalone-active #adminMasterBody .mini-table tbody td,
body.dark.admin-standalone-active #adminMasterBody .mini-table tbody td *,
body.dark.admin-standalone-active #adminMasterBody .mini-table tbody th,
body.dark.admin-standalone-active #adminMasterBody .menu-page-note,
body.dark.admin-standalone-active #adminMasterBody h4 {
color: #e8f1ff !important;
}
/* User account polish */
:root {
--type-title: clamp(1.05rem, 1vw + 0.85rem, 1.35rem);
--type-body: clamp(0.92rem, 0.25vw + 0.82rem, 1rem);
--type-meta: clamp(0.75rem, 0.15vw + 0.68rem, 0.84rem);
}
.menu-page-note,
.page-subtitle {
font-size: var(--type-body);
}
.shortcut-pill {
font-size: var(--type-meta);
}
.hero-performance-ring-wrap {
display: grid;
grid-template-columns: 92px 1fr;
gap: 10px;
align-items: center;
margin: 10px 0 8px;
}
.hero-performance-ring {
--ring-pct: 0%;
width: 92px;
height: 92px;
border-radius: 50%;
background: conic-gradient(#2ec27e var(--ring-pct), rgba(255, 255, 255, 0.2) var(--ring-pct));
display: grid;
place-items: center;
}
.hero-performance-ring-inner {
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(11, 46, 82, 0.92);
display: grid;
place-items: center;
text-align: center;
color: #fff;
}
.hero-performance-ring-inner strong {
font-size: 1rem;
line-height: 1;
}
.hero-performance-ring-inner span {
font-size: 0.68rem;
opacity: 0.9;
}
.hero-performance-ring-legend {
display: grid;
gap: 3px;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.92);
}
.hero-focus-card {
margin: 6px 0 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 9px 12px;
background: rgba(255, 255, 255, 0.08);
}
.hero-focus-title {
font-weight: 700;
font-size: 0.86rem;
margin-bottom: 5px;
}
#heroFocusList {
margin: 0;
padding-left: 16px;
display: grid;
gap: 2px;
font-size: 0.78rem;
}
#heroFocusList li.is-done {
color: #9df8be;
}
.lead-quality-preview {
margin: 10px 0 12px;
border: 1px solid rgba(11, 46, 82, 0.2);
border-radius: 12px;
padding: 10px;
background: rgba(11, 46, 82, 0.05);
}
.lead-quality-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
font-size: 0.86rem;
}
.lead-quality-issues {
margin-top: 6px;
font-size: 0.78rem;
line-height: 1.4;
}
.hero-progress-fill.quality-low {
background: linear-gradient(90deg, #d94848, #e97a7a);
}
.hero-progress-fill.quality-good {
background: linear-gradient(90deg, #d4a01f, #f3c14f);
}
.hero-progress-fill.quality-excellent {
background: linear-gradient(90deg, #2aaf6f, #42d08b);
}
.field-tip {
cursor: help;
opacity: 0.75;
font-size: 0.78rem;
}
.settings-profile-mini .settings-profile-row {
display: grid;
grid-template-columns: 44px 1fr;
gap: 12px;
align-items: center;
}
.settings-profile-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(135deg, #0b2e52, #1f4e81);
color: #fff;
font-weight: 800;
}
.appointments-timeline {
margin-bottom: 12px;
border: 1px solid rgba(11, 46, 82, 0.16);
border-radius: 12px;
padding: 10px;
background: rgba(11, 46, 82, 0.03);
}
.appointments-timeline h5 {
margin: 0 0 8px;
}
.lead-quick-filters,
.payments-quick-filters {
margin-top: 6px;
}
.mobile-action-bar {
display: none;
}
.mobile-dock {
display: none;
}
.mobile-action-sheet-overlay {
display: none;
}
.mobile-today-strip {
display: none;
}
.mobile-sticky-cta {
display: none;
}
.mobile-only {
display: none !important;
}
.sync-retry-btn {
min-height: 30px;
padding: 4px 10px;
}
.table-toolkit {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
flex-wrap: wrap;
}
.table-toolkit-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
font-weight: 700;
color: var(--muted);
}
.table-toolkit-input {
border: 1px solid rgba(10, 19, 36, 0.18);
border-radius: 10px;
padding: 6px 10px;
min-width: 220px;
background: rgba(255, 255, 255, 0.92);
color: var(--ink);
}
.table-toolkit-count {
margin-left: auto;
font-size: 0.78rem;
color: var(--muted);
font-weight: 700;
}
body.dark .table-toolkit-input {
background: rgba(15, 25, 42, 0.92);
border-color: rgba(255, 255, 255, 0.24);
color: #e8f0ff;
}
body.dark .table-toolkit-label,
body.dark .table-toolkit-count {
color: #b8c7df;
}
.admin-activity-toolbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
/* Better visibility in both themes for key areas */
body:not(.dark) #appointmentsPage .menu-page-note,
body:not(.dark) #leadsPage .menu-page-note,
body:not(.dark) #paymentsPage .menu-page-note {
color: #1f2c3f;
}
body.dark #appointmentsPage .menu-page-note,
body.dark #leadsPage .menu-page-note,
body.dark #paymentsPage .menu-page-note {
color: #e9f1ff;
}
/* Subtle micro interactions */
button,
.action-btn,
.jfa-register-btn,
.sidebar-toggle,
.sidebar-sub-btn,
.sidebar-settings-btn {
transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.18s ease;
}
button:active,
.action-btn:active,
.jfa-register-btn:active,
.sidebar-toggle:active,
.sidebar-sub-btn:active,
.sidebar-settings-btn:active {
transform: translateY(1px) scale(0.99);
}
button:focus-visible,
.action-btn:focus-visible,
.jfa-register-btn:focus-visible,
.sidebar-toggle:focus-visible,
.sidebar-sub-btn:focus-visible,
.sidebar-settings-btn:focus-visible {
outline: 2px solid #f26a21;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media (max-width: 768px) {
.table-toolkit {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
}
.table-toolkit-label {
grid-column: 1 / -1;
width: 100%;
justify-content: space-between;
}
.table-toolkit-input {
min-width: 0;
width: 100%;
}
.table-toolkit-count {
margin-left: 0;
grid-column: 1 / -1;
}
.shortcut-pill {
display: none;
}
.menu-page-inner {
max-height: calc(100dvh - 56px);
overflow: auto;
}
.menu-page-header {
position: sticky;
top: 0;
z-index: 5;
background: inherit;
padding-bottom: 8px;
}
.hero-performance-ring-wrap {
grid-template-columns: 78px 1fr;
}
.hero-performance-ring {
width: 78px;
height: 78px;
}
.hero-performance-ring-inner {
width: 60px;
height: 60px;
}
.mobile-action-bar {
position: fixed;
left: 10px;
right: 10px;
bottom: calc(10px + env(safe-area-inset-bottom));
z-index: 1400;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
background: rgba(11, 46, 82, 0.92);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 8px;
}
.mobile-action-bar button {
min-height: 38px;
border: 0;
border-radius: 9px;
background: rgba(255, 255, 255, 0.16);
color: #fff;
font-weight: 700;
}
.mobile-action-bar {
display: none !important;
}
.mobile-dock {
position: fixed;
left: 10px;
right: 10px;
bottom: calc(10px + env(safe-area-inset-bottom));
z-index: 1500;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
background: linear-gradient(145deg, rgba(7, 25, 47, 0.94), rgba(11, 46, 82, 0.9));
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 16px;
padding: 8px;
box-shadow: 0 16px 32px rgba(6, 18, 36, 0.34);
backdrop-filter: blur(10px);
}
.mobile-dock-btn {
min-height: 44px;
border: 0;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
white-space: nowrap;
background: rgba(255, 255, 255, 0.12);
color: #f8fbff;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.18s ease;
}
.mobile-dock-btn:active {
transform: scale(0.97);
}
.mobile-dock-btn.is-primary,
.mobile-dock-btn.is-active {
background: linear-gradient(140deg, rgba(242, 106, 33, 0.96), rgba(224, 90, 17, 0.94));
color: #fff;
box-shadow: 0 8px 18px rgba(242, 106, 33, 0.34);
}
body.mobile-focus .mobile-dock-btn[data-mobile-action="focus"] {
background: rgba(34, 197, 94, 0.32);
box-shadow: inset 0 0 0 1px rgba(134, 239, 172, 0.65);
}
.mobile-action-sheet-overlay.is-open {
position: fixed;
inset: 0;
z-index: 1700;
display: flex;
align-items: flex-end;
justify-content: center;
background: rgba(3, 10, 20, 0.44);
backdrop-filter: blur(4px);
}
.mobile-action-sheet {
width: 100%;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
background: #f7fbff;
border-top: 1px solid rgba(10, 19, 36, 0.12);
box-shadow: 0 -10px 24px rgba(8, 21, 40, 0.22);
padding: 12px 12px calc(14px + env(safe-area-inset-bottom));
max-height: min(76vh, 620px);
overflow-y: auto;
}
body.dark .mobile-action-sheet {
background: #0f1b2e;
border-top-color: rgba(255, 255, 255, 0.14);
}
.mobile-action-sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
}
.mobile-action-sheet-head h3 {
margin: 0;
font-size: 1rem;
}
.mobile-action-sheet-body {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.mobile-sheet-btn {
min-height: 46px;
border-radius: 12px;
border: 1px solid rgba(10, 19, 36, 0.12);
background: rgba(255, 255, 255, 0.92);
color: #102447;
font-weight: 700;
font-size: 0.83rem;
text-align: left;
padding: 9px 10px;
}
body.dark .mobile-sheet-btn {
background: rgba(15, 29, 50, 0.94);
border-color: rgba(255, 255, 255, 0.18);
color: #e6efff;
}
.quick-actions {
bottom: calc(78px + env(safe-area-inset-bottom));
}
.mobile-today-strip {
position: sticky;
top: 48px;
z-index: 1002;
margin: 6px 10px 2px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
.mobile-today-pill {
min-height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
color: #eaf2ff;
background: rgba(11, 46, 82, 0.9);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
}
body.dark .mobile-today-pill {
color: #f6fbff;
background: rgba(6, 18, 34, 0.92);
border-color: rgba(255, 255, 255, 0.18);
}
.mobile-sticky-cta {
position: fixed;
left: 10px;
right: 10px;
bottom: calc(76px + env(safe-area-inset-bottom));
z-index: 1490;
display: block;
pointer-events: none;
}
.mobile-sticky-cta .action-btn {
width: 100%;
min-height: 44px;
border-radius: 12px;
pointer-events: auto;
box-shadow: 0 14px 26px rgba(6, 18, 36, 0.28);
}
.lead-quick-filters,
.payments-quick-filters {
position: sticky;
top: 92px;
z-index: 5;
padding: 6px 4px;
border-radius: 10px;
background: rgba(243, 246, 251, 0.88);
backdrop-filter: blur(6px);
}
body.dark .lead-quick-filters,
body.dark .payments-quick-filters {
background: rgba(8, 16, 31, 0.92);
}
.mobile-only {
display: block !important;
}
.mobile-lead-cards {
display: grid;
gap: 8px;
margin-top: 8px;
}
.mobile-lead-card {
border-radius: 12px;
padding: 10px;
border: 1px solid rgba(10, 19, 36, 0.12);
background: rgba(255, 255, 255, 0.9);
}
body.dark .mobile-lead-card {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(12, 21, 39, 0.92);
color: #edf4ff;
}
.mobile-lead-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.mobile-lead-card-meta {
font-size: 0.78rem;
color: var(--muted);
}
body.dark .mobile-lead-card-meta {
color: #b9c8df;
}
.mobile-skeleton-grid {
display: grid;
gap: 10px;
}
.mobile-skeleton-card {
height: 84px;
border-radius: 12px;
}
.action-btn,
.sidebar-toggle,
.sidebar-sub-btn,
.sidebar-settings-btn,
.sticky-mini-btn,
.mobile-sheet-btn {
min-height: 44px;
}
.menu-page-note,
.page-subtitle {
color: #21344f;
}
body.dark .menu-page-note,
body.dark .page-subtitle {
color: #d9e7ff;
}
.sync-retry-btn {
display: none;
}
}
body:not(.dark).admin-standalone-active #adminMasterBody .mini-table tbody td,
body:not(.dark).admin-standalone-active #adminMasterBody .mini-table tbody td *,
body:not(.dark).admin-standalone-active #adminMasterBody .mini-table tbody th,
body:not(.dark).admin-standalone-active #adminMasterBody .menu-page-note,
body:not(.dark).admin-standalone-active #adminMasterBody h4 {
color: #0f2f52 !important;
}
/* Keep "Open Leads" button centered and compact on mobile */
@media (max-width: 768px) {
body.app-variant-user .mobile-dock {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hero-secondary-cta {
min-width: 108px !important;
padding: 8px 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.hero-secondary-cta span,
.hero-secondary-cta {
text-align: center !important;
}
.modal-content .modal-actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.modal-content .modal-actions .action-btn,
.modal-content .modal-actions .submit-btn {
flex: 1 1 calc(50% - 4px) !important;
min-width: 0 !important;
width: auto !important;
min-height: 36px !important;
padding: 8px 10px !important;
font-size: 0.83rem !important;
}
#team-auth-modal .modal-content .modal-actions .action-btn,
#team-auth-modal .modal-content .modal-actions .submit-btn,
#forgot-password-modal .modal-content .modal-actions .action-btn,
#forgot-password-modal .modal-content .modal-actions .submit-btn,
#reset-password-modal .modal-content .modal-actions .action-btn,
#reset-password-modal .modal-content .modal-actions .submit-btn {
flex: 1 1 100% !important;
width: 100% !important;
}
}
/* Notification panel should never clash with quick actions */
@media (max-width: 768px) {
.notification-dropdown {
z-index: 2300 !important;
max-height: min(72vh, 560px) !important;
}
}
/* Admin mobile button text alignment fix (Edit Facilities and related tabs) */
@media (max-width: 768px) {
#admin-standalone-page .menu-page-actions .action-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
white-space: normal !important;
line-height: 1.2 !important;
}
#admin-standalone-page .menu-page-actions .action-btn::after {
display: none !important;
}
/* Admin -> Edit Facilities table mobile stacking */
#adminMasterBody .admin-facility-editor-table-wrap {
overflow: visible !important;
}
#adminMasterBody .facility-editor-table.mobile-stack-table {
width: 100% !important;
min-width: 0 !important;
border-collapse: separate !important;
border-spacing: 0 10px !important;
}
#adminMasterBody .admin-facility-editor-table-wrap {
max-height: none !important;
overflow: visible !important;
}
#adminMasterBody .facility-editor-table.mobile-stack-table thead {
display: none !important;
}
#adminMasterBody .facility-editor-table.mobile-stack-table tbody {
display: grid !important;
gap: 10px !important;
}
#adminMasterBody .facility-editor-table.mobile-stack-table tbody,
#adminMasterBody .facility-editor-table.mobile-stack-table tr,
#adminMasterBody .facility-editor-table.mobile-stack-table td {
display: block !important;
width: 100% !important;
}
#adminMasterBody .facility-editor-table.mobile-stack-table tr {
background: rgba(255, 255, 255, 0.92) !important;
border: 1px solid rgba(10, 19, 36, 0.12) !important;
border-radius: 14px !important;
padding: 10px !important;
margin-bottom: 0 !important;
}
body.dark #adminMasterBody .facility-editor-table.mobile-stack-table tr {
background: rgba(12, 26, 44, 0.92) !important;
border-color: rgba(214, 231, 255, 0.2) !important;
}
#adminMasterBody .facility-editor-table.mobile-stack-table td {
padding: 6px 0 !important;
border: 0 !important;
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
#adminMasterBody .facility-editor-table.mobile-stack-table td::before {
content: attr(data-label);
display: block;
font-size: 0.72rem;
font-weight: 700;
margin-bottom: 4px;
color: #2b486b;
}
body.dark #adminMasterBody .facility-editor-table.mobile-stack-table td::before {
color: #b8d6fb;
}
#adminMasterBody .facility-editor-table.mobile-stack-table td input {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
font-size: 0.84rem !important;
line-height: 1.25 !important;
white-space: normal !important;
}
#adminMasterBody .facility-editor-table.mobile-stack-table td:last-child {
white-space: normal !important;
}
#adminMasterBody .facility-editor-table.mobile-stack-table .facility-inline-actions {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
#adminMasterBody .facility-editor-table.mobile-stack-table .facility-inline-actions .action-btn {
width: 100% !important;
min-width: 0 !important;
justify-content: center !important;
text-align: center !important;
white-space: nowrap !important;
}
#adminMasterBody .facility-editor-table.mobile-stack-table .facility-inline-actions .action-btn::after {
display: none !important;
}
#adminMasterBody .facility-editor-table.mobile-stack-table .facility-inline-actions .action-btn {
overflow: hidden !important;
text-overflow: ellipsis !important;
}
@media (max-width: 430px) {
#adminMasterBody .facility-editor-table.mobile-stack-table .facility-inline-actions {
grid-template-columns: 1fr !important;
}
}
/* Admin -> Facility Directory mobile stacking (standalone + menu admin) */
#admin-standalone-page .admin-facility-directory-table-wrap,
#adminPage .admin-facility-directory-table-wrap {
overflow: visible !important;
max-height: none !important;
}
#admin-standalone-page .facility-directory-table.mobile-stack-table,
#adminPage .facility-directory-table.mobile-stack-table {
width: 100% !important;
min-width: 0 !important;
border-collapse: separate !important;
border-spacing: 0 10px !important;
}
#admin-standalone-page .facility-directory-table.mobile-stack-table thead,
#adminPage .facility-directory-table.mobile-stack-table thead {
display: none !important;
}
#admin-standalone-page .facility-directory-table.mobile-stack-table tbody,
#admin-standalone-page .facility-directory-table.mobile-stack-table tr,
#admin-standalone-page .facility-directory-table.mobile-stack-table td,
#adminPage .facility-directory-table.mobile-stack-table tbody,
#adminPage .facility-directory-table.mobile-stack-table tr,
#adminPage .facility-directory-table.mobile-stack-table td {
display: block !important;
width: 100% !important;
}
#admin-standalone-page .facility-directory-table.mobile-stack-table tr,
#adminPage .facility-directory-table.mobile-stack-table tr {
background: rgba(255, 255, 255, 0.92) !important;
border: 1px solid rgba(10, 19, 36, 0.12) !important;
border-radius: 14px !important;
padding: 10px !important;
margin-bottom: 0 !important;
}
body.dark #admin-standalone-page .facility-directory-table.mobile-stack-table tr,
body.dark #adminPage .facility-directory-table.mobile-stack-table tr {
background: rgba(12, 26, 44, 0.92) !important;
border-color: rgba(214, 231, 255, 0.2) !important;
}
#admin-standalone-page .facility-directory-table.mobile-stack-table td,
#adminPage .facility-directory-table.mobile-stack-table td {
padding: 6px 0 !important;
border: 0 !important;
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
#admin-standalone-page .facility-directory-table.mobile-stack-table td::before,
#adminPage .facility-directory-table.mobile-stack-table td::before {
content: attr(data-label);
display: block;
font-size: 0.72rem;
font-weight: 700;
margin-bottom: 4px;
color: #2b486b;
}
body.dark #admin-standalone-page .facility-directory-table.mobile-stack-table td::before,
body.dark #adminPage .facility-directory-table.mobile-stack-table td::before {
color: #b8d6fb;
}
#admin-standalone-page .facility-directory-table.mobile-stack-table td input,
#adminPage .facility-directory-table.mobile-stack-table td input {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
font-size: 0.84rem !important;
line-height: 1.25 !important;
}
/* Admin -> Team Leader Management mobile stacking */
#adminMasterBody .admin-team-leader-editor-table-wrap {
overflow: visible !important;
}
#adminMasterBody .team-leader-editor-table.mobile-stack-table {
width: 100% !important;
min-width: 0 !important;
border-collapse: separate !important;
border-spacing: 0 10px !important;
}
#adminMasterBody .team-leader-editor-table.mobile-stack-table thead {
display: none !important;
}
#adminMasterBody .team-leader-editor-table.mobile-stack-table tbody,
#adminMasterBody .team-leader-editor-table.mobile-stack-table tr,
#adminMasterBody .team-leader-editor-table.mobile-stack-table td {
display: block !important;
width: 100% !important;
}
#adminMasterBody .team-leader-editor-table.mobile-stack-table tr {
background: rgba(255, 255, 255, 0.92) !important;
border: 1px solid rgba(10, 19, 36, 0.12) !important;
border-radius: 14px !important;
padding: 10px !important;
margin-bottom: 10px !important;
}
body.dark #adminMasterBody .team-leader-editor-table.mobile-stack-table tr {
background: rgba(12, 26, 44, 0.92) !important;
border-color: rgba(214, 231, 255, 0.2) !important;
}
#adminMasterBody .team-leader-editor-table.mobile-stack-table td {
padding: 6px 0 !important;
border: 0 !important;
}
#adminMasterBody .team-leader-editor-table.mobile-stack-table td.mobile-stack-empty-row {
text-align: center !important;
font-weight: 600 !important;
padding: 10px 6px !important;
}
#adminMasterBody .team-leader-editor-table.mobile-stack-table td::before {
content: attr(data-label);
display: block;
font-size: 0.72rem;
font-weight: 700;
margin-bottom: 4px;
color: #2b486b;
}
#adminMasterBody .team-leader-editor-table.mobile-stack-table td.mobile-stack-empty-row::before {
content: "";
display: none;
}
body.dark #adminMasterBody .team-leader-editor-table.mobile-stack-table td::before {
color: #b8d6fb;
}
#adminMasterBody .team-leader-editor-table.mobile-stack-table td input {
width: 100% !important;
min-width: 0 !important;
}
#adminMasterBody .team-leader-editor-table.mobile-stack-table .facility-inline-actions {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
#adminMasterBody .team-leader-editor-table.mobile-stack-table .facility-inline-actions .action-btn {
width: 100% !important;
min-width: 0 !important;
justify-content: center !important;
text-align: center !important;
white-space: nowrap !important;
}
#adminMasterBody .team-leader-editor-table.mobile-stack-table .facility-inline-actions .action-btn::after {
display: none !important;
}
/* Admin -> Performance Review mobile stacking */
#adminMasterBody .admin-performance-review-table-wrap {
overflow: visible !important;
}
#adminMasterBody .performance-review-table.mobile-stack-table {
width: 100% !important;
min-width: 0 !important;
border-collapse: separate !important;
border-spacing: 0 10px !important;
}
#adminMasterBody .performance-review-table.mobile-stack-table thead {
display: none !important;
}
#adminMasterBody .performance-review-table.mobile-stack-table tbody,
#adminMasterBody .performance-review-table.mobile-stack-table tr,
#adminMasterBody .performance-review-table.mobile-stack-table td {
display: block !important;
width: 100% !important;
}
#adminMasterBody .performance-review-table.mobile-stack-table tr {
background: rgba(255, 255, 255, 0.92) !important;
border: 1px solid rgba(10, 19, 36, 0.12) !important;
border-radius: 14px !important;
padding: 10px !important;
margin-bottom: 0 !important;
}
body.dark #adminMasterBody .performance-review-table.mobile-stack-table tr {
background: rgba(12, 26, 44, 0.92) !important;
border-color: rgba(214, 231, 255, 0.2) !important;
}
#adminMasterBody .performance-review-table.mobile-stack-table td {
padding: 6px 0 !important;
border: 0 !important;
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
#adminMasterBody .performance-review-table.mobile-stack-table td::before {
content: attr(data-label);
display: block;
font-size: 0.72rem;
font-weight: 700;
margin-bottom: 4px;
color: #2b486b;
}
body.dark #adminMasterBody .performance-review-table.mobile-stack-table td::before {
color: #b8d6fb;
}
/* Admin -> Forms Library Editor mobile stacking */
#adminMasterBody .admin-forms-library-table-wrap {
overflow: visible !important;
}
#adminMasterBody .forms-library-table.mobile-stack-table {
width: 100% !important;
min-width: 0 !important;
border-collapse: separate !important;
border-spacing: 0 10px !important;
}
#adminMasterBody .forms-library-table.mobile-stack-table thead {
display: none !important;
}
#adminMasterBody .forms-library-table.mobile-stack-table tbody,
#adminMasterBody .forms-library-table.mobile-stack-table tr,
#adminMasterBody .forms-library-table.mobile-stack-table td {
display: block !important;
width: 100% !important;
}
#adminMasterBody .forms-library-table.mobile-stack-table tr {
background: rgba(255, 255, 255, 0.92) !important;
border: 1px solid rgba(10, 19, 36, 0.12) !important;
border-radius: 14px !important;
padding: 10px !important;
margin-bottom: 0 !important;
}
body.dark #adminMasterBody .forms-library-table.mobile-stack-table tr {
background: rgba(12, 26, 44, 0.92) !important;
border-color: rgba(214, 231, 255, 0.2) !important;
}
#adminMasterBody .forms-library-table.mobile-stack-table td {
padding: 6px 0 !important;
border: 0 !important;
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
#adminMasterBody .forms-library-table.mobile-stack-table td::before {
content: attr(data-label);
display: block;
font-size: 0.72rem;
font-weight: 700;
margin-bottom: 4px;
color: #2b486b;
}
body.dark #adminMasterBody .forms-library-table.mobile-stack-table td::before {
color: #b8d6fb;
}
#adminMasterBody .forms-library-table.mobile-stack-table td input {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
font-size: 0.84rem !important;
line-height: 1.25 !important;
}
#adminMasterBody .forms-library-table.mobile-stack-table td .action-btn {
width: 100% !important;
min-width: 0 !important;
justify-content: center !important;
text-align: center !important;
}
}
/* Final mobile top-banner lock (prevent overlap) */
@media (max-width: 768px) {
:root {
--mobile-top-banner-height: 64px;
--mobile-stepper-height: 34px;
--mobile-sticky-summary-height: 40px;
}
.navbar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 2000 !important;
margin: 0 !important;
border-radius: 0 !important;
}
.nav-container {
min-height: var(--mobile-top-banner-height) !important;
padding: 8px 10px !important;
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: center !important;
gap: 8px !important;
}
.nav-actions {
flex-wrap: nowrap !important;
gap: 6px !important;
max-width: 100% !important;
overflow: hidden !important;
}
.nav-actions .status-pill {
white-space: nowrap !important;
}
.flow-stepper {
position: sticky !important;
top: calc(env(safe-area-inset-top) + var(--mobile-top-banner-height)) !important;
margin-top: calc(env(safe-area-inset-top) + var(--mobile-top-banner-height)) !important;
min-height: var(--mobile-stepper-height) !important;
z-index: 1900 !important;
}
.sticky-summary {
position: sticky !important;
top: calc(env(safe-area-inset-top) + var(--mobile-top-banner-height) + var(--mobile-stepper-height) + 4px) !important;
z-index: 1850 !important;
margin: 6px 8px 8px !important;
width: auto !important;
max-width: none !important;
min-height: var(--mobile-sticky-summary-height) !important;
padding: 6px 10px !important;
gap: 8px !important;
white-space: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
body {
padding-top: 0 !important;
}
.page {
padding-top: calc(env(safe-area-inset-top) + var(--mobile-top-banner-height) + var(--mobile-stepper-height) + var(--mobile-sticky-summary-height) + 16px) !important;
}
#landing-page {
padding-top: calc(var(--mobile-stepper-height) + var(--mobile-sticky-summary-height) + 6px) !important;
}
/* Keep step labels readable on user page */
.flow-stepper {
min-height: 44px !important;
padding: 6px 6px !important;
gap: 4px !important;
}
.flow-step {
min-width: 0 !important;
padding: 4px 3px !important;
gap: 2px !important;
flex-direction: column !important;
}
.flow-step .step-index {
width: 15px !important;
height: 15px !important;
font-size: 0.52rem !important;
}
.flow-step .step-label {
display: block !important;
font-size: 0.58rem !important;
line-height: 1.05 !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
opacity: 1 !important;
}
}
@media (max-width: 430px) {
:root {
--mobile-top-banner-height: 60px;
--mobile-stepper-height: 32px;
--mobile-sticky-summary-height: 36px;
}
.nav-container {
padding: 7px 8px !important;
gap: 6px !important;
}
.flow-stepper {
margin-top: calc(env(safe-area-inset-top) + var(--mobile-top-banner-height)) !important;
min-height: 42px !important;
}
.flow-step .step-label {
font-size: 0.54rem !important;
}
.sticky-summary {
margin: 5px 6px 7px !important;
padding: 5px 8px !important;
gap: 6px !important;
}
}
/* Final mobile sidebar offset (keep menu buttons below top banner without excessive gap) */
@media (max-width: 768px) {
.sidebar {
top: calc(env(safe-area-inset-top) + var(--mobile-top-banner-height) + 4px) !important;
height: calc(100dvh - env(safe-area-inset-top) - var(--mobile-top-banner-height) - 4px) !important;
min-height: calc(100dvh - env(safe-area-inset-top) - var(--mobile-top-banner-height) - 4px) !important;
padding-top: 8px !important;
overflow-y: auto !important;
}
.sidebar-header {
position: sticky;
top: 0;
z-index: 3;
padding: 4px 0 8px;
background: inherit;
}
.sidebar-section:first-of-type {
margin-top: 4px !important;
}
.sidebar-section {
margin-bottom: 10px !important;
}
.sidebar-toggle,
.sidebar-sub-btn,
.sidebar-settings-btn,
.sidebar-signout-btn {
border-radius: 12px !important;
min-height: 40px !important;
transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}
.sidebar-toggle:active,
.sidebar-sub-btn:active,
.sidebar-settings-btn:active,
.sidebar-signout-btn:active {
transform: scale(0.99) !important;
}
body.sidebar-open .flow-stepper,
body.sidebar-open .sticky-summary {
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(-8px) !important;
}
.sidebar-toggle.is-active {
background: linear-gradient(135deg, rgba(242, 106, 33, 0.18), rgba(242, 106, 33, 0.08)) !important;
border-color: rgba(242, 106, 33, 0.42) !important;
box-shadow: 0 8px 18px rgba(242, 106, 33, 0.16) !important;
}
}
@media (max-width: 430px) {
.sidebar {
top: calc(env(safe-area-inset-top) + var(--mobile-top-banner-height) + 2px) !important;
height: calc(100dvh - env(safe-area-inset-top) - var(--mobile-top-banner-height) - 2px) !important;
min-height: calc(100dvh - env(safe-area-inset-top) - var(--mobile-top-banner-height) - 2px) !important;
}
}
/* Remove top grey gap when mobile sidebar/menu is open */
@media (max-width: 768px) {
body.sidebar-open .sidebar {
top: env(safe-area-inset-top) !important;
height: calc(100dvh - env(safe-area-inset-top)) !important;
min-height: calc(100dvh - env(safe-area-inset-top)) !important;
border-top-right-radius: 0 !important;
}
}
/* Pixel-fit pass: iPhone 12 / Galaxy S23 class devices */
@media (min-width: 375px) and (max-width: 430px) and (min-height: 740px) {
.sidebar {
top: calc(env(safe-area-inset-top) + var(--mobile-top-banner-height) + 1px) !important;
height: calc(100dvh - env(safe-area-inset-top) - var(--mobile-top-banner-height) - 1px) !important;
min-height: calc(100dvh - env(safe-area-inset-top) - var(--mobile-top-banner-height) - 1px) !important;
padding: 10px 10px calc(12px + env(safe-area-inset-bottom)) !important;
}
.sidebar-header {
margin-bottom: 8px !important;
padding: 2px 0 6px !important;
}
.sidebar-section {
margin-bottom: 8px !important;
}
.sidebar-toggle,
.sidebar-sub-btn,
.sidebar-settings-btn,
.sidebar-signout-btn {
min-height: 38px !important;
padding: 8px 10px !important;
font-size: 0.84rem !important;
}
.shortcut-pill {
font-size: 0.68rem !important;
padding: 3px 6px !important;
}
.sidebar-footer {
margin-top: 14px !important;
padding-top: 8px !important;
}
}
/* Dark-mode hero readability hardening: remove intrusive shine effects */
body.dark .hero-spotlight {
display: block !important;
opacity: 0.55;
mix-blend-mode: normal;
background: radial-gradient(
320px 220px at var(--spot-x, 50%) var(--spot-y, 35%),
rgba(115, 175, 255, 0.18),
rgba(66, 142, 238, 0.10) 32%,
rgba(0, 0, 0, 0) 72%
) !important;
}
body.dark .hero-glass::after {
content: none !important;
animation: none !important;
}
body.dark .hero-section,
body.dark .hero-overlay {
animation: none !important;
}
body.dark .hero-headline {
background: none !important;
-webkit-text-fill-color: currentColor !important;
color: #f4f7ff !important;
animation: taglineReveal 1s ease forwards !important;
}
body.dark .hero-section::after {
opacity: 0.22 !important;
filter: blur(4px) !important;
}
body.dark::after {
animation: none !important;
background:
radial-gradient(220px 220px at var(--mx) var(--my), rgba(242, 106, 33, 0.06), rgba(242, 106, 33, 0)),
radial-gradient(280px 280px at calc(var(--mx) * 0.65) calc(var(--my) * 1.15), rgba(23, 162, 164, 0.05), rgba(23, 162, 164, 0)) !important;
}
/* Landing intro readability: remove card sheen overlays that appear as glare in dark mode */
body.dark #landing-page .summary-card::before,
body.dark #landing-page .about-card::before,
body.dark #landing-page .service-item::before {
content: none !important;
}
@media (max-width: 768px) {
.mini-table table.mobile-stack-table thead {
display: none !important;
}
.mini-table table.mobile-stack-table,
.mini-table table.mobile-stack-table tbody,
.mini-table table.mobile-stack-table tr,
.mini-table table.mobile-stack-table td {
display: block !important;
width: 100% !important;
}
.mini-table table.mobile-stack-table tr {
border: 1px solid rgba(10, 19, 36, 0.14);
border-radius: 12px;
padding: 8px 10px;
margin-bottom: 10px;
background: rgba(255, 255, 255, 0.92);
}
body.dark .mini-table table.mobile-stack-table tr {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(12, 20, 34, 0.92);
}
.mini-table table.mobile-stack-table td {
border: 0 !important;
border-bottom: 1px dashed rgba(10, 19, 36, 0.14) !important;
padding: 8px 0 8px 44% !important;
position: relative;
min-height: 28px;
text-align: left !important;
}
body.dark .mini-table table.mobile-stack-table td {
border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}
.mini-table table.mobile-stack-table td:last-child {
border-bottom: 0 !important;
}
.mini-table table.mobile-stack-table td::before {
content: attr(data-label);
position: absolute;
left: 0;
top: 8px;
width: 40%;
font-size: 0.76rem;
font-weight: 700;
color: rgba(10, 19, 36, 0.72);
text-transform: uppercase;
letter-spacing: 0.2px;
}
body.dark .mini-table table.mobile-stack-table td::before {
color: rgba(232, 239, 255, 0.82);
}
}
/* ---------- Admin Visual Refresh (Matla palette) ---------- */
body.admin-standalone-active #admin-standalone-page .container {
position: relative;
}
body.admin-standalone-active #admin-standalone-page .container::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(900px 420px at 8% 0%, rgba(23, 162, 164, 0.10), transparent 62%),
radial-gradient(900px 460px at 96% -2%, rgba(242, 106, 33, 0.12), transparent 64%);
z-index: 0;
}
body.admin-standalone-active .admin-top-shell,
body.admin-standalone-active .admin-standalone-hero,
body.admin-standalone-active #admin-standalone-page .stats-section,
body.admin-standalone-active #adminMasterBody .insight-card {
position: relative;
z-index: 1;
}
body.admin-standalone-active .admin-top-shell {
border-radius: 20px;
border: 1px solid rgba(12, 46, 84, 0.16);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.92));
box-shadow: 0 18px 40px rgba(10, 19, 36, 0.12);
}
body.admin-standalone-active .admin-top-shell .page-header {
border-radius: 16px;
background:
linear-gradient(130deg, rgba(11, 46, 82, 0.09), rgba(23, 162, 164, 0.08), rgba(242, 106, 33, 0.08));
border: 1px solid rgba(11, 46, 82, 0.14);
box-shadow: 0 10px 24px rgba(10, 19, 36, 0.08);
}
body.admin-standalone-active .admin-standalone-hero {
border-radius: 18px;
border: 1px solid rgba(11, 46, 82, 0.16);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 255, 0.93));
box-shadow: 0 14px 34px rgba(10, 19, 36, 0.10);
}
body.admin-standalone-active .admin-hero-stat {
border-radius: 16px;
border: 1px solid rgba(11, 46, 82, 0.16);
background:
linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(244, 250, 255, 0.96));
box-shadow: 0 10px 24px rgba(10, 19, 36, 0.08);
transition: transform 170ms ease, box-shadow 190ms ease, border-color 190ms ease, background 190ms ease;
}
body.admin-standalone-active .admin-hero-stat.is-clickable:hover {
transform: translateY(-2px);
border-color: rgba(23, 162, 164, 0.35);
box-shadow: 0 16px 30px rgba(10, 19, 36, 0.12);
}
body.admin-standalone-active .admin-hero-value {
color: #0B2E52;
letter-spacing: -0.01em;
}
body.admin-standalone-active .admin-hero-trend {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 2px 8px;
border: 1px solid rgba(23, 162, 164, 0.28);
background: rgba(23, 162, 164, 0.12);
color: #0A5C5D;
font-weight: 700;
}
body.admin-standalone-active #admin-standalone-page .menu-page-actions .action-btn {
border-radius: 12px;
border: 1px solid rgba(11, 46, 82, 0.18);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 250, 255, 0.94));
color: #0B2E52;
box-shadow: 0 8px 20px rgba(10, 19, 36, 0.08);
transition: transform 170ms ease, box-shadow 190ms ease, border-color 190ms ease, background 190ms ease;
}
body.admin-standalone-active #admin-standalone-page .menu-page-actions .action-btn:hover {
transform: translateY(-1px);
border-color: rgba(242, 106, 33, 0.42);
box-shadow: 0 12px 24px rgba(10, 19, 36, 0.12);
}
body.admin-standalone-active #admin-standalone-page .menu-page-actions .action-btn.admin-tab-active {
border-color: rgba(242, 106, 33, 0.52);
background:
linear-gradient(135deg, rgba(242, 106, 33, 0.16), rgba(23, 162, 164, 0.16));
color: #0B2E52;
box-shadow: 0 12px 28px rgba(242, 106, 33, 0.16);
}
body.admin-standalone-active #admin-standalone-page .stats-section {
border-radius: 18px;
border: 1px solid rgba(11, 46, 82, 0.14);
background:
linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 255, 0.94));
box-shadow: 0 14px 30px rgba(10, 19, 36, 0.10);
}
body.admin-standalone-active #adminMasterBody .insight-card {
border-radius: 16px;
border: 1px solid rgba(11, 46, 82, 0.14);
box-shadow: 0 12px 24px rgba(10, 19, 36, 0.08);
}
body.dark.admin-standalone-active .admin-top-shell {
border-color: rgba(160, 198, 236, 0.20);
background:
linear-gradient(145deg, rgba(10, 19, 33, 0.96), rgba(12, 23, 39, 0.94));
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42);
}
body.dark.admin-standalone-active .admin-top-shell .page-header {
background:
linear-gradient(130deg, rgba(12, 31, 53, 0.90), rgba(14, 40, 63, 0.86), rgba(44, 28, 20, 0.86));
border-color: rgba(160, 198, 236, 0.24);
}
body.dark.admin-standalone-active .admin-standalone-hero {
border-color: rgba(160, 198, 236, 0.24);
background:
linear-gradient(145deg, rgba(10, 20, 34, 0.96), rgba(12, 24, 40, 0.94));
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.40);
}
body.dark.admin-standalone-active .admin-hero-stat {
border-color: rgba(160, 198, 236, 0.24);
background:
linear-gradient(150deg, rgba(12, 25, 42, 0.96), rgba(13, 28, 48, 0.94));
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
}
body.dark.admin-standalone-active .admin-hero-stat.is-clickable:hover {
border-color: rgba(23, 162, 164, 0.52);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
}
body.dark.admin-standalone-active .admin-hero-value {
color: #F2F7FF;
}
body.dark.admin-standalone-active .admin-hero-trend {
border-color: rgba(23, 162, 164, 0.42);
background: rgba(23, 162, 164, 0.20);
color: #BFF7F8;
}
body.dark.admin-standalone-active #admin-standalone-page .menu-page-actions .action-btn {
border-color: rgba(160, 198, 236, 0.26);
background:
linear-gradient(135deg, rgba(12, 28, 47, 0.96), rgba(14, 31, 53, 0.94));
color: #EAF3FF;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
}
body.dark.admin-standalone-active #admin-standalone-page .menu-page-actions .action-btn:hover {
border-color: rgba(242, 106, 33, 0.54);
}
body.dark.admin-standalone-active #admin-standalone-page .menu-page-actions .action-btn.admin-tab-active {
border-color: rgba(242, 106, 33, 0.62);
background:
linear-gradient(135deg, rgba(242, 106, 33, 0.26), rgba(23, 162, 164, 0.22));
color: #F8FBFF;
}
body.dark.admin-standalone-active #admin-standalone-page .stats-section,
body.dark.admin-standalone-active #adminMasterBody .insight-card {
border-color: rgba(160, 198, 236, 0.22);
background:
linear-gradient(150deg, rgba(11, 23, 39, 0.96), rgba(12, 26, 44, 0.94));
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.40);
}
/* ---------- Admin Redesign v2 (High-impact, admin-only) ---------- */
body.admin-standalone-active {
--admin-ink: #092744;
--admin-muted: #4a6380;
--admin-surface: rgba(255, 255, 255, 0.96);
--admin-surface-2: rgba(246, 250, 255, 0.94);
--admin-line: rgba(11, 46, 82, 0.16);
--admin-cyan: #17a2a4;
--admin-orange: #f26a21;
--admin-navy: #0b2e52;
font-family: "Space Grotesk", "Segoe UI", "Aptos", sans-serif;
}
body.admin-standalone-active #admin-standalone-page {
background:
radial-gradient(980px 420px at 10% -8%, rgba(23, 162, 164, 0.14), transparent 62%),
radial-gradient(1100px 520px at 100% -10%, rgba(242, 106, 33, 0.13), transparent 64%),
linear-gradient(180deg, #f6fbff 0%, #eef5fc 100%);
}
body.admin-standalone-active .admin-top-shell {
display: grid;
gap: 14px;
padding: 14px;
border-radius: 24px;
border: 1px solid var(--admin-line);
background: linear-gradient(155deg, var(--admin-surface), var(--admin-surface-2));
box-shadow: 0 24px 50px rgba(8, 24, 45, 0.14);
overflow: clip;
}
body.admin-standalone-active .admin-top-shell .page-header {
margin: 0;
padding: 16px 18px;
border-radius: 18px;
border: 1px solid rgba(11, 46, 82, 0.18);
background:
linear-gradient(120deg, rgba(11, 46, 82, 0.10), rgba(23, 162, 164, 0.08), rgba(242, 106, 33, 0.08));
box-shadow: 0 12px 26px rgba(8, 24, 45, 0.10);
}
body.admin-standalone-active .admin-brand-title {
letter-spacing: 0.2px;
font-weight: 800;
}
body.admin-standalone-active .section-heading[data-icon="🛡️"] {
color: var(--admin-navy);
font-weight: 800;
}
body.admin-standalone-active .admin-standalone-hero {
margin: 0;
padding: 16px;
border-radius: 20px;
border: 1px solid rgba(11, 46, 82, 0.18);
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(243, 249, 255, 0.95));
box-shadow: 0 16px 32px rgba(8, 24, 45, 0.10);
}
body.admin-standalone-active .admin-hero-head h2 {
font-size: clamp(1.15rem, 1.2vw, 1.4rem);
margin-bottom: 4px;
color: var(--admin-navy);
}
body.admin-standalone-active .admin-hero-head .page-subtitle,
body.admin-standalone-active .admin-hero-sync {
color: var(--admin-muted);
}
body.admin-standalone-active .admin-hero-stats {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
body.admin-standalone-active .admin-hero-stat {
position: relative;
overflow: hidden;
padding: 12px;
border-radius: 16px;
border: 1px solid rgba(11, 46, 82, 0.16);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 255, 0.96));
box-shadow: 0 12px 24px rgba(8, 24, 45, 0.08);
}
body.admin-standalone-active .admin-hero-stat::after {
content: "";
position: absolute;
inset: auto -20% -40% -20%;
height: 70%;
background: linear-gradient(120deg, rgba(23, 162, 164, 0.13), rgba(242, 106, 33, 0.12));
pointer-events: none;
}
body.admin-standalone-active .admin-hero-stat.is-clickable:hover {
transform: translateY(-2px);
border-color: rgba(23, 162, 164, 0.4);
box-shadow: 0 16px 28px rgba(8, 24, 45, 0.12);
}
body.admin-standalone-active .admin-hero-value {
color: var(--admin-navy);
font-size: clamp(1.15rem, 1.6vw, 1.5rem);
}
body.admin-standalone-active .admin-hero-label {
color: #143a62;
font-weight: 700;
text-transform: none;
letter-spacing: 0.15px;
}
body.admin-standalone-active .admin-command-bar,
body.admin-standalone-active .admin-filter-ribbon {
display: grid;
grid-template-columns: 1.4fr 1fr auto;
gap: 10px;
padding: 10px;
border-radius: 14px;
border: 1px solid rgba(11, 46, 82, 0.14);
background: rgba(255, 255, 255, 0.78);
}
body.admin-standalone-active .admin-filter-ribbon {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.admin-standalone-active .admin-command-bar input,
body.admin-standalone-active .admin-command-bar select,
body.admin-standalone-active .admin-filter-ribbon select {
min-height: 42px;
border-radius: 12px;
border: 1px solid rgba(11, 46, 82, 0.18);
background: #fff;
color: #0a1324;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero > .menu-page-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero > .menu-page-actions .action-btn {
min-height: 42px;
border-radius: 12px;
border: 1px solid rgba(11, 46, 82, 0.2);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 255, 0.96));
color: var(--admin-navy);
font-weight: 700;
justify-content: center;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero > .menu-page-actions .action-btn.admin-tab-active {
background: linear-gradient(135deg, rgba(242, 106, 33, 0.18), rgba(23, 162, 164, 0.18));
border-color: rgba(242, 106, 33, 0.5);
box-shadow: 0 12px 24px rgba(242, 106, 33, 0.14);
}
body.admin-standalone-active #admin-standalone-page .stats-section {
margin-top: 14px;
border-radius: 20px;
border: 1px solid rgba(11, 46, 82, 0.15);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 255, 0.94));
box-shadow: 0 14px 28px rgba(8, 24, 45, 0.09);
}
body.admin-standalone-active #admin-standalone-page .stats-section .insight-card {
border-radius: 16px;
border: 1px solid rgba(11, 46, 82, 0.12);
background: rgba(255, 255, 255, 0.86);
}
body.admin-standalone-active #admin-standalone-page .stats-section h4 {
color: var(--admin-navy);
font-weight: 800;
}
body.admin-standalone-active #admin-standalone-page .stats-section .page-subtitle {
color: var(--admin-muted);
}
body.admin-standalone-active #admin-standalone-page .stats-section .menu-page-actions .action-btn {
border-radius: 12px;
min-height: 40px;
font-weight: 700;
}
@media (min-width: 1180px) {
body.admin-standalone-active .admin-top-shell {
grid-template-columns: minmax(300px, 0.85fr) minmax(520px, 1.15fr);
align-items: start;
}
body.admin-standalone-active .admin-top-shell .page-header {
position: sticky;
top: 96px;
}
}
@media (max-width: 980px) {
body.admin-standalone-active .admin-hero-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero > .menu-page-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.admin-standalone-active .admin-command-bar,
body.admin-standalone-active .admin-filter-ribbon {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
body.admin-standalone-active .admin-hero-stats {
grid-template-columns: 1fr;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero > .menu-page-actions {
grid-template-columns: 1fr;
}
}
body.dark.admin-standalone-active {
--admin-ink: #eaf3ff;
--admin-muted: #c8d6e8;
}
body.dark.admin-standalone-active #admin-standalone-page {
background:
radial-gradient(980px 460px at 10% -8%, rgba(23, 162, 164, 0.20), transparent 62%),
radial-gradient(1100px 560px at 100% -10%, rgba(242, 106, 33, 0.18), transparent 64%),
linear-gradient(180deg, #091321 0%, #0a1626 100%);
}
body.dark.admin-standalone-active .admin-top-shell {
border-color: rgba(160, 198, 236, 0.25);
background: linear-gradient(155deg, rgba(10, 20, 34, 0.96), rgba(12, 24, 40, 0.94));
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.44);
}
body.dark.admin-standalone-active .admin-top-shell .page-header {
border-color: rgba(160, 198, 236, 0.24);
background: linear-gradient(130deg, rgba(10, 30, 52, 0.92), rgba(13, 37, 61, 0.90), rgba(42, 27, 18, 0.88));
}
body.dark.admin-standalone-active .admin-standalone-hero,
body.dark.admin-standalone-active #admin-standalone-page .stats-section,
body.dark.admin-standalone-active #admin-standalone-page .stats-section .insight-card {
border-color: rgba(160, 198, 236, 0.24);
background: linear-gradient(150deg, rgba(11, 24, 40, 0.96), rgba(12, 27, 45, 0.94));
}
body.dark.admin-standalone-active .admin-hero-stat {
border-color: rgba(160, 198, 236, 0.28);
background: linear-gradient(150deg, rgba(13, 28, 47, 0.96), rgba(14, 31, 52, 0.94));
}
body.dark.admin-standalone-active .admin-hero-stat::after {
background: linear-gradient(120deg, rgba(23, 162, 164, 0.24), rgba(242, 106, 33, 0.22));
}
body.dark.admin-standalone-active .admin-hero-value,
body.dark.admin-standalone-active .admin-hero-label,
body.dark.admin-standalone-active #admin-standalone-page .stats-section h4 {
color: #f1f7ff;
}
body.dark.admin-standalone-active .admin-hero-head .page-subtitle,
body.dark.admin-standalone-active .admin-hero-sync,
body.dark.admin-standalone-active #admin-standalone-page .stats-section .page-subtitle {
color: #c8d6e8;
}
body.dark.admin-standalone-active .admin-command-bar,
body.dark.admin-standalone-active .admin-filter-ribbon {
border-color: rgba(160, 198, 236, 0.24);
background: rgba(10, 24, 40, 0.72);
}
body.dark.admin-standalone-active .admin-command-bar input,
body.dark.admin-standalone-active .admin-command-bar select,
body.dark.admin-standalone-active .admin-filter-ribbon select {
border-color: rgba(160, 198, 236, 0.30);
background: rgba(10, 22, 37, 0.95);
color: #eaf3ff;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-standalone-hero > .menu-page-actions .action-btn {
border-color: rgba(160, 198, 236, 0.30);
background: linear-gradient(135deg, rgba(12, 28, 47, 0.96), rgba(14, 31, 53, 0.94));
color: #eaf3ff;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-standalone-hero > .menu-page-actions .action-btn.admin-tab-active {
border-color: rgba(242, 106, 33, 0.66);
background: linear-gradient(135deg, rgba(242, 106, 33, 0.28), rgba(23, 162, 164, 0.24));
color: #f8fbff;
}
/* ===== ADMIN REBUILD v3 (from scratch, readability-first) ===== */
body.admin-standalone-active {
--admin-v3-navy: #0b2e52;
--admin-v3-ink: #102743;
--admin-v3-muted: #4f6480;
--admin-v3-line: rgba(11, 46, 82, 0.18);
--admin-v3-surface: #f7fbff;
--admin-v3-surface-2: #eef5fc;
--admin-v3-accent: #17a2a4;
--admin-v3-warm: #f26a21;
}
body.admin-standalone-active #admin-standalone-page {
background:
radial-gradient(900px 420px at 8% -8%, rgba(23, 162, 164, 0.13), transparent 62%),
radial-gradient(1100px 520px at 100% -12%, rgba(242, 106, 33, 0.10), transparent 64%),
linear-gradient(180deg, #f8fcff 0%, #edf4fb 100%) !important;
}
body.admin-standalone-active #admin-standalone-page .container {
max-width: 1280px;
}
body.admin-standalone-active .admin-top-shell {
display: grid;
grid-template-columns: 360px minmax(0, 1fr);
gap: 14px;
padding: 14px;
border-radius: 22px;
border: 1px solid var(--admin-v3-line);
background: linear-gradient(150deg, #ffffff 0%, var(--admin-v3-surface) 45%, var(--admin-v3-surface-2) 100%) !important;
box-shadow: 0 24px 48px rgba(8, 22, 42, 0.14);
}
body.admin-standalone-active .admin-top-shell .page-header {
margin: 0;
padding: 16px;
border-radius: 16px;
border: 1px solid var(--admin-v3-line);
background: linear-gradient(135deg, rgba(11, 46, 82, 0.08), rgba(23, 162, 164, 0.06), rgba(242, 106, 33, 0.05)) !important;
box-shadow: 0 12px 26px rgba(9, 28, 53, 0.1);
position: sticky;
top: 92px;
align-self: start;
}
body.admin-standalone-active .admin-brand-title,
body.admin-standalone-active .section-heading,
body.admin-standalone-active .page-header h1 {
color: var(--admin-v3-navy) !important;
}
body.admin-standalone-active .page-header .page-subtitle,
body.admin-standalone-active #adminStandaloneScope {
color: var(--admin-v3-muted) !important;
}
body.admin-standalone-active .admin-brand-logo {
max-width: 170px;
width: 100%;
height: auto;
object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(9, 28, 53, 0.18));
}
body.admin-standalone-active .admin-standalone-hero {
margin: 0;
padding: 16px;
border-radius: 18px;
border: 1px solid var(--admin-v3-line);
background: linear-gradient(160deg, #ffffff 0%, #f5faff 100%) !important;
box-shadow: 0 14px 30px rgba(8, 22, 42, 0.1);
}
body.admin-standalone-active .admin-hero-head h2 {
color: var(--admin-v3-navy) !important;
font-size: clamp(1.15rem, 1.05vw + 0.9rem, 1.45rem);
}
body.admin-standalone-active .admin-hero-head .page-subtitle,
body.admin-standalone-active .admin-hero-sync {
color: var(--admin-v3-muted) !important;
}
body.admin-standalone-active .admin-hero-stats {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.admin-standalone-active .admin-hero-stat {
border-radius: 14px;
border: 1px solid rgba(11, 46, 82, 0.16) !important;
background: linear-gradient(145deg, #ffffff, #f3f9ff) !important;
box-shadow: 0 10px 22px rgba(8, 22, 42, 0.08);
position: relative;
overflow: hidden;
}
body.admin-standalone-active .admin-hero-stat::after {
content: "";
position: absolute;
inset: auto -18% -40% -18%;
height: 70%;
background: linear-gradient(120deg, rgba(23, 162, 164, 0.14), rgba(242, 106, 33, 0.12));
pointer-events: none;
}
body.admin-standalone-active .admin-hero-value {
color: var(--admin-v3-navy) !important;
font-weight: 800;
}
body.admin-standalone-active .admin-hero-label {
color: #1f456d !important;
text-transform: none;
letter-spacing: 0.1px;
font-weight: 700;
}
body.admin-standalone-active .admin-hero-trend {
color: #0d5f61 !important;
border: 1px solid rgba(23, 162, 164, 0.3);
background: rgba(23, 162, 164, 0.11);
border-radius: 999px;
padding: 2px 8px;
}
body.admin-standalone-active .admin-command-bar,
body.admin-standalone-active .admin-filter-ribbon {
border-radius: 12px;
border: 1px solid rgba(11, 46, 82, 0.14);
background: rgba(255, 255, 255, 0.86);
padding: 10px;
}
body.admin-standalone-active .admin-command-bar {
grid-template-columns: 1.5fr 1fr auto;
}
body.admin-standalone-active .admin-filter-ribbon {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.admin-standalone-active .admin-command-bar input,
body.admin-standalone-active .admin-command-bar select,
body.admin-standalone-active .admin-filter-ribbon select {
min-height: 40px;
border-radius: 10px;
border: 1px solid rgba(11, 46, 82, 0.18);
color: #0a1324 !important;
background: #fff !important;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero > .menu-page-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
body.admin-standalone-active #admin-standalone-page .menu-page-actions .action-btn {
min-height: 42px;
border-radius: 11px;
border: 1px solid rgba(11, 46, 82, 0.2);
background: linear-gradient(135deg, #ffffff, #f3f9ff) !important;
color: var(--admin-v3-navy) !important;
font-weight: 700;
justify-content: center;
}
body.admin-standalone-active #admin-standalone-page .menu-page-actions .action-btn:hover {
border-color: rgba(242, 106, 33, 0.48);
box-shadow: 0 10px 22px rgba(242, 106, 33, 0.12);
}
body.admin-standalone-active #admin-standalone-page .menu-page-actions .action-btn.admin-tab-active {
border-color: rgba(242, 106, 33, 0.58);
background: linear-gradient(135deg, rgba(242, 106, 33, 0.20), rgba(23, 162, 164, 0.18)) !important;
color: #0b2e52 !important;
}
body.admin-standalone-active #admin-standalone-page .stats-section {
margin-top: 14px;
border-radius: 18px;
border: 1px solid rgba(11, 46, 82, 0.14);
background: linear-gradient(150deg, #ffffff, #f4f9ff) !important;
box-shadow: 0 14px 30px rgba(8, 22, 42, 0.09);
}
body.admin-standalone-active #adminMasterBody .insight-card {
border-radius: 14px;
border: 1px solid rgba(11, 46, 82, 0.14);
background: rgba(255, 255, 255, 0.94) !important;
}
/* hard readability lock for light mode admin */
body.admin-standalone-active:not(.dark) #admin-standalone-page,
body.admin-standalone-active:not(.dark) #admin-standalone-page h1,
body.admin-standalone-active:not(.dark) #admin-standalone-page h2,
body.admin-standalone-active:not(.dark) #admin-standalone-page h3,
body.admin-standalone-active:not(.dark) #admin-standalone-page h4,
body.admin-standalone-active:not(.dark) #admin-standalone-page h5,
body.admin-standalone-active:not(.dark) #admin-standalone-page p,
body.admin-standalone-active:not(.dark) #admin-standalone-page label,
body.admin-standalone-active:not(.dark) #admin-standalone-page span,
body.admin-standalone-active:not(.dark) #admin-standalone-page strong,
body.admin-standalone-active:not(.dark) #admin-standalone-page th,
body.admin-standalone-active:not(.dark) #admin-standalone-page td,
body.admin-standalone-active:not(.dark) #admin-standalone-page .page-subtitle,
body.admin-standalone-active:not(.dark) #admin-standalone-page .menu-page-note,
body.admin-standalone-active:not(.dark) #admin-standalone-page .mini-table td,
body.admin-standalone-active:not(.dark) #admin-standalone-page .mini-table td *,
body.admin-standalone-active:not(.dark) #admin-standalone-page .mini-table th {
color: #102743 !important;
}
body.admin-standalone-active:not(.dark) #admin-standalone-page .mini-table thead th {
background: linear-gradient(180deg, rgba(232, 241, 251, 0.98), rgba(223, 234, 248, 0.96)) !important;
}
body.admin-standalone-active:not(.dark) #admin-standalone-page .mini-table table {
border-color: rgba(16, 39, 67, 0.25) !important;
}
body.admin-standalone-active:not(.dark) #admin-standalone-page .link-btn {
color: #0c3e75 !important;
}
/* dark mode counterpart */
body.dark.admin-standalone-active #admin-standalone-page {
background:
radial-gradient(960px 460px at 8% -8%, rgba(23, 162, 164, 0.20), transparent 62%),
radial-gradient(1100px 560px at 100% -12%, rgba(242, 106, 33, 0.18), transparent 64%),
linear-gradient(180deg, #091422 0%, #0a1626 100%) !important;
}
body.dark.admin-standalone-active .admin-top-shell,
body.dark.admin-standalone-active .admin-standalone-hero,
body.dark.admin-standalone-active #admin-standalone-page .stats-section,
body.dark.admin-standalone-active #adminMasterBody .insight-card {
border-color: rgba(160, 198, 236, 0.24) !important;
background: linear-gradient(150deg, rgba(10, 22, 38, 0.96), rgba(12, 27, 46, 0.94)) !important;
}
body.dark.admin-standalone-active .admin-hero-stat {
border-color: rgba(160, 198, 236, 0.28) !important;
background: linear-gradient(150deg, rgba(13, 28, 47, 0.96), rgba(14, 31, 52, 0.94)) !important;
}
body.dark.admin-standalone-active .admin-hero-value,
body.dark.admin-standalone-active .admin-hero-label,
body.dark.admin-standalone-active #admin-standalone-page h1,
body.dark.admin-standalone-active #admin-standalone-page h2,
body.dark.admin-standalone-active #admin-standalone-page h3,
body.dark.admin-standalone-active #admin-standalone-page h4,
body.dark.admin-standalone-active #admin-standalone-page h5,
body.dark.admin-standalone-active #admin-standalone-page p,
body.dark.admin-standalone-active #admin-standalone-page label,
body.dark.admin-standalone-active #admin-standalone-page span,
body.dark.admin-standalone-active #admin-standalone-page strong,
body.dark.admin-standalone-active #admin-standalone-page th,
body.dark.admin-standalone-active #admin-standalone-page td,
body.dark.admin-standalone-active #admin-standalone-page .menu-page-note,
body.dark.admin-standalone-active #admin-standalone-page .page-subtitle,
body.dark.admin-standalone-active #admin-standalone-page .mini-table td,
body.dark.admin-standalone-active #admin-standalone-page .mini-table td *,
body.dark.admin-standalone-active #admin-standalone-page .mini-table th {
color: #eaf3ff !important;
}
body.dark.admin-standalone-active #admin-standalone-page .mini-table thead th {
background: linear-gradient(180deg, rgba(20, 35, 58, 0.96), rgba(14, 28, 47, 0.96)) !important;
}
body.dark.admin-standalone-active #admin-standalone-page .menu-page-actions .action-btn {
border-color: rgba(160, 198, 236, 0.3);
background: linear-gradient(135deg, rgba(12, 28, 47, 0.96), rgba(14, 31, 53, 0.94)) !important;
color: #eaf3ff !important;
}
body.dark.admin-standalone-active #admin-standalone-page .menu-page-actions .action-btn.admin-tab-active {
border-color: rgba(242, 106, 33, 0.66);
background: linear-gradient(135deg, rgba(242, 106, 33, 0.28), rgba(23, 162, 164, 0.24)) !important;
color: #f8fbff !important;
}
@media (max-width: 1120px) {
body.admin-standalone-active .admin-top-shell {
grid-template-columns: 1fr;
}
body.admin-standalone-active .admin-top-shell .page-header {
position: static;
top: auto;
}
body.admin-standalone-active .admin-hero-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero > .menu-page-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.admin-standalone-active .admin-command-bar,
body.admin-standalone-active .admin-filter-ribbon {
grid-template-columns: 1fr;
}
}
@media (max-width: 680px) {
body.admin-standalone-active .admin-hero-stats,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero > .menu-page-actions {
grid-template-columns: 1fr;
}
}
/* ---------- User top banner compact sizing ---------- */
body.app-variant-user .navbar {
z-index: 1100;
}
body.app-variant-user .nav-container {
min-height: 54px;
padding: 8px 14px;
gap: 10px;
}
body.app-variant-user .nav-logo {
height: 40px;
}
body.app-variant-user .logo-button-oval.compact {
padding: 3px 10px 3px 7px;
gap: 8px;
}
body.app-variant-user .logo-button-oval.compact .nav-logo {
height: 30px;
}
body.app-variant-user .nav-info {
gap: 14px;
font-size: 0.82rem;
line-height: 1.05;
}
body.app-variant-user .nav-actions {
gap: 6px;
padding: 4px 8px;
}
body.app-variant-user .nav-actions .status-pill {
font-size: 0.72rem;
padding: 4px 7px;
}
body.app-variant-user .nav-actions .action-btn {
min-height: 32px;
padding: 0 9px;
font-size: 0.72rem;
}
body.app-variant-user .nav-notification-btn {
width: 36px;
height: 36px;
min-width: 36px;
}
@media (max-width: 768px) {
body.app-variant-user .nav-container {
min-height: 50px;
padding: 6px 9px;
gap: 6px;
}
body.app-variant-user .logo-button-oval.compact .nav-logo {
height: 26px;
}
body.app-variant-user .nav-actions {
padding: 3px 6px;
gap: 4px;
}
body.app-variant-user .nav-actions .status-pill {
font-size: 0.62rem;
padding: 3px 5px;
}
body.app-variant-user .nav-actions .action-btn {
min-height: 28px;
height: 28px;
padding: 0 6px;
font-size: 0.6rem;
}
body.app-variant-user .nav-notification-btn {
width: 30px;
height: 30px;
min-width: 30px;
}
}
/* ---------- Final Admin Master Logger Navy Shell Override ---------- */
body.admin-standalone-active .admin-top-shell,
body.admin-standalone-active .admin-top-shell .page-header,
body.admin-standalone-active .admin-standalone-hero {
background: linear-gradient(160deg, #0b1f43 0%, #12346b 100%) !important;
border: 1px solid rgba(147, 197, 253, 0.34) !important;
box-shadow: 0 20px 44px rgba(4, 14, 34, 0.44) !important;
}
body.admin-standalone-active .admin-top-shell .page-header h1,
body.admin-standalone-active .admin-top-shell .page-header .section-heading,
body.admin-standalone-active .admin-top-shell .page-header .page-subtitle,
body.admin-standalone-active .admin-top-shell .admin-brand-title,
body.admin-standalone-active .admin-top-shell #adminStandaloneScope,
body.admin-standalone-active .admin-standalone-hero .section-heading,
body.admin-standalone-active .admin-standalone-hero .section-subtitle {
color: #f8fbff !important;
}
body.admin-standalone-active .admin-top-shell .back-btn {
color: #f8fbff !important;
border-color: rgba(255, 255, 255, 0.38) !important;
background: rgba(255, 255, 255, 0.08) !important;
}
body.admin-standalone-active .admin-hero-stat {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
}
/* ---------- Admin UX Upgrade v5 (Layout + usability + polish) ---------- */
body.admin-standalone-active #admin-standalone-page .container {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
grid-template-areas:
"shell shell"
"workspace rail";
gap: 16px;
align-items: start;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
grid-area: shell;
}
body.admin-standalone-active #admin-standalone-page .stats-section:nth-of-type(1),
body.admin-standalone-active #admin-standalone-page .stats-section:nth-of-type(3) {
grid-area: workspace;
}
body.admin-standalone-active #admin-standalone-page .stats-section:nth-of-type(2) {
grid-area: rail;
position: static;
top: auto;
}
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard {
position: sticky;
top: 88px;
z-index: 6;
min-height: calc(100vh - 104px);
display: flex;
flex-direction: column;
}
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard > .menu-page-actions:last-of-type {
margin-top: auto;
}
body.admin-standalone-active .admin-standalone-hero .admin-filter-ribbon {
display: none;
}
body.admin-standalone-active .admin-standalone-hero.show-advanced-filters .admin-filter-ribbon {
display: grid;
animation: adminFadeIn .18s ease-out;
}
body.admin-standalone-active .admin-role-actions {
margin-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.24);
padding-top: 10px;
}
body.admin-standalone-active .admin-role-actions .action-btn {
min-height: 36px;
}
body.admin-standalone-active .insight-card,
body.admin-standalone-active .admin-detail-section {
border-radius: 16px !important;
}
body.admin-standalone-active .mini-table {
border-radius: 14px;
overflow: auto;
}
body.admin-standalone-active .mini-table table {
min-width: 900px;
}
body.admin-standalone-active .mini-table thead th {
position: sticky;
top: 0;
z-index: 2;
backdrop-filter: blur(6px);
}
body.admin-standalone-active .mini-table tbody tr {
transition: background-color .14s ease, transform .14s ease;
}
body.admin-standalone-active .mini-table tbody tr:hover {
transform: translateY(-1px);
}
body.admin-standalone-active .admin-command-item {
width: 100%;
justify-content: flex-start;
margin-bottom: 8px;
}
body.admin-standalone-active .admin-command-palette-card {
max-width: 620px;
width: min(92vw, 620px);
}
body.admin-standalone-active .admin-sparkline {
display: block;
width: 100%;
height: 28px;
opacity: .78;
margin-top: 4px;
}
body.admin-standalone-active .admin-mini-funnel {
display: grid;
gap: 8px;
width: 100%;
margin-top: 4px;
}
body.admin-standalone-active .admin-mini-funnel-row {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
overflow: hidden;
padding: 6px 8px;
border-radius: 10px;
background: rgba(15, 23, 42, .35);
color: #f1f5f9;
}
body.admin-standalone-active .admin-mini-funnel-row em {
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 0;
background: linear-gradient(90deg, rgba(56, 189, 248, .36), rgba(96, 165, 250, .22));
}
body.admin-standalone-active .admin-mini-funnel-row span,
body.admin-standalone-active .admin-mini-funnel-row strong {
position: relative;
z-index: 1;
}
body.admin-standalone-active .action-btn,
body.admin-standalone-active .sidebar-toggle,
body.admin-standalone-active .sidebar-sub-btn {
transition: transform .12s ease, opacity .12s ease, filter .12s ease;
}
body.admin-standalone-active .action-btn:active,
body.admin-standalone-active .sidebar-toggle:active,
body.admin-standalone-active .sidebar-sub-btn:active {
transform: scale(.985);
opacity: .92;
}
body.admin-standalone-active .no-data {
border: 1px dashed rgba(148, 163, 184, .38);
border-radius: 12px;
padding: 12px;
background: rgba(15, 23, 42, .2);
}
@keyframes adminFadeIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
body.dark.admin-standalone-active .mini-table thead th {
color: #f8fbff !important;
}
body:not(.dark).admin-standalone-active .mini-table th,
body:not(.dark).admin-standalone-active .mini-table td,
body:not(.dark).admin-standalone-active .mini-table td * {
color: #102447 !important;
}
body:not(.dark).admin-standalone-active .admin-mini-funnel-row {
background: rgba(220, 234, 255, .78);
color: #0b2347;
}
@media (max-width: 1180px) {
body.admin-standalone-active #admin-standalone-page .container {
grid-template-columns: 1fr;
grid-template-areas:
"shell"
"workspace"
"rail";
}
body.admin-standalone-active #admin-standalone-page .stats-section:nth-of-type(2) {
position: static;
top: auto;
}
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard {
position: static;
top: auto;
min-height: auto;
display: block;
}
}
@media (max-width: 768px) {
body.admin-standalone-active .admin-command-bar {
grid-template-columns: 1fr 1fr;
}
body.admin-standalone-active .admin-role-actions,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero > .menu-page-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.admin-standalone-active .admin-command-bar .action-btn {
min-height: 34px;
font-size: .72rem;
padding: 0 8px;
}
}
/* ---------- Admin Light Mode Text Visibility Lock ---------- */
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell *:not(input):not(select):not(option):not(textarea),
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-standalone-hero *:not(input):not(select):not(option):not(textarea) {
color: #f8fbff !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell .action-btn,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-standalone-hero .action-btn,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell .back-btn {
color: #f8fbff !important;
border-color: rgba(255, 255, 255, 0.4) !important;
background: rgba(255, 255, 255, 0.12) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-command-bar input,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-command-bar select,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-filter-ribbon select {
color: #f8fbff !important;
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(255, 255, 255, 0.34) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-command-bar input::placeholder {
color: rgba(248, 251, 255, 0.92) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-command-bar select option,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-filter-ribbon select option {
color: #0f1f3d !important;
background: #ffffff !important;
}
/* ---------- Admin Compact Spacing Override ---------- */
body.admin-standalone-active #admin-standalone-page .container {
gap: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
gap: 10px !important;
margin-bottom: 2px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header {
padding: 10px 12px !important;
gap: 6px !important;
}
/* Admin header compact lock: remove gap between Back button and brand/version */
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
row-gap: 4px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header .back-btn {
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .admin-brand-stack {
margin-top: 0 !important;
padding-top: 4px !important;
padding-bottom: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
padding: 10px 12px !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-head {
gap: 2px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-head h2,
body.admin-standalone-active #admin-standalone-page .page-header h1,
body.admin-standalone-active #admin-standalone-page .section-heading {
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .page-subtitle {
margin: 0 !important;
line-height: 1.3 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stats {
margin-top: 2px !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat {
padding: 8px 10px !important;
min-height: 82px !important;
}
body.admin-standalone-active #admin-standalone-page .stats-section {
margin: 0 !important;
padding: 0 !important;
gap: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .stats-section .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .menu-page-actions {
margin-top: 6px !important;
margin-bottom: 0 !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page #adminStandaloneMasterLogger {
margin-top: 6px !important;
}
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page .container {
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
padding: 8px 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat {
min-height: 74px !important;
padding: 7px 9px !important;
}
}
/* ---------- Mobile Admin Uniqueness Pack ---------- */
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
display: grid;
grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
align-items: start;
gap: 12px;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
position: sticky;
top: 86px;
z-index: 14;
border-radius: 18px !important;
background:
radial-gradient(circle at 15% 15%, rgba(23, 162, 164, 0.16), transparent 42%),
linear-gradient(165deg, rgba(8, 34, 63, 0.98), rgba(10, 26, 48, 0.95)) !important;
color: #f8fbff !important;
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 18px 34px rgba(8, 17, 35, 0.34);
overflow: hidden;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
display: grid;
gap: 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-status-chips .insight-chip {
backdrop-filter: blur(6px);
}
body.admin-standalone-active #admin-standalone-page .admin-mode-pulse {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.62);
animation: adminPulseDot 2.4s ease-out infinite;
}
@keyframes adminPulseDot {
0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.62); }
70% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); }
100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat {
transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat:active {
transform: translateY(1px) scale(0.995);
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat.is-clickable:hover {
box-shadow: 0 10px 20px rgba(10, 29, 56, 0.18);
}
body.admin-standalone-active .admin-filter-drawer-overlay {
position: fixed;
inset: 0;
display: none;
align-items: flex-end;
justify-content: center;
background: rgba(2, 6, 23, 0.52);
z-index: 5200;
padding: 12px;
}
body.admin-standalone-active .admin-filter-drawer-overlay.is-open {
display: flex;
}
body.admin-standalone-active .admin-filter-drawer-card {
width: min(680px, 100%);
max-height: min(78vh, calc(var(--mobile-vh) - 20px));
overflow: auto;
border-radius: 16px;
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.3);
background: #ffffff;
color: #0f172a;
box-shadow: 0 22px 50px rgba(15, 23, 42, 0.36);
}
body.dark.admin-standalone-active .admin-filter-drawer-card {
background: #0d1627;
color: #f8fbff;
border-color: rgba(148, 163, 184, 0.4);
}
body.admin-standalone-active .admin-filter-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
body.admin-standalone-active .admin-filter-drawer-body {
display: grid;
gap: 8px;
}
body.admin-standalone-active .admin-mobile-orb {
position: fixed;
left: calc(14px + env(safe-area-inset-left));
right: auto;
bottom: calc(82px + env(safe-area-inset-bottom));
z-index: 3600;
display: none;
}
body.admin-standalone-active .admin-mobile-orb-toggle {
width: 52px;
height: 52px;
border-radius: 50%;
border: 0;
font-size: 1.4rem;
font-weight: 800;
color: #f8fbff;
background: linear-gradient(145deg, #17A2A4, #0d6f71);
box-shadow: 0 12px 26px rgba(13, 111, 113, 0.4);
}
body.admin-standalone-active .admin-mobile-orb.is-open .admin-mobile-orb-toggle {
transform: rotate(45deg);
}
body.admin-standalone-active .admin-mobile-orb-menu {
position: absolute;
left: 0;
right: auto;
bottom: 62px;
min-width: 180px;
display: grid;
gap: 8px;
opacity: 0;
pointer-events: none;
transform: translateY(8px) scale(0.96);
transform-origin: bottom left;
transition: opacity .18s ease, transform .18s ease;
}
body.admin-standalone-active .admin-mobile-orb-menu.is-open {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
body.admin-standalone-active .admin-mobile-orb-menu button {
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 12px;
background: #ffffff;
color: #0f172a;
font-weight: 700;
padding: 10px 12px;
text-align: left;
}
body.dark.admin-standalone-active .admin-mobile-orb-menu button {
background: #0d1627;
color: #f8fbff;
border-color: rgba(148, 163, 184, 0.4);
}
body.admin-mobile-focus.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar,
body.admin-mobile-focus.admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity,
body.admin-mobile-focus.admin-standalone-active #admin-standalone-page #adminStandaloneHealth {
display: none !important;
}
body.admin-mobile-focus.admin-standalone-active #admin-standalone-page #adminStandaloneMasterLogger {
box-shadow: 0 16px 36px rgba(11, 46, 82, 0.22);
}
body.dark #overallStatsPage .menu-page-note,
body.dark #overallStatsPage .page-subtitle {
color: #d8e6ff !important;
}
.admin-mobile-filter-trigger {
display: none !important;
}
@media (max-width: 1180px) {
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 1fr;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
position: static;
top: auto;
}
}
@media (max-width: 768px) {
body.admin-standalone-active .admin-mobile-orb {
display: block;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
display: none;
}
body.admin-standalone-active #admin-standalone-page .admin-filter-ribbon {
display: none !important;
}
body.admin-standalone-active #admin-standalone-page .admin-mobile-filter-trigger {
display: flex !important;
}
/* Force pie chart visibility on admin mobile */
body.admin-standalone-active #admin-standalone-page .stats-section:nth-of-type(2) {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body.admin-standalone-active #admin-standalone-page #adminPerformancePieCard {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
order: -1 !important;
min-height: 240px !important;
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page #adminPerformancePieCard h4,
body.admin-standalone-active #admin-standalone-page #adminPerformancePieCard .page-subtitle {
color: var(--ink-2) !important;
}
body.dark.admin-standalone-active #admin-standalone-page #adminPerformancePieCard h4,
body.dark.admin-standalone-active #admin-standalone-page #adminPerformancePieCard .page-subtitle {
color: #f8fbff !important;
}
body.admin-mobile-focus.admin-standalone-active #admin-standalone-page #adminPerformancePieCard {
display: block !important;
}
}
/* ---------- Admin Performance Pie Card ---------- */
body.admin-standalone-active #admin-standalone-page .admin-performance-pie-card {
padding: 12px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-layout {
display: grid;
grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
align-items: center;
gap: 14px;
margin-top: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-chart-wrap {
display: grid;
place-items: center;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-chart {
--split: 0deg;
width: 170px;
height: 170px;
border-radius: 50%;
background:
conic-gradient(
#22c55e 0deg var(--split),
#ef4444 var(--split) 360deg
);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
position: relative;
animation: adminPiePop .35s ease-out;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-inner {
position: absolute;
inset: 18px;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
background: rgba(255, 255, 255, 0.92);
color: #0f172a;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-inner strong {
font-size: 1.2rem;
line-height: 1;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-inner span {
font-size: 0.74rem;
opacity: 0.88;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-legend {
display: grid;
gap: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-legend-item {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 8px;
padding: 7px 9px;
border-radius: 10px;
background: rgba(15, 23, 42, 0.18);
}
body.admin-standalone-active #admin-standalone-page .admin-pie-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-dot.is-performing {
background: #22c55e;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-dot.is-nonperforming {
background: #ef4444;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-legend-item strong {
font-size: 0.95rem;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-legend-item em {
font-size: 0.78rem;
opacity: 0.9;
font-style: normal;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-summary {
margin-top: 2px !important;
}
@keyframes adminPiePop {
from {
transform: scale(0.94);
opacity: 0.45;
}
to {
transform: scale(1);
opacity: 1;
}
}
body.dark.admin-standalone-active #admin-standalone-page .admin-pie-inner {
background: rgba(10, 15, 28, 0.92);
color: #f8fbff;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-pie-legend-item {
background: rgba(10, 15, 28, 0.5);
}
@media (max-width: 860px) {
body.admin-standalone-active #admin-standalone-page .admin-pie-layout {
grid-template-columns: 1fr;
justify-items: center;
text-align: left;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-legend {
width: 100%;
}
}
/* ---------- Restore Bottom Admin Buttons ---------- */
body.admin-standalone-active .quick-actions {
display: flex !important;
left: auto !important;
right: calc(12px + env(safe-area-inset-right)) !important;
bottom: calc(14px + env(safe-area-inset-bottom)) !important;
z-index: 1400 !important;
}
body.admin-standalone-active .back-to-top {
display: inline-flex !important;
right: calc(12px + env(safe-area-inset-right)) !important;
bottom: calc(14px + env(safe-area-inset-bottom)) !important;
z-index: 1399 !important;
}
body.admin-standalone-active .menu-fab.is-visible {
display: inline-flex !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
bottom: calc(14px + env(safe-area-inset-bottom)) !important;
z-index: 1398 !important;
}
@media (max-width: 768px) {
body.admin-standalone-active .back-to-top {
bottom: calc(70px + env(safe-area-inset-bottom)) !important;
}
body.admin-standalone-active .quick-actions {
bottom: calc(14px + env(safe-area-inset-bottom)) !important;
left: auto !important;
right: calc(12px + env(safe-area-inset-right)) !important;
}
body.admin-standalone-active .menu-fab.is-visible {
bottom: calc(70px + env(safe-area-inset-bottom)) !important;
}
}
/* ---------- Admin Redesign v2 ---------- */
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
display: grid;
grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
gap: 12px;
align-items: start;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
position: sticky;
top: 90px;
z-index: 8;
border-radius: 16px !important;
padding: 12px !important;
background: linear-gradient(165deg, rgba(11, 46, 82, 0.96), rgba(9, 33, 61, 0.92)) !important;
color: #f8fbff !important;
box-shadow: 0 14px 34px rgba(8, 22, 42, 0.28);
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
display: grid;
gap: 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-rail-head {
display: grid;
gap: 8px;
margin-bottom: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-rail-head h4 {
margin: 0;
color: #f8fbff !important;
}
body.admin-standalone-active #admin-standalone-page .admin-cmdk-btn {
width: 100%;
justify-content: center;
border-color: rgba(255, 255, 255, 0.28) !important;
color: #f8fbff !important;
background: rgba(255, 255, 255, 0.12) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-status-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-status-chips .insight-chip {
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.1);
color: #f8fbff !important;
}
body.admin-standalone-active #admin-standalone-page .admin-status-chips .insight-chip.success {
background: rgba(34, 197, 94, 0.24);
border-color: rgba(34, 197, 94, 0.48);
}
body.admin-standalone-active #admin-standalone-page .admin-status-chips .insight-chip.warn {
background: rgba(245, 158, 11, 0.24);
border-color: rgba(245, 158, 11, 0.48);
}
body.admin-standalone-active #admin-standalone-page .admin-status-chips .insight-chip.danger {
background: rgba(239, 68, 68, 0.24);
border-color: rgba(239, 68, 68, 0.52);
}
body.admin-standalone-active #admin-standalone-page .admin-rail-cluster {
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding-top: 10px;
margin-top: 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-rail-cluster h5 {
margin: 0 0 8px;
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(248, 251, 255, 0.84);
}
body.admin-standalone-active #admin-standalone-page .admin-rail-actions {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-rail-actions .action-btn {
width: 100%;
min-height: 38px;
justify-content: flex-start;
color: #f8fbff !important;
border-color: rgba(255, 255, 255, 0.22) !important;
background: rgba(255, 255, 255, 0.1) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-rail-actions .action-btn:hover {
background: rgba(255, 255, 255, 0.16) !important;
}
body.admin-standalone-active #admin-standalone-page .stats-section,
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
border-radius: 16px !important;
}
body.admin-standalone-active #admin-standalone-page .audit-log .timeline-item {
border-left: 3px solid rgba(23, 162, 164, 0.55);
padding-left: 10px;
margin-left: 4px;
}
body.admin-standalone-active #admin-standalone-page .audit-log .timeline-time {
color: #64748b !important;
font-weight: 700;
}
body.admin-standalone-active #admin-standalone-page .audit-log .timeline-content {
color: #0f172a !important;
}
body.dark.admin-standalone-active #admin-standalone-page .audit-log .timeline-time {
color: #9fb7da !important;
}
body.dark.admin-standalone-active #admin-standalone-page .audit-log .timeline-content {
color: #e9f0ff !important;
}
body.admin-standalone-active #admin-standalone-page .mini-table {
overflow-x: auto;
}
body.admin-standalone-active #admin-standalone-page .mini-table thead th {
position: sticky;
top: 0;
z-index: 2;
}
body.admin-standalone-active #admin-standalone-page .mini-table thead th:first-child,
body.admin-standalone-active #admin-standalone-page .mini-table tbody td:first-child {
position: sticky;
left: 0;
z-index: 1;
background: inherit;
}
body.admin-standalone-active #admin-standalone-page .mini-table tbody tr:nth-child(even) td {
background: rgba(148, 163, 184, 0.08);
}
body.admin-standalone-active #admin-standalone-page .mini-table tbody tr:hover td {
background: rgba(23, 162, 164, 0.08);
}
body.admin-standalone-active #admin-standalone-page .no-data {
display: grid;
gap: 6px;
place-items: start;
border: 1px dashed rgba(100, 116, 139, 0.42);
border-radius: 12px;
padding: 12px;
background: linear-gradient(180deg, rgba(148, 163, 184, 0.06), rgba(148, 163, 184, 0.03));
color: #475569 !important;
}
body.dark.admin-standalone-active #admin-standalone-page .no-data {
color: #d8e3f8 !important;
border-color: rgba(148, 163, 184, 0.35);
}
body.admin-standalone-active #admin-standalone-page .admin-hero-trend {
border-radius: 999px;
padding: 2px 8px;
display: inline-flex;
align-items: center;
gap: 5px;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-trend.trend-success {
color: #166534 !important;
background: rgba(34, 197, 94, 0.18);
}
body.admin-standalone-active #admin-standalone-page .admin-hero-trend.trend-warn {
color: #9a4b00 !important;
background: rgba(245, 158, 11, 0.2);
}
body.admin-standalone-active #admin-standalone-page .admin-hero-trend.trend-danger {
color: #991b1b !important;
background: rgba(239, 68, 68, 0.2);
}
body.admin-standalone-active #admin-standalone-page .admin-hero-trend.trend-info {
color: #0b2e52 !important;
background: rgba(56, 189, 248, 0.18);
}
body.dark.admin-standalone-active #admin-standalone-page .admin-hero-trend.trend-success {
color: #b8f8cf !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-hero-trend.trend-warn {
color: #ffd18a !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-hero-trend.trend-danger {
color: #ffc1c1 !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-hero-trend.trend-info {
color: #c8eaff !important;
}
@media (max-width: 1180px) {
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 1fr;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
position: static;
top: auto;
}
body.admin-standalone-active #admin-standalone-page .admin-rail-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page .admin-rail-actions {
grid-template-columns: 1fr;
}
}
/* ---------- User Experience Overhaul ---------- */
.user-sync-banner {
margin: 10px auto 0;
max-width: 1180px;
border: 1px solid rgba(245, 158, 11, 0.38);
background: linear-gradient(135deg, rgba(255, 247, 237, 0.95), rgba(255, 237, 213, 0.9));
color: #7c2d12;
border-radius: 12px;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
body.dark .user-sync-banner {
border-color: rgba(245, 158, 11, 0.45);
background: linear-gradient(135deg, rgba(80, 40, 12, 0.62), rgba(56, 28, 10, 0.55));
color: #ffd9b0;
}
.mission-cockpit {
margin-top: 10px;
border: 1px solid rgba(23, 162, 164, 0.35);
border-radius: 14px;
padding: 10px;
background: linear-gradient(155deg, rgba(23, 162, 164, 0.14), rgba(11, 46, 82, 0.08));
}
.mission-cockpit-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.mission-cockpit-head strong {
font-size: 0.92rem;
color: #0b1f36;
}
#missionPlanStatus {
font-size: 0.76rem;
border-radius: 999px;
padding: 2px 8px;
background: rgba(11, 46, 82, 0.12);
color: #0b2e52;
}
.mission-cockpit-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.mission-task {
border: 1px solid rgba(11, 46, 82, 0.15);
border-radius: 10px;
padding: 8px;
background: rgba(255, 255, 255, 0.75);
color: #0b1f36;
}
.mission-task-label {
display: block;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.9;
color: #334155;
margin-bottom: 2px;
}
.mission-task strong {
font-size: 0.84rem;
line-height: 1.35;
color: #0a1324;
}
body.dark .mission-task {
background: rgba(11, 20, 35, 0.65);
border-color: rgba(148, 163, 184, 0.28);
color: #e8f1ff;
}
body.dark .mission-cockpit-head strong {
color: #e8f1ff;
}
body.dark #missionPlanStatus {
color: #e8f1ff;
background: rgba(99, 179, 237, 0.18);
}
body.dark .mission-task-label {
color: #b7c8e6;
}
body.dark .mission-task strong {
color: #f5f9ff;
}
.hero-kpi-chips {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hero-kpi-chip {
border-radius: 999px;
border: 1px solid rgba(11, 46, 82, 0.2);
background: rgba(255, 255, 255, 0.82);
color: #0f172a;
font-size: 0.78rem;
font-weight: 700;
padding: 5px 10px;
}
body.dark .hero-kpi-chip {
border-color: rgba(148, 163, 184, 0.34);
background: rgba(9, 18, 33, 0.8);
color: #e8f1ff;
}
.hero-task-row {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.hero-task-row .action-btn {
min-height: 38px;
justify-content: center;
}
.flow-mini-progress {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-bottom: 12px;
}
.flow-mini-step {
border: 1px solid rgba(11, 46, 82, 0.2);
border-radius: 999px;
padding: 6px 10px;
text-align: center;
font-size: 0.75rem;
font-weight: 700;
background: rgba(255, 255, 255, 0.7);
color: #334155;
}
.flow-mini-step.is-active {
border-color: rgba(23, 162, 164, 0.62);
background: rgba(23, 162, 164, 0.18);
color: #0b2e52;
}
body.dark .flow-mini-step {
border-color: rgba(148, 163, 184, 0.3);
background: rgba(10, 20, 36, 0.72);
color: #dce8fa;
}
.sticky-summary .sticky-mini-btn {
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.2);
color: inherit;
border-radius: 999px;
padding: 2px 8px;
font-size: 0.68rem;
font-weight: 700;
line-height: 1.3;
}
#stats-page .stats-section .section-heading {
cursor: pointer;
}
#stats-page .stats-section.is-collapsed > :not(.section-heading) {
display: none !important;
}
@media (max-width: 980px) {
.mission-cockpit-grid {
grid-template-columns: 1fr;
}
.hero-task-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flow-mini-progress {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.user-sync-banner {
border-radius: 10px;
padding: 8px 10px;
font-size: 0.78rem;
}
.sticky-summary {
padding-right: calc(8px + env(safe-area-inset-right));
padding-left: calc(8px + env(safe-area-inset-left));
gap: 6px;
}
.sticky-summary .sticky-mini-btn {
min-height: 24px;
}
}
/* ---------- Mobile Navbar / Sidebar UX (User Request) ---------- */
@media (max-width: 768px) {
body.sidebar-open .navbar {
transform: translateY(-110%);
opacity: 0;
pointer-events: none;
}
body.sidebar-open .flow-stepper,
body.sidebar-open .sticky-summary {
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
}
.navbar {
transition: transform 0.22s ease, opacity 0.22s ease;
}
.navbar .nav-container {
min-height: 52px;
padding-top: 6px;
padding-bottom: 6px;
}
.navbar .nav-actions {
gap: 6px;
}
#appUserBadge.status-pill {
font-size: 0.64rem !important;
padding: 2px 6px !important;
max-width: 30vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#offlineStatus.status-pill {
width: 11px !important;
min-width: 11px !important;
height: 11px !important;
min-height: 11px !important;
padding: 0 !important;
border-radius: 999px !important;
font-size: 0 !important;
line-height: 0 !important;
text-indent: -9999px;
overflow: hidden;
border-width: 1px !important;
}
#offlineStatus.is-online,
#offlineStatus.is-saved,
#offlineStatus.is-syncing {
background: #22c55e !important;
border-color: #16a34a !important;
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}
#offlineStatus.is-offline {
background: #ef4444 !important;
border-color: #dc2626 !important;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16);
}
.nav-notification-btn {
border-radius: 12px;
min-width: 34px;
min-height: 34px;
transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.2s ease;
}
.nav-notification-btn:active {
transform: scale(0.96);
}
.sidebar {
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
box-shadow: 16px 0 34px rgba(8, 22, 42, 0.34);
backdrop-filter: blur(10px);
}
.sidebar .sidebar-toggle,
.sidebar .sidebar-sub-btn {
border-radius: 12px;
transition: transform 0.16s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.sidebar .sidebar-toggle:active,
.sidebar .sidebar-sub-btn:active {
transform: translateY(1px) scale(0.99);
}
}
/* Luminating online/offline status dot */
@keyframes statusDotGlowOnline {
0% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.38), 0 0 8px rgba(34, 197, 94, 0.45);
}
70% {
box-shadow: 0 0 0 7px rgba(34, 197, 94, 0), 0 0 16px rgba(34, 197, 94, 0.35);
}
100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0), 0 0 8px rgba(34, 197, 94, 0.45);
}
}
@keyframes statusDotGlowOffline {
0% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.34), 0 0 8px rgba(239, 68, 68, 0.42);
}
70% {
box-shadow: 0 0 0 7px rgba(239, 68, 68, 0), 0 0 16px rgba(239, 68, 68, 0.3);
}
100% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0), 0 0 8px rgba(239, 68, 68, 0.42);
}
}
#offlineStatus.is-online:not(.is-syncing),
#offlineStatus.is-saved {
animation: statusDotGlowOnline 1.8s ease-in-out infinite !important;
}
#offlineStatus.is-offline {
animation: statusDotGlowOffline 1.9s ease-in-out infinite !important;
}
.assignment-team-context {
margin-top: 10px;
border: 1px solid rgba(11, 46, 82, 0.14);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(243, 249, 255, 0.86));
}
.assignment-companions-list {
font-weight: 700;
color: #0b2e52;
line-height: 1.45;
}
.assignment-shift-message {
margin-top: 8px;
border: 1px solid rgba(11, 46, 82, 0.16);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(240, 246, 255, 0.9));
}
.assignment-shift-message h4 {
margin: 0 0 6px;
font-size: 0.98rem;
}
.assignment-shift-message p {
margin: 0;
color: #1f3859;
}
body.dark .assignment-team-context {
border-color: rgba(148, 163, 184, 0.24);
background: linear-gradient(150deg, rgba(9, 18, 33, 0.84), rgba(8, 16, 29, 0.82));
}
body.dark .assignment-companions-list {
color: #e8f1ff;
}
body.dark .assignment-shift-message {
border-color: rgba(148, 163, 184, 0.28);
background: linear-gradient(150deg, rgba(9, 18, 33, 0.9), rgba(8, 16, 29, 0.86));
}
body.dark .assignment-shift-message p {
color: #e8f1ff;
}
/* Improve touch targets and readability on user flow controls */
body:not(.admin-standalone-active) .action-btn,
body:not(.admin-standalone-active) .submit-btn,
body:not(.admin-standalone-active) .back-btn,
body:not(.admin-standalone-active) .sidebar-sub-btn,
body:not(.admin-standalone-active) .sidebar-toggle {
min-height: 40px;
}
body:not(.admin-standalone-active) .menu-page-note {
border-left: 3px solid rgba(23, 162, 164, 0.5);
padding-left: 10px;
}
/* ---------- Top Banner Cleanup (User + Admin) ---------- */
@media (min-width: 769px) {
.navbar .nav-container {
min-height: 60px !important;
padding: 10px 18px !important;
gap: 12px !important;
}
.navbar .nav-info {
display: inline-flex !important;
align-items: center;
gap: 12px;
font-size: 0.78rem;
line-height: 1;
}
.navbar .nav-actions {
flex-wrap: nowrap !important;
gap: 8px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.navbar .nav-actions .status-pill {
font-size: 0.72rem !important;
padding: 4px 8px !important;
}
}
@media (max-width: 768px) {
.navbar .nav-container {
position: relative !important;
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: center !important;
min-height: 52px !important;
padding: 6px 10px !important;
gap: 8px !important;
}
.navbar .nav-info {
display: none !important;
}
.navbar .nav-actions {
justify-self: end !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 0 !important;
padding-right: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
position: relative !important;
overflow: visible !important;
}
/* Secondary actions leave the mobile top bar for cleaner UI */
.navbar .nav-actions .sync-retry-btn,
.navbar .nav-actions #switchUserBtn {
display: none !important;
}
#appUserBadge.status-pill {
display: inline-flex !important;
align-items: center;
justify-content: center;
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
width: auto !important;
min-width: 0 !important;
max-width: min(34vw, 132px) !important;
padding: 2px 7px !important;
font-size: 0.60rem !important;
line-height: 1.1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
z-index: 6 !important;
}
#offlineStatus.status-pill {
display: inline-flex !important;
position: absolute !important;
left: calc(50% + 66px) !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 6 !important;
}
.navbar .nav-actions .theme-toggle {
min-width: 34px !important;
width: 34px !important;
height: 34px !important;
padding: 0 !important;
font-size: 0 !important;
border-radius: 11px !important;
}
.navbar .nav-actions .theme-toggle::before {
content: "\25D0";
font-size: 14px;
line-height: 1;
}
.navbar .nav-actions .nav-notification-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 34px !important;
width: 34px !important;
height: 34px !important;
border-radius: 11px !important;
}
}
/* Mobile: center user role on top with online/offline dot next to it */
@media (max-width: 768px) {
.navbar .nav-container {
position: relative;
padding-top: 18px !important;
}
#appUserBadge.status-pill {
position: absolute !important;
left: 50% !important;
top: 2px !important;
transform: translateX(-50%) !important;
max-width: 44vw !important;
z-index: 4;
}
#offlineStatus.status-pill {
position: absolute !important;
top: 5px !important;
left: calc(50% + 84px) !important;
transform: translateX(-50%) !important;
z-index: 4;
}
.navbar .nav-actions {
position: relative;
padding-right: 40px !important;
}
.navbar .nav-actions .nav-notification-btn {
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 5;
}
.navbar .nav-actions .nav-notification-btn:active {
transform: translateY(-50%) scale(0.96) !important;
}
}
/* Final mobile top bar visibility fix: keep User badge + bell always visible */
@media (max-width: 768px) {
.navbar .nav-actions {
position: relative !important;
overflow: visible !important;
padding-right: 40px !important;
}
#appUserBadge.status-pill {
display: inline-flex !important;
align-items: center;
justify-content: center;
position: absolute !important;
left: 50% !important;
top: 2px !important;
transform: translateX(-50%) !important;
width: auto !important;
min-width: 0 !important;
max-width: min(36vw, 148px) !important;
padding: 2px 8px !important;
font-size: 0.62rem !important;
line-height: 1.1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
z-index: 6 !important;
}
#offlineStatus.status-pill {
display: inline-flex !important;
position: absolute !important;
left: calc(50% + 72px) !important;
top: 5px !important;
transform: translateX(-50%) !important;
z-index: 6 !important;
}
.navbar .nav-actions .nav-notification-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 7 !important;
}
}
/* Final alignment lock: keep role badge truly centered on mobile */
@media (max-width: 768px) {
.navbar .nav-container {
position: relative !important;
}
#appUserBadge.status-pill {
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
max-width: min(34vw, 136px) !important;
padding: 2px 7px !important;
font-size: 0.6rem !important;
}
#offlineStatus.status-pill {
top: 50% !important;
left: calc(50% + 70px) !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
}
}
/* Absolute center fix: anchor role/status to full header width, not nav-actions width */
@media (max-width: 768px) {
.navbar .nav-container {
position: relative !important;
}
.navbar .nav-actions {
position: static !important;
margin-left: auto !important;
z-index: 5 !important;
}
.navbar .nav-container #appUserBadge.status-pill {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
max-width: min(34vw, 132px) !important;
z-index: 8 !important;
}
.navbar .nav-container #offlineStatus.status-pill {
position: absolute !important;
left: calc(50% + 66px) !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 8 !important;
}
}
/* Admin: keep toasts above Back-to-Top / menu-fab controls */
body.admin-standalone-active .toast-container {
right: calc(12px + env(safe-area-inset-right)) !important;
bottom: calc(78px + env(safe-area-inset-bottom)) !important;
z-index: 1700 !important;
}
@media (max-width: 768px) {
body.admin-standalone-active .toast-container {
bottom: calc(124px + env(safe-area-inset-bottom)) !important;
}
}
/* Notification panel refresh: compact hierarchy + mobile sheet */
.notification-section {
display: grid;
gap: 8px;
margin: 4px 0 8px;
}
.notification-section-title {
margin: 2px 2px 0;
font-size: 0.74rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
body.dark .notification-section-title {
color: var(--muted-darkmode);
}
.notification-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.notification-category-pill {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 2px 8px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.02em;
border: 1px solid rgba(10, 19, 36, 0.18);
background: rgba(10, 19, 36, 0.06);
color: var(--ink-2);
white-space: nowrap;
}
.notification-category-system {
border-color: rgba(16, 59, 107, 0.24);
background: rgba(16, 59, 107, 0.12);
}
.notification-category-payments {
border-color: rgba(242, 106, 33, 0.3);
background: rgba(242, 106, 33, 0.15);
}
.notification-category-team {
border-color: rgba(23, 162, 164, 0.28);
background: rgba(23, 162, 164, 0.14);
}
.notification-category-leaderboard {
border-color: rgba(113, 84, 219, 0.28);
background: rgba(113, 84, 219, 0.14);
}
.notification-category-facility {
border-color: rgba(49, 111, 42, 0.28);
background: rgba(49, 111, 42, 0.12);
}
body.dark .notification-category-pill {
color: var(--text-darkmode);
border-color: rgba(126, 173, 220, 0.28);
background: rgba(126, 173, 220, 0.14);
}
body.dark .notification-category-payments {
border-color: rgba(242, 106, 33, 0.4);
background: rgba(242, 106, 33, 0.22);
}
/* ===== Overall Stats Dark-Mode Visibility Fix ===== */
body.dark #overallStatsPage .page-subtitle,
body.dark #overallStatsPage .menu-page-note,
body.dark #overallStatsPage .insight-chip {
color: #eaf3ff !important;
opacity: 1 !important;
}
body.dark #overallStatsPage .menu-page-header .page-subtitle {
color: #f4f8ff !important;
}
.notification-empty {
padding: 20px 6px 8px;
}
/* ===== Admin Mobile Redesign (Standalone Admin Page) ===== */
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page .container {
padding: 8px 8px calc(96px + env(safe-area-inset-bottom)) !important;
gap: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
border-radius: 16px !important;
border: 1px solid rgba(147, 197, 253, 0.24) !important;
background: linear-gradient(155deg, rgba(8, 29, 56, 0.96), rgba(10, 38, 72, 0.92)) !important;
box-shadow: 0 14px 30px rgba(5, 18, 36, 0.34) !important;
padding: 10px 10px !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-stack {
display: grid !important;
justify-items: center !important;
text-align: center !important;
gap: 4px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-logo {
width: 88px !important;
height: 88px !important;
object-fit: contain !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header h1 {
font-size: 1rem !important;
line-height: 1.2 !important;
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header .page-subtitle,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero .page-subtitle {
font-size: 0.78rem !important;
line-height: 1.35 !important;
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stats {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat {
min-height: 88px !important;
border-radius: 12px !important;
padding: 8px 8px !important;
text-align: left !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-value {
font-size: 1.05rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-label {
font-size: 0.72rem !important;
line-height: 1.2 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-trend {
font-size: 0.65rem !important;
margin-top: 4px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-filter-ribbon {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-filter-ribbon select {
width: 100% !important;
min-height: 38px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero > .menu-page-actions {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 8px !important;
padding-bottom: 4px !important;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero > .menu-page-actions .action-btn {
flex: 0 0 auto !important;
min-height: 36px !important;
padding: 7px 10px !important;
border-radius: 999px !important;
font-size: 0.74rem !important;
scroll-snap-align: start;
white-space: nowrap !important;
}
body.admin-standalone-active #admin-standalone-page .stats-section {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard {
border-radius: 14px !important;
padding: 10px !important;
}
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard .menu-page-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard .menu-page-actions .action-btn {
width: 100% !important;
min-height: 38px !important;
justify-content: center !important;
text-align: center !important;
font-size: 0.76rem !important;
padding: 7px 8px !important;
white-space: normal !important;
line-height: 1.2 !important;
border-radius: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .insight-card {
border-radius: 14px !important;
padding: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .audit-log {
max-height: 42vh !important;
overflow-y: auto !important;
padding-right: 4px !important;
}
body.admin-standalone-active #admin-standalone-page .mini-table {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
body.admin-standalone-active #admin-standalone-page .mini-table table {
min-width: 700px !important;
}
body.admin-standalone-active #admin-standalone-page .mini-table th,
body.admin-standalone-active #admin-standalone-page .mini-table td {
font-size: 0.74rem !important;
padding: 7px 8px !important;
white-space: normal !important;
word-break: break-word !important;
}
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar,
body.admin-standalone-active #admin-standalone-page .menu-page-actions.admin-role-actions {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
}
@media (max-width: 768px) {
.notification-dropdown {
width: min(380px, 92vw) !important;
max-width: 92vw !important;
bottom: auto !important;
top: auto;
z-index: 1600;
}
.notification-dropdown::before {
display: block !important;
right: 20px;
}
.notification-dropdown-card {
border-radius: 16px !important;
border: 1px solid rgba(10, 19, 36, 0.12);
padding: 11px 11px calc(11px + env(safe-area-inset-bottom));
max-height: min(72vh, calc(var(--mobile-vh) - 24px)) !important;
box-shadow: 0 18px 34px rgba(10, 19, 36, 0.28) !important;
gap: 10px;
}
.notification-dropdown-header {
position: sticky;
top: 0;
padding-top: 2px;
margin-bottom: 2px;
border-bottom: 1px solid rgba(10, 19, 36, 0.08);
}
body.dark .notification-dropdown-header {
border-bottom-color: rgba(255, 255, 255, 0.12);
}
.notification-dropdown-actions {
width: 100%;
gap: 6px;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 2px;
scrollbar-width: thin;
}
.notification-dropdown-actions .action-btn {
flex: 0 0 auto;
min-height: 34px;
padding: 6px 10px;
font-size: 0.72rem;
}
.notification-dropdown-actions .notification-close-btn {
position: sticky;
left: 0;
z-index: 2;
background: rgba(255, 255, 255, 0.94);
}
body.dark .notification-dropdown-actions .notification-close-btn {
background: rgba(10, 22, 38, 0.95);
}
.notification-filter-bar {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
margin: 8px 0 4px;
padding-bottom: 2px;
scrollbar-width: thin;
}
.notification-filter-btn {
flex: 0 0 auto;
min-width: 88px;
font-size: 0.74rem;
min-height: 34px;
}
.notification-search-row input {
min-height: 38px;
font-size: 0.84rem;
}
.notification-dropdown-card .notification-list {
margin-top: 6px;
padding-bottom: 8px;
}
.notification-card {
border-radius: 12px;
padding: 10px 11px;
}
.notification-card h4 {
font-size: 0.9rem;
line-height: 1.3;
}
.notification-card p {
font-size: 0.78rem;
line-height: 1.45;
margin-bottom: 7px;
}
.notification-meta {
font-size: 0.68rem;
gap: 6px;
}
.notification-pagination {
position: sticky;
bottom: 0;
background: inherit;
padding-top: 8px;
border-top: 1px solid rgba(10, 19, 36, 0.08);
}
body.dark .notification-pagination {
border-top-color: rgba(255, 255, 255, 0.12);
}
#notification-detail-modal .modal-card {
width: min(96vw, 620px);
max-height: min(90vh, calc(var(--mobile-vh) - 18px));
border-radius: 16px;
}
}
/* Hard override: notifications must open full-screen on mobile */
@media (max-width: 768px) {
#notification-dropdown {
position: fixed !important;
inset: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
height: 100dvh !important;
max-height: 100dvh !important;
padding: 0 !important;
background: rgba(5, 12, 22, 0.44) !important;
z-index: 3600 !important;
}
#notification-dropdown .notification-dropdown-card {
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
padding: calc(8px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)) !important;
}
body.dark #notification-dropdown .notification-dropdown-card {
border-color: transparent !important;
}
#notification-dropdown::before {
display: none !important;
}
}
/* ---------- Final lock: Overall Stats mobile tables + Admin bottom controls ---------- */
@media (max-width: 768px) {
body.admin-standalone-active #overallStatsPage .mini-table,
body.admin-standalone-active #hero-jfa-modal .mini-table {
overflow: hidden !important;
}
body.admin-standalone-active #overallStatsPage .mini-table table,
body.admin-standalone-active #hero-jfa-modal .mini-table table {
min-width: 0 !important;
width: 100% !important;
table-layout: fixed !important;
}
body.admin-standalone-active #overallStatsPage .mini-table table.mobile-stack-table thead,
body.admin-standalone-active #hero-jfa-modal .mini-table table.mobile-stack-table thead {
display: none !important;
}
body.admin-standalone-active #overallStatsPage .mini-table table.mobile-stack-table,
body.admin-standalone-active #overallStatsPage .mini-table table.mobile-stack-table tbody,
body.admin-standalone-active #overallStatsPage .mini-table table.mobile-stack-table tr,
body.admin-standalone-active #overallStatsPage .mini-table table.mobile-stack-table td,
body.admin-standalone-active #hero-jfa-modal .mini-table table.mobile-stack-table,
body.admin-standalone-active #hero-jfa-modal .mini-table table.mobile-stack-table tbody,
body.admin-standalone-active #hero-jfa-modal .mini-table table.mobile-stack-table tr,
body.admin-standalone-active #hero-jfa-modal .mini-table table.mobile-stack-table td {
display: block !important;
width: 100% !important;
}
body.admin-standalone-active #overallStatsPage .mini-table table.mobile-stack-table tr,
body.admin-standalone-active #hero-jfa-modal .mini-table table.mobile-stack-table tr {
margin: 0 0 10px 0 !important;
padding: 9px 10px !important;
border: 1px solid rgba(148, 163, 184, 0.28) !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.94) !important;
}
body.dark.admin-standalone-active #overallStatsPage .mini-table table.mobile-stack-table tr,
body.dark.admin-standalone-active #hero-jfa-modal .mini-table table.mobile-stack-table tr {
background: rgba(15, 23, 42, 0.9) !important;
border-color: rgba(148, 163, 184, 0.34) !important;
}
body.admin-standalone-active #overallStatsPage .mini-table table.mobile-stack-table td,
body.admin-standalone-active #hero-jfa-modal .mini-table table.mobile-stack-table td {
border: 0 !important;
border-bottom: 1px dashed rgba(148, 163, 184, 0.34) !important;
padding: 5px 0 6px 0 !important;
margin: 0 !important;
text-align: left !important;
white-space: normal !important;
word-break: break-word !important;
}
body.admin-standalone-active #overallStatsPage .mini-table table.mobile-stack-table td:last-child,
body.admin-standalone-active #hero-jfa-modal .mini-table table.mobile-stack-table td:last-child {
border-bottom: 0 !important;
}
body.admin-standalone-active #overallStatsPage .mini-table table.mobile-stack-table td::before,
body.admin-standalone-active #hero-jfa-modal .mini-table table.mobile-stack-table td::before {
content: attr(data-label) ": ";
font-weight: 800 !important;
color: #0b2e52 !important;
display: block !important;
margin-bottom: 2px;
}
body.dark.admin-standalone-active #overallStatsPage .mini-table table.mobile-stack-table td::before,
body.dark.admin-standalone-active #hero-jfa-modal .mini-table table.mobile-stack-table td::before {
color: #a7c9ff !important;
}
body.admin-standalone-active .quick-actions,
body.admin-standalone-active .back-to-top,
body.admin-standalone-active .menu-fab {
display: none !important;
}
body.admin-standalone-active .mobile-dock {
left: calc(12px + env(safe-area-inset-left)) !important;
right: calc(12px + env(safe-area-inset-right)) !important;
width: auto !important;
display: flex !important;
flex-wrap: nowrap !important;
justify-content: center !important;
}
body.admin-standalone-active .mobile-dock .mobile-dock-btn[data-mobile-action="home"],
body.admin-standalone-active .mobile-dock .mobile-dock-btn[data-mobile-action="menu"],
body.admin-standalone-active .mobile-dock .mobile-dock-btn[data-mobile-action="primary"] {
display: none !important;
}
body.admin-standalone-active .mobile-dock .mobile-dock-btn[data-mobile-action="focus"],
body.admin-standalone-active .mobile-dock .mobile-dock-btn[data-mobile-action="quick"],
body.admin-standalone-active .mobile-dock .mobile-dock-btn[data-mobile-action="theme"] {
display: inline-flex !important;
min-width: 104px;
justify-content: center;
align-items: center;
}
body.admin-standalone-active .mobile-dock .mobile-dock-btn[data-mobile-action="quick"] {
background: linear-gradient(135deg, #F26A21, #D85A19) !important;
color: #FFFFFF !important;
box-shadow: 0 8px 18px rgba(242, 106, 33, 0.34) !important;
}
body.admin-standalone-active .mobile-dock .mobile-dock-btn[data-mobile-action="quick"]:active {
filter: brightness(0.96) !important;
}
}
/* Admin mobile topbar theme toggle */
#adminMobileThemeBtn {
display: none;
}
#adminMobileThemeBtn .theme-emoji {
font-size: 0.95rem;
line-height: 1;
}
@media (max-width: 768px) {
body.admin-standalone-active #adminMobileThemeBtn {
display: none !important;
align-items: center;
gap: 5px;
min-height: 32px !important;
height: 32px;
padding: 0 9px !important;
font-size: 0.72rem !important;
border-radius: 999px !important;
border-color: rgba(255, 255, 255, 0.28) !important;
background: rgba(255, 255, 255, 0.12) !important;
color: #f8fbff !important;
}
body.admin-standalone-active .nav-actions {
gap: 5px !important;
}
body:not(.admin-standalone-active) #adminMobileThemeBtn {
display: none !important;
}
}
/* Final admin top-gap lock */
body.admin-standalone-active #admin-standalone-page.page {
padding-top: 92px !important;
}
body.admin-standalone-active #admin-standalone-page .container {
margin-top: 0 !important;
}
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page.page {
padding-top: 76px !important;
}
}
/* Quick Actions Orange Override */
body.admin-standalone-active .quick-actions-toggle {
background: linear-gradient(135deg, #F26A21, #D85A19) !important;
color: #FFFFFF !important;
box-shadow: 0 10px 24px rgba(242, 106, 33, 0.34) !important;
}
body.admin-standalone-active .quick-actions-toggle:hover,
body.admin-standalone-active .quick-actions-toggle:focus-visible {
background: linear-gradient(135deg, #FF7A2D, #E1601C) !important;
box-shadow: 0 12px 26px rgba(242, 106, 33, 0.4) !important;
}
/* Admin mobile fit pass: Master Logger + JFA Register(All) */
@media (max-width: 768px) {
body.admin-standalone-active #adminMasterCapabilitiesCard h4 {
font-size: 1rem !important;
line-height: 1.25 !important;
margin-bottom: 6px !important;
}
body.admin-standalone-active #adminMasterCapabilitiesCard .page-subtitle {
font-size: 0.78rem !important;
line-height: 1.35 !important;
}
body.admin-standalone-active #adminMasterCapabilitiesCard .insight-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 7px !important;
margin-bottom: 10px !important;
}
body.admin-standalone-active #adminMasterCapabilitiesCard .insight-chip {
width: 100% !important;
min-height: 34px !important;
justify-content: center !important;
text-align: center !important;
font-size: 0.74rem !important;
line-height: 1.2 !important;
white-space: normal !important;
word-break: break-word !important;
padding: 7px 8px !important;
}
body.admin-standalone-active #adminMasterCapabilitiesCard .menu-page-actions.admin-master-tabs {
grid-template-columns: 1fr !important;
gap: 7px !important;
}
body.admin-standalone-active #adminMasterCapabilitiesCard .menu-page-actions.admin-master-tabs .action-btn {
width: 100% !important;
min-height: 38px !important;
justify-content: flex-start !important;
text-align: left !important;
font-size: 0.8rem !important;
line-height: 1.2 !important;
white-space: normal !important;
word-break: break-word !important;
padding: 8px 10px !important;
}
body.admin-standalone-active #adminMasterBody .register-editor-panel .menu-page-actions {
grid-template-columns: 1fr !important;
gap: 7px !important;
}
body.admin-standalone-active #adminMasterBody .admin-jfa-list {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
body.admin-standalone-active #adminMasterBody .admin-jfa-card {
grid-template-columns: 1fr !important;
gap: 8px !important;
align-items: flex-start !important;
}
body.admin-standalone-active #adminMasterBody .admin-jfa-card > div:last-child {
width: 100% !important;
justify-items: start !important;
}
body.admin-standalone-active #adminMasterBody .mini-table {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
body.admin-standalone-active #adminMasterBody .mini-table table {
min-width: 640px !important;
}
}
/* Global admin mobile fit lock (standalone + admin menu pages) */
@media (max-width: 768px) {
body.app-variant-admin .menu-page {
overflow-x: hidden !important;
}
body.app-variant-admin .menu-page .menu-page-inner {
width: 100% !important;
max-width: 100% !important;
padding: 10px !important;
overflow-x: hidden !important;
}
body.app-variant-admin .menu-page .menu-page-header {
grid-template-columns: 1fr !important;
gap: 8px !important;
align-items: start !important;
}
body.app-variant-admin .menu-page .menu-page-header h2 {
font-size: 1rem !important;
line-height: 1.2 !important;
margin: 0 !important;
}
body.app-variant-admin .menu-page .menu-header-actions {
width: 100% !important;
justify-content: flex-start !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
body.app-variant-admin .menu-page .menu-page-actions {
grid-template-columns: 1fr !important;
gap: 8px !important;
width: 100% !important;
}
body.app-variant-admin .menu-page .menu-page-actions .action-btn,
body.app-variant-admin .menu-page .menu-page-actions .submit-btn,
body.app-variant-admin .menu-page .menu-page-actions .back-btn {
width: 100% !important;
min-height: 40px !important;
justify-content: flex-start !important;
text-align: left !important;
line-height: 1.2 !important;
white-space: normal !important;
word-break: break-word !important;
padding: 9px 10px !important;
}
body.app-variant-admin .menu-page .insight-card,
body.app-variant-admin .menu-page .admin-detail-section,
body.app-variant-admin .menu-page .archives-panel,
body.app-variant-admin .menu-page .lead-panel,
body.app-variant-admin .menu-page .lead-section {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 10px !important;
border-radius: 12px !important;
}
body.app-variant-admin .menu-page .insight-list {
grid-template-columns: 1fr !important;
gap: 7px !important;
}
body.app-variant-admin .menu-page .insight-chip {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
white-space: normal !important;
}
body.app-variant-admin .menu-page .mini-table {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
body.app-variant-admin .menu-page .mini-table table {
min-width: 560px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
position: static !important;
top: auto !important;
width: 100% !important;
max-width: 100% !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* Admin mobile final fit lock: force every admin surface to stay within viewport */
@media (max-width: 768px) {
body.app-variant-admin,
body.app-variant-admin #appShell,
body.app-variant-admin .container,
body.app-variant-admin #adminPage,
body.app-variant-admin #admin-standalone-page,
body.app-variant-admin #adminPage .menu-page-inner,
body.app-variant-admin #admin-standalone-page .container,
body.app-variant-admin #adminMasterBody {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
body.app-variant-admin .stats-section,
body.app-variant-admin .insight-card,
body.app-variant-admin .menu-page-note,
body.app-variant-admin .register-editor-panel,
body.app-variant-admin .admin-detail-section,
body.app-variant-admin .lead-panel,
body.app-variant-admin .lead-section,
body.app-variant-admin .archives-panel,
body.app-variant-admin .facility-directory {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
body.app-variant-admin input,
body.app-variant-admin select,
body.app-variant-admin textarea,
body.app-variant-admin .action-btn,
body.app-variant-admin .submit-btn,
body.app-variant-admin .back-btn {
max-width: 100% !important;
box-sizing: border-box !important;
}
body.app-variant-admin .mini-table,
body.app-variant-admin .master-file-table,
body.app-variant-admin .mini-table-scroll {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
body.app-variant-admin .mini-table table,
body.app-variant-admin .master-file-table table {
min-width: 640px !important;
}
body.app-variant-admin .page-header,
body.app-variant-admin .menu-page-header {
gap: 6px !important;
}
body.app-variant-admin .menu-page-header h2,
body.app-variant-admin .page-header h1,
body.app-variant-admin .section-heading {
line-height: 1.2 !important;
word-break: break-word !important;
}
body.app-variant-admin .menu-page-actions {
margin-top: 8px !important;
}
}
/* Admin submitted leads fit lock (desktop + mobile) */
body.app-variant-admin .admin-submitted-leads-table-wrap,
body.admin-standalone-active .admin-submitted-leads-table-wrap {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
overflow-y: visible !important;
-webkit-overflow-scrolling: touch !important;
}
body.app-variant-admin .admin-submitted-leads-table-wrap .admin-submitted-leads-table,
body.admin-standalone-active .admin-submitted-leads-table-wrap .admin-submitted-leads-table {
width: max-content !important;
min-width: 2200px !important;
table-layout: auto !important;
}
body.app-variant-admin .admin-submitted-leads-table-wrap .admin-submitted-leads-table th,
body.app-variant-admin .admin-submitted-leads-table-wrap .admin-submitted-leads-table td,
body.admin-standalone-active .admin-submitted-leads-table-wrap .admin-submitted-leads-table th,
body.admin-standalone-active .admin-submitted-leads-table-wrap .admin-submitted-leads-table td {
vertical-align: top !important;
white-space: normal !important;
word-break: break-word !important;
}
@media (max-width: 768px) {
body.app-variant-admin .admin-submitted-leads-table-wrap .admin-submitted-leads-table.mobile-stack-table {
min-width: 100% !important;
width: 100% !important;
}
}
/* ===== Final Admin Redesign Override (visibility + pie restore) ===== */
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
border-radius: 18px !important;
border: 1px solid rgba(11, 46, 82, 0.28) !important;
background: linear-gradient(145deg, rgba(11, 46, 82, 0.98), rgba(8, 30, 55, 0.96)) !important;
box-shadow: 0 16px 36px rgba(8, 22, 42, 0.28) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell h1,
body.admin-standalone-active #admin-standalone-page .admin-top-shell h2,
body.admin-standalone-active #admin-standalone-page .admin-top-shell h4,
body.admin-standalone-active #admin-standalone-page .admin-top-shell .section-heading,
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-subtitle,
body.admin-standalone-active #admin-standalone-page .admin-top-shell .admin-brand-title {
color: #f8fbff !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
display: grid !important;
gap: 12px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack > .stats-section:nth-of-type(2) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px !important;
align-items: start !important;
}
body.admin-standalone-active #admin-standalone-page #adminPerformancePieCard {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
grid-column: 1 / -1 !important;
min-height: 300px !important;
border-radius: 16px !important;
border: 1px solid rgba(11, 46, 82, 0.18) !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96)) !important;
}
body.admin-standalone-active #admin-standalone-page #adminPerformancePieCard h4,
body.admin-standalone-active #admin-standalone-page #adminPerformancePieCard .page-subtitle,
body.admin-standalone-active #admin-standalone-page .admin-pie-legend-item,
body.admin-standalone-active #admin-standalone-page .admin-pie-summary {
color: #0f172a !important;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-layout {
display: grid !important;
grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
gap: 16px !important;
align-items: center !important;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-chart {
width: 190px !important;
height: 190px !important;
box-shadow: 0 14px 30px rgba(8, 22, 42, 0.28) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-legend-item {
background: rgba(15, 23, 42, 0.08) !important;
border: 1px solid rgba(11, 46, 82, 0.12) !important;
}
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
border-radius: 16px !important;
}
body.dark.admin-standalone-active #admin-standalone-page #adminPerformancePieCard {
border-color: rgba(148, 163, 184, 0.22) !important;
background: linear-gradient(180deg, rgba(10, 15, 28, 0.96), rgba(9, 13, 24, 0.94)) !important;
}
body.dark.admin-standalone-active #admin-standalone-page #adminPerformancePieCard h4,
body.dark.admin-standalone-active #admin-standalone-page #adminPerformancePieCard .page-subtitle,
body.dark.admin-standalone-active #admin-standalone-page .admin-pie-legend-item,
body.dark.admin-standalone-active #admin-standalone-page .admin-pie-summary {
color: #eaf1ff !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-pie-legend-item {
background: rgba(148, 163, 184, 0.12) !important;
border-color: rgba(148, 163, 184, 0.2) !important;
}
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack > .stats-section:nth-of-type(2) {
grid-template-columns: 1fr !important;
}
body.admin-standalone-active #admin-standalone-page #adminPerformancePieCard {
min-height: 260px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-layout {
grid-template-columns: 1fr !important;
justify-items: center !important;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-legend {
width: 100% !important;
}
}
/* ===== Corporate Admin Upgrade (desktop-first) ===== */
body.admin-standalone-active #admin-standalone-page {
--admin-navy-strong: #0b2e52;
--admin-navy-mid: #103b67;
--admin-ink: #102033;
--admin-muted: #4a6077;
--admin-panel: #ffffff;
--admin-panel-soft: #f4f8fd;
--admin-line: rgba(16, 45, 78, 0.18);
}
body.admin-standalone-active #admin-standalone-page .container {
display: grid;
gap: 14px;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
border-radius: 18px;
padding: 14px 16px 12px;
background:
linear-gradient(138deg, rgba(15, 55, 97, 0.98), rgba(8, 28, 52, 0.98)),
radial-gradient(1200px 420px at 100% -10%, rgba(255, 255, 255, 0.12), transparent 58%);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 20px 44px rgba(7, 18, 34, 0.36);
}
body.admin-standalone-active #admin-standalone-page .page-header {
gap: 4px;
margin-bottom: 8px;
}
body.admin-standalone-active #admin-standalone-page .page-header h1 {
margin: 0;
letter-spacing: 0.02em;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-stack {
margin: 2px 0 4px;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-logo {
border-radius: 14px;
background: rgba(255, 255, 255, 0.08);
padding: 6px 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 16px;
padding: 12px;
backdrop-filter: blur(4px);
}
body.admin-standalone-active #admin-standalone-page .admin-hero-head {
margin-bottom: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat {
min-height: 94px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 248, 255, 0.94));
border: 1px solid rgba(12, 44, 80, 0.16);
padding: 10px 10px 8px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat.is-clickable {
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat.is-clickable:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(7, 24, 44, 0.18);
border-color: rgba(12, 44, 80, 0.32);
}
body.admin-standalone-active #admin-standalone-page .admin-hero-value {
color: #0f2f52;
font-weight: 800;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-label {
color: #1a3553;
font-weight: 700;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-trend {
color: #3e5c7d;
font-size: 0.8rem;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs .action-btn {
justify-content: center;
min-height: 42px;
border-radius: 12px;
font-weight: 700;
border: 1px solid rgba(255, 255, 255, 0.2);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
}
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
display: grid;
grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
gap: 14px;
align-items: start;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
position: sticky;
top: 84px;
border-radius: 16px;
border: 1px solid var(--admin-line);
background: linear-gradient(180deg, var(--admin-panel), var(--admin-panel-soft));
box-shadow: 0 12px 28px rgba(10, 30, 56, 0.14);
}
body.admin-standalone-active #admin-standalone-page .admin-rail-head h4,
body.admin-standalone-active #admin-standalone-page .admin-rail-cluster h5 {
color: var(--admin-navy-strong);
}
body.admin-standalone-active #admin-standalone-page .admin-rail-actions {
gap: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-rail-actions .action-btn {
min-height: 38px;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
gap: 12px;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack .stats-section {
margin: 0;
}
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
border: 1px solid rgba(16, 45, 78, 0.14);
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.97));
box-shadow: 0 10px 24px rgba(8, 24, 44, 0.1);
}
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard {
min-height: 100%;
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid .action-btn {
justify-content: center;
min-height: 40px;
text-align: center;
border-radius: 12px;
}
body.admin-standalone-active #admin-standalone-page .admin-utility-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-utility-grid .action-btn {
min-height: 40px;
justify-content: center;
border-radius: 12px;
}
body.admin-standalone-active #admin-standalone-page #adminStandaloneMasterLogger,
body.admin-standalone-active #admin-standalone-page #adminStandaloneFacilityDirectory {
padding: 12px;
}
body.admin-standalone-active #admin-standalone-page :is(h1, h2, h3, h4) {
letter-spacing: 0.01em;
}
body.admin-standalone-active #admin-standalone-page :is(p, span, label, th, td) {
color: #1a2b3f;
}
body.admin-standalone-active #admin-standalone-page .page-subtitle {
color: #3d5773;
}
body.admin-standalone-active #admin-standalone-page .action-btn:focus-visible,
body.admin-standalone-active #admin-standalone-page .back-btn:focus-visible {
outline: 2px solid #f59e0b;
outline-offset: 2px;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-main-grid,
body.dark.admin-standalone-active #admin-standalone-page .admin-command-rail,
body.dark.admin-standalone-active #admin-standalone-page .insight-card,
body.dark.admin-standalone-active #admin-standalone-page .admin-detail-section {
border-color: rgba(148, 163, 184, 0.22);
}
body.dark.admin-standalone-active #admin-standalone-page .admin-command-rail,
body.dark.admin-standalone-active #admin-standalone-page .insight-card,
body.dark.admin-standalone-active #admin-standalone-page .admin-detail-section {
background: linear-gradient(180deg, rgba(11, 18, 31, 0.97), rgba(8, 14, 24, 0.96));
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.36);
}
body.dark.admin-standalone-active #admin-standalone-page :is(p, span, label, th, td) {
color: #e8effa;
}
body.dark.admin-standalone-active #admin-standalone-page .page-subtitle {
color: #b8c7da;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-hero-stat {
background: linear-gradient(180deg, rgba(17, 25, 40, 0.98), rgba(11, 17, 29, 0.96));
border-color: rgba(148, 163, 184, 0.22);
}
body.dark.admin-standalone-active #admin-standalone-page .admin-hero-value,
body.dark.admin-standalone-active #admin-standalone-page .admin-hero-label,
body.dark.admin-standalone-active #admin-standalone-page .admin-hero-trend {
color: #eaf1ff;
}
@media (max-width: 1280px) {
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.admin-standalone-active #admin-standalone-page .admin-utility-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 1fr;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
position: static;
top: auto;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs,
body.admin-standalone-active #admin-standalone-page .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid {
grid-template-columns: 1fr;
}
}
/* ===== Admin Desktop Fit Pass (compact corporate layout) ===== */
@media (min-width: 769px) {
body.admin-standalone-active #admin-standalone-page {
overflow-x: clip;
}
body.admin-standalone-active #admin-standalone-page .container {
width: min(1440px, calc(100vw - 20px));
max-width: min(1440px, calc(100vw - 20px));
margin-inline: auto;
gap: 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
padding: 10px 12px 9px;
border-radius: 14px;
}
body.admin-standalone-active #admin-standalone-page .page-header {
margin-bottom: 6px;
gap: 2px;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-logo {
max-height: 42px;
width: auto;
border-radius: 10px;
padding: 3px 7px;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
padding: 9px;
border-radius: 12px;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-head {
margin-bottom: 6px;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-head h2 {
font-size: 1.05rem;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stats {
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 7px;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat {
min-height: 76px;
padding: 8px 8px 7px;
border-radius: 11px;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-value {
font-size: 1.08rem;
line-height: 1.1;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-label {
font-size: 0.79rem;
line-height: 1.14;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-trend {
font-size: 0.72rem;
line-height: 1.12;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs {
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 7px;
margin-top: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs .action-btn {
min-height: 36px;
font-size: 0.8rem;
padding: 6px 8px;
border-radius: 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: minmax(232px, 264px) minmax(0, 1fr);
gap: 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
top: 72px;
max-height: calc(100vh - 86px);
overflow: auto;
border-radius: 13px;
padding: 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
gap: 9px;
}
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
border-radius: 12px;
}
body.admin-standalone-active #admin-standalone-page #adminPerformancePieCard {
min-height: 228px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-chart {
width: 164px !important;
height: 164px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid .action-btn {
min-height: 36px;
font-size: 0.79rem;
padding: 6px 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-utility-grid {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 7px;
}
body.admin-standalone-active #admin-standalone-page .admin-utility-grid .action-btn {
min-height: 36px;
font-size: 0.78rem;
padding: 6px 8px;
}
body.admin-standalone-active #admin-standalone-page #adminStandaloneMasterLogger,
body.admin-standalone-active #admin-standalone-page #adminStandaloneFacilityDirectory {
padding: 9px;
}
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table-wrap .admin-submitted-leads-table {
min-width: 1540px !important;
}
}
@media (min-width: 769px) and (max-height: 900px) {
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
padding: 8px 10px 7px;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stats {
gap: 6px;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat {
min-height: 70px;
padding: 7px;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs .action-btn,
body.admin-standalone-active #admin-standalone-page .admin-capability-grid .action-btn,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid .action-btn {
min-height: 34px;
font-size: 0.76rem;
}
body.admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity {
max-height: 240px;
overflow: auto;
}
}
@media (min-width: 769px) and (max-width: 1280px) {
body.admin-standalone-active #admin-standalone-page .container {
width: calc(100vw - 16px);
max-width: calc(100vw - 16px);
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stats {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.admin-standalone-active #admin-standalone-page .admin-utility-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* ===== Admin Pie Clarity Override (crisp SVG + bars) ===== */
body.admin-standalone-active #admin-standalone-page .admin-pie-svg-wrap {
display: grid;
gap: 10px;
justify-items: center;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-svg {
width: 188px;
height: 188px;
display: block;
shape-rendering: geometricPrecision;
text-rendering: geometricPrecision;
overflow: visible;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-ring-bg {
fill: none;
stroke: #ef4444;
stroke-width: 20;
opacity: 0.28;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-ring-performing {
fill: none;
stroke: #22c55e;
stroke-width: 20;
stroke-linecap: butt;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-center-value {
font-size: 1.45rem;
font-weight: 800;
fill: #0f172a;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-center-label {
font-size: 0.72rem;
font-weight: 700;
fill: #3f5268;
letter-spacing: 0.02em;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-bars {
width: min(280px, 100%);
display: grid;
gap: 6px;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-bar-row {
display: grid;
grid-template-columns: 102px minmax(0, 1fr) 44px;
align-items: center;
gap: 8px;
font-size: 0.78rem;
color: #1f3248;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-split-btn {
appearance: none;
border: 0;
background: transparent;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
cursor: pointer;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-split-btn:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.7);
outline-offset: 2px;
border-radius: 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-bar-track {
height: 8px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.35);
overflow: hidden;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-bar-track i {
display: block;
height: 100%;
border-radius: inherit;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-bar-track i.is-performing {
background: linear-gradient(90deg, #16a34a, #22c55e);
}
body.admin-standalone-active #admin-standalone-page .admin-pie-bar-track i.is-nonperforming {
background: linear-gradient(90deg, #dc2626, #ef4444);
}
body.dark.admin-standalone-active #admin-standalone-page .admin-pie-ring-bg {
stroke: #ef4444;
opacity: 0.34;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-pie-center-value {
fill: #eaf1ff;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-pie-center-label {
fill: #b9c8dc;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-pie-bar-row {
color: #d8e6f8;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-pie-bar-track {
background: rgba(148, 163, 184, 0.24);
}
/* ===== Admin Total Leads Dedicated Page ===== */
body.app-variant-admin #admin-total-leads-page .container {
width: min(1540px, calc(100vw - 20px));
max-width: min(1540px, calc(100vw - 20px));
margin-inline: auto;
}
body.app-variant-admin #admin-total-leads-page .admin-total-leads-shell {
border-radius: 16px;
border: 1px solid rgba(14, 44, 76, 0.2);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 255, 0.96));
box-shadow: 0 16px 32px rgba(8, 25, 46, 0.14);
padding: 12px;
}
body.app-variant-admin #admin-total-leads-page #adminTotalLeadsBody {
min-height: 420px;
}
body.app-variant-admin #admin-total-leads-page .admin-submitted-leads-table-wrap {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
body.app-variant-admin #admin-total-leads-page .admin-submitted-leads-table-wrap .admin-submitted-leads-table {
min-width: 2200px !important;
}
body.dark.app-variant-admin #admin-total-leads-page .admin-total-leads-shell {
border-color: rgba(148, 163, 184, 0.24);
background: linear-gradient(180deg, rgba(12, 18, 31, 0.98), rgba(8, 13, 24, 0.96));
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
}
@media (max-width: 768px) {
body.app-variant-admin #admin-total-leads-page .container {
width: calc(100vw - 10px);
max-width: calc(100vw - 10px);
}
body.app-variant-admin #admin-total-leads-page .admin-total-leads-shell {
border-radius: 12px;
padding: 8px;
}
body.app-variant-admin #admin-total-leads-page .menu-page-actions .action-btn {
min-height: 38px;
}
body.app-variant-admin #admin-total-leads-page .admin-submitted-leads-table-wrap .admin-submitted-leads-table.mobile-stack-table {
min-width: 100% !important;
width: 100% !important;
}
}
/* ===== Hard Desktop Fit Lock (Admin) ===== */
@media (min-width: 769px) {
body.admin-standalone-active #admin-standalone-page {
font-size: 14px !important;
}
body.admin-standalone-active #admin-standalone-page .container {
width: calc(100vw - 12px) !important;
max-width: calc(100vw - 12px) !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
padding: 7px 9px 6px !important;
border-radius: 12px !important;
}
body.admin-standalone-active #admin-standalone-page .page-header {
gap: 1px !important;
margin-bottom: 4px !important;
}
body.admin-standalone-active #admin-standalone-page .page-header h1 {
font-size: 1.12rem !important;
line-height: 1.14 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-title {
font-size: 0.82rem !important;
}
body.admin-standalone-active #admin-standalone-page .page-subtitle {
font-size: 0.74rem !important;
line-height: 1.2 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-logo {
max-height: 36px !important;
padding: 2px 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
padding: 7px !important;
border-radius: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stats {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat {
min-height: 62px !important;
padding: 6px !important;
border-radius: 9px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-value {
font-size: 1rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-label {
font-size: 0.72rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-trend {
font-size: 0.66rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-filter-ribbon {
margin-top: 4px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-filter-ribbon select {
min-height: 30px !important;
font-size: 0.74rem !important;
padding: 4px 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 6px !important;
margin-top: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs .action-btn {
min-height: 32px !important;
font-size: 0.72rem !important;
padding: 5px 7px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 220px minmax(0, 1fr) !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
top: 64px !important;
max-height: calc(100vh - 72px) !important;
padding: 8px !important;
border-radius: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail h4 {
font-size: 0.88rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail h5 {
font-size: 0.74rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-rail-actions .action-btn {
min-height: 31px !important;
font-size: 0.7rem !important;
padding: 4px 7px !important;
}
body.admin-standalone-active #admin-standalone-page .insight-chip {
font-size: 0.67rem !important;
padding: 4px 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
border-radius: 10px !important;
padding: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .insight-card h4 {
font-size: 0.9rem !important;
margin-bottom: 4px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid .action-btn {
min-height: 31px !important;
font-size: 0.7rem !important;
padding: 4px 7px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-utility-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-utility-grid .action-btn {
min-height: 31px !important;
font-size: 0.7rem !important;
padding: 4px 7px !important;
}
body.admin-standalone-active #admin-standalone-page #adminPerformancePieCard {
min-height: 200px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-svg {
width: 158px !important;
height: 158px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-pie-bar-row {
grid-template-columns: 90px minmax(0, 1fr) 40px !important;
font-size: 0.72rem !important;
}
}
@media (min-width: 769px) and (max-width: 1366px) {
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 200px minmax(0, 1fr) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid,
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (min-width: 769px) and (max-height: 860px) {
body.admin-standalone-active #admin-standalone-page .admin-hero-stat {
min-height: 56px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-trend {
display: none !important;
}
}
/* ===== Admin Layout Overhaul Pack ===== */
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
margin-bottom: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar .insight-chip {
justify-content: center;
font-weight: 700;
}
body.admin-standalone-active.admin-secondary-kpis-hidden #admin-standalone-page .admin-hero-stats .admin-kpi-secondary {
display: none !important;
}
body.admin-standalone-active #admin-standalone-page .admin-severity-legend {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-severity-legend .insight-chip {
width: 100%;
min-height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: 800;
padding: 8px 10px;
}
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page .admin-severity-legend {
grid-template-columns: 1fr;
}
}
body.admin-standalone-active #admin-standalone-page .admin-leads-split {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 10px;
align-items: start;
}
body.admin-standalone-active #admin-standalone-page .admin-lead-detail-pane {
position: sticky;
top: 74px;
padding: 10px;
border: 1px solid rgba(15, 44, 78, 0.16);
border-radius: 12px;
background: linear-gradient(180deg, rgba(249, 252, 255, 0.96), rgba(241, 248, 255, 0.94));
}
body.admin-standalone-active #admin-standalone-page .admin-lead-detail-pane h5 {
margin: 0 0 8px;
font-size: 0.92rem;
color: #12345b;
}
body.admin-standalone-active #admin-standalone-page .admin-lead-detail-pane p {
margin: 0 0 6px;
font-size: 0.78rem;
color: #1b334e;
}
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table th {
position: sticky;
top: 0;
z-index: 2;
}
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table th:first-child,
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table td:first-child {
position: sticky;
left: 0;
z-index: 1;
background: rgba(244, 250, 255, 0.98);
}
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table tr.is-focused {
outline: 2px solid rgba(245, 158, 11, 0.5);
outline-offset: -2px;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table th:first-child,
body.dark.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table td:first-child {
background: rgba(12, 18, 31, 0.98);
}
body.dark.admin-standalone-active #admin-standalone-page .admin-lead-detail-pane {
border-color: rgba(148, 163, 184, 0.24);
background: linear-gradient(180deg, rgba(11, 18, 31, 0.97), rgba(8, 13, 24, 0.95));
}
body.dark.admin-standalone-active #admin-standalone-page .admin-lead-detail-pane h5,
body.dark.admin-standalone-active #admin-standalone-page .admin-lead-detail-pane p {
color: #deebfc;
}
body.admin-density-comfortable.admin-standalone-active #admin-standalone-page {
--admin-density-scale: 1;
}
body.admin-density-compact.admin-standalone-active #admin-standalone-page {
--admin-density-scale: 0.92;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .action-btn,
body.admin-standalone-active #admin-standalone-page .admin-hero-stat {
transform-origin: top left;
}
body.admin-density-compact.admin-standalone-active #admin-standalone-page .admin-top-shell,
body.admin-density-compact.admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body.admin-density-compact.admin-standalone-active #admin-standalone-page .insight-card {
font-size: 0.95em;
}
@media (max-width: 1200px) {
body.admin-standalone-active #admin-standalone-page .admin-leads-split {
grid-template-columns: 1fr;
}
body.admin-standalone-active #admin-standalone-page .admin-lead-detail-pane {
position: static;
top: auto;
}
}
/* MatDash-style final admin redesign (clean, compact, corporate) */
body.admin-standalone-active #admin-standalone-page .admin-template-shell {
display: block;
}
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar {
position: fixed;
left: 0;
top: 0;
width: 270px;
height: calc(100vh - 2px);
overflow-x: visible;
overflow-y: auto;
display: flex;
flex-direction: column;
padding: 16px 14px 14px;
border-radius: 0;
background: linear-gradient(180deg, rgba(8, 26, 66, 0.98), rgba(6, 18, 44, 0.98));
border-right: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
z-index: 20;
}
body.admin-standalone-active #admin-standalone-page .admin-template-brand {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
body.admin-standalone-active #admin-standalone-page .admin-template-brand-logo {
width: 46px;
height: 46px;
object-fit: contain;
}
body.admin-standalone-active #admin-standalone-page .admin-template-brand-text {
display: grid;
gap: 2px;
}
body.admin-standalone-active #admin-standalone-page .admin-template-brand-text strong {
color: #fff;
font-size: 0.98rem;
line-height: 1.15;
}
body.admin-standalone-active #admin-standalone-page .admin-template-brand-text span {
color: rgba(255, 255, 255, 0.78);
font-size: 0.8rem;
}
body.admin-standalone-active #admin-standalone-page .admin-template-nav {
display: grid;
gap: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-template-nav-heading {
margin: 10px 2px 8px;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.62);
}
body.admin-standalone-active #admin-standalone-page .admin-template-nav .action-btn.secondary {
justify-content: flex-start;
width: 100%;
text-align: left;
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-nav .action-btn.secondary:hover {
background: rgba(255, 140, 32, 0.24) !important;
border-color: rgba(255, 140, 32, 0.56) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar-footer {
margin-top: 10px;
display: grid;
gap: 8px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
flex: 0 0 auto;
}
body.admin-standalone-active #admin-standalone-page .admin-template-action-queue {
margin-top: 6px;
margin-bottom: 8px;
padding: 10px 10px 11px;
flex: 0 0 auto;
min-height: 320px;
border-radius: 12px !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
background: rgba(255, 255, 255, 0.06) !important;
box-shadow: none !important;
}
body.admin-standalone-active #admin-standalone-page #adminTodayActionQueueBody {
display: flex;
flex-direction: column;
gap: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-template-action-queue h4 {
margin: 0 0 4px;
font-size: 0.9rem;
color: #ffffff !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-action-queue .page-subtitle {
margin: 0 0 8px;
font-size: 0.76rem;
color: rgba(255, 255, 255, 0.8) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-action-queue-section {
margin-top: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-action-queue-section h5 {
margin: 0 0 6px;
font-size: 0.72rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.74) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-action-queue-list {
display: grid;
gap: 6px;
}
body.admin-standalone-active #admin-standalone-page .admin-action-queue-item {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
padding: 7px 9px;
text-align: left;
cursor: pointer;
}
body.admin-standalone-active #admin-standalone-page .admin-action-queue-item:hover {
border-color: rgba(255, 140, 32, 0.52);
background: rgba(255, 140, 32, 0.2);
}
body.admin-standalone-active #admin-standalone-page .admin-action-queue-item span {
font-size: 0.78rem;
color: #ffffff;
}
body.admin-standalone-active #admin-standalone-page .admin-action-queue-item strong {
font-size: 0.86rem;
color: #ffffff;
}
body.admin-standalone-active #admin-standalone-page .admin-action-queue-item.is-warn {
border-color: rgba(245, 158, 11, 0.62);
background: rgba(245, 158, 11, 0.16);
}
body.admin-standalone-active #admin-standalone-page .admin-action-queue-item.is-danger {
border-color: rgba(244, 63, 94, 0.65);
background: rgba(244, 63, 94, 0.15);
}
body.admin-standalone-active #admin-standalone-page .admin-action-queue-kpis {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
body.admin-standalone-active #admin-standalone-page .admin-action-queue-kpis .insight-chip {
font-size: 0.72rem;
padding: 4px 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-action-queue-actions {
margin-top: 9px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
body.admin-standalone-active #admin-standalone-page .admin-action-queue-actions .action-btn.secondary {
min-height: 34px;
font-size: 0.76rem;
padding: 6px 8px;
}
@media (max-width: 1100px) {
body.admin-standalone-active #admin-standalone-page .admin-template-action-queue {
margin-top: 8px;
}
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
min-width: 0;
margin-left: 286px;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header {
position: sticky;
top: 72px;
z-index: 6;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
margin-bottom: 12px;
border-radius: 14px;
background: rgba(8, 24, 60, 0.96);
border: 1px solid rgba(255, 255, 255, 0.16);
backdrop-filter: blur(8px);
}
body.admin-standalone-active #admin-standalone-page .admin-template-header-left {
flex: 1 1 auto;
min-width: 0;
}
body.admin-standalone-active #admin-standalone-page .admin-template-search-wrap {
width: 100%;
}
body.admin-standalone-active #admin-standalone-page .admin-template-search {
width: min(100%, 520px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.08);
color: #fff;
padding: 10px 12px;
font-size: 0.9rem;
}
body.admin-standalone-active #admin-standalone-page .admin-template-search::placeholder {
color: rgba(255, 255, 255, 0.7);
}
body.admin-standalone-active #admin-standalone-page .admin-template-header-right {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
/* Desktop layout lock: keep sidebar directly next to Admin Control Center */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .admin-template-shell {
display: grid !important;
grid-template-columns: 270px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar {
position: sticky !important;
top: 72px !important;
left: auto !important;
width: 270px !important;
height: calc(100vh - 88px) !important;
border-radius: 14px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
}
body.admin-standalone-active #admin-standalone-page .admin-matdash-main {
display: block !important;
margin-top: 14px;
}
body.admin-standalone-active #admin-standalone-page .admin-matdash-workspace {
display: grid;
gap: 14px;
}
body.admin-standalone-active #admin-standalone-page .admin-matdash-toolbar .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-matdash-primary-row .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-matdash-secondary-row .insight-card,
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard,
body.admin-standalone-active #admin-standalone-page .admin-topside-panel,
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
border-radius: 18px !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
background: linear-gradient(180deg, rgba(12, 33, 74, 0.96), rgba(7, 19, 48, 0.98)) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-matdash-primary-row,
body.admin-standalone-active #admin-standalone-page .admin-matdash-secondary-row,
body.admin-standalone-active #admin-standalone-page .admin-finance-compliance-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
align-items: stretch;
}
body.admin-standalone-active #admin-standalone-page #adminPerformancePieCard {
min-height: 260px;
}
body.admin-standalone-active #admin-standalone-page .admin-matdash-toolbar .menu-page-actions {
margin: 0;
}
body.admin-standalone-active #admin-standalone-page .admin-matdash-toolbar .admin-status-chips {
margin-top: 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid .action-btn.secondary,
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar .action-btn.secondary {
background: rgba(255, 140, 32, 0.18) !important;
border-color: rgba(255, 140, 32, 0.48) !important;
color: #fff !important;
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid .action-btn.secondary:hover,
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar .action-btn.secondary:hover {
background: rgba(255, 140, 32, 0.28) !important;
transform: translateY(-1px);
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell h1,
body.admin-standalone-active #admin-standalone-page .admin-top-shell h2,
body.admin-standalone-active #admin-standalone-page .admin-top-shell h3,
body.admin-standalone-active #admin-standalone-page .admin-top-shell h4,
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-subtitle,
body.admin-standalone-active #admin-standalone-page .admin-top-shell span,
body.admin-standalone-active #admin-standalone-page .admin-top-shell p,
body.admin-standalone-active #admin-standalone-page .admin-top-shell label,
body.admin-standalone-active #admin-standalone-page .admin-top-shell th,
body.admin-standalone-active #admin-standalone-page .admin-top-shell td {
color: #f7fbff !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell h1,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell h2,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell h3,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell h4,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell span,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell p,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell label,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell th,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell td {
color: #f7fbff !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-logo {
width: 170px !important;
max-width: 48vw;
filter: drop-shadow(0 8px 20px rgba(255, 140, 32, 0.22));
}
@media (max-width: 1200px) {
body.admin-standalone-active #admin-standalone-page .admin-matdash-primary-row,
body.admin-standalone-active #admin-standalone-page .admin-matdash-secondary-row,
body.admin-standalone-active #admin-standalone-page .admin-finance-compliance-row {
grid-template-columns: 1fr;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
gap: 12px;
}
}
@media (max-width: 1100px) {
body.admin-standalone-active #admin-standalone-page .admin-template-shell {
display: block;
}
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar {
position: static;
width: auto;
height: auto;
border-right: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
margin-bottom: 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header {
position: static;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
margin-left: 0;
}
}
/* Final parity pass: template-grade spacing/typography/system rhythm */
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar {
padding: 18px 14px 14px;
}
body.admin-standalone-active #admin-standalone-page .admin-template-brand {
margin-bottom: 14px;
padding-bottom: 12px;
}
body.admin-standalone-active #admin-standalone-page .admin-template-brand-text strong {
font-size: 1.02rem;
letter-spacing: 0.01em;
}
body.admin-standalone-active #admin-standalone-page .admin-template-nav {
gap: 6px;
}
body.admin-standalone-active #admin-standalone-page .admin-template-nav .admin-template-nav-btn {
min-height: 40px;
border-radius: 10px;
padding: 8px 10px;
font-size: 0.86rem;
font-weight: 600;
line-height: 1.2;
box-shadow: none;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
body.admin-standalone-active #admin-standalone-page .admin-template-nav .admin-template-nav-btn:active {
transform: translateY(1px);
}
body.admin-standalone-active #admin-standalone-page .admin-template-nav .admin-template-nav-btn.admin-template-nav-btn-active {
background: rgba(255, 140, 32, 0.26) !important;
border-color: rgba(255, 140, 32, 0.62) !important;
color: #fff !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header {
top: 70px;
min-height: 66px;
padding: 12px 16px;
border-radius: 16px;
}
body.admin-standalone-active #admin-standalone-page .admin-template-search {
height: 40px;
border-radius: 12px;
font-size: 0.9rem;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
border-radius: 20px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-head h2 {
font-size: 1.22rem !important;
letter-spacing: 0.01em;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stats {
gap: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat {
border-radius: 14px !important;
min-height: 94px;
padding: 10px 12px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-value {
font-size: 1.34rem !important;
line-height: 1.1;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-label {
font-size: 0.78rem !important;
opacity: 0.94;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-trend {
font-size: 0.73rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-matdash-workspace {
gap: 12px;
}
body.admin-standalone-active #admin-standalone-page .admin-matdash-toolbar .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-matdash-primary-row .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-matdash-secondary-row .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-finance-compliance-row .insight-card,
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard,
body.admin-standalone-active #admin-standalone-page .admin-topside-panel {
padding: 14px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid {
gap: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid .action-btn.secondary,
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar .action-btn.secondary {
min-height: 38px;
border-radius: 10px;
padding: 8px 10px;
font-size: 0.84rem;
font-weight: 600;
}
body.admin-standalone-active #admin-standalone-page #adminPerformancePieCard {
min-height: 300px;
}
@media (max-width: 1100px) {
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar {
padding: 14px;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header {
min-height: auto;
padding: 10px 12px;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header-right {
width: 100%;
justify-content: flex-start;
}
}
/* Final fix: keep Master Logger content panel below summary to prevent obstruction */
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
display: block !important;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
width: 100%;
}
body.admin-standalone-active #admin-standalone-page .admin-topside-panel {
margin-top: 14px !important;
width: 100%;
max-height: none !important;
overflow: visible !important;
grid-column: auto !important;
}
body.admin-standalone-active #admin-standalone-page .admin-topside-panel .admin-detail-section {
margin-top: 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs {
gap: 8px;
}
/* Header overlap fix: keep utility action row in normal flow */
body.admin-standalone-active #admin-standalone-page .admin-main-grid .admin-bottom-actions-bar.admin-utility-grid {
position: static !important;
top: auto !important;
z-index: 1 !important;
margin: 0 0 10px 0 !important;
}
/* Final visual cleanup: no card behind main admin logo */
body.admin-standalone-active #admin-standalone-page .page-header .admin-brand-stack,
body.admin-standalone-active #admin-standalone-page .admin-brand-stack {
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Volt template skin layer for Admin standalone */
body.admin-standalone-active #admin-standalone-page.admin-volt-skin {
--volt-bg: #0f172a;
--volt-panel: #111827;
--volt-panel-soft: #1f2937;
--volt-border: rgba(148, 163, 184, 0.22);
--volt-text: #e5e7eb;
--volt-muted: #9ca3af;
--volt-accent: #f97316;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-template-sidebar {
background: linear-gradient(180deg, #0b1222 0%, #111827 100%) !important;
border-right: 1px solid var(--volt-border) !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-template-header {
background: rgba(17, 24, 39, 0.96) !important;
border-color: var(--volt-border) !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-template-search {
background: rgba(31, 41, 55, 0.92) !important;
border-color: rgba(148, 163, 184, 0.3) !important;
color: var(--volt-text) !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-template-nav .admin-template-nav-btn,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-capability-grid .action-btn.secondary,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-bottom-actions-bar .action-btn.secondary {
background: rgba(31, 41, 55, 0.9) !important;
border-color: var(--volt-border) !important;
color: var(--volt-text) !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-template-nav .admin-template-nav-btn:hover,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-capability-grid .action-btn.secondary:hover,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-bottom-actions-bar .action-btn.secondary:hover {
background: rgba(249, 115, 22, 0.22) !important;
border-color: rgba(249, 115, 22, 0.52) !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-template-nav .admin-template-nav-btn.admin-template-nav-btn-active {
background: rgba(249, 115, 22, 0.26) !important;
border-color: rgba(249, 115, 22, 0.62) !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-top-shell .page-header,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-standalone-hero,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .insight-card,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-topside-panel {
background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(15, 23, 42, 0.98)) !important;
border: 1px solid var(--volt-border) !important;
box-shadow: 0 12px 28px rgba(2, 6, 23, 0.45) !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin h1,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin h2,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin h3,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin h4,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin p,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin span,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin label,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin th,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin td {
color: var(--volt-text) !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .page-subtitle,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-template-brand-text span,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-template-nav-heading {
color: var(--volt-muted) !important;
}
/* Volt full integration pass */
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-template-content {
padding-right: 6px;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-top-shell .page-header {
padding: 18px 20px !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-standalone-hero {
padding: 16px 18px !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-hero-head h2 {
font-size: 1.2rem !important;
font-weight: 700 !important;
letter-spacing: 0.01em;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-hero-stats {
gap: 10px !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-hero-stat {
background: linear-gradient(180deg, rgba(31, 41, 55, 0.9), rgba(17, 24, 39, 0.96)) !important;
border: 1px solid rgba(148, 163, 184, 0.24) !important;
border-radius: 14px !important;
min-height: 96px;
padding: 10px 12px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 20px rgba(2, 6, 23, 0.32);
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-hero-stat.is-clickable:hover {
border-color: rgba(249, 115, 22, 0.52) !important;
transform: translateY(-1px);
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-hero-value {
color: #f8fafc !important;
font-size: 1.4rem !important;
font-weight: 700 !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-hero-label {
color: #cbd5e1 !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-hero-trend {
color: #94a3b8 !important;
font-size: 0.72rem !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .insight-chip {
border-radius: 999px !important;
border: 1px solid rgba(148, 163, 184, 0.24) !important;
background: rgba(30, 41, 59, 0.82) !important;
color: #dbeafe !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .insight-chip.warn {
border-color: rgba(251, 191, 36, 0.4) !important;
background: rgba(120, 53, 15, 0.35) !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .insight-chip.danger {
border-color: rgba(248, 113, 113, 0.42) !important;
background: rgba(127, 29, 29, 0.34) !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .insight-chip.success {
border-color: rgba(74, 222, 128, 0.38) !important;
background: rgba(20, 83, 45, 0.32) !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .insight-card h4 {
font-size: 1rem !important;
font-weight: 700 !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .audit-log {
max-height: 300px;
overflow: auto;
border-radius: 12px;
background: rgba(15, 23, 42, 0.64);
border: 1px solid rgba(148, 163, 184, 0.2);
padding: 10px;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .mini-table {
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.82);
border-radius: 14px;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .mini-table thead th {
background: rgba(30, 41, 59, 0.92) !important;
color: #e2e8f0 !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.26) !important;
font-weight: 700 !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .mini-table tbody td {
color: #e5e7eb !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .mini-table tbody tr:hover td {
background: rgba(249, 115, 22, 0.12) !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin input,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin select,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin textarea {
border-radius: 10px !important;
border: 1px solid rgba(148, 163, 184, 0.28) !important;
background: rgba(15, 23, 42, 0.88) !important;
color: #f8fafc !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin input::placeholder,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin textarea::placeholder {
color: #94a3b8 !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .action-btn {
border-radius: 10px !important;
font-weight: 700 !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .action-btn:not(.secondary) {
background: linear-gradient(180deg, #fb923c, #f97316) !important;
border-color: rgba(251, 146, 60, 0.8) !important;
color: #fff !important;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .action-btn:not(.secondary):hover {
filter: brightness(1.05);
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-template-sidebar::-webkit-scrollbar,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .audit-log::-webkit-scrollbar,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .mini-table::-webkit-scrollbar {
width: 10px;
height: 10px;
}
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .admin-template-sidebar::-webkit-scrollbar-thumb,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .audit-log::-webkit-scrollbar-thumb,
body.admin-standalone-active #admin-standalone-page.admin-volt-skin .mini-table::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.36);
border-radius: 999px;
}
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar {
grid-template-columns: 1fr 1fr;
}
}
/* ===== Final Admin Theme v2 (authoritative override) ===== */
body.admin-standalone-active #admin-standalone-page {
--admin-v2-navy-1: #08233f;
--admin-v2-navy-2: #0f355f;
--admin-v2-ink: #10263f;
--admin-v2-muted: #4a6078;
--admin-v2-panel: #ffffff;
--admin-v2-panel-soft: #f2f7fd;
--admin-v2-line: rgba(13, 45, 79, 0.16);
--admin-v2-glow: 0 14px 32px rgba(7, 23, 42, 0.16);
}
body.admin-standalone-active #admin-standalone-page .container {
width: min(1560px, calc(100vw - 14px)) !important;
max-width: min(1560px, calc(100vw - 14px)) !important;
margin-inline: auto;
gap: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
border-radius: 14px !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
background:
radial-gradient(880px 260px at 96% -8%, rgba(255, 255, 255, 0.14), transparent 62%),
linear-gradient(130deg, var(--admin-v2-navy-2), var(--admin-v2-navy-1)) !important;
box-shadow: 0 18px 40px rgba(5, 18, 34, 0.34) !important;
padding: 9px 11px 8px !important;
}
body.admin-standalone-active #admin-standalone-page .page-header {
gap: 2px !important;
margin-bottom: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .page-header h1 {
font-size: 1.08rem !important;
letter-spacing: 0.02em;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-title,
body.admin-standalone-active #admin-standalone-page .page-header .page-subtitle,
body.admin-standalone-active #admin-standalone-page .admin-hero-head .page-subtitle {
color: #d9e9fb !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-logo {
max-height: 40px !important;
border-radius: 10px !important;
padding: 3px 7px !important;
background: rgba(255, 255, 255, 0.1) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar {
margin-bottom: 7px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar .insight-chip {
background: rgba(255, 255, 255, 0.16) !important;
border: 1px solid rgba(255, 255, 255, 0.28) !important;
color: #f0f7ff !important;
font-weight: 700;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
border-radius: 12px !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)) !important;
padding: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stats {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat {
min-height: 66px !important;
border-radius: 10px !important;
border: 1px solid var(--admin-v2-line) !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.95)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
padding: 6px 7px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-value {
color: #11345b !important;
font-size: 1.02rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-label {
color: #1b3657 !important;
font-size: 0.73rem !important;
font-weight: 800 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-trend {
color: #506680 !important;
font-size: 0.67rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs .action-btn,
body.admin-standalone-active #admin-standalone-page .admin-capability-grid .action-btn,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid .action-btn {
min-height: 34px !important;
border-radius: 10px !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
justify-content: center !important;
}
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 228px minmax(0, 1fr) !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
position: sticky !important;
top: 66px !important;
max-height: calc(100vh - 74px) !important;
overflow: auto !important;
border-radius: 12px !important;
border: 1px solid var(--admin-v2-line) !important;
background: linear-gradient(180deg, var(--admin-v2-panel), var(--admin-v2-panel-soft)) !important;
box-shadow: var(--admin-v2-glow) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
border-radius: 12px !important;
border: 1px solid var(--admin-v2-line) !important;
background: linear-gradient(180deg, #ffffff, #f6faff) !important;
box-shadow: 0 10px 22px rgba(8, 24, 44, 0.1) !important;
}
body.admin-standalone-active #admin-standalone-page .insight-card h4 {
color: var(--admin-v2-ink) !important;
letter-spacing: 0.01em;
}
body.admin-standalone-active #admin-standalone-page .page-subtitle,
body.admin-standalone-active #admin-standalone-page p,
body.admin-standalone-active #admin-standalone-page span,
body.admin-standalone-active #admin-standalone-page td,
body.admin-standalone-active #admin-standalone-page th {
color: #203852 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table tr:hover {
background: rgba(244, 165, 47, 0.12) !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-top-shell {
background:
radial-gradient(880px 260px at 96% -8%, rgba(255, 255, 255, 0.07), transparent 62%),
linear-gradient(130deg, #0a1a2f, #071426) !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-system-status-bar .insight-chip {
background: rgba(148, 163, 184, 0.16) !important;
border-color: rgba(148, 163, 184, 0.26) !important;
color: #e8f1ff !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-hero-stat,
body.dark.admin-standalone-active #admin-standalone-page .admin-command-rail,
body.dark.admin-standalone-active #admin-standalone-page .insight-card,
body.dark.admin-standalone-active #admin-standalone-page .admin-detail-section {
background: linear-gradient(180deg, rgba(12, 18, 32, 0.98), rgba(8, 13, 24, 0.96)) !important;
border-color: rgba(148, 163, 184, 0.24) !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-hero-value,
body.dark.admin-standalone-active #admin-standalone-page .admin-hero-label,
body.dark.admin-standalone-active #admin-standalone-page .admin-hero-trend,
body.dark.admin-standalone-active #admin-standalone-page .insight-card h4,
body.dark.admin-standalone-active #admin-standalone-page .page-subtitle,
body.dark.admin-standalone-active #admin-standalone-page p,
body.dark.admin-standalone-active #admin-standalone-page span,
body.dark.admin-standalone-active #admin-standalone-page td,
body.dark.admin-standalone-active #admin-standalone-page th {
color: #e7effc !important;
}
@media (max-width: 1366px) {
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 980px) {
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 1fr !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
position: static !important;
top: auto !important;
max-height: none !important;
}
}
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page .container {
width: calc(100vw - 8px) !important;
max-width: calc(100vw - 8px) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar {
grid-template-columns: 1fr 1fr !important;
gap: 5px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs,
body.admin-standalone-active #admin-standalone-page .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid {
grid-template-columns: 1fr !important;
}
}
/* ===== Admin Unified Navy Block + Prominent Logo ===== */
body.admin-standalone-active #admin-standalone-page .container {
background: linear-gradient(160deg, #0a2a4a 0%, #081f38 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 20px !important;
box-shadow: 0 24px 46px rgba(6, 20, 37, 0.4) !important;
padding: 14px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 0 12px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
background: rgba(255, 255, 255, 0.07) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 16px !important;
padding: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail,
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 255, 0.96)) !important;
border: 1px solid rgba(15, 47, 82, 0.14) !important;
border-radius: 14px !important;
box-shadow: 0 12px 24px rgba(7, 22, 40, 0.14) !important;
}
body.admin-standalone-active #admin-standalone-page .page-header h1,
body.admin-standalone-active #admin-standalone-page .section-heading,
body.admin-standalone-active #admin-standalone-page .admin-brand-title {
color: #eef6ff !important;
}
body.admin-standalone-active #admin-standalone-page .page-header .page-subtitle,
body.admin-standalone-active #admin-standalone-page .admin-hero-head .page-subtitle {
color: #c5d9ef !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-stack {
align-items: center !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-logo {
max-height: 92px !important;
width: auto !important;
object-fit: contain !important;
padding: 0 !important;
border-radius: 14px !important;
background: transparent !important;
filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.38)) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-title {
font-size: 0.9rem !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
}
@media (max-width: 980px) {
body.admin-standalone-active #admin-standalone-page .container {
padding: 10px !important;
border-radius: 16px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
padding: 8px !important;
}
}
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page .admin-brand-logo {
max-height: 68px !important;
}
}
/* ===== Admin Rebuild v3 (clean corporate reset) ===== */
body.admin-standalone-active #admin-standalone-page {
--a3-bg: #f3f6fb;
--a3-surface: #ffffff;
--a3-surface-2: #f8fbff;
--a3-text: #0f2238;
--a3-muted: #5d7088;
--a3-border: #d8e3ef;
--a3-navy: #0b2e52;
--a3-accent: #f4a52f;
--a3-shadow: 0 10px 26px rgba(11, 34, 58, 0.08);
}
body.admin-standalone-active #admin-standalone-page,
body.admin-standalone-active #admin-standalone-page .container {
background: var(--a3-bg) !important;
}
body.admin-standalone-active #admin-standalone-page .container {
width: min(1380px, calc(100vw - 18px)) !important;
max-width: min(1380px, calc(100vw - 18px)) !important;
gap: 12px !important;
margin-inline: auto !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
background: var(--a3-surface) !important;
border: 1px solid var(--a3-border) !important;
border-radius: 16px !important;
box-shadow: var(--a3-shadow) !important;
padding: 12px !important;
}
body.admin-standalone-active #admin-standalone-page .page-header {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .page-header h1 {
grid-column: 2 / 3 !important;
margin: 0 !important;
font-size: 1.05rem !important;
color: var(--a3-navy) !important;
letter-spacing: 0.02em !important;
}
body.admin-standalone-active #admin-standalone-page .page-header .section-heading,
body.admin-standalone-active #admin-standalone-page .page-header .page-subtitle {
grid-column: 2 / 3 !important;
margin: 0 !important;
color: var(--a3-muted) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-stack {
grid-column: 3 / 4 !important;
justify-self: end !important;
text-align: right !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-title {
color: var(--a3-navy) !important;
font-weight: 700 !important;
font-size: 0.8rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-logo {
max-height: 44px !important;
padding: 0 !important;
border-radius: 10px !important;
background: transparent !important;
}
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar {
margin-bottom: 8px !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar .insight-chip {
background: var(--a3-surface-2) !important;
border: 1px solid var(--a3-border) !important;
color: var(--a3-text) !important;
justify-content: center !important;
font-weight: 700 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
background: var(--a3-surface-2) !important;
border: 1px solid var(--a3-border) !important;
border-radius: 14px !important;
padding: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-head h2 {
color: var(--a3-navy) !important;
margin: 0 0 2px 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-head .page-subtitle {
color: var(--a3-muted) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stats {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat {
min-height: 74px !important;
background: var(--a3-surface) !important;
border: 1px solid var(--a3-border) !important;
border-radius: 12px !important;
box-shadow: none !important;
padding: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat.is-clickable:hover {
border-color: #b9cadc !important;
box-shadow: 0 6px 14px rgba(11, 34, 58, 0.08) !important;
transform: translateY(-1px) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-value {
color: var(--a3-navy) !important;
font-size: 1.08rem !important;
font-weight: 800 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-label {
color: #1e3958 !important;
font-size: 0.76rem !important;
font-weight: 700 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-trend {
color: var(--a3-muted) !important;
font-size: 0.68rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-filter-ribbon select {
min-height: 34px !important;
border-radius: 10px !important;
border: 1px solid var(--a3-border) !important;
background: #fff !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .action-btn,
body.admin-standalone-active #admin-standalone-page .back-btn {
border-radius: 10px !important;
border: 1px solid #cad8e7 !important;
background: #fff !important;
color: var(--a3-text) !important;
min-height: 34px !important;
font-size: 0.74rem !important;
font-weight: 700 !important;
}
body.admin-standalone-active #admin-standalone-page .action-btn:not(.secondary),
body.admin-standalone-active #admin-standalone-page .admin-tab-active {
background: linear-gradient(180deg, #133a67, #0b2e52) !important;
color: #f4f9ff !important;
border-color: #0b2e52 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 250px minmax(0, 1fr) !important;
gap: 12px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
position: sticky !important;
top: 74px !important;
max-height: calc(100vh - 86px) !important;
overflow: auto !important;
background: var(--a3-surface) !important;
border: 1px solid var(--a3-border) !important;
border-radius: 14px !important;
box-shadow: var(--a3-shadow) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail h4,
body.admin-standalone-active #admin-standalone-page .admin-command-rail h5 {
color: var(--a3-navy) !important;
}
body.admin-standalone-active #admin-standalone-page .insight-chip {
border-radius: 999px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
gap: 12px !important;
}
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
background: var(--a3-surface) !important;
border: 1px solid var(--a3-border) !important;
border-radius: 14px !important;
box-shadow: var(--a3-shadow) !important;
}
body.admin-standalone-active #admin-standalone-page .insight-card h4 {
color: var(--a3-navy) !important;
}
body.admin-standalone-active #admin-standalone-page .page-subtitle,
body.admin-standalone-active #admin-standalone-page p,
body.admin-standalone-active #admin-standalone-page span,
body.admin-standalone-active #admin-standalone-page td,
body.admin-standalone-active #admin-standalone-page th,
body.admin-standalone-active #admin-standalone-page label {
color: var(--a3-text) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-severity-legend .insight-chip.success {
background: #e8f7ec !important;
border-color: #b6e2c1 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-severity-legend .insight-chip.warn {
background: #fff3dd !important;
border-color: #f7d79a !important;
}
body.admin-standalone-active #admin-standalone-page .admin-severity-legend .insight-chip.danger {
background: #feecee !important;
border-color: #f4c1c8 !important;
}
/* Dark-mode contrast fix for Operational Health chips:
Critical / Warning / Normal */
body.dark.admin-standalone-active #admin-standalone-page .admin-severity-legend .insight-chip.success {
background: rgba(22, 101, 52, 0.34) !important;
border-color: rgba(110, 231, 183, 0.52) !important;
color: #dcfce7 !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-severity-legend .insight-chip.warn {
background: rgba(146, 64, 14, 0.36) !important;
border-color: rgba(253, 186, 116, 0.56) !important;
color: #ffedd5 !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-severity-legend .insight-chip.danger {
background: rgba(127, 29, 29, 0.36) !important;
border-color: rgba(252, 165, 165, 0.56) !important;
color: #fee2e2 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table-wrap {
border: 1px solid var(--a3-border) !important;
border-radius: 12px !important;
overflow: auto !important;
}
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table th {
background: #edf4fc !important;
color: #173a63 !important;
font-weight: 800 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table td {
background: #fff !important;
}
body.dark.admin-standalone-active #admin-standalone-page {
--a3-bg: #0a1220;
--a3-surface: #101b2b;
--a3-surface-2: #0d1726;
--a3-text: #e6eefb;
--a3-muted: #b8c8dc;
--a3-border: #25364c;
--a3-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
body.dark.admin-standalone-active #admin-standalone-page .admin-top-shell {
background: linear-gradient(130deg, #0a1f38, #07182c) !important;
border-color: #27415e !important;
}
body.dark.admin-standalone-active #admin-standalone-page .action-btn,
body.dark.admin-standalone-active #admin-standalone-page .back-btn {
background: #122237 !important;
color: #eaf3ff !important;
border-color: #2a3f58 !important;
}
body.dark.admin-standalone-active #admin-standalone-page .action-btn:not(.secondary),
body.dark.admin-standalone-active #admin-standalone-page .admin-tab-active {
background: linear-gradient(180deg, #1c4f87, #123a67) !important;
border-color: #2c6299 !important;
}
@media (max-width: 1280px) {
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
@media (max-width: 980px) {
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 1fr !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
position: static !important;
top: auto !important;
max-height: none !important;
}
}
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page .page-header {
grid-template-columns: 1fr !important;
}
body.admin-standalone-active #admin-standalone-page .page-header h1,
body.admin-standalone-active #admin-standalone-page .page-header .section-heading,
body.admin-standalone-active #admin-standalone-page .page-header .page-subtitle,
body.admin-standalone-active #admin-standalone-page .admin-brand-stack {
grid-column: 1 / -1 !important;
justify-self: start !important;
text-align: left !important;
}
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar {
grid-template-columns: 1fr 1fr !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stats {
grid-template-columns: 1fr 1fr !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs,
body.admin-standalone-active #admin-standalone-page .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid {
grid-template-columns: 1fr !important;
}
}
/* ===== Final Corporate Fit Lock (single neat top block) ===== */
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
display: grid !important;
gap: 8px !important;
background: linear-gradient(150deg, #0b2d50 0%, #08253f 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 16px !important;
box-shadow: 0 18px 38px rgba(5, 18, 34, 0.34) !important;
padding: 12px !important;
}
body.admin-standalone-active #admin-standalone-page .page-header {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .page-header > .back-btn {
grid-column: 1 / 2 !important;
}
body.admin-standalone-active #admin-standalone-page .page-header > .admin-brand-stack {
grid-column: 3 / 4 !important;
justify-self: end !important;
}
body.admin-standalone-active #admin-standalone-page .page-header > .section-heading,
body.admin-standalone-active #admin-standalone-page .page-header > h1,
body.admin-standalone-active #admin-standalone-page .page-header > .page-subtitle {
grid-column: 2 / 3 !important;
}
body.admin-standalone-active #admin-standalone-page .page-header > h1 {
margin: 0 !important;
font-size: 1.06rem !important;
line-height: 1.2 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
margin: 0 !important;
padding: 8px !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
box-sizing: border-box !important;
}
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar .insight-chip {
min-width: 0 !important;
height: 34px !important;
padding: 0 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 0.73rem !important;
font-weight: 700 !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.14) !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
color: #eaf4ff !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-stack {
display: grid !important;
justify-items: end !important;
gap: 4px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-title {
color: #e9f3ff !important;
font-size: 0.82rem !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-logo {
max-height: 106px !important;
width: auto !important;
object-fit: contain !important;
padding: 6px 10px !important;
border-radius: 16px !important;
border: 1px solid rgba(255, 255, 255, 0.28) !important;
background:
radial-gradient(120px 90px at 20% 15%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.02) 70%),
rgba(255, 255, 255, 0.1) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.36),
0 12px 24px rgba(0, 0, 0, 0.34) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
margin-top: 2px !important;
background: rgba(255, 255, 255, 0.09) !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
border-radius: 12px !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-system-status-bar {
background: rgba(148, 163, 184, 0.1) !important;
border-color: rgba(148, 163, 184, 0.22) !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-system-status-bar .insight-chip {
background: rgba(148, 163, 184, 0.16) !important;
border-color: rgba(148, 163, 184, 0.28) !important;
color: #eef5ff !important;
}
@media (max-width: 980px) {
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page .page-header {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .page-header > .back-btn,
body.admin-standalone-active #admin-standalone-page .page-header > .admin-brand-stack,
body.admin-standalone-active #admin-standalone-page .page-header > .section-heading,
body.admin-standalone-active #admin-standalone-page .page-header > h1,
body.admin-standalone-active #admin-standalone-page .page-header > .page-subtitle {
grid-column: 1 / -1 !important;
justify-self: start !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-stack {
justify-items: start !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-logo {
max-height: 78px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar {
grid-template-columns: 1fr !important;
}
}
/* ===== Admin Reboot v5: Trading Analytics Style ===== */
body.admin-standalone-active #admin-standalone-page {
--tv-bg-1: #071a2f;
--tv-bg-2: #0b2e52;
--tv-panel: #0e223a;
--tv-panel-soft: #122a45;
--tv-line: rgba(149, 182, 215, 0.18);
--tv-line-strong: rgba(149, 182, 215, 0.3);
--tv-text: #e9f2ff;
--tv-muted: #afc3da;
--tv-accent: #f4a52f;
--tv-green: #22c55e;
--tv-red: #ef4444;
}
body.admin-standalone-active #admin-standalone-page .container {
width: min(1500px, calc(100vw - 14px)) !important;
max-width: min(1500px, calc(100vw - 14px)) !important;
margin-inline: auto !important;
border-radius: 18px !important;
border: 1px solid var(--tv-line) !important;
box-shadow: 0 24px 52px rgba(3, 12, 24, 0.46) !important;
background:
radial-gradient(1200px 460px at 100% -10%, rgba(244, 165, 47, 0.08), transparent 60%),
linear-gradient(160deg, var(--tv-bg-2), var(--tv-bg-1)) !important;
padding: 12px !important;
gap: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .page-header {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto !important;
gap: 10px !important;
align-items: center !important;
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .page-header .back-btn {
grid-column: 1 !important;
}
body.admin-standalone-active #admin-standalone-page .page-header .admin-brand-stack {
grid-column: 3 !important;
justify-self: end !important;
}
body.admin-standalone-active #admin-standalone-page .page-header .section-heading,
body.admin-standalone-active #admin-standalone-page .page-header h1,
body.admin-standalone-active #admin-standalone-page .page-header .page-subtitle {
grid-column: 2 !important;
}
body.admin-standalone-active #admin-standalone-page .page-header h1 {
margin: 0 !important;
font-size: 1.08rem !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
body.admin-standalone-active #admin-standalone-page .page-header .section-heading,
body.admin-standalone-active #admin-standalone-page .page-header h1,
body.admin-standalone-active #admin-standalone-page .admin-brand-title,
body.admin-standalone-active #admin-standalone-page .admin-hero-head h2 {
color: var(--tv-text) !important;
}
body.admin-standalone-active #admin-standalone-page .page-header .page-subtitle,
body.admin-standalone-active #admin-standalone-page .admin-hero-head .page-subtitle {
color: var(--tv-muted) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-stack {
display: grid !important;
justify-items: end !important;
gap: 4px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-title {
font-size: 0.83rem !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-logo {
max-height: 114px !important;
width: auto !important;
border-radius: 16px !important;
border: 1px solid rgba(255, 255, 255, 0.26) !important;
padding: 6px 10px !important;
background: rgba(255, 255, 255, 0.08) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
0 14px 28px rgba(0, 0, 0, 0.38) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar {
max-width: 360px !important;
grid-template-columns: 1fr !important;
padding: 6px !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid var(--tv-line) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar .insight-chip {
background: rgba(255, 255, 255, 0.14) !important;
border: 1px solid rgba(255, 255, 255, 0.24) !important;
color: var(--tv-text) !important;
min-height: 32px !important;
justify-content: center !important;
font-size: 0.72rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
margin-top: 8px !important;
padding: 10px !important;
border-radius: 14px !important;
border: 1px solid var(--tv-line) !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.06)) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stats {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat {
min-height: 70px !important;
border-radius: 11px !important;
border: 1px solid var(--tv-line) !important;
background: linear-gradient(180deg, rgba(8, 21, 37, 0.7), rgba(12, 27, 45, 0.72)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
padding: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-value {
color: #f6fbff !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-label {
color: #dbe9f8 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-trend {
color: #9fb8d2 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-filter-ribbon select {
background: rgba(8, 20, 35, 0.76) !important;
border: 1px solid var(--tv-line-strong) !important;
color: var(--tv-text) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs,
body.admin-standalone-active #admin-standalone-page .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid {
gap: 8px !important;
}
/* Admin top-gap kill switch: keep the Back/Home + Admin Control Center block at the very top */
body.admin-standalone-active #admin-standalone-page .admin-template-content {
padding-top: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header {
margin-top: 0 !important;
}
/* Hero v2 compact corporate layout */
.hero-status-toggle {
display: none;
}
.hero-glass {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
grid-template-areas:
"tag ring"
"status mission"
"kpi focus"
"actions focus"
"badges top3"
"progress top3"
"assist mini"
"stats mini";
align-items: start;
column-gap: 16px;
row-gap: 12px;
width: min(1100px, 96vw);
}
.hero-tagline { grid-area: tag; margin-bottom: 0; }
.hero-status-ribbon { grid-area: status; }
.hero-status-strip { grid-area: status; margin-top: 34px; }
.mission-cockpit { grid-area: mission; }
.hero-kpi-chips { grid-area: kpi; }
.hero-actions { grid-area: actions; }
.hero-badges { grid-area: badges; }
.hero-top3 { grid-area: top3; }
.hero-performance-ring-wrap { grid-area: ring; }
.hero-focus-card { grid-area: focus; margin: 0; }
.hero-progress { grid-area: progress; }
.hero-assist { grid-area: assist; }
.hero-mini { grid-area: mini; }
.hero-stats { grid-area: stats; }
.hero-kpi-chips .hero-kpi-chip:nth-child(n+4) {
display: none;
}
.hero-actions .hero-primary-cta {
min-width: 176px;
}
.hero-actions .hero-secondary-cta {
min-width: 148px;
}
.hero-tertiary-link {
min-width: 0 !important;
padding: 10px 14px !important;
border-radius: 999px !important;
opacity: 0.88;
font-weight: 600;
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hero-badges .badge {
background: rgba(14, 33, 58, 0.4);
border: 1px solid rgba(160, 191, 223, 0.25);
}
.js-enhanced .hero-actions .action-btn,
.js-enhanced .hero-actions .jfa-register-btn {
position: relative;
overflow: hidden;
}
.js-enhanced .hero-actions .action-btn::after,
.js-enhanced .hero-actions .jfa-register-btn::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(255,255,255,0.26) 0, rgba(255,255,255,0) 58%);
opacity: 0;
transition: opacity 140ms ease;
pointer-events: none;
}
.js-enhanced .hero-actions .action-btn:active::after,
.js-enhanced .hero-actions .jfa-register-btn:active::after {
opacity: 1;
}
.hero-loading .hero-kpi-chip {
color: transparent !important;
position: relative;
overflow: hidden;
}
.hero-loading .hero-kpi-chip::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.24) 50%, rgba(255,255,255,0.08) 100%);
background-size: 240% 100%;
animation: heroSkeleton 1.2s linear infinite;
}
@keyframes heroSkeleton {
0% { background-position: 200% 0; }
100% { background-position: -40% 0; }
}
.mobile-hero-cta-bar {
position: fixed;
left: 10px;
right: 10px;
bottom: calc(var(--mobile-dock-offset, 92px));
z-index: 1490;
display: none;
gap: 8px;
padding: 8px;
border-radius: 16px;
background: rgba(8, 20, 38, 0.92);
border: 1px solid rgba(122, 169, 221, 0.22);
backdrop-filter: blur(10px);
}
.mobile-hero-cta-bar .action-btn {
flex: 1;
min-width: 0;
}
@media (max-width: 1024px) {
.hero-glass {
grid-template-columns: 1fr;
grid-template-areas:
"tag"
"status"
"kpi"
"actions"
"ring"
"focus"
"mission"
"badges"
"top3"
"progress"
"assist"
"mini"
"stats";
width: min(720px, 96vw);
row-gap: 10px;
}
.hero-status-strip {
margin-top: 0;
}
}
@media (max-width: 768px) {
.hero-status-toggle {
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 132px;
}
.hero-status-strip {
display: none;
}
body.hero-status-open .hero-status-strip {
display: flex;
}
.hero-kpi-chips .hero-kpi-chip:nth-child(n+4) {
display: none !important;
}
.hero-particles,
.hero-orb,
.hero-spotlight {
display: none !important;
}
body.show-mobile-hero-cta .mobile-hero-cta-bar {
display: flex;
}
.hero-headline {
font-size: clamp(1rem, 4.1vw, 1.3rem);
max-width: 24ch;
}
.hero-subheadline {
font-size: 0.78rem;
max-width: 36ch;
margin-bottom: 8px;
}
}
body.admin-standalone-active #admin-standalone-page .action-btn,
body.admin-standalone-active #admin-standalone-page .back-btn {
background: rgba(8, 20, 35, 0.74) !important;
border: 1px solid var(--tv-line-strong) !important;
color: var(--tv-text) !important;
min-height: 34px !important;
border-radius: 10px !important;
font-weight: 700 !important;
}
body.admin-standalone-active #admin-standalone-page .action-btn:not(.secondary),
body.admin-standalone-active #admin-standalone-page .admin-tab-active {
background: linear-gradient(180deg, #1b4d82, #123a66) !important;
border-color: #3a6ea5 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-tv-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
align-items: start !important;
}
body.admin-standalone-active #admin-standalone-page .admin-tv-rail,
body.admin-standalone-active #admin-standalone-page .admin-tv-workspace > .stats-section > .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-tv-workspace .admin-detail-section {
background: linear-gradient(180deg, rgba(8, 20, 35, 0.84), rgba(10, 24, 41, 0.86)) !important;
border: 1px solid var(--tv-line) !important;
border-radius: 14px !important;
box-shadow: 0 12px 24px rgba(2, 8, 17, 0.26) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-tv-rail {
position: static !important;
max-height: none !important;
overflow: visible !important;
}
body.admin-standalone-active #admin-standalone-page .admin-tv-workspace {
width: 100% !important;
display: grid !important;
gap: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-tv-workspace > .stats-section {
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-tv-workspace > .stats-section:nth-of-type(2) {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body.admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity {
max-height: 300px !important;
overflow: auto !important;
}
body.admin-standalone-active #admin-standalone-page .insight-card h4,
body.admin-standalone-active #admin-standalone-page .admin-tv-rail h4,
body.admin-standalone-active #admin-standalone-page .admin-tv-rail h5,
body.admin-standalone-active #admin-standalone-page p,
body.admin-standalone-active #admin-standalone-page span,
body.admin-standalone-active #admin-standalone-page td,
body.admin-standalone-active #admin-standalone-page th,
body.admin-standalone-active #admin-standalone-page label {
color: var(--tv-text) !important;
}
body.admin-standalone-active #admin-standalone-page .page-subtitle {
color: var(--tv-muted) !important;
}
body.admin-standalone-active #admin-standalone-page .insight-chip.success {
background: rgba(34, 197, 94, 0.2) !important;
border-color: rgba(34, 197, 94, 0.38) !important;
}
body.admin-standalone-active #admin-standalone-page .insight-chip.warn {
background: rgba(244, 165, 47, 0.2) !important;
border-color: rgba(244, 165, 47, 0.36) !important;
}
body.admin-standalone-active #admin-standalone-page .insight-chip.danger {
background: rgba(239, 68, 68, 0.2) !important;
border-color: rgba(239, 68, 68, 0.36) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar.admin-utility-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1200px) {
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page .container {
width: calc(100vw - 8px) !important;
max-width: calc(100vw - 8px) !important;
padding: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .page-header {
grid-template-columns: 1fr !important;
}
body.admin-standalone-active #admin-standalone-page .page-header .back-btn,
body.admin-standalone-active #admin-standalone-page .page-header .admin-brand-stack,
body.admin-standalone-active #admin-standalone-page .page-header .section-heading,
body.admin-standalone-active #admin-standalone-page .page-header h1,
body.admin-standalone-active #admin-standalone-page .page-header .page-subtitle {
grid-column: 1 !important;
justify-self: start !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-stack {
justify-items: start !important;
}
body.admin-standalone-active #admin-standalone-page .admin-brand-logo {
max-height: 82px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stats {
grid-template-columns: 1fr 1fr !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs,
body.admin-standalone-active #admin-standalone-page .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid,
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar.admin-utility-grid {
grid-template-columns: 1fr !important;
}
}
/* Single-chip admin status bar (refresh only) */
body.admin-standalone-active #admin-standalone-page .admin-system-status-bar {
grid-template-columns: 1fr !important;
max-width: 320px;
}
/* ===== Final single-block stack: command + briefing + capabilities + health + activity + actions ===== */
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
align-items: start !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
position: static !important;
top: auto !important;
max-height: none !important;
overflow: visible !important;
width: 100% !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
width: 100% !important;
max-width: 100% !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack > .stats-section {
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack > .stats-section:nth-of-type(2) {
grid-template-columns: 1fr !important;
}
body.admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity {
max-height: 320px;
overflow: auto;
}
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar.admin-utility-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1200px) {
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar.admin-utility-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar.admin-utility-grid {
grid-template-columns: 1fr !important;
}
}
/* Admin page pro redesign */
#adminPage {
color: #e8eef9;
background:
radial-gradient(720px 420px at 20% 8%, rgba(64, 129, 255, 0.16), transparent 55%),
radial-gradient(620px 420px at 90% 10%, rgba(255, 182, 92, 0.18), transparent 50%),
#050b16;
}
#adminPage .menu-page-inner.admin-pro-shell {
width: min(1180px, 100%);
margin: 18px auto 26px;
padding: 18px 18px 26px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: linear-gradient(135deg, rgba(12, 18, 32, 0.92), rgba(8, 12, 24, 0.96));
box-shadow: 0 26px 68px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04);
position: relative;
overflow: hidden;
}
#adminPage .menu-page-inner.admin-pro-shell::before,
#adminPage .menu-page-inner.admin-pro-shell::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
}
#adminPage .menu-page-inner.admin-pro-shell::before {
background: radial-gradient(540px 360px at 86% 8%, rgba(255, 255, 255, 0.05), transparent 60%);
opacity: 0.9;
}
#adminPage .menu-page-inner.admin-pro-shell::after {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30%);
}
#adminPage .admin-hero-surface {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
gap: 18px;
align-items: stretch;
padding: 18px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(145deg, rgba(18, 30, 52, 0.88), rgba(12, 20, 38, 0.92));
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);
}
#adminPage .admin-hero-left {
display: flex;
flex-direction: column;
gap: 8px;
}
#adminPage .admin-eyebrow {
margin: 0;
letter-spacing: 0.08em;
font-size: 0.78rem;
text-transform: uppercase;
color: #b9cdf3;
}
#adminPage .admin-hero-head {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
}
#adminPage .admin-hero-head h2 {
margin: 0;
font-size: 1.45rem;
letter-spacing: 0.02em;
}
#adminPage .admin-hero-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
#adminPage .admin-hero-subtitle {
margin: 2px 0 6px;
color: #c7d7f5;
font-weight: 500;
}
#adminPage .admin-hero-pills {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 6px 0 10px;
}
#adminPage .admin-hero-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
color: #e8eef9;
font-weight: 600;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
#adminPage .admin-hero-pill.pill-muted {
border-color: rgba(148, 163, 184, 0.28);
color: #c5d7f2;
}
#adminPage .admin-hero-pill.pill-accent {
background: linear-gradient(120deg, #f59e0b, #fbbf24);
color: #0b0f17;
border-color: rgba(251, 191, 36, 0.6);
}
#adminPage .admin-hero-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 4px 0 6px;
}
#adminPage .admin-team-portal {
margin-top: 6px;
padding: 12px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(10px);
}
#adminPage .admin-team-portal-label {
font-weight: 700;
color: #dbe7ff;
margin-bottom: 6px;
}
#adminPage .admin-team-portal-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 8px;
}
#adminPage .admin-hero-right {
display: flex;
flex-direction: column;
gap: 10px;
}
#adminPage .admin-hero-right .menu-illustration {
padding: 14px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: radial-gradient(360px 260px at 80% 0%, rgba(255, 183, 77, 0.16), transparent 62%),
linear-gradient(160deg, rgba(17, 28, 52, 0.92), rgba(10, 16, 32, 0.94));
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
}
#adminPage .admin-hero-card {
padding: 14px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
color: #eaf0fb;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 30px rgba(0, 0, 0, 0.28);
}
#adminPage .admin-hero-card-title {
font-weight: 700;
margin-bottom: 6px;
}
#adminPage .admin-hero-badges {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 6px;
}
#adminPage .admin-hero-badges .badge {
background: rgba(255, 255, 255, 0.12);
color: #f4f7ff;
border: 1px solid rgba(255, 255, 255, 0.18);
}
#adminPage .admin-insights {
margin-top: 18px;
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
#adminPage .admin-insights > *,
#adminPage .admin-detail-section,
#adminPage .admin-jfa-list {
background: linear-gradient(180deg, rgba(13, 21, 38, 0.96), rgba(8, 13, 24, 0.96));
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
padding: 16px;
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
}
#adminPage .admin-inline-auth .modal-card {
background: rgba(12, 20, 36, 0.9);
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36);
}
#adminPage .menu-header-actions .action-btn,
#adminPage .admin-hero-actions .action-btn,
#adminPage .admin-team-portal-buttons .action-btn {
border-radius: 999px;
padding-inline: 14px;
font-weight: 700;
}
#adminPage .menu-page-note {
color: #c7d7f5;
}
#adminPage .menu-scope-chip {
background: linear-gradient(120deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
color: #0b0f17;
border: 1px solid rgba(255, 255, 255, 0.24);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
body.dark #adminPage .menu-page-inner.admin-pro-shell {
background: linear-gradient(135deg, #070d19, #050a13);
}
@media (max-width: 1080px) {
#adminPage .admin-hero-surface {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
#adminPage .menu-page-inner.admin-pro-shell {
padding: 14px;
}
#adminPage .admin-hero-head {
flex-direction: column;
align-items: flex-start;
}
#adminPage .admin-hero-actions {
width: 100%;
}
#adminPage .admin-team-portal-buttons {
grid-template-columns: 1fr;
}
}
/* Final override: place Master Logger workspace next to top admin summary */
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
display: grid;
grid-template-columns: minmax(480px, 1.15fr) minmax(460px, 1fr);
gap: 16px;
align-items: start;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header {
grid-column: 1 / -1;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
grid-column: 1;
}
body.admin-standalone-active #admin-standalone-page .admin-topside-panel {
grid-column: 2;
margin: 0;
align-self: stretch;
max-height: 78vh;
overflow: auto;
padding-right: 4px;
}
body.admin-standalone-active #admin-standalone-page .admin-topside-panel .admin-bottom-actions-bar.admin-utility-grid {
margin-top: 0;
}
@media (max-width: 1200px) {
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
grid-template-columns: 1fr;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body.admin-standalone-active #admin-standalone-page .admin-topside-panel {
grid-column: 1;
}
body.admin-standalone-active #admin-standalone-page .admin-topside-panel {
max-height: none;
overflow: visible;
padding-right: 0;
}
}
/* Final width fix: use available desktop width for admin shell */
@media (min-width: 1201px) {
body.admin-standalone-active #admin-standalone-page .container {
width: calc(100vw - 12px) !important;
max-width: calc(100vw - 12px) !important;
margin-inline: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
width: calc(100vw - 320px) !important;
max-width: none !important;
}
}
/* Keep admin text clear below fixed top banner */
body.admin-standalone-active #admin-standalone-page .admin-template-header {
top: 96px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
padding-top: 12px !important;
}
@media (max-width: 768px) {
body.admin-standalone-active #admin-standalone-page .admin-template-header {
top: 108px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
padding-top: 16px !important;
}
}
/* Final overlap fix: keep "Admin Control Center" fully visible */
body.admin-standalone-active #admin-standalone-page .admin-template-header {
position: relative !important;
top: 0 !important;
z-index: 1 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header {
position: relative !important;
top: auto !important;
z-index: 2 !important;
margin-top: 8px !important;
}
/* Light mode admin override: remove navy-heavy look */
body:not(.dark).admin-standalone-active #admin-standalone-page {
--tv-bg-1: #f3f7fd;
--tv-bg-2: #eaf1fb;
--tv-panel: #ffffff;
--tv-panel-soft: #f6f9ff;
--tv-line: rgba(22, 47, 84, 0.12);
--tv-line-strong: rgba(22, 47, 84, 0.22);
--tv-text: #10243a;
--tv-muted: #4c6280;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .container {
background:
radial-gradient(1000px 360px at 100% -10%, rgba(244, 165, 47, 0.1), transparent 60%),
linear-gradient(160deg, #f8fbff, #eef4fd) !important;
border-color: rgba(22, 47, 84, 0.14) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-sidebar {
background: linear-gradient(180deg, #f4f8ff, #eef4fd) !important;
border-right-color: rgba(22, 47, 84, 0.14) !important;
box-shadow: 0 12px 24px rgba(16, 36, 58, 0.12) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-brand-text strong,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-brand-text span,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-nav-heading {
color: #10243a !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-header,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body:not(.dark).admin-standalone-active #admin-standalone-page .page-header,
body:not(.dark).admin-standalone-active #admin-standalone-page .insight-card,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-detail-section,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-topside-panel {
background: #ffffff !important;
border-color: rgba(22, 47, 84, 0.14) !important;
color: #10243a !important;
box-shadow: 0 8px 20px rgba(16, 36, 58, 0.08) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-search {
background: #ffffff !important;
color: #10243a !important;
border-color: rgba(22, 47, 84, 0.2) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-nav .action-btn.secondary,
body:not(.dark).admin-standalone-active #admin-standalone-page .action-btn.secondary,
body:not(.dark).admin-standalone-active #admin-standalone-page .back-btn {
background: #f7faff !important;
color: #10243a !important;
border-color: rgba(22, 47, 84, 0.2) !important;
}
/* Admin mode: lower trust/footer labels and improve visibility */
body.admin-standalone-active .trust-strip {
margin-top: 120px !important;
padding-top: 20px !important;
padding-bottom: 14px !important;
position: relative;
z-index: 1;
}
body.admin-standalone-active .trust-item {
background: rgba(255, 255, 255, 0.92) !important;
color: #10243a !important;
border-color: rgba(16, 36, 58, 0.2) !important;
}
body.dark.admin-standalone-active .trust-item {
background: rgba(16, 27, 46, 0.88) !important;
color: #e8f1ff !important;
border-color: rgba(186, 210, 240, 0.26) !important;
}
body.admin-standalone-active .site-footer {
padding-top: 10px !important;
padding-bottom: 30px !important;
color: #526884 !important;
}
body.dark.admin-standalone-active .site-footer {
color: #b7c9df !important;
}
@media (max-width: 768px) {
body.admin-standalone-active .trust-strip {
margin-top: 92px !important;
}
}
/* ===== Admin pro polish layer ===== */
body.admin-standalone-active #admin-standalone-page .admin-health-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-view-presets {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-filter-ribbon {
display: grid;
grid-template-columns: repeat(3, minmax(160px, 1fr));
gap: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header-right .action-btn {
min-height: 34px;
}
body.admin-standalone-active #admin-standalone-page .action-btn,
body.admin-standalone-active #admin-standalone-page .back-btn,
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
body.admin-standalone-active #admin-standalone-page .action-btn:active,
body.admin-standalone-active #admin-standalone-page .back-btn:active {
transform: translateY(1px) scale(0.995);
}
body.admin-standalone-active #admin-standalone-page :where(button, a, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid rgba(244, 165, 47, 0.78);
outline-offset: 2px;
}
body.admin-standalone-active.admin-sticky-tables #admin-standalone-page .mini-table table thead th,
body.admin-standalone-active.admin-sticky-tables #admin-standalone-page .rankings-table table thead th,
body.admin-standalone-active.admin-sticky-tables #admin-standalone-page .admin-submitted-leads-table thead th {
position: sticky;
top: 0;
z-index: 2;
background: inherit;
}
body.admin-density-presentation.admin-standalone-active #admin-standalone-page {
--admin-density-scale: 1.08;
}
body.admin-density-presentation.admin-standalone-active #admin-standalone-page .admin-hero-value {
font-size: 1.56rem !important;
}
body.admin-density-presentation.admin-standalone-active #admin-standalone-page .admin-hero-label {
font-size: 0.86rem !important;
}
body.admin-density-presentation.admin-standalone-active #admin-standalone-page .action-btn.secondary {
min-height: 40px;
}
@media (max-width: 980px) {
body.admin-standalone-active #admin-standalone-page .admin-filter-ribbon {
grid-template-columns: 1fr;
}
}
/* Conversion graph placement and styling */
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
display: grid !important;
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
gap: 12px;
align-items: start;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header {
grid-column: 1 / -1;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
grid-column: 1;
}
body.admin-standalone-active #admin-standalone-page .admin-right-stack {
grid-column: 2;
display: grid;
gap: 8px;
align-self: start;
}
body.admin-standalone-active #admin-standalone-page .admin-conversion-graph-card {
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-conversion-funnel-card {
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-topside-panel {
grid-column: 1 / -1;
}
body.admin-standalone-active #admin-standalone-page .admin-line-summary {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-line-controls {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-line-week-tabs .action-btn {
min-height: 32px;
padding: 6px 10px;
font-size: 0.8rem;
}
body.admin-standalone-active #admin-standalone-page .admin-line-wrap {
width: 100%;
overflow: hidden;
border: 1px solid rgba(22, 47, 84, 0.15);
border-radius: 12px;
background: rgba(255, 255, 255, 0.5);
position: relative;
}
body.admin-standalone-active #admin-standalone-page .admin-line-svg {
width: 100%;
height: auto;
display: block;
}
body.admin-standalone-active #admin-standalone-page .admin-line-grid {
stroke: rgba(22, 47, 84, 0.12);
stroke-width: 1;
}
body.admin-standalone-active #admin-standalone-page .admin-line-axis-label {
font-size: 11px;
fill: #5a6f8d;
}
body.admin-standalone-active #admin-standalone-page .admin-line-captured {
fill: none;
stroke: #f59e0b;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
body.admin-standalone-active #admin-standalone-page .admin-line-converted {
fill: none;
stroke: #2563eb;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
body.admin-standalone-active #admin-standalone-page .admin-line-captured-prev {
fill: none;
stroke: #fbbf24;
stroke-width: 2;
stroke-dasharray: 7 5;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.9;
}
body.admin-standalone-active #admin-standalone-page .admin-line-converted-prev {
fill: none;
stroke: #60a5fa;
stroke-width: 2;
stroke-dasharray: 7 5;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.9;
}
body.admin-standalone-active #admin-standalone-page .admin-line-point {
cursor: pointer;
stroke-width: 2;
opacity: 0.92;
}
body.admin-standalone-active #admin-standalone-page .admin-line-point.captured {
fill: #f59e0b;
stroke: rgba(245, 158, 11, 0.28);
}
body.admin-standalone-active #admin-standalone-page .admin-line-point.converted {
fill: #2563eb;
stroke: rgba(37, 99, 235, 0.28);
}
body.admin-standalone-active #admin-standalone-page .admin-line-point:hover,
body.admin-standalone-active #admin-standalone-page .admin-line-point:focus {
opacity: 1;
}
body.admin-standalone-active #admin-standalone-page .admin-line-tooltip {
position: absolute;
transform: translate(-50%, -110%);
min-width: 160px;
max-width: 240px;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid rgba(22, 47, 84, 0.24);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 10px 22px rgba(16, 36, 58, 0.18);
color: #10243a;
pointer-events: none;
opacity: 0;
transition: opacity 0.12s ease;
z-index: 3;
}
body.admin-standalone-active #admin-standalone-page .admin-line-tooltip strong {
display: block;
font-size: 0.79rem;
}
body.admin-standalone-active #admin-standalone-page .admin-line-tooltip span {
display: block;
margin-top: 2px;
font-size: 0.76rem;
color: #4c6280;
}
body.admin-standalone-active #admin-standalone-page .admin-line-tooltip.is-visible {
opacity: 1;
}
body.admin-standalone-active #admin-standalone-page .admin-line-legend {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
font-size: 0.82rem;
color: #4c6280;
}
body.admin-standalone-active #admin-standalone-page .admin-line-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
}
body.admin-standalone-active #admin-standalone-page .admin-line-dot {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
}
body.admin-standalone-active #admin-standalone-page .admin-line-dot.captured {
background: #f59e0b;
}
body.admin-standalone-active #admin-standalone-page .admin-line-dot.converted {
background: #2563eb;
}
body.admin-standalone-active #admin-standalone-page .admin-line-dot.captured-prev {
background: #fbbf24;
}
body.admin-standalone-active #admin-standalone-page .admin-line-dot.converted-prev {
background: #60a5fa;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-line-wrap {
border-color: rgba(180, 206, 238, 0.28);
background: rgba(9, 19, 34, 0.58);
}
body.dark.admin-standalone-active #admin-standalone-page .admin-line-grid {
stroke: rgba(180, 206, 238, 0.18);
}
body.dark.admin-standalone-active #admin-standalone-page .admin-line-axis-label,
body.dark.admin-standalone-active #admin-standalone-page .admin-line-legend {
color: #c8d8ee;
fill: #c8d8ee;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-line-tooltip {
border-color: rgba(180, 206, 238, 0.34);
background: rgba(9, 19, 34, 0.96);
color: #e8f1ff;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-line-tooltip span {
color: #c8d8ee;
}
body.admin-standalone-active #admin-standalone-page .admin-funnel-summary {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-funnel-rows {
display: grid;
gap: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-funnel-row {
border: 1px solid rgba(22, 47, 84, 0.16);
background: rgba(255, 255, 255, 0.55);
border-radius: 10px;
padding: 8px 10px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px 10px;
align-items: center;
text-align: left;
cursor: pointer;
}
body.admin-standalone-active #admin-standalone-page .admin-funnel-row:hover {
border-color: rgba(244, 165, 47, 0.42);
box-shadow: 0 8px 16px rgba(16, 36, 58, 0.1);
}
body.admin-standalone-active #admin-standalone-page .admin-funnel-row span {
font-size: 0.82rem;
color: #314a68;
}
body.admin-standalone-active #admin-standalone-page .admin-funnel-row strong {
font-size: 0.95rem;
color: #10243a;
}
body.admin-standalone-active #admin-standalone-page .admin-funnel-track {
grid-column: 1 / -1;
height: 8px;
border-radius: 999px;
background: rgba(22, 47, 84, 0.12);
overflow: hidden;
}
body.admin-standalone-active #admin-standalone-page .admin-funnel-track i {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #f59e0b, #2563eb);
}
body.dark.admin-standalone-active #admin-standalone-page .admin-funnel-row {
border-color: rgba(180, 206, 238, 0.26);
background: rgba(9, 19, 34, 0.58);
}
body.dark.admin-standalone-active #admin-standalone-page .admin-funnel-row span {
color: #c8d8ee;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-funnel-row strong {
color: #e8f1ff;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-funnel-track {
background: rgba(180, 206, 238, 0.18);
}
@media (max-width: 1180px) {
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
grid-template-columns: 1fr !important;
}
body.admin-standalone-active #admin-standalone-page .admin-conversion-graph-card,
body.admin-standalone-active #admin-standalone-page .admin-conversion-funnel-card,
body.admin-standalone-active #admin-standalone-page .admin-right-stack,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body.admin-standalone-active #admin-standalone-page .admin-topside-panel {
grid-column: 1;
}
}
/* Admin logo: blend into background (no square frame) */
body.admin-standalone-active #admin-standalone-page .admin-brand-logo,
body.admin-standalone-active #admin-standalone-page .admin-template-brand-logo {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Final light-mode readability lock for admin page */
body:not(.dark).admin-standalone-active #admin-standalone-page,
body:not(.dark).admin-standalone-active #admin-standalone-page *:not(input):not(select):not(option):not(textarea) {
color: #10243a !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-sidebar,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-header,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body:not(.dark).admin-standalone-active #admin-standalone-page .insight-card,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-detail-section,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-topside-panel,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-health-strip {
background-color: #ffffff !important;
border-color: rgba(16, 36, 58, 0.16) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-hero-stat,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-line-wrap,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-funnel-row,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-system-status-bar,
body:not(.dark).admin-standalone-active #admin-standalone-page .insight-chip {
background-color: #f7faff !important;
border-color: rgba(16, 36, 58, 0.18) !important;
color: #10243a !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .action-btn,
body:not(.dark).admin-standalone-active #admin-standalone-page .back-btn {
color: #10243a !important;
border-color: rgba(16, 36, 58, 0.2) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-action-queue {
background: rgba(16, 36, 58, 0.04) !important;
border-color: rgba(16, 36, 58, 0.16) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-action-queue h4,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-action-queue .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-action-queue-section h5 {
color: #10243a !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-action-queue-item {
background: #ffffff !important;
border-color: rgba(16, 36, 58, 0.2) !important;
color: #10243a !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-action-queue-item span,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-action-queue-item strong {
color: #10243a !important;
}
/* Explicit light-mode fixes for admin module tabs + graph/funnel text */
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-hero-module-tabs .action-btn.secondary,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-line-controls .action-btn.secondary {
color: #10243a !important;
background: #f7faff !important;
border-color: rgba(16, 36, 58, 0.22) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-hero-module-tabs .action-btn.admin-tab-active,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-line-controls .action-btn.admin-tab-active {
color: #ffffff !important;
background: linear-gradient(180deg, #1b4d82, #123a67) !important;
border-color: #123a67 !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-conversion-graph-card h4,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-conversion-graph-card .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-conversion-funnel-card h4,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-conversion-funnel-card .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-line-legend,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-funnel-row span,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-funnel-row strong {
color: #10243a !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-line-axis-label {
fill: #415978 !important;
color: #415978 !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-line-wrap,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-funnel-row {
background: #ffffff !important;
border-color: rgba(16, 36, 58, 0.18) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-line-tooltip {
color: #10243a !important;
background: rgba(255, 255, 255, 0.98) !important;
border-color: rgba(16, 36, 58, 0.24) !important;
}
/* Ensure Master Logger Capabilities heading is visible in light mode */
body:not(.dark).admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard h4 {
color: #0f2e4f !important;
}
/* Final hard lock: admin light-mode visibility for module tabs + graph + funnel */
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabLeads,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabQuality,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabFacilities,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabJfas,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabFas,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabFasInRegister,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabTeams,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabPerformance,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabClients,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabLearning,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabForms {
color: #10243a !important;
background: #f7faff !important;
border-color: rgba(16, 36, 58, 0.22) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabLeads.admin-tab-active,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabQuality.admin-tab-active,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabFacilities.admin-tab-active,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabJfas.admin-tab-active,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabFas.admin-tab-active,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabFasInRegister.admin-tab-active,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabTeams.admin-tab-active,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabPerformance.admin-tab-active,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabClients.admin-tab-active,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabLearning.admin-tab-active,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeroTabForms.admin-tab-active {
color: #ffffff !important;
background: linear-gradient(180deg, #1b4d82, #123a67) !important;
border-color: #123a67 !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionGraphCard h4,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionGraphCard .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionGraphBody,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionGraphBody .insight-chip,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionGraphBody .admin-line-legend,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionGraphBody .admin-line-legend span,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionGraphBody .admin-line-controls .action-btn {
color: #10243a !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionGraphBody .admin-line-wrap,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionGraphBody .admin-line-tooltip {
background: #ffffff !important;
border-color: rgba(16, 36, 58, 0.22) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionGraphBody .admin-line-axis-label {
fill: #415978 !important;
color: #415978 !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionFunnelCard h4,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionFunnelCard .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionFunnelBody,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionFunnelBody .insight-chip,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionFunnelBody .admin-funnel-row,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionFunnelBody .admin-funnel-row span,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionFunnelBody .admin-funnel-row strong {
color: #10243a !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminConversionFunnelBody .admin-funnel-row {
background: #ffffff !important;
border-color: rgba(16, 36, 58, 0.2) !important;
}
/* ===== Final Admin Blend + No-Overlap Lock ===== */
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
background: linear-gradient(160deg, rgba(10, 34, 64, 0.98), rgba(8, 28, 52, 0.98)) !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
background: linear-gradient(180deg, rgba(12, 36, 66, 0.96), rgba(9, 28, 52, 0.96)) !important;
border-color: rgba(255, 255, 255, 0.14) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar {
background: linear-gradient(180deg, rgba(8, 26, 66, 0.99), rgba(7, 22, 52, 0.99)) !important;
border-right-color: rgba(255, 255, 255, 0.14) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-action-queue,
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar-footer {
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.16) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-nav .admin-template-nav-btn,
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar-footer .action-btn {
white-space: normal !important;
line-height: 1.2 !important;
min-height: 40px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header-right {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
align-items: center !important;
justify-content: flex-end !important;
overflow: visible !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header-right .action-btn,
body.admin-standalone-active #admin-standalone-page .admin-template-header-right .insight-chip {
flex: 0 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
}
body.admin-standalone-active #admin-standalone-page .admin-filter-ribbon {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-view-presets,
body.admin-standalone-active #admin-standalone-page .admin-role-actions,
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs,
body.admin-standalone-active #admin-standalone-page .admin-master-tabs,
body.admin-standalone-active #admin-standalone-page .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
gap: 8px !important;
align-items: stretch !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs .action-btn,
body.admin-standalone-active #admin-standalone-page .admin-master-tabs .action-btn,
body.admin-standalone-active #admin-standalone-page .admin-capability-grid .action-btn,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid .action-btn,
body.admin-standalone-active #admin-standalone-page .admin-view-presets .action-btn {
width: 100% !important;
min-width: 0 !important;
min-height: 40px !important;
justify-content: center !important;
text-align: center !important;
white-space: normal !important;
line-height: 1.2 !important;
overflow-wrap: anywhere !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell {
background: linear-gradient(160deg, #edf4fe, #e6f0fd) !important;
border-color: rgba(16, 36, 58, 0.15) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell .page-header,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body:not(.dark).admin-standalone-active #admin-standalone-page .insight-card,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-detail-section {
background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
border-color: rgba(16, 36, 58, 0.14) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-sidebar {
background: linear-gradient(180deg, #123a67, #0f2f56) !important;
}
@media (max-width: 1200px) {
body.admin-standalone-active #admin-standalone-page .admin-filter-ribbon {
grid-template-columns: 1fr !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header-right {
justify-content: flex-start !important;
}
}
/* Desktop only: keep Account actions pinned at sidebar bottom without overlap */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar-footer {
position: sticky;
bottom: 0;
z-index: 3;
margin-top: 10px;
background: linear-gradient(180deg, rgba(8, 26, 66, 0), rgba(8, 26, 66, 0.96) 26%);
backdrop-filter: blur(4px);
padding-bottom: 10px;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-sidebar-footer {
background: linear-gradient(180deg, rgba(18, 58, 103, 0), rgba(18, 58, 103, 0.95) 26%);
}
}
/* === Admin layout restore (matches previous side-panel + graph rail look) === */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .container {
max-width: min(1640px, calc(100vw - 24px)) !important;
width: min(1640px, calc(100vw - 24px)) !important;
margin-inline: auto !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
display: grid !important;
grid-template-columns: minmax(0, 1.55fr) minmax(420px, 0.9fr) !important;
gap: 12px !important;
align-items: start !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header {
grid-column: 1 / -1 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
grid-column: 1 !important;
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-right-stack {
grid-column: 2 !important;
display: grid !important;
grid-template-rows: auto auto auto;
gap: 10px !important;
align-self: start !important;
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
display: grid !important;
grid-template-columns: 250px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
margin-top: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
position: sticky !important;
top: 84px !important;
align-self: start !important;
max-height: calc(100vh - 104px) !important;
overflow: auto !important;
border-radius: 14px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
display: grid !important;
gap: 10px !important;
align-content: start !important;
}
}
@media (max-width: 1100px) {
body.admin-standalone-active #admin-standalone-page .admin-top-shell,
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 1fr !important;
}
body.admin-standalone-active #admin-standalone-page .admin-right-stack {
display: grid !important;
gap: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
position: static !important;
max-height: none !important;
overflow: visible !important;
}
}
/* Horizon base template adaptation for admin shell */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 1fr !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
display: none !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
margin-left: 286px !important;
width: calc(100% - 286px) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header {
position: sticky !important;
top: 72px !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
}
}
@media (max-width: 1100px) {
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar {
position: static !important;
width: 100% !important;
height: auto !important;
margin-bottom: 10px !important;
border-radius: 14px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
margin-left: 0 !important;
width: 100% !important;
}
}
/* Fill admin top section all the way to the right (desktop) */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .container {
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
margin-left: 8px !important;
margin-right: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
margin-left: 286px !important;
width: calc(100vw - 302px) !important;
max-width: calc(100vw - 302px) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header,
body.admin-standalone-active #admin-standalone-page .admin-top-shell,
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero {
width: 100% !important;
max-width: 100% !important;
}
}
/* Keep admin command/header bar pinned at top while scrolling */
body.admin-standalone-active #admin-standalone-page,
body.admin-standalone-active #admin-standalone-page .container,
body.admin-standalone-active #admin-standalone-page .admin-template-content {
overflow: visible !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header {
position: sticky !important;
top: 72px !important;
z-index: 1200 !important;
backdrop-filter: blur(10px);
}
@media (max-width: 1100px) {
body.admin-standalone-active #admin-standalone-page .admin-template-header {
top: 8px !important;
z-index: 1300 !important;
}
}
/* Prevent admin home from overflowing off the right edge */
body.admin-standalone-active #admin-standalone-page,
body.admin-standalone-active #admin-standalone-page * {
box-sizing: border-box;
}
body.admin-standalone-active #admin-standalone-page {
overflow-x: hidden !important;
}
body.admin-standalone-active #admin-standalone-page .container,
body.admin-standalone-active #admin-standalone-page .admin-template-content,
body.admin-standalone-active #admin-standalone-page .admin-top-shell,
body.admin-standalone-active #admin-standalone-page .admin-main-grid,
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack,
body.admin-standalone-active #admin-standalone-page .admin-right-stack,
body.admin-standalone-active #admin-standalone-page .stats-section,
body.admin-standalone-active #admin-standalone-page .insight-card {
min-width: 0 !important;
max-width: 100% !important;
}
body.admin-standalone-active #admin-standalone-page .menu-page-actions,
body.admin-standalone-active #admin-standalone-page .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid,
body.admin-standalone-active #admin-standalone-page .admin-view-presets,
body.admin-standalone-active #admin-standalone-page .admin-filter-ribbon,
body.admin-standalone-active #admin-standalone-page .admin-role-actions,
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs,
body.admin-standalone-active #admin-standalone-page .admin-master-tabs {
flex-wrap: wrap !important;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .action-btn,
body.admin-standalone-active #admin-standalone-page .back-btn {
min-width: 0 !important;
max-width: 100% !important;
white-space: normal !important;
overflow-wrap: anywhere;
}
/* Keep chart/table blocks inside the viewport */
body.admin-standalone-active #admin-standalone-page .admin-line-wrap,
body.admin-standalone-active #admin-standalone-page .mini-table,
body.admin-standalone-active #admin-standalone-page .rankings-table,
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
}
/* Admin UX enhancement layer */
body.admin-standalone-active #admin-standalone-page .admin-critical-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-saved-views-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 10px;
}
body.admin-standalone-active #admin-standalone-page .admin-nav-group {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: 6px;
background: rgba(255, 255, 255, 0.03);
}
body.admin-standalone-active #admin-standalone-page .admin-nav-group > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
body.admin-standalone-active #admin-standalone-page .admin-nav-group > summary::-webkit-details-marker {
display: none;
}
body.admin-standalone-active #admin-standalone-page .admin-nav-group > summary span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
border-radius: 999px;
background: rgba(255, 140, 32, 0.2);
border: 1px solid rgba(255, 140, 32, 0.5);
font-size: 0.75rem;
}
body.admin-standalone-active #admin-standalone-page .admin-kpi-spark {
display: flex;
align-items: flex-end;
gap: 3px;
height: 24px;
width: 100%;
margin-top: 4px;
opacity: 0.9;
}
body.admin-standalone-active #admin-standalone-page .admin-kpi-spark i {
display: block;
flex: 1 1 0;
min-height: 4px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(244, 165, 47, 0.96), rgba(37, 99, 235, 0.9));
}
body.admin-standalone-active #admin-standalone-page .timeline-item.success {
border-left: 3px solid rgba(74, 222, 128, 0.9);
padding-left: 10px;
}
body.admin-standalone-active #admin-standalone-page .timeline-item.warn {
border-left: 3px solid rgba(245, 158, 11, 0.9);
padding-left: 10px;
}
body.admin-standalone-active #admin-standalone-page .timeline-item.danger {
border-left: 3px solid rgba(248, 113, 113, 0.9);
padding-left: 10px;
}
/* Unified card motion and subtle click animations */
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .action-btn,
body.admin-standalone-active #admin-standalone-page .back-btn,
body.admin-standalone-active #admin-standalone-page .admin-template-nav-btn {
transition: transform 0.14s ease, box-shadow 0.16s ease, background-color 0.14s ease, border-color 0.14s ease;
}
body.admin-standalone-active #admin-standalone-page .insight-card:hover {
transform: translateY(-1px);
}
body.admin-standalone-active #admin-standalone-page .action-btn:active,
body.admin-standalone-active #admin-standalone-page .back-btn:active,
body.admin-standalone-active #admin-standalone-page .admin-template-nav-btn:active {
transform: translateY(1px) scale(0.992);
}
/* Table UX standardization */
body.admin-standalone-active #admin-standalone-page .mini-table table,
body.admin-standalone-active #admin-standalone-page .rankings-table table,
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
body.admin-standalone-active #admin-standalone-page .mini-table thead th,
body.admin-standalone-active #admin-standalone-page .rankings-table thead th,
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table thead th {
position: sticky;
top: 0;
z-index: 2;
background: rgba(9, 23, 52, 0.92);
}
/* Ben System: compact JFA cards (3 per row) */
#benSystemPage .ben-jfa-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
#benSystemPage .ben-jfa-mini-card {
border: 1px solid rgba(10, 19, 36, 0.14);
border-radius: 10px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.86);
min-height: 68px;
display: flex;
flex-direction: column;
justify-content: center;
}
#benSystemPage .ben-jfa-mini-name {
font-weight: 700;
font-size: 0.95rem;
color: #10233f;
line-height: 1.25;
word-break: break-word;
}
#benSystemPage .ben-jfa-mini-team {
margin-top: 4px;
font-size: 0.82rem;
color: #4f5f79;
line-height: 1.25;
word-break: break-word;
}
body.dark #benSystemPage .ben-jfa-mini-card {
background: rgba(12, 22, 44, 0.92);
border-color: rgba(94, 141, 209, 0.28);
}
body.dark #benSystemPage .ben-jfa-mini-name {
color: #e7efff;
}
body.dark #benSystemPage .ben-jfa-mini-team {
color: #a6b7d8;
}
@media (max-width: 980px) {
#benSystemPage .ben-jfa-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
#benSystemPage .ben-jfa-grid {
grid-template-columns: 1fr;
}
}
body.admin-standalone-active #admin-standalone-page .mini-table tbody tr:nth-child(odd),
body.admin-standalone-active #admin-standalone-page .rankings-table tbody tr:nth-child(odd),
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table tbody tr:nth-child(odd) {
background: rgba(255, 255, 255, 0.02);
}
body.admin-standalone-active #admin-standalone-page .mini-table tbody tr:hover,
body.admin-standalone-active #admin-standalone-page .rankings-table tbody tr:hover,
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table tbody tr:hover {
background: rgba(255, 140, 32, 0.08);
}
/* Focus mode reduces non-critical noise */
body.admin-mobile-focus.admin-standalone-active #admin-standalone-page #adminDailyBriefingCard,
body.admin-mobile-focus.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard,
body.admin-mobile-focus.admin-standalone-active #admin-standalone-page #adminPerformancePieCard,
body.admin-mobile-focus.admin-standalone-active #admin-standalone-page #adminActivityRailCard {
display: none !important;
}
/* Strong light-mode legibility for admin cards */
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-critical-strip .insight-chip,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-saved-views-row .action-btn,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-nav-group > summary,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-nav-group .action-btn,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminExecSummaryCard,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminActivityRailCard {
color: #10243a !important;
}
/* Sidebar: show full content without internal scrolling */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar {
position: sticky !important;
top: 72px !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-action-queue {
min-height: 0 !important;
height: auto !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar-footer {
position: static !important;
bottom: auto !important;
background: transparent !important;
backdrop-filter: none !important;
}
/* Keep search + controls on one line */
body.admin-standalone-active #admin-standalone-page .admin-template-header {
display: grid !important;
grid-template-columns: minmax(320px, 1fr) auto !important;
align-items: center !important;
gap: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header-left,
body.admin-standalone-active #admin-standalone-page .admin-template-search-wrap {
min-width: 0 !important;
width: 100% !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-search {
width: 100% !important;
max-width: 100% !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header-right {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
white-space: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: thin;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header-right .action-btn {
flex: 0 0 auto !important;
white-space: nowrap !important;
}
}
/* Final Pixel Pass: ultra-clean compact admin home */
body.admin-standalone-active #admin-standalone-page {
--admin-space-1: 6px;
--admin-space-2: 8px;
--admin-space-3: 10px;
--admin-space-4: 12px;
}
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .container {
padding: 8px !important;
row-gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
padding-top: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header {
padding: 8px 10px !important;
border-radius: 12px !important;
margin-bottom: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-search {
height: 36px !important;
padding: 8px 10px !important;
border-radius: 10px !important;
font-size: 0.86rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header-right {
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header-right .action-btn {
min-height: 34px !important;
padding: 6px 10px !important;
font-size: 0.8rem !important;
border-radius: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-critical-strip,
body.admin-standalone-active #admin-standalone-page .admin-saved-views-row {
margin: 0 0 8px !important;
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
gap: 8px !important;
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
gap: 8px !important;
margin-top: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack,
body.admin-standalone-active #admin-standalone-page .admin-right-stack {
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .stats-section {
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header {
padding: 10px !important;
border-radius: 14px !important;
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-head h2,
body.admin-standalone-active #admin-standalone-page .admin-top-shell h4 {
margin-bottom: 4px !important;
}
body.admin-standalone-active #admin-standalone-page .page-subtitle {
margin: 2px 0 0 !important;
line-height: 1.25 !important;
font-size: 0.82rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stats {
gap: 8px !important;
margin-top: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-stat {
padding: 8px !important;
border-radius: 12px !important;
min-height: 78px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-value {
font-size: 1.24rem !important;
line-height: 1.1 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-hero-label,
body.admin-standalone-active #admin-standalone-page .admin-hero-trend {
font-size: 0.76rem !important;
}
body.admin-standalone-active #admin-standalone-page .menu-page-actions,
body.admin-standalone-active #admin-standalone-page .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid,
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs,
body.admin-standalone-active #admin-standalone-page .admin-role-actions,
body.admin-standalone-active #admin-standalone-page .admin-master-tabs,
body.admin-standalone-active #admin-standalone-page .admin-view-presets {
gap: 6px !important;
margin-top: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .action-btn,
body.admin-standalone-active #admin-standalone-page .back-btn {
min-height: 34px !important;
padding: 6px 10px !important;
border-radius: 10px !important;
font-size: 0.8rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar {
width: 270px !important;
padding: 10px !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-brand {
margin-bottom: 8px !important;
padding-bottom: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-nav {
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-nav-heading {
margin: 4px 2px 4px !important;
font-size: 0.72rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-nav .admin-template-nav-btn {
min-height: 34px !important;
padding: 6px 8px !important;
border-radius: 10px !important;
font-size: 0.8rem !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-action-queue {
padding: 8px !important;
margin: 0 !important;
border-radius: 12px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-action-queue-list,
body.admin-standalone-active #admin-standalone-page .admin-action-queue-kpis,
body.admin-standalone-active #admin-standalone-page .admin-action-queue-actions {
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .insight-chip {
min-height: 28px !important;
padding: 4px 8px !important;
font-size: 0.76rem !important;
border-radius: 999px !important;
}
body.admin-standalone-active #admin-standalone-page .audit-log {
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .audit-item {
padding: 6px 8px !important;
border-radius: 10px !important;
}
body.admin-standalone-active #admin-standalone-page .mini-table,
body.admin-standalone-active #admin-standalone-page .rankings-table,
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table {
margin-top: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .mini-table th,
body.admin-standalone-active #admin-standalone-page .mini-table td,
body.admin-standalone-active #admin-standalone-page .rankings-table th,
body.admin-standalone-active #admin-standalone-page .rankings-table td,
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table th,
body.admin-standalone-active #admin-standalone-page .admin-submitted-leads-table td {
padding: 6px 8px !important;
font-size: 0.8rem !important;
}
}
/* Lift admin content block up to align with left sidebar top */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .container {
padding-top: 0 !important;
margin-top: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-shell {
align-items: start !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
margin-top: 0 !important;
padding-top: 0 !important;
align-self: start !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header {
margin-top: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-critical-strip,
body.admin-standalone-active #admin-standalone-page .admin-saved-views-row,
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
margin-top: 0 !important;
}
}
/* Final override: sidebar must sit directly beside admin content (desktop) */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .admin-template-shell {
display: grid !important;
grid-template-columns: 270px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar {
position: sticky !important;
top: 72px !important;
left: auto !important;
width: 270px !important;
height: calc(100vh - 88px) !important;
border-radius: 14px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
}
/* Ultra-compact admin layout: eliminate visible gaps/spaces */
body.admin-standalone-active #admin-standalone-page .container,
body.admin-standalone-active #admin-standalone-page .admin-template-shell,
body.admin-standalone-active #admin-standalone-page .admin-template-content,
body.admin-standalone-active #admin-standalone-page .admin-main-grid,
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack,
body.admin-standalone-active #admin-standalone-page .admin-right-stack,
body.admin-standalone-active #admin-standalone-page .stats-section,
body.admin-standalone-active #admin-standalone-page .menu-page-actions,
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs,
body.admin-standalone-active #admin-standalone-page .admin-role-actions,
body.admin-standalone-active #admin-standalone-page .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid,
body.admin-standalone-active #admin-standalone-page .admin-critical-strip,
body.admin-standalone-active #admin-standalone-page .admin-saved-views-row,
body.admin-standalone-active #admin-standalone-page .admin-template-nav,
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar,
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar-footer,
body.admin-standalone-active #admin-standalone-page .admin-template-action-queue,
body.admin-standalone-active #admin-standalone-page .admin-top-shell,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body.admin-standalone-active #admin-standalone-page .page-header,
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-shell,
body.admin-standalone-active #admin-standalone-page .admin-main-grid,
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack,
body.admin-standalone-active #admin-standalone-page .admin-right-stack,
body.admin-standalone-active #admin-standalone-page .stats-section,
body.admin-standalone-active #admin-standalone-page .menu-page-actions,
body.admin-standalone-active #admin-standalone-page .admin-hero-module-tabs,
body.admin-standalone-active #admin-standalone-page .admin-role-actions,
body.admin-standalone-active #admin-standalone-page .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid,
body.admin-standalone-active #admin-standalone-page .admin-template-nav,
body.admin-standalone-active #admin-standalone-page .admin-critical-strip,
body.admin-standalone-active #admin-standalone-page .admin-saved-views-row {
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .container {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header,
body.admin-standalone-active #admin-standalone-page .admin-top-shell,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section,
body.admin-standalone-active #admin-standalone-page .admin-template-action-queue {
padding: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .page-header {
gap: 6px !important;
padding: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar {
padding: 10px 10px 8px !important;
}
body.admin-standalone-active #admin-standalone-page .action-btn,
body.admin-standalone-active #admin-standalone-page .back-btn {
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page h1,
body.admin-standalone-active #admin-standalone-page h2,
body.admin-standalone-active #admin-standalone-page h3,
body.admin-standalone-active #admin-standalone-page h4,
body.admin-standalone-active #admin-standalone-page p {
margin-top: 0 !important;
margin-bottom: 4px !important;
}
body.admin-standalone-active #admin-standalone-page .audit-log,
body.admin-standalone-active #admin-standalone-page .mini-table,
body.admin-standalone-active #admin-standalone-page .rankings-table {
margin: 0 !important;
}
/* Final wide-panel fix: use full right-side space (desktop) */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .container {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-right: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-shell {
width: 100% !important;
max-width: none !important;
grid-template-columns: 270px minmax(0, 1fr) !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
margin-left: 0 !important;
width: 100% !important;
max-width: none !important;
padding-right: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header,
body.admin-standalone-active #admin-standalone-page .admin-top-shell,
body.admin-standalone-active #admin-standalone-page .admin-main-grid,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body.admin-standalone-active #admin-standalone-page .stats-section,
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
width: 100% !important;
max-width: none !important;
}
}
/* Absolute final stretch: force admin control center area to use full right-side width */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page {
overflow-x: hidden !important;
}
body.admin-standalone-active #admin-standalone-page .container {
width: 100vw !important;
max-width: none !important;
margin: 0 !important;
padding: 0 8px 0 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-shell {
width: calc(100vw - 8px) !important;
max-width: none !important;
display: grid !important;
grid-template-columns: 270px minmax(0, 1fr) !important;
gap: 8px !important;
align-items: start !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
margin: 0 !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
padding-right: 0 !important;
justify-self: stretch !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header,
body.admin-standalone-active #admin-standalone-page .admin-top-shell,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body.admin-standalone-active #admin-standalone-page .admin-main-grid,
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack,
body.admin-standalone-active #admin-standalone-page .admin-right-stack,
body.admin-standalone-active #admin-standalone-page .stats-section,
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
width: 100% !important;
max-width: none !important;
}
}
/* Safe-width correction: keep admin wide but prevent right-side clipping */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .container {
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
margin: 0 8px !important;
padding: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-shell {
width: 100% !important;
max-width: 100% !important;
grid-template-columns: 270px minmax(0, 1fr) !important;
gap: 8px !important;
align-items: start !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 0 !important;
overflow-x: clip !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header,
body.admin-standalone-active #admin-standalone-page .admin-top-shell,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body.admin-standalone-active #admin-standalone-page .admin-main-grid,
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack,
body.admin-standalone-active #admin-standalone-page .admin-right-stack,
body.admin-standalone-active #admin-standalone-page .stats-section,
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: hidden !important;
}
}
/* Admin enhancement pack: trend ribbon, activity filters, skeletons, focus and motion */
body.admin-standalone-active #admin-standalone-page .admin-kpi-trend-bar {
padding: 8px 10px !important;
border: 1px solid rgba(59, 130, 246, 0.22) !important;
background: linear-gradient(180deg, rgba(15, 33, 64, 0.92), rgba(9, 20, 42, 0.96)) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-kpi-trend-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 6px;
}
body.admin-standalone-active #admin-standalone-page .admin-activity-filter-row {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
margin-bottom: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-module-skeleton-wrap {
overflow: hidden;
}
body.admin-standalone-active #admin-standalone-page .admin-skeleton-line,
body.admin-standalone-active #admin-standalone-page .admin-skeleton-card {
border-radius: 10px;
background: linear-gradient(90deg, rgba(148, 163, 184, 0.16) 25%, rgba(148, 163, 184, 0.36) 50%, rgba(148, 163, 184, 0.16) 75%);
background-size: 220% 100%;
animation: adminSkeletonPulse 1.1s linear infinite;
}
body.admin-standalone-active #admin-standalone-page .admin-skeleton-line { height: 14px; margin-bottom: 8px; }
body.admin-standalone-active #admin-standalone-page .admin-skeleton-line.w-30 { width: 30%; }
body.admin-standalone-active #admin-standalone-page .admin-skeleton-line.w-90 { width: 90%; }
body.admin-standalone-active #admin-standalone-page .admin-skeleton-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-skeleton-card { min-height: 80px; }
@keyframes adminSkeletonPulse {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
body.admin-standalone-active #admin-standalone-page .action-btn,
body.admin-standalone-active #admin-standalone-page .back-btn,
body.admin-standalone-active #admin-standalone-page .admin-hero-stat.is-clickable,
body.admin-standalone-active #admin-standalone-page .admin-template-nav .action-btn {
transition: transform 140ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease !important;
}
body.admin-standalone-active #admin-standalone-page .action-btn:active,
body.admin-standalone-active #admin-standalone-page .back-btn:active,
body.admin-standalone-active #admin-standalone-page .admin-hero-stat.is-clickable:active {
transform: translateY(1px) scale(0.995);
}
body.admin-standalone-active #admin-standalone-page .action-btn:focus-visible,
body.admin-standalone-active #admin-standalone-page .back-btn:focus-visible,
body.admin-standalone-active #admin-standalone-page .admin-hero-stat.is-clickable:focus-visible,
body.admin-standalone-active #admin-standalone-page input:focus-visible,
body.admin-standalone-active #admin-standalone-page select:focus-visible,
body.admin-standalone-active #admin-standalone-page textarea:focus-visible {
outline: 2px solid #f59e0b !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22) !important;
}
@media (max-width: 980px) {
body.admin-standalone-active #admin-standalone-page .admin-kpi-trend-grid {
grid-template-columns: 1fr 1fr;
}
body.admin-standalone-active #admin-standalone-page .admin-activity-filter-row {
grid-template-columns: 1fr 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
body.admin-standalone-active #admin-standalone-page .admin-skeleton-line,
body.admin-standalone-active #admin-standalone-page .admin-skeleton-card {
animation: none !important;
}
body.admin-standalone-active #admin-standalone-page .action-btn,
body.admin-standalone-active #admin-standalone-page .back-btn,
body.admin-standalone-active #admin-standalone-page .admin-hero-stat.is-clickable {
transition: none !important;
}
}
/* Safe full-width admin shell: wide, but never overflows screen */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page {
overflow-x: hidden !important;
}
body.admin-standalone-active #admin-standalone-page .container {
width: calc(100vw - 8px) !important;
max-width: calc(100vw - 8px) !important;
margin: 0 4px !important;
padding: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-shell {
width: 100% !important;
max-width: 100% !important;
display: grid !important;
grid-template-columns: 270px minmax(0, 1fr) !important;
gap: 8px !important;
align-items: start !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header,
body.admin-standalone-active #admin-standalone-page .admin-top-shell,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body.admin-standalone-active #admin-standalone-page .admin-main-grid,
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack,
body.admin-standalone-active #admin-standalone-page .admin-right-stack,
body.admin-standalone-active #admin-standalone-page .stats-section,
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-detail-section {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
}
/* Absolute edge-to-edge admin width on desktop */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .container {
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-shell {
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
grid-template-columns: 270px minmax(0, 1fr) !important;
gap: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding-right: 0 !important;
}
}
/* Widen center workspace panel toward the left (desktop) */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 220px minmax(0, 1fr) !important;
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
width: 220px !important;
min-width: 220px !important;
max-width: 220px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
}
}
/* Make left admin sidebar reach page bottom and grow with content */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar {
height: auto !important;
min-height: calc(100vh - 72px) !important;
align-self: stretch !important;
}
}
/* Widen Daily Briefing / Master Logger workspace (desktop) */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 170px minmax(0, 1fr) !important;
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
width: 170px !important;
min-width: 170px !important;
max-width: 170px !important;
padding: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail .admin-rail-actions {
grid-template-columns: 1fr !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
width: 100% !important;
max-width: 100% !important;
}
}
/* Final horizontal-width fix for Daily Briefing / Master Logger section */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
display: none !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
}
/* Center the Daily Briefing / Master Logger section in the middle (desktop) */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
width: min(1520px, 98%) !important;
max-width: min(1520px, 98%) !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* Final right-space coverage for full admin control center section */
@media (min-width: 1101px) {
body.admin-standalone-active #admin-standalone-page .admin-template-content {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 4px 0 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell,
body.admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body.admin-standalone-active #admin-standalone-page .admin-critical-strip,
body.admin-standalone-active #admin-standalone-page .admin-saved-views-row,
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
display: none !important;
}
}
/* Admin sidebar intelligence panel */
body.admin-standalone-active #admin-standalone-page .admin-template-smart-panel {
margin-top: 8px;
margin-bottom: 8px;
padding: 10px 10px 12px;
border-radius: 12px !important;
}
body.admin-standalone-active #admin-standalone-page #adminSidebarSmartPanelBody {
display: block;
}
body.admin-standalone-active #admin-standalone-page .admin-smart-grid {
display: grid;
gap: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-smart-section {
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 10px;
padding: 8px;
background: rgba(255, 255, 255, 0.04);
}
body.admin-standalone-active #admin-standalone-page .admin-smart-section h5 {
margin: 0 0 6px;
font-size: 0.77rem;
letter-spacing: 0.03em;
text-transform: uppercase;
}
body.admin-standalone-active #admin-standalone-page .admin-smart-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
body.admin-standalone-active #admin-standalone-page .admin-smart-chips .insight-chip {
font-size: 0.7rem;
padding: 4px 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-smart-list {
display: grid;
gap: 5px;
}
body.admin-standalone-active #admin-standalone-page .admin-smart-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
font-size: 0.76rem;
}
body.admin-standalone-active #admin-standalone-page .admin-smart-row strong {
font-size: 0.75rem;
opacity: 0.9;
}
body.admin-standalone-active #admin-standalone-page .admin-smart-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
body.admin-standalone-active #admin-standalone-page .admin-smart-actions .action-btn.secondary {
min-height: 34px;
font-size: 0.74rem;
padding: 6px 8px;
}
@media (max-width: 1100px) {
body.admin-standalone-active #admin-standalone-page .admin-smart-actions {
grid-template-columns: 1fr;
}
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-smart-panel,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-smart-section {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.14) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-smart-panel h4,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-smart-panel h5,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-smart-panel .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-smart-panel .admin-smart-row,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-smart-panel .admin-smart-row strong {
color: #0f172a !important;
}
/* Final lock: Admin top header text must stay visible in light mode */
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell .page-header .back-btn,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell .page-header .admin-brand-title,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell .page-header .section-heading[data-icon="🛡️"],
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell .page-header h1,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell .page-header .page-subtitle {
color: #0f172a !important;
text-shadow: none !important;
opacity: 1 !important;
mix-blend-mode: normal !important;
filter: none !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell .page-header .back-btn {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.22) !important;
}
/* Absolute visibility lock for Admin Home text */
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-content,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-content h1,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-content h2,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-content h3,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-content h4,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-content h5,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-content p,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-content span,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-content label,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-content li,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-content td,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-content th {
color: #0f172a !important;
text-shadow: none !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-template-content,
body.dark.admin-standalone-active #admin-standalone-page .admin-template-content h1,
body.dark.admin-standalone-active #admin-standalone-page .admin-template-content h2,
body.dark.admin-standalone-active #admin-standalone-page .admin-template-content h3,
body.dark.admin-standalone-active #admin-standalone-page .admin-template-content h4,
body.dark.admin-standalone-active #admin-standalone-page .admin-template-content h5,
body.dark.admin-standalone-active #admin-standalone-page .admin-template-content p,
body.dark.admin-standalone-active #admin-standalone-page .admin-template-content span,
body.dark.admin-standalone-active #admin-standalone-page .admin-template-content label,
body.dark.admin-standalone-active #admin-standalone-page .admin-template-content li,
body.dark.admin-standalone-active #admin-standalone-page .admin-template-content td,
body.dark.admin-standalone-active #admin-standalone-page .admin-template-content th {
color: #e5edf8 !important;
text-shadow: none !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .insight-card,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-header {
background: #ffffff !important;
}
/* Final light-mode theme normalization for Admin pages */
body:not(.dark).admin-standalone-active #admin-standalone-page,
body:not(.dark).admin-standalone-active #admin-module-page,
body:not(.dark).admin-standalone-active #admin-total-leads-page {
background: linear-gradient(180deg, #f5f9ff 0%, #edf4fc 100%) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-sidebar,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-content,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-top-shell,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-standalone-hero,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-main-grid,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-right-stack,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-command-rail,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-workspace-stack,
body:not(.dark).admin-standalone-active #admin-standalone-page .insight-card,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-detail-section,
body:not(.dark).admin-standalone-active #admin-module-page .insight-card,
body:not(.dark).admin-standalone-active #admin-total-leads-page .insight-card,
body:not(.dark).admin-standalone-active #admin-total-leads-page .admin-detail-section {
background-color: #ffffff !important;
background-image: none !important;
border-color: rgba(15, 23, 42, 0.14) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-nav .action-btn.secondary,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-sidebar-footer .action-btn.secondary,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-action-queue-actions .action-btn.secondary,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-capability-grid .action-btn.secondary,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-rail-actions .action-btn.secondary,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-header .action-btn.secondary {
background: #f7fbff !important;
color: #0f172a !important;
border-color: rgba(15, 23, 42, 0.2) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-nav .action-btn.secondary:hover,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-sidebar-footer .action-btn.secondary:hover,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-action-queue-actions .action-btn.secondary:hover,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-capability-grid .action-btn.secondary:hover,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-rail-actions .action-btn.secondary:hover,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-template-header .action-btn.secondary:hover {
background: #eef6ff !important;
border-color: rgba(15, 23, 42, 0.28) !important;
}
/* Ultimate light-mode visibility lock for admin home/module pages */
body:not(.dark).admin-standalone-active #admin-standalone-page,
body:not(.dark).admin-standalone-active #admin-module-page,
body:not(.dark).admin-standalone-active #admin-total-leads-page {
color: #0f172a !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page *,
body:not(.dark).admin-standalone-active #admin-module-page *,
body:not(.dark).admin-standalone-active #admin-total-leads-page * {
color: inherit;
}
body:not(.dark).admin-standalone-active #admin-standalone-page h1,
body:not(.dark).admin-standalone-active #admin-standalone-page h2,
body:not(.dark).admin-standalone-active #admin-standalone-page h3,
body:not(.dark).admin-standalone-active #admin-standalone-page h4,
body:not(.dark).admin-standalone-active #admin-standalone-page h5,
body:not(.dark).admin-standalone-active #admin-standalone-page p,
body:not(.dark).admin-standalone-active #admin-standalone-page span,
body:not(.dark).admin-standalone-active #admin-standalone-page label,
body:not(.dark).admin-standalone-active #admin-standalone-page li,
body:not(.dark).admin-standalone-active #admin-standalone-page th,
body:not(.dark).admin-standalone-active #admin-standalone-page td,
body:not(.dark).admin-standalone-active #admin-module-page h1,
body:not(.dark).admin-standalone-active #admin-module-page h2,
body:not(.dark).admin-standalone-active #admin-module-page h3,
body:not(.dark).admin-standalone-active #admin-module-page h4,
body:not(.dark).admin-standalone-active #admin-module-page h5,
body:not(.dark).admin-standalone-active #admin-module-page p,
body:not(.dark).admin-standalone-active #admin-module-page span,
body:not(.dark).admin-standalone-active #admin-module-page label,
body:not(.dark).admin-standalone-active #admin-module-page li,
body:not(.dark).admin-standalone-active #admin-module-page th,
body:not(.dark).admin-standalone-active #admin-module-page td,
body:not(.dark).admin-standalone-active #admin-total-leads-page h1,
body:not(.dark).admin-standalone-active #admin-total-leads-page h2,
body:not(.dark).admin-standalone-active #admin-total-leads-page h3,
body:not(.dark).admin-standalone-active #admin-total-leads-page h4,
body:not(.dark).admin-standalone-active #admin-total-leads-page h5,
body:not(.dark).admin-standalone-active #admin-total-leads-page p,
body:not(.dark).admin-standalone-active #admin-total-leads-page span,
body:not(.dark).admin-standalone-active #admin-total-leads-page label,
body:not(.dark).admin-standalone-active #admin-total-leads-page li,
body:not(.dark).admin-standalone-active #admin-total-leads-page th,
body:not(.dark).admin-standalone-active #admin-total-leads-page td {
color: #0f172a !important;
text-shadow: none !important;
opacity: 1 !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .page-subtitle,
body:not(.dark).admin-standalone-active #admin-module-page .page-subtitle,
body:not(.dark).admin-standalone-active #admin-total-leads-page .page-subtitle {
color: #334155 !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .insight-chip,
body:not(.dark).admin-standalone-active #admin-module-page .insight-chip,
body:not(.dark).admin-standalone-active #admin-total-leads-page .insight-chip {
color: #0f172a !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .action-btn,
body:not(.dark).admin-standalone-active #admin-module-page .action-btn,
body:not(.dark).admin-standalone-active #admin-total-leads-page .action-btn,
body:not(.dark).admin-standalone-active #admin-standalone-page .back-btn,
body:not(.dark).admin-standalone-active #admin-module-page .back-btn,
body:not(.dark).admin-standalone-active #admin-total-leads-page .back-btn {
color: #0f172a !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page input,
body:not(.dark).admin-standalone-active #admin-standalone-page select,
body:not(.dark).admin-standalone-active #admin-standalone-page textarea,
body:not(.dark).admin-standalone-active #admin-module-page input,
body:not(.dark).admin-standalone-active #admin-module-page select,
body:not(.dark).admin-standalone-active #admin-module-page textarea,
body:not(.dark).admin-standalone-active #admin-total-leads-page input,
body:not(.dark).admin-standalone-active #admin-total-leads-page select,
body:not(.dark).admin-standalone-active #admin-total-leads-page textarea {
color: #0f172a !important;
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.22) !important;
}
/* Dark-mode lock: Admin module page header visibility */
body.dark.admin-standalone-active #admin-module-page .page-header .back-btn,
body.dark.admin-standalone-active #admin-module-page .page-header .section-heading,
body.dark.admin-standalone-active #admin-module-page .page-header h1,
body.dark.admin-standalone-active #admin-module-page .page-header .page-subtitle,
body.dark.admin-standalone-active #admin-module-page #adminModuleHeadingChip,
body.dark.admin-standalone-active #admin-module-page #adminModuleTitle,
body.dark.admin-standalone-active #admin-module-page #adminModuleSubtitle {
color: #e6eef9 !important;
text-shadow: none !important;
opacity: 1 !important;
}
body.dark.admin-standalone-active #admin-module-page .page-header .back-btn {
background: rgba(15, 23, 42, 0.78) !important;
border-color: rgba(148, 163, 184, 0.35) !important;
}
/* Submitted Leads module fit lock (prevent right-side page overflow) */
body.admin-standalone-active #admin-module-page .container,
body.admin-standalone-active #admin-total-leads-page .container {
width: 100% !important;
max-width: 100vw !important;
margin: 0 auto !important;
padding-inline: 10px !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
body.admin-standalone-active #admin-module-page .admin-total-leads-shell,
body.admin-standalone-active #admin-total-leads-page .admin-total-leads-shell {
width: min(100%, calc(100vw - 20px)) !important;
max-width: min(100%, calc(100vw - 20px)) !important;
margin-inline: auto !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
body.admin-standalone-active #admin-module-page #adminModuleBody,
body.admin-standalone-active #admin-total-leads-page #adminTotalLeadsBody {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 260px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
/* Overall Stats: month-to-month compare lines */
.overall-line-chart .overall-line-captured-prev {
fill: none;
stroke: #7dd3fc;
stroke-width: 2;
stroke-dasharray: 6 4;
opacity: 0.9;
}
.overall-line-chart .overall-line-converted-prev {
fill: none;
stroke: #93c5fd;
stroke-width: 2;
stroke-dasharray: 6 4;
opacity: 0.9;
}
.overall-line-legend .dot.captured-prev,
.overall-line-legend .dot.converted-prev {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.overall-line-legend .dot.captured-prev { background: #7dd3fc; }
.overall-line-legend .dot.converted-prev { background: #93c5fd; }
/* Overall Stats dark-mode text lock */
body.dark #overallStatsPage,
body.dark #overallStatsPage .menu-page-note,
body.dark #overallStatsPage .page-subtitle,
body.dark #overallStatsPage .insight-card,
body.dark #overallStatsPage .insight-card h4,
body.dark #overallStatsPage .insight-card p,
body.dark #overallStatsPage .insight-card span,
body.dark #overallStatsPage .mini-table th,
body.dark #overallStatsPage .mini-table td,
body.dark #overallStatsPage .table-toolkit-label,
body.dark #overallStatsPage .table-toolkit-count {
color: #e8eef8 !important;
}
body.dark #overallStatsPage .mini-table,
body.dark #overallStatsPage .mini-table table {
background: rgba(9, 18, 34, 0.9) !important;
}
/* Admin top search: reduce width so header buttons remain visible */
body.admin-standalone-active #admin-standalone-page #adminCommandSearch {
width: clamp(140px, 18vw, 240px) !important;
max-width: 240px !important;
}
@media (max-width: 1200px) {
body.admin-standalone-active #admin-standalone-page #adminCommandSearch {
width: clamp(120px, 26vw, 200px) !important;
max-width: 200px !important;
}
}
/* Keep header buttons visible by not letting search container consume extra flex space */
body.admin-standalone-active #admin-standalone-page .admin-template-header-left {
flex: 0 1 auto !important;
min-width: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-search-wrap {
width: auto !important;
}
/* Final dark-mode lock for Overall Stats table toolkit + rows */
body.dark #overallStatsPage .table-toolkit,
body.dark #overallStatsPage .table-toolkit * {
color: #eaf2ff !important;
}
body.dark #overallStatsPage .table-toolkit .table-toolkit-input {
background: rgba(11, 21, 40, 0.95) !important;
border: 1px solid rgba(147, 197, 253, 0.35) !important;
color: #f8fbff !important;
}
body.dark #overallStatsPage .table-toolkit .table-toolkit-input::placeholder {
color: rgba(226, 236, 255, 0.78) !important;
}
body.dark #overallStatsPage .table-toolkit .action-btn.secondary.table-toolkit-clear {
background: rgba(18, 33, 60, 0.95) !important;
border-color: rgba(147, 197, 253, 0.4) !important;
color: #f2f7ff !important;
}
body.dark #overallStatsPage .mini-table table,
body.dark #overallStatsPage .mini-table thead th,
body.dark #overallStatsPage .mini-table tbody td,
body.dark #overallStatsPage .mini-table tbody td * {
color: #edf4ff !important;
}
body.dark #overallStatsPage .mini-table thead th {
background: rgba(20, 36, 63, 0.96) !important;
border-bottom: 1px solid rgba(147, 197, 253, 0.28) !important;
}
body.dark #overallStatsPage .mini-table tbody tr {
background: rgba(12, 24, 44, 0.88) !important;
}
body.dark #overallStatsPage .mini-table tbody tr:nth-child(even) {
background: rgba(15, 29, 52, 0.92) !important;
}
body.admin-standalone-active #admin-module-page #adminModuleBody .admin-submitted-leads-table-wrap,
body.admin-standalone-active #admin-total-leads-page #adminTotalLeadsBody .admin-submitted-leads-table-wrap {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: auto !important;
overflow-y: visible !important;
-webkit-overflow-scrolling: touch !important;
box-sizing: border-box !important;
}
body.admin-standalone-active #admin-module-page #adminModuleBody .admin-submitted-leads-table-wrap .admin-submitted-leads-table,
body.admin-standalone-active #admin-total-leads-page #adminTotalLeadsBody .admin-submitted-leads-table-wrap .admin-submitted-leads-table {
width: max-content !important;
min-width: 1280px !important;
max-width: none !important;
table-layout: auto !important;
}
@media (max-width: 1100px) {
body.admin-standalone-active #admin-module-page #adminModuleBody .admin-submitted-leads-table-wrap .admin-submitted-leads-table,
body.admin-standalone-active #admin-total-leads-page #adminTotalLeadsBody .admin-submitted-leads-table-wrap .admin-submitted-leads-table {
min-width: 1080px !important;
}
}
/* Absolute viewport-fit lock for entire app (admin + user + legacy) */
html, body {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
.page,
.page .container,
.page .stats-section,
.page .admin-detail-section,
.page .insight-card,
.page .menu-page-inner,
.page .menu-page-actions,
.page .admin-template-shell,
.page .admin-template-content,
.page .admin-main-grid,
.page .admin-workspace-stack,
.page .admin-right-stack,
.page .admin-top-shell,
.page .admin-standalone-hero {
width: 100%;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* Remove stale horizontal offset that shifts content to the far right */
body.admin-standalone-active #admin-standalone-page .admin-template-content {
margin-left: 0 !important;
}
/* Keep wide content scrollable inside its own card, never at page level */
.page .mini-table,
.page .admin-submitted-leads-table-wrap,
.page .rankings-table {
max-width: 100% !important;
min-width: 0 !important;
overflow-x: auto !important;
overflow-y: visible !important;
-webkit-overflow-scrolling: touch !important;
}
.page .mini-table table,
.page .admin-submitted-leads-table-wrap table,
.page .rankings-table table {
max-width: none !important;
}
/* Kill top gap between admin control toolbar and page header */
body.admin-standalone-active #admin-standalone-page .admin-template-content {
padding-top: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header {
margin-bottom: 4px !important;
padding-bottom: 8px !important;
}
body.admin-standalone-active #admin-standalone-page #adminKpiTrendBar {
margin: 0 0 4px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Admin top strip: Ops Status badge */
body.admin-standalone-active #admin-standalone-page .admin-ops-status-pill {
font-weight: 700;
letter-spacing: 0.01em;
}
body.admin-standalone-active #admin-standalone-page .admin-ops-status-pill.is-stable {
background: rgba(34, 197, 94, 0.16) !important;
border-color: rgba(34, 197, 94, 0.45) !important;
color: #15803d !important;
}
body.admin-standalone-active #admin-standalone-page .admin-ops-status-pill.is-watch {
background: rgba(245, 158, 11, 0.16) !important;
border-color: rgba(245, 158, 11, 0.45) !important;
color: #b45309 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-ops-status-pill.is-critical {
background: rgba(239, 68, 68, 0.16) !important;
border-color: rgba(239, 68, 68, 0.45) !important;
color: #b91c1c !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-ops-status-pill.is-stable {
color: #86efac !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-ops-status-pill.is-watch {
color: #fcd34d !important;
}
body.dark.admin-standalone-active #admin-standalone-page .admin-ops-status-pill.is-critical {
color: #fca5a5 !important;
}
/* Light-mode lock for JFA Performance Split card */
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card h4,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card .admin-pie-summary,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card .admin-pie-center-value,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card .admin-pie-center-label,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card .admin-pie-bar-row,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card .admin-pie-bar-row span,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card .admin-pie-bar-row strong,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card .admin-pie-legend-item,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card .admin-pie-legend-item span,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card .admin-pie-legend-item strong,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card .admin-pie-legend-item em {
color: #0f172a !important;
text-shadow: none !important;
opacity: 1 !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card .admin-pie-split-btn {
color: #0f172a !important;
background: #f8fbff !important;
border-color: rgba(15, 23, 42, 0.2) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card .admin-pie-ring-bg {
stroke: rgba(15, 23, 42, 0.12) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-performance-pie-card .admin-pie-bar-track {
background: rgba(15, 23, 42, 0.09) !important;
}
/* Absolute final fix: JFA Performance Split card text visibility (light mode) */
body:not(.dark).admin-standalone-active #admin-standalone-page #adminPerformancePieCard,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminPerformancePieCard * {
color: #0f172a !important;
text-shadow: none !important;
opacity: 1 !important;
filter: none !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminPerformancePieCard .page-subtitle {
color: #334155 !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminPerformancePieCard .admin-pie-split-btn,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminPerformancePieCard .admin-pie-legend-item {
background: #f8fbff !important;
border-color: rgba(15, 23, 42, 0.2) !important;
}
/* Bottom fill panel next to module workspace */
body.admin-standalone-active #admin-standalone-page .admin-bottom-fill-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 10px;
align-items: start;
}
body.admin-standalone-active #admin-standalone-page .admin-bottom-mini-card {
min-height: 100%;
}
body.admin-standalone-active #admin-standalone-page .admin-bottom-mini-kpis {
margin-bottom: 8px;
}
@media (max-width: 1100px) {
body.admin-standalone-active #admin-standalone-page .admin-bottom-fill-grid {
grid-template-columns: 1fr;
}
}
/* Admin enhancement cards */
body.admin-standalone-active #admin-standalone-page .admin-mini-row-btn {
width: 100%;
justify-content: space-between !important;
gap: 8px;
}
body.admin-standalone-active #admin-standalone-page .admin-inline-bar {
position: relative;
display: inline-flex;
width: 110px;
height: 7px;
border-radius: 999px;
overflow: hidden;
background: rgba(148, 163, 184, 0.28);
}
body.admin-standalone-active #admin-standalone-page .admin-inline-bar i {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #17a2a4, #f26a21);
}
.lead-quality-checklist-card .audit-log {
max-height: 220px;
overflow: auto;
}
body:not(.dark) .lead-quality-checklist-card .audit-item {
color: #0f172a !important;
background: #f8fbff !important;
border: 1px solid rgba(15, 23, 42, 0.12);
}
/* Final top-gap removal: directly above admin search bar */
body.admin-standalone-active #admin-standalone-page .container,
body.admin-standalone-active #admin-standalone-page .admin-template-shell,
body.admin-standalone-active #admin-standalone-page .admin-template-content {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header {
margin-top: 0 !important;
top: 0 !important;
}
/* Light-mode visibility lock: System Heartbeat + Executive Snapshot */
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeartbeatCard,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminExecSummaryCard {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.18) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeartbeatCard h4,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminExecSummaryCard h4,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeartbeatCard .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminExecSummaryCard .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeartbeatCard p,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminExecSummaryCard p,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeartbeatCard span,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminExecSummaryCard span {
color: #0f172a !important;
text-shadow: none !important;
opacity: 1 !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeartbeatCard .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminExecSummaryCard .page-subtitle {
color: #334155 !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminHeartbeatCard .insight-chip,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminExecSummaryCard .insight-chip {
background: #f8fbff !important;
border-color: rgba(15, 23, 42, 0.24) !important;
color: #0f172a !important;
}
/* Light-mode visibility lock: Operational Health + Recent Activity */
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneHealth,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.18) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneHealth h4,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity h4,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneHealth h5,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity h5,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneHealth .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneHealth p,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity p,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneHealth span,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity span,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneHealth strong,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity strong,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneHealth em,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity em {
color: #0f172a !important;
text-shadow: none !important;
opacity: 1 !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneHealth .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity .timeline-time {
color: #334155 !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneHealth .insight-chip,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity .insight-chip {
background: #f8fbff !important;
border-color: rgba(15, 23, 42, 0.24) !important;
color: #0f172a !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneHealth .admin-mini-funnel-row {
background: #edf4ff !important;
border: 1px solid rgba(15, 23, 42, 0.12) !important;
color: #0f172a !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity .audit-item,
body:not(.dark).admin-standalone-active #admin-standalone-page #adminStandaloneRecentActivity .timeline-item {
background: #f8fbff !important;
border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
/* Light-mode lock: Admin Submitted Leads table visibility */
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-submitted-leads-table-wrap,
body:not(.dark).admin-standalone-active #admin-module-page .admin-submitted-leads-table-wrap,
body:not(.dark).admin-standalone-active #admin-total-leads-page .admin-submitted-leads-table-wrap {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.22) !important;
}
/* Mobile-only: keep Admin Control Center identity block at the very top */
@media (max-width: 980px) {
/* Ensure first visible panel on mobile is Admin Control Center (not sidebar) */
body.admin-standalone-active #admin-standalone-page .admin-template-shell {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
order: 1 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar {
order: 2 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-content {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
order: 1 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header {
order: 2 !important;
margin-top: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-kpi-trend-bar {
order: 3 !important;
margin-top: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
order: 4 !important;
}
/* Mobile priority: show logo first on admin entry */
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-header {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
text-align: center !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .admin-brand-stack {
order: 1 !important;
display: flex !important;
flex-direction: column-reverse !important; /* logo before title */
align-items: center !important;
gap: 6px !important;
margin-top: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .admin-brand-logo {
width: 96px !important;
height: 96px !important;
max-width: 96px !important;
max-height: 96px !important;
margin: 0 auto !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .admin-brand-title {
order: 2 !important;
font-size: 0.86rem !important;
line-height: 1.15 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .back-btn {
order: 3 !important;
align-self: center !important;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .section-heading,
body.admin-standalone-active #admin-standalone-page .admin-top-shell h1,
body.admin-standalone-active #admin-standalone-page .admin-top-shell .page-subtitle {
order: 4 !important;
}
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-submitted-leads-table thead th,
body:not(.dark).admin-standalone-active #admin-module-page .admin-submitted-leads-table thead th,
body:not(.dark).admin-standalone-active #admin-total-leads-page .admin-submitted-leads-table thead th {
background: #eaf2ff !important;
color: #0f172a !important;
border-color: rgba(15, 23, 42, 0.18) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-submitted-leads-table td,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-submitted-leads-table td *,
body:not(.dark).admin-standalone-active #admin-module-page .admin-submitted-leads-table td,
body:not(.dark).admin-standalone-active #admin-module-page .admin-submitted-leads-table td *,
body:not(.dark).admin-standalone-active #admin-total-leads-page .admin-submitted-leads-table td,
body:not(.dark).admin-standalone-active #admin-total-leads-page .admin-submitted-leads-table td * {
color: #0f172a !important;
text-shadow: none !important;
opacity: 1 !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-submitted-leads-table tbody tr,
body:not(.dark).admin-standalone-active #admin-module-page .admin-submitted-leads-table tbody tr,
body:not(.dark).admin-standalone-active #admin-total-leads-page .admin-submitted-leads-table tbody tr {
background: #ffffff !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-submitted-leads-table tbody tr:nth-child(odd),
body:not(.dark).admin-standalone-active #admin-module-page .admin-submitted-leads-table tbody tr:nth-child(odd),
body:not(.dark).admin-standalone-active #admin-total-leads-page .admin-submitted-leads-table tbody tr:nth-child(odd) {
background: #f8fbff !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-submitted-leads-table input,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-submitted-leads-table select,
body:not(.dark).admin-standalone-active #admin-module-page .admin-submitted-leads-table input,
body:not(.dark).admin-standalone-active #admin-module-page .admin-submitted-leads-table select,
body:not(.dark).admin-standalone-active #admin-total-leads-page .admin-submitted-leads-table input,
body:not(.dark).admin-standalone-active #admin-total-leads-page .admin-submitted-leads-table select {
background: #ffffff !important;
color: #0f172a !important;
border-color: rgba(15, 23, 42, 0.24) !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-submitted-leads-table a,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-submitted-leads-table .copy-btn,
body:not(.dark).admin-standalone-active #admin-module-page .admin-submitted-leads-table a,
body:not(.dark).admin-standalone-active #admin-module-page .admin-submitted-leads-table .copy-btn,
body:not(.dark).admin-standalone-active #admin-total-leads-page .admin-submitted-leads-table a,
body:not(.dark).admin-standalone-active #admin-total-leads-page .admin-submitted-leads-table .copy-btn {
color: #0b3b77 !important;
border-color: rgba(11, 59, 119, 0.28) !important;
background: #eef5ff !important;
}
/* Compact squeeze: Daily Briefing + Capabilities + Utility + Module Workspace + Quick Snapshot */
body.admin-standalone-active #admin-standalone-page .admin-critical-strip,
body.admin-standalone-active #admin-standalone-page .admin-saved-views-row {
margin-bottom: 6px !important;
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack > .stats-section {
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page #adminDailyBriefingCard,
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard,
body.admin-standalone-active #admin-standalone-page #adminStandaloneMasterLogger,
body.admin-standalone-active #admin-standalone-page #adminBottomMiniCard {
padding: 8px !important;
border-radius: 12px !important;
}
body.admin-standalone-active #admin-standalone-page #adminDailyBriefingCard h4,
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard h4,
body.admin-standalone-active #admin-standalone-page #adminBottomMiniCard h4 {
margin-bottom: 2px !important;
}
body.admin-standalone-active #admin-standalone-page #adminDailyBriefingCard .page-subtitle,
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard .page-subtitle,
body.admin-standalone-active #admin-standalone-page #adminBottomMiniCard .page-subtitle {
margin-top: 0 !important;
font-size: 0.8rem !important;
line-height: 1.2 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar.admin-utility-grid,
body.admin-standalone-active #admin-standalone-page #adminStandaloneMasterLogger .admin-capability-grid {
gap: 5px !important;
margin-top: 5px !important;
}
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard .admin-capability-grid {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar.admin-utility-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
body.admin-standalone-active #admin-standalone-page #adminStandaloneMasterLogger .admin-capability-grid {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard .action-btn,
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar.admin-utility-grid .action-btn,
body.admin-standalone-active #admin-standalone-page #adminStandaloneMasterLogger .action-btn,
body.admin-standalone-active #admin-standalone-page #adminBottomMiniCard .action-btn {
min-height: 30px !important;
padding: 5px 8px !important;
font-size: 0.74rem !important;
border-radius: 9px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-bottom-fill-grid {
gap: 6px !important;
grid-template-columns: minmax(0, 1fr) 280px !important;
}
body.admin-standalone-active #admin-standalone-page #adminBottomMiniCard .insight-list {
gap: 5px !important;
margin-bottom: 6px !important;
}
body.admin-standalone-active #admin-standalone-page #adminBottomMiniCard .insight-chip {
min-height: 24px !important;
padding: 3px 8px !important;
font-size: 0.72rem !important;
}
@media (max-width: 1280px) {
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page #adminStandaloneMasterLogger .admin-capability-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar.admin-utility-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
.admin-template-nav-btn.badge-danger,
.admin-hero-module-tabs .action-btn.badge-danger {
border-color: rgba(185, 28, 28, 0.65) !important;
box-shadow: inset 0 0 0 1px rgba(185, 28, 28, 0.18);
}
.admin-template-nav-btn.badge-warn,
.admin-hero-module-tabs .action-btn.badge-warn {
border-color: rgba(180, 83, 9, 0.62) !important;
box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.16);
}
.admin-template-nav-btn.badge-success,
.admin-hero-module-tabs .action-btn.badge-success {
border-color: rgba(22, 101, 52, 0.5) !important;
}
.admin-empty-state {
margin-top: 10px;
border: 1px dashed rgba(148, 163, 184, 0.4);
border-radius: 12px;
padding: 14px;
background: rgba(15, 23, 42, 0.03);
}
body.dark .admin-empty-state {
background: rgba(15, 23, 42, 0.42);
border-color: rgba(148, 163, 184, 0.3);
}
@media (max-width: 980px) {
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar.admin-utility-grid,
body.admin-standalone-active #admin-standalone-page #adminStandaloneMasterLogger .admin-capability-grid {
grid-template-columns: 1fr !important;
}
body.admin-standalone-active #admin-standalone-page .admin-bottom-fill-grid {
grid-template-columns: 1fr !important;
}
}
/* Extra squeeze for admin workspace block (desktop): remove vertical waste */
@media (min-width: 1024px) {
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack {
gap: 4px !important;
margin-top: 4px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack > .stats-section {
margin: 0 !important;
padding: 0 !important;
}
body.admin-standalone-active #admin-standalone-page #adminDailyBriefingCard,
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard,
body.admin-standalone-active #admin-standalone-page #adminStandaloneMasterLogger,
body.admin-standalone-active #admin-standalone-page #adminBottomMiniCard {
padding: 6px !important;
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page #adminDailyBriefingCard h4,
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard h4,
body.admin-standalone-active #admin-standalone-page #adminBottomMiniCard h4 {
margin: 0 0 2px !important;
line-height: 1.15 !important;
font-size: 0.94rem !important;
}
body.admin-standalone-active #admin-standalone-page #adminDailyBriefingCard .page-subtitle,
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard .page-subtitle,
body.admin-standalone-active #admin-standalone-page #adminBottomMiniCard .page-subtitle {
margin: 0 0 4px !important;
font-size: 0.76rem !important;
line-height: 1.2 !important;
}
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard .admin-capability-grid {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 4px !important;
margin-top: 4px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar.admin-utility-grid {
grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
gap: 4px !important;
margin: 4px 0 !important;
}
body.admin-standalone-active #admin-standalone-page #adminStandaloneMasterLogger .admin-capability-grid {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 4px !important;
margin-top: 4px !important;
}
body.admin-standalone-active #admin-standalone-page #adminMasterCapabilitiesCard .action-btn,
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar.admin-utility-grid .action-btn,
body.admin-standalone-active #admin-standalone-page #adminStandaloneMasterLogger .action-btn,
body.admin-standalone-active #admin-standalone-page #adminBottomMiniCard .action-btn {
min-height: 28px !important;
padding: 4px 7px !important;
border-radius: 8px !important;
font-size: 0.72rem !important;
line-height: 1.15 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-bottom-fill-grid {
grid-template-columns: minmax(0, 1fr) minmax(240px, 0.6fr) !important;
gap: 4px !important;
margin-top: 4px !important;
}
body.admin-standalone-active #admin-standalone-page #adminBottomMiniCard .insight-list {
gap: 4px !important;
margin: 0 0 4px !important;
}
body.admin-standalone-active #admin-standalone-page #adminBottomMiniCard .insight-chip {
min-height: 22px !important;
padding: 2px 7px !important;
font-size: 0.7rem !important;
}
body.admin-standalone-active #admin-standalone-page #adminStandaloneNotificationInline,
body.admin-standalone-active #admin-standalone-page #adminStandaloneFacilityDirectory {
margin-top: 4px !important;
}
}
/* Promotion leaderboard card under JFA Performance Split */
body.admin-standalone-active #admin-standalone-page .admin-promotion-leaderboard-card .insight-list {
margin: 6px 0 8px !important;
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-promotion-filter-row {
margin: 0 0 8px !important;
gap: 6px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-promotion-filter-row .action-btn {
min-height: 30px !important;
padding: 5px 10px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-promotion-leaderboard-table-wrap {
max-height: 540px;
overflow: auto;
}
body.admin-standalone-active #admin-standalone-page .admin-promotion-jfa-btn {
width: 100%;
justify-content: flex-start;
}
body.admin-standalone-active #admin-standalone-page .admin-promotion-meter {
position: relative;
width: 100%;
height: 8px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.25);
overflow: hidden;
margin-bottom: 4px;
}
body.admin-standalone-active #admin-standalone-page .admin-promotion-meter-fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #1d4ed8 0%, #22c55e 100%);
}
body.admin-standalone-active #admin-standalone-page .admin-promotion-meta {
font-size: 0.72rem;
line-height: 1.25;
color: var(--muted);
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-promotion-leaderboard-card,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-promotion-leaderboard-card h4,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-promotion-leaderboard-card .page-subtitle,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-promotion-leaderboard-card th,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-promotion-leaderboard-card td,
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-promotion-leaderboard-card .admin-promotion-meta {
color: #0f172a !important;
}
/* Overall Stats advanced controls */
.overall-filter-bar {
margin-bottom: 10px;
}
.overall-filter-row {
display: flex;
gap: 10px;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.overall-filter-controls {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.overall-filter-controls input,
.overall-filter-controls select {
min-height: 36px;
border-radius: 10px;
border: 1px solid rgba(130, 146, 170, 0.4);
background: rgba(255, 255, 255, 0.9);
padding: 0 10px;
color: #0A1324;
}
.overall-line-chart {
width: 100%;
height: 230px;
background: linear-gradient(180deg, rgba(12, 46, 82, 0.05), rgba(12, 46, 82, 0.02));
border: 1px solid rgba(130, 146, 170, 0.28);
border-radius: 12px;
}
.overall-line-captured,
.overall-line-converted {
fill: none;
stroke-width: 3;
}
.overall-line-captured {
stroke: #f5a623;
}
.overall-line-converted {
stroke: #3676ff;
}
.overall-line-legend {
margin-top: 8px;
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 0.85rem;
}
.overall-line-legend .dot {
width: 9px;
height: 9px;
border-radius: 999px;
display: inline-block;
margin-right: 6px;
}
.overall-line-legend .dot.captured {
background: #f5a623;
}
.overall-line-legend .dot.converted {
background: #3676ff;
}
.overall-alert-rail .insight-chip {
margin-right: 6px;
margin-bottom: 6px;
}
body.dark .overall-filter-controls input,
body.dark .overall-filter-controls select {
background: rgba(8, 18, 38, 0.92);
border-color: rgba(130, 146, 170, 0.35);
color: #EAF0FF;
}
body.dark .overall-line-chart {
background: linear-gradient(180deg, rgba(7, 15, 30, 0.55), rgba(7, 15, 30, 0.2));
border-color: rgba(130, 146, 170, 0.35);
}
@media (max-width: 768px) {
.overall-filter-controls input,
.overall-filter-controls select {
width: 100%;
}
}
/* User profile onboarding and sidebar avatar */
.sidebar-profile-button {
border: 0;
background: transparent;
color: inherit;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0;
margin: 0;
cursor: pointer;
min-width: 0;
}
.sidebar-profile-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, rgba(245, 123, 32, .92), rgba(20, 71, 146, .95));
color: #fff;
font-weight: 700;
background-size: cover;
background-position: center;
box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
}
.sidebar-profile-avatar.has-photo {
color: transparent;
}
.sidebar-profile-label {
font-weight: 600;
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-wizard-photo-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 10px 0 12px;
}
.profile-wizard-avatar {
width: 62px;
height: 62px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(20, 71, 146, .16);
color: var(--text-primary, #fff);
font-size: 1.1rem;
font-weight: 700;
background-size: cover;
background-position: center;
border: 1px solid rgba(255, 255, 255, .2);
}
.profile-wizard-avatar.has-photo {
color: transparent;
}
.profile-wizard-photo-actions {
justify-content: flex-end;
}
.profile-gate-card {
margin: 12px 0;
padding: 14px;
border-radius: 12px;
border: 1px solid rgba(245, 123, 32, 0.55);
background: linear-gradient(135deg, rgba(245, 123, 32, 0.12), rgba(20, 71, 146, 0.16));
display: grid;
gap: 10px;
}
.profile-gate-card p {
margin: 6px 0 0;
opacity: 0.92;
}
.profile-wizard-shell {
border-radius: 16px;
border: 1px solid rgba(130, 147, 172, 0.32);
}
.profile-wizard-top-kpis {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 8px 0 10px;
}
.profile-wizard-top-kpi {
border: 1px solid rgba(130, 147, 172, 0.3);
border-radius: 12px;
background: rgba(255, 255, 255, 0.65);
padding: 8px 10px;
display: grid;
gap: 2px;
}
body.dark .profile-wizard-top-kpi {
background: rgba(7, 18, 39, 0.62);
border-color: rgba(130, 147, 172, 0.28);
}
.profile-wizard-top-kpi strong {
font-size: 1rem;
line-height: 1.1;
}
.profile-wizard-top-kpi span {
font-size: 0.8rem;
opacity: 0.82;
}
.profile-wizard-step-hint {
margin: 0 0 8px;
}
.profile-overview-shell {
padding: 14px;
border-radius: 18px;
background: linear-gradient(150deg, rgba(244, 246, 251, 0.98), rgba(232, 238, 249, 0.95));
color: #14233f;
}
body.dark .profile-overview-shell {
background: linear-gradient(150deg, rgba(7, 18, 39, 0.94), rgba(10, 28, 58, 0.92));
color: #edf2ff;
}
.profile-overview-shell .page-subtitle {
color: inherit;
opacity: 0.86;
}
.profile-overview-nav {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 10px;
align-items: center;
margin-bottom: 14px;
}
.profile-overview-brand {
display: inline-flex;
align-items: center;
gap: 10px;
}
.profile-overview-brand img {
width: 34px;
height: 34px;
object-fit: contain;
}
.profile-overview-brand h5 {
margin: 0;
font-size: 0.98rem;
}
.profile-overview-brand small {
opacity: 0.8;
}
.profile-overview-brand h5 {
letter-spacing: 0.01em;
}
.profile-overview-main {
display: grid;
grid-template-columns: minmax(260px, 1.08fr) minmax(300px, 1fr);
gap: 14px;
align-items: start;
}
.profile-overview-status-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.profile-overview-id-card,
.profile-overview-card {
border-radius: 16px;
border: 1px solid rgba(140, 155, 185, 0.34);
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 10px 24px rgba(20, 35, 63, 0.12);
padding: 14px;
}
body.dark .profile-overview-id-card,
body.dark .profile-overview-card {
background: rgba(4, 15, 33, 0.56);
border-color: rgba(135, 153, 183, 0.28);
box-shadow: 0 10px 24px rgba(2, 8, 20, 0.45);
}
.profile-overview-id-card h4 {
margin: 10px 0 6px;
}
.profile-overview-avatar {
width: 170px;
height: 170px;
border-radius: 18px;
display: block;
background: rgba(20, 71, 146, 0.16);
border: 1px solid rgba(130, 147, 172, 0.35);
background-size: cover;
background-position: center;
color: #14233f;
font-size: 2.4rem;
font-weight: 800;
line-height: 170px;
text-align: center;
margin-bottom: 8px;
}
body.dark .profile-overview-avatar {
color: #edf2ff;
}
.profile-overview-avatar.has-photo {
color: transparent;
}
.profile-overview-side-cards {
display: grid;
gap: 12px;
}
.profile-overview-card h5 {
margin: 0 0 8px;
font-size: 0.95rem;
}
.profile-overview-fields {
display: grid;
gap: 6px;
}
.profile-overview-field-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 1px dashed rgba(130, 147, 172, 0.28);
padding: 4px 0;
}
.profile-overview-field-row span {
font-size: 0.84rem;
opacity: 0.82;
}
.profile-overview-field-row strong {
font-size: 0.86rem;
font-weight: 650;
text-align: right;
}
@media (max-width: 920px) {
.profile-wizard-top-kpis {
grid-template-columns: 1fr;
}
.profile-overview-nav {
grid-template-columns: 1fr;
}
.profile-overview-main {
grid-template-columns: 1fr;
}
.profile-overview-avatar {
width: 130px;
height: 130px;
line-height: 130px;
font-size: 2rem;
}
}
/* Admin hardening: contrast, stable 3-column layout, control bar, sticky tables */
:root {
--sev-critical-bg: #b91c1c;
--sev-critical-fg: #ffffff;
--sev-warning-bg: #b45309;
--sev-warning-fg: #ffffff;
--sev-normal-bg: #166534;
--sev-normal-fg: #ffffff;
}
body.dark {
--sev-critical-bg: #ef4444;
--sev-critical-fg: #1f2937;
--sev-warning-bg: #f59e0b;
--sev-warning-fg: #111827;
--sev-normal-bg: #22c55e;
--sev-normal-fg: #052e16;
}
.insight-chip.danger { background: var(--sev-critical-bg) !important; color: var(--sev-critical-fg) !important; }
.insight-chip.warn { background: var(--sev-warning-bg) !important; color: var(--sev-warning-fg) !important; }
.insight-chip.success { background: var(--sev-normal-bg) !important; color: var(--sev-normal-fg) !important; }
body.admin-standalone-active #admin-standalone-page .admin-template-shell {
display: grid;
grid-template-columns: 312px minmax(0, 1fr);
gap: 12px;
align-items: start;
}
body.admin-standalone-active #admin-standalone-page .admin-template-sidebar {
position: sticky;
top: 10px;
align-self: start;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
display: grid;
grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.72fr);
gap: 12px;
align-items: start;
}
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
display: grid;
grid-template-columns: minmax(270px, 0.34fr) minmax(0, 1fr);
gap: 12px;
align-items: start;
}
body.admin-standalone-active #admin-standalone-page .admin-right-stack,
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack,
body.admin-standalone-active #admin-standalone-page .admin-command-rail {
align-self: start;
}
body.admin-standalone-active #admin-standalone-page .admin-right-stack > .insight-card,
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack > .stats-section > .insight-card {
min-height: 120px;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header {
position: sticky;
top: 0;
z-index: 55;
background: inherit;
}
body.admin-standalone-active #admin-standalone-page .admin-kpi-trend-bar {
position: sticky;
top: 64px;
z-index: 54;
border: 1px solid rgba(148, 163, 184, 0.28);
backdrop-filter: blur(10px);
}
.admin-controlbar-head {
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
margin-bottom: 8px;
flex-wrap: wrap;
}
.admin-weekly-trend-strip .admin-weekly-strip-body {
height: 74px;
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 10px;
padding: 6px;
margin: 8px 0 10px;
}
.admin-weekly-trend-strip .admin-weekly-trend-controls {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.admin-weekly-trend-strip .admin-weekly-trend-controls .action-btn {
min-height: 30px;
padding: 6px 10px;
}
.admin-weekly-trend-strip svg { width: 100%; height: 100%; display: block; }
.admin-weekly-trend-strip .strip-line { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.admin-weekly-trend-strip .strip-line.leads { stroke: #f97316; }
.admin-weekly-trend-strip .strip-line.sales { stroke: #3b82f6; }
.admin-weekly-trend-strip .strip-line.quality { stroke: #22c55e; }
.admin-weekly-trend-strip .strip-line.is-dim { opacity: 0.28; }
.admin-weekly-trend-strip .strip-line.is-active { opacity: 1; stroke-width: 2.8; }
.admin-weekly-trend-strip .strip-axis {
stroke: rgba(148, 163, 184, 0.45);
stroke-width: 1;
}
.admin-weekly-trend-strip .strip-dot {
cursor: pointer;
opacity: 0.86;
transition: transform 140ms ease, opacity 140ms ease;
transform-origin: center;
}
.admin-weekly-trend-strip .strip-dot.leads { fill: #f97316; }
.admin-weekly-trend-strip .strip-dot.sales { fill: #3b82f6; }
.admin-weekly-trend-strip .strip-dot.quality { fill: #22c55e; }
.admin-weekly-trend-strip .strip-dot.is-dim { opacity: 0.2; }
.admin-weekly-trend-strip .strip-dot:hover,
.admin-weekly-trend-strip .strip-dot.is-focused {
opacity: 1;
transform: scale(1.2);
}
.admin-weekly-trend-strip .admin-weekly-trend-days {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 8px;
}
.admin-weekly-trend-strip .admin-weekly-day-chip {
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 999px;
background: rgba(148, 163, 184, 0.12);
color: inherit;
padding: 4px 10px;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
}
.admin-weekly-trend-strip .admin-weekly-day-chip.is-active {
border-color: rgba(59, 130, 246, 0.62);
background: rgba(59, 130, 246, 0.2);
}
.admin-weekly-trend-strip .admin-weekly-trend-insight {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 6px;
margin: 0 0 10px;
padding: 8px 10px;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 10px;
background: linear-gradient(145deg, rgba(15, 23, 42, 0.04), rgba(59, 130, 246, 0.06));
}
.admin-weekly-trend-strip .admin-weekly-trend-insight strong {
grid-column: 1 / -1;
font-size: 0.8rem;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.9;
}
.admin-weekly-trend-strip .admin-weekly-trend-insight span {
font-size: 0.78rem;
font-weight: 650;
}
body.dark .admin-weekly-trend-strip .admin-weekly-day-chip {
border-color: rgba(148, 163, 184, 0.45);
background: rgba(15, 23, 42, 0.55);
}
body.dark .admin-weekly-trend-strip .admin-weekly-day-chip.is-active {
border-color: rgba(56, 189, 248, 0.65);
background: rgba(56, 189, 248, 0.18);
}
body.dark .admin-weekly-trend-strip .admin-weekly-trend-insight {
border-color: rgba(148, 163, 184, 0.4);
background: linear-gradient(145deg, rgba(15, 23, 42, 0.7), rgba(30, 41, 59, 0.58));
}
body.admin-sticky-tables .admin-submitted-leads-table-wrap { overflow: auto; max-height: min(72vh, 980px); }
body.admin-sticky-tables .admin-submitted-leads-table thead th { position: sticky; top: 0; z-index: 3; }
body.admin-sticky-tables .admin-submitted-leads-table th:first-child,
body.admin-sticky-tables .admin-submitted-leads-table td:first-child {
position: sticky;
left: 0;
z-index: 2;
background: inherit;
}
body.admin-sticky-tables .admin-submitted-leads-table thead th:first-child {
z-index: 4;
}
body.admin-sticky-tables .mini-table table thead th {
position: sticky;
top: 0;
z-index: 2;
}
body.admin-sticky-tables .mini-table table th:first-child,
body.admin-sticky-tables .mini-table table td:first-child {
position: sticky;
left: 0;
z-index: 1;
background: inherit;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .insight-card,
body:not(.dark).admin-standalone-active #admin-standalone-page .insight-card * {
color: #0f172a;
}
body.dark.admin-standalone-active #admin-standalone-page .insight-card,
body.dark.admin-standalone-active #admin-standalone-page .insight-card * {
color: #e5e7eb;
}
@media (max-width: 1280px) {
body.admin-standalone-active #admin-standalone-page .admin-top-shell {
grid-template-columns: 1fr;
}
body.admin-standalone-active #admin-standalone-page .admin-main-grid {
grid-template-columns: 1fr;
}
}
/* Admin contrast hardening (light/dark) */
body:not(.dark).admin-standalone-active #admin-standalone-page .page-header,
body:not(.dark).admin-standalone-active #admin-standalone-page .page-header * {
color: #0b1324 !important;
}
body.dark.admin-standalone-active #admin-standalone-page .page-header,
body.dark.admin-standalone-active #admin-standalone-page .page-header * {
color: #f8fafc !important;
}
body:not(.dark).admin-standalone-active #admin-standalone-page .action-btn.secondary {
color: #0f172a;
border-color: rgba(37, 99, 235, 0.22);
}
body.dark.admin-standalone-active #admin-standalone-page .action-btn.secondary {
color: #e5e7eb;
border-color: rgba(148, 163, 184, 0.36);
}
/* Final admin header sizing fix: keep search compact so it never obstructs controls */
body.admin-standalone-active #admin-standalone-page .admin-template-header {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-wrap: wrap !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header-left {
flex: 0 0 auto !important;
min-width: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-search-wrap {
width: clamp(180px, 24vw, 320px) !important;
max-width: 320px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-search {
width: 100% !important;
max-width: 320px !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header-right {
flex: 1 1 520px !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
@media (max-width: 1100px) {
body.admin-standalone-active #admin-standalone-page .admin-template-search-wrap,
body.admin-standalone-active #admin-standalone-page .admin-template-search {
width: min(100%, 260px) !important;
max-width: 260px !important;
}
}
/* Hard remove admin top search UI (including stale cached markup) */
body.admin-standalone-active #admin-standalone-page .admin-template-header-left,
body.admin-standalone-active #admin-standalone-page .admin-template-search-wrap,
body.admin-standalone-active #admin-standalone-page #adminCommandSearch {
display: none !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
body.admin-standalone-active #admin-standalone-page .admin-template-header-right {
flex: 1 1 100% !important;
width: 100% !important;
justify-content: flex-start !important;
}
/* Admin facilities editor layout refresh */
.admin-facility-editor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 12px;
margin-top: 12px;
}
.admin-facility-editor-card {
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 14px;
background: rgba(255, 255, 255, 0.7);
padding: 12px;
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}
body.dark .admin-facility-editor-card {
background: rgba(7, 18, 38, 0.55);
border-color: rgba(148, 163, 184, 0.28);
box-shadow: 0 18px 36px rgba(2, 6, 23, 0.34);
}
.admin-facility-editor-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.admin-facility-editor-head h5 {
margin: 0;
font-size: 0.98rem;
}
.admin-facility-editor-head h4 {
margin: 0 0 4px;
}
.admin-facility-editor-actions,
.admin-facility-editor-chips {
margin-top: 10px;
}
.admin-facility-editor-toolbar {
align-items: center;
gap: 10px;
margin-top: 12px;
}
.admin-facility-editor-toolbar .overall-filter-search {
min-width: 220px;
flex: 1 1 280px;
}
.admin-facility-editor-toolbar select,
.admin-facility-editor-toolbar input,
.admin-facility-create-grid input,
.admin-facility-create-grid select,
.admin-facility-directory-table-wrap input,
.admin-facility-directory-table-wrap select {
min-height: 42px;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.28);
background: rgba(255, 255, 255, 0.88);
color: #0f172a;
padding: 0 12px;
}
body.dark .admin-facility-editor-toolbar select,
body.dark .admin-facility-editor-toolbar input,
body.dark .admin-facility-create-grid input,
body.dark .admin-facility-create-grid select,
body.dark .admin-facility-directory-table-wrap input,
body.dark .admin-facility-directory-table-wrap select {
background: rgba(7, 18, 38, 0.82);
color: #e5eefb;
border-color: rgba(71, 85, 105, 0.8);
}
.admin-facility-directory-table-wrap {
margin-top: 12px;
border-radius: 16px;
overflow: auto;
}
.admin-facility-directory-table-wrap table {
width: 100%;
}
.admin-facility-directory-table-wrap th {
white-space: nowrap;
}
.admin-facility-directory-table-wrap td {
vertical-align: top;
}
.admin-facility-directory-table-wrap .menu-page-actions {
gap: 8px;
justify-content: flex-start;
}
.admin-facility-create-card {
margin-top: 12px;
}
.admin-facility-create-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
}
@media (max-width: 768px) {
.admin-facility-editor-grid {
grid-template-columns: 1fr;
}
.admin-facility-editor-head {
flex-direction: column;
align-items: flex-start;
}
.admin-facility-editor-toolbar {
flex-direction: column;
align-items: stretch;
}
}
/* Ensure Overall Stats intro note is readable in dark mode */
body.dark #overallStatsPage #overallStatsIntroNote {
color: #dbe9ff !important;
opacity: 1 !important;
text-shadow: none !important;
}
.profile-wizard-progress {
margin: 8px 0 10px;
}
.profile-wizard-progress-head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.86rem;
margin-bottom: 6px;
}
.profile-wizard-progress-track {
height: 8px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.22);
overflow: hidden;
}
.profile-wizard-progress-track > span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #f97316 0%, #22d3ee 100%);
transition: width 220ms ease;
}
/* Admin UI polish: sticky quick ribbon + module strip + transition */
body.admin-standalone-active #admin-standalone-page .admin-ui-control-ribbon {
position: sticky;
top: 124px;
z-index: 53;
margin: 8px 0 10px;
padding: 10px;
border: 1px solid rgba(59, 130, 246, 0.26);
border-radius: 12px;
background: linear-gradient(180deg, rgba(8, 25, 52, 0.94), rgba(5, 18, 40, 0.96));
backdrop-filter: blur(8px);
}
body:not(.dark).admin-standalone-active #admin-standalone-page .admin-ui-control-ribbon {
background: linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(239, 246, 255, 0.98));
border-color: rgba(37, 99, 235, 0.22);
}
body.admin-standalone-active #admin-module-page .admin-module-action-strip {
position: sticky;
top: 72px;
z-index: 8;
margin-bottom: 10px;
}
#adminModuleBody {
transition: opacity 180ms ease, transform 180ms ease;
}
#adminModuleBody.admin-module-transitioning {
opacity: 0.76;
transform: translateY(4px);
}
@media (max-width: 900px) {
body.admin-standalone-active #admin-standalone-page .admin-ui-control-ribbon {
top: 106px;
}
body.admin-standalone-active #admin-module-page .admin-module-action-strip {
top: 64px;
}
}
/* Global UI/GUI polish pack */
:root {
--ui-radius-sm: 10px;
--ui-radius-md: 14px;
--ui-radius-lg: 18px;
--ui-gap-1: 6px;
--ui-gap-2: 10px;
--ui-gap-3: 14px;
--ui-gap-4: 18px;
--ui-shadow-1: 0 8px 20px rgba(16, 34, 64, 0.12);
--ui-shadow-2: 0 14px 34px rgba(9, 21, 45, 0.18);
--ui-border-light: rgba(24, 45, 82, 0.14);
--ui-border-dark: rgba(255, 255, 255, 0.12);
--ui-text-light: #11203a;
--ui-text-muted-light: #4f6280;
--ui-text-dark: #e8eef9;
--ui-text-muted-dark: #9fb0c9;
}
body {
color: var(--ui-text-light);
}
body.dark {
color: var(--ui-text-dark);
}
.insight-card,
.menu-page-inner,
.mini-table,
.rankings-table {
border-radius: var(--ui-radius-md);
box-shadow: var(--ui-shadow-1);
}
body.dark .insight-card,
body.dark .menu-page-inner,
body.dark .mini-table,
body.dark .rankings-table {
box-shadow: var(--ui-shadow-2);
border-color: var(--ui-border-dark);
}
.page-header {
position: sticky;
top: 8px;
z-index: 7;
backdrop-filter: blur(10px);
}
.action-btn.danger,
.submit-btn.danger,
.back-btn.danger {
background: linear-gradient(135deg, #b4232f, #f04e5f) !important;
color: #fff !important;
border-color: rgba(255, 255, 255, 0.28) !important;
}
.action-btn.ghost,
.submit-btn.ghost,
.back-btn.ghost {
background: transparent !important;
color: inherit !important;
border: 1px dashed var(--ui-border-light) !important;
}
body.dark .action-btn.ghost,
body.dark .submit-btn.ghost,
body.dark .back-btn.ghost {
border-color: var(--ui-border-dark) !important;
}
/* Table scanning improvements */
.mini-table,
.rankings-table,
.admin-submitted-leads-table-wrap {
overflow: auto;
}
.mini-table table thead th,
.rankings-table table thead th,
.admin-submitted-leads-table thead th {
position: sticky;
top: 0;
z-index: 3;
}
@media (min-width: 992px) {
.mini-table table th:first-child,
.mini-table table td:first-child,
.rankings-table table th:first-child,
.rankings-table table td:first-child,
.admin-submitted-leads-table th:first-child,
.admin-submitted-leads-table td:first-child {
position: sticky;
left: 0;
z-index: 2;
}
}
/* Better form readability and hierarchy */
.form-group label,
.table-toolkit-label {
font-weight: 700;
letter-spacing: 0.01em;
}
.auth-input,
.form-group input,
.form-group select,
.form-group textarea,
.overall-filter-search {
border-radius: var(--ui-radius-sm);
}
/* Smarter toasts */
.toast {
display: flex;
align-items: center;
gap: 8px;
max-width: min(440px, calc(100vw - 24px));
}
.toast-body {
flex: 1 1 auto;
min-width: 0;
word-break: break-word;
}
.toast.toast-warn {
background: linear-gradient(120deg, rgba(133, 86, 0, 0.94), rgba(211, 126, 0, 0.94));
color: #fff;
}
.toast-action-btn {
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
background: rgba(255, 255, 255, 0.15);
color: inherit;
font-weight: 700;
font-size: 12px;
padding: 4px 10px;
cursor: pointer;
}
.toast-action-btn:hover {
background: rgba(255, 255, 255, 0.26);
}
/* Tighten and align action rows */
.menu-page-actions {
gap: 10px;
}
.menu-page-actions .action-btn,
.menu-page-actions .submit-btn,
.menu-page-actions .back-btn {
min-height: 40px;
border-radius: var(--ui-radius-sm);
}
/* Admin layout second pass: spacing rhythm + compact alignment */
:root {
--admin-rhythm-xs: 6px;
--admin-rhythm-sm: 10px;
--admin-rhythm-md: 14px;
--admin-rhythm-lg: 18px;
--admin-rhythm-xl: 22px;
}
body.admin-standalone-active #admin-standalone-page .container,
body.admin-standalone-active #admin-module-page .container,
body.admin-standalone-active #admin-total-leads-page .container {
max-width: 1600px;
width: min(98vw, 1600px);
padding-inline: clamp(8px, 1.2vw, 16px);
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell,
body.admin-standalone-active #admin-module-page .admin-total-leads-shell,
body.admin-standalone-active #admin-total-leads-page .admin-total-leads-shell {
gap: var(--admin-rhythm-md);
}
body.admin-standalone-active #admin-standalone-page .page-header,
body.admin-standalone-active #admin-module-page .page-header,
body.admin-standalone-active #admin-total-leads-page .page-header {
margin-bottom: var(--admin-rhythm-sm);
padding: clamp(10px, 1.1vw, 16px);
border-radius: 14px;
}
body.admin-standalone-active #admin-standalone-page .page-header h1,
body.admin-standalone-active #admin-module-page .page-header h1,
body.admin-standalone-active #admin-total-leads-page .page-header h1 {
margin: 0 0 4px;
line-height: 1.15;
}
body.admin-standalone-active #admin-standalone-page .page-header .page-subtitle,
body.admin-standalone-active #admin-module-page .page-header .page-subtitle,
body.admin-standalone-active #admin-total-leads-page .page-header .page-subtitle {
margin: 0;
line-height: 1.35;
}
body.admin-standalone-active #admin-standalone-page .menu-page-actions,
body.admin-standalone-active #admin-module-page .menu-page-actions,
body.admin-standalone-active #admin-total-leads-page .menu-page-actions {
gap: var(--admin-rhythm-sm);
margin-top: var(--admin-rhythm-sm);
}
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-module-page .insight-card,
body.admin-standalone-active #admin-total-leads-page .insight-card {
padding: clamp(10px, 1.1vw, 16px);
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-grid {
gap: var(--admin-rhythm-md);
align-items: start;
}
body.admin-standalone-active #admin-standalone-page .admin-workspace-stack,
body.admin-standalone-active #admin-standalone-page .admin-right-stack {
gap: var(--admin-rhythm-md);
}
body.admin-standalone-active #admin-standalone-page .admin-bottom-actions-bar {
margin-top: var(--admin-rhythm-sm);
}
body.admin-standalone-active #admin-standalone-page .admin-capability-grid,
body.admin-standalone-active #admin-standalone-page .admin-utility-grid {
gap: var(--admin-rhythm-sm);
}
body.admin-standalone-active #admin-standalone-page .insight-list {
gap: var(--admin-rhythm-xs);
}
body.admin-standalone-active #admin-standalone-page .insight-chip {
min-height: 30px;
}
/* Keep top controls line-wrapped cleanly and avoid collision */
body.admin-standalone-active #admin-standalone-page .admin-top-shell .menu-page-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
}
body.admin-standalone-active #admin-standalone-page .admin-top-shell .menu-page-actions .action-btn {
flex: 0 0 auto;
}
/* Mobile compact pass */
@media (max-width: 991px) {
body.admin-standalone-active #admin-standalone-page .container,
body.admin-standalone-active #admin-module-page .container,
body.admin-standalone-active #admin-total-leads-page .container {
width: 100%;
padding-inline: 8px;
}
body.admin-standalone-active #admin-standalone-page .page-header,
body.admin-standalone-active #admin-module-page .page-header,
body.admin-standalone-active #admin-total-leads-page .page-header {
top: 4px;
padding: 10px;
}
body.admin-standalone-active #admin-standalone-page .insight-card,
body.admin-standalone-active #admin-module-page .insight-card,
body.admin-standalone-active #admin-total-leads-page .insight-card {
padding: 10px;
}
body.admin-standalone-active #admin-standalone-page .menu-page-actions,
body.admin-standalone-active #admin-module-page .menu-page-actions,
body.admin-standalone-active #admin-total-leads-page .menu-page-actions {
gap: 8px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
IMPROVEMENTS — all fixes from the UI improvement pass
═══════════════════════════════════════════════════════════════════════════ */
/* ── Fix 4: Submit button loading spinner ────────────────────────────────── */
.auth-submit-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 160px;
}
.auth-submit-spinner {
display: none;
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,0.35);
border-top-color: #fff;
border-radius: 50%;
flex-shrink: 0;
}
.auth-submit-btn.is-loading .auth-submit-spinner {
display: block;
animation: spin-auth 0.7s linear infinite;
}
.auth-submit-btn.is-loading .auth-submit-label {
opacity: 0.8;
}
@keyframes spin-auth {
to { transform: rotate(360deg); }
}
/* ── Fix 5: Eye-icon password toggle ─────────────────────────────────────── */
.auth-password-eye-wrap {
display: flex;
justify-content: flex-end;
margin-top: -4px;
margin-bottom: 2px;
}
.auth-eye-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid rgba(10,19,36,0.12);
border-radius: 8px;
background: transparent;
color: var(--muted);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
padding: 0;
}
.auth-eye-btn:hover {
background: rgba(242,106,33,0.08);
border-color: var(--accent);
color: var(--accent);
}
.auth-eye-icon {
width: 18px;
height: 18px;
pointer-events: none;
}
body.dark .auth-eye-btn {
border-color: rgba(255,255,255,0.12);
color: var(--muted-darkmode);
}
/* ── Fix 9: KPI value colour tones ──────────────────────────────────────── */
.kpi-tone-ok { color: #16a34a !important; }
.kpi-tone-warn { color: #d97706 !important; }
.kpi-tone-danger { color: #dc2626 !important; }
.kpi-tone-info { color: var(--accent) !important; }
body.dark .kpi-tone-ok { color: #4ade80 !important; }
body.dark .kpi-tone-warn { color: #fbbf24 !important; }
body.dark .kpi-tone-danger { color: #f87171 !important; }
body.dark .kpi-tone-info { color: #fb923c !important; }
/* ── Fix 9: Admin KPI shimmer when no history yet ────────────────────────── */
.admin-kpi-spark:empty::after {
content: '';
display: block;
width: 80px;
height: 20px;
border-radius: 4px;
background: linear-gradient(90deg,
rgba(10,19,36,0.07) 25%,
rgba(10,19,36,0.14) 50%,
rgba(10,19,36,0.07) 75%);
background-size: 200% 100%;
animation: shimmer-kpi 1.4s ease-in-out infinite;
}
@keyframes shimmer-kpi {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
body.dark .admin-kpi-spark:empty::after {
background: linear-gradient(90deg,
rgba(255,255,255,0.05) 25%,
rgba(255,255,255,0.12) 50%,
rgba(255,255,255,0.05) 75%);
background-size: 200% 100%;
}
/* ── Fix 12: Danger Zone section ─────────────────────────────────────────── */
.admin-danger-zone {
margin-top: 18px;
border: 1.5px solid rgba(220,38,38,0.28);
border-radius: 14px;
padding: 16px 18px;
background: rgba(220,38,38,0.04);
}
.admin-danger-zone-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
font-weight: 700;
color: #dc2626;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 12px;
}
.admin-danger-zone-label svg {
width: 16px;
height: 16px;
flex-shrink: 0;
stroke: #dc2626;
}
.admin-danger-btn {
background: rgba(220,38,38,0.12) !important;
color: #dc2626 !important;
border-color: rgba(220,38,38,0.28) !important;
}
.admin-danger-btn:hover {
background: rgba(220,38,38,0.22) !important;
}
body.dark .admin-danger-zone {
border-color: rgba(248,113,113,0.25);
background: rgba(248,113,113,0.06);
}
body.dark .admin-danger-zone-label,
body.dark .admin-danger-zone-label svg {
color: #f87171;
stroke: #f87171;
}
body.dark .admin-danger-btn {
color: #f87171 !important;
border-color: rgba(248,113,113,0.28) !important;
background: rgba(248,113,113,0.1) !important;
}
/* ── Fix 11: Admin empty state ───────────────────────────────────────────── */
.admin-empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 40px 24px;
text-align: center;
color: var(--muted);
}
.admin-empty-icon {
width: 48px;
height: 48px;
opacity: 0.4;
}
.admin-empty-action {
margin-top: 4px;
}
body.dark .admin-empty-state { color: var(--muted-darkmode); }
/* ── Fix 13: Hero details toggle ─────────────────────────────────────────── */
.hero-details-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 20px;
color: rgba(255,255,255,0.85);
font-size: 0.8rem;
font-weight: 600;
padding: 6px 14px;
cursor: pointer;
margin: 8px 0;
transition: background 0.15s, border-color 0.15s;
}
.hero-details-toggle svg {
width: 14px;
height: 14px;
transition: transform 0.2s var(--ease-out);
}
.hero-details-toggle[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.hero-details-toggle:hover {
background: rgba(255,255,255,0.2);
}
.hero-details-panel {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.32s var(--ease-out), opacity 0.24s ease;
}
.hero-details-panel.is-open {
max-height: 600px;
opacity: 1;
}
/* ── Fix 14: Flow stepper completed/active states ────────────────────────── */
.flow-step.is-done .step-index {
background: #16a34a;
color: #fff;
border-color: #16a34a;
}
.flow-step.is-done {
cursor: pointer;
opacity: 1;
}
.flow-step.is-done .step-label {
color: #16a34a;
}
.flow-step.is-future {
opacity: 0.38;
cursor: default;
pointer-events: none;
}
.flow-step.is-done:hover .step-index {
background: #15803d;
transform: scale(1.08);
transition: transform 0.15s var(--ease-out);
}
.step-done-icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.step-done-icon svg {
width: 12px;
height: 12px;
}
body.dark .flow-step.is-done .step-index { background: #4ade80; border-color: #4ade80; color: #0a1324; }
body.dark .flow-step.is-done .step-label { color: #4ade80; }
/* ── Fix 15: Custom facility form-group spacing (already wrapped in JS) ──── */
#customFacilityFields .form-group + .form-group {
margin-top: 14px;
}
/* ── Fix 16: DBD tertiary action row ─────────────────────────────────────── */
.dbd-tertiary-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 6px;
}
.dbd-tertiary-btn {
font-size: 0.82rem !important;
padding: 8px 14px !important;
opacity: 0.82;
}
.dbd-tertiary-btn:hover { opacity: 1; }
/* ── Fix 17: Assignment directions link ──────────────────────────────────── */
.assignment-directions-link {
color: var(--accent);
font-weight: 600;
text-decoration: none;
font-size: 0.9rem;
padding: 3px 0;
border-bottom: 1px dashed rgba(242,106,33,0.4);
transition: border-color 0.15s, opacity 0.15s;
}
.assignment-directions-link:hover {
opacity: 0.8;
border-bottom-style: solid;
}
/* ── Fix 3: Auth gate live chart ─────────────────────────────────────────── */
#authGateChartWrap {
position: relative;
width: 100%;
}
#authGateChartWrap .sales-manager-trend-svg {
width: 100%;
height: 180px;
display: block;
}
.auth-chart-legend {
display: flex;
gap: 16px;
justify-content: flex-end;
padding: 6px 8px 2px;
font-size: 0.75rem;
font-weight: 600;
}
.auth-chart-legend-leads::before {
content: '';
display: inline-block;
width: 12px; height: 3px;
background: var(--accent);
border-radius: 2px;
margin-right: 5px;
vertical-align: middle;
}
.auth-chart-legend-sales::before {
content: '';
display: inline-block;
width: 12px; height: 3px;
background: #16a34a;
border-radius: 2px;
margin-right: 5px;
vertical-align: middle;
}
/* ── Sales Manager auth shell — improved chart area ─────────────────────── */
.sales-manager-auth-chart-visual {
min-height: 180px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* ── Sales Manager portal: improved trend chart tooltip targets ──────────── */
.sales-manager-line-dot {
transition: r 0.15s;
cursor: default;
}
.sales-manager-line-dot:hover { r: 6; }
.sales-manager-line-dot.leads { fill: var(--accent); stroke: var(--accent); }
.sales-manager-line-dot.sales { fill: #16a34a; stroke: #16a34a; }
.sales-manager-line.leads {
stroke: var(--accent);
stroke-width: 2.5;
fill: none;
}
.sales-manager-line.sales {
stroke: #16a34a;
stroke-width: 2.5;
fill: none;
}
.sales-manager-grid-line {
stroke: rgba(10,19,36,0.07);
stroke-dasharray: 4 3;
}
body.dark .sales-manager-grid-line { stroke: rgba(255,255,255,0.07); }
.sales-manager-axis-label {
font-size: 10px;
fill: var(--muted);
font-family: inherit;
}
body.dark .sales-manager-axis-label { fill: var(--muted-darkmode); }
/* ── SM improvements: snapshot hero & health grid ─────────────────────────── */
.sales-manager-snapshot-hero {
border-radius: 18px;
background: linear-gradient(135deg, rgba(242,106,33,0.09), rgba(11,46,82,0.07));
border: 1px solid rgba(242,106,33,0.14);
padding: 22px 24px 18px;
margin-bottom: 18px;
}
.sales-manager-snapshot-copy {
margin-bottom: 16px;
}
.sales-manager-snapshot-copy h4 {
margin: 4px 0 6px;
font-size: 1.15rem;
}
.sales-manager-snapshot-copy p {
color: var(--muted);
font-size: 0.85rem;
margin: 0;
}
.sales-manager-snapshot-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 12px;
}
@media (max-width: 860px) {
.sales-manager-snapshot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
.sales-manager-snapshot-grid { grid-template-columns: 1fr 1fr; }
}
.sales-manager-snapshot-tile {
border-radius: 14px;
padding: 14px 16px;
border: 1px solid rgba(10,19,36,0.07);
background: rgba(255,255,255,0.7);
}
.sales-manager-snapshot-tile span {
display: block;
font-size: 0.76rem;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 6px;
}
.sales-manager-snapshot-tile strong {
display: block;
font-size: 1.9rem;
line-height: 1;
margin-bottom: 4px;
}
.sales-manager-snapshot-tile em {
font-size: 0.78rem;
color: var(--muted);
font-style: normal;
}
.sales-manager-snapshot-tile.lead strong { color: var(--accent); }
.sales-manager-snapshot-tile.sales strong { color: #16a34a; }
.sales-manager-snapshot-tile.stable strong { color: #0369a1; }
.sales-manager-snapshot-tile.danger strong { color: #dc2626; }
body.dark .sales-manager-snapshot-tile {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.08);
}
body.dark .sales-manager-snapshot-tile em,
body.dark .sales-manager-snapshot-tile span { color: var(--muted-darkmode); }
body.dark .sales-manager-snapshot-tile.stable strong { color: #38bdf8; }
/* ── SM: Month compare cards ──────────────────────────────────────────────── */
.sales-manager-compare-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 12px;
}
.sales-manager-compare-card {
border-radius: 12px;
padding: 14px 16px;
background: rgba(10,19,36,0.04);
border: 1px solid rgba(10,19,36,0.07);
}
.sales-manager-compare-card span {
display: block;
font-size: 0.76rem;
font-weight: 600;
color: var(--muted);
margin-bottom: 6px;
}
.sales-manager-compare-card strong {
display: block;
font-size: 1.6rem;
line-height: 1;
margin-bottom: 4px;
}
.sales-manager-compare-card em {
font-size: 0.78rem;
color: var(--muted);
font-style: normal;
}
body.dark .sales-manager-compare-card {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.07);
}
body.dark .sales-manager-compare-card span,
body.dark .sales-manager-compare-card em { color: var(--muted-darkmode); }
/* ── SM: Health grid ──────────────────────────────────────────────────────── */
.sales-manager-health-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 12px;
}
@media (max-width: 860px) { .sales-manager-health-grid { grid-template-columns: repeat(2,1fr); } }
.sales-manager-health-card {
border-radius: 12px;
padding: 14px 16px;
background: rgba(255,255,255,0.6);
border: 1px solid rgba(10,19,36,0.07);
}
.sales-manager-health-card span {
display: block;
font-size: 0.76rem;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
.sales-manager-health-card strong {
display: block;
font-size: 1.7rem;
line-height: 1;
margin-bottom: 4px;
}
.sales-manager-health-card em { font-size: 0.78rem; color: var(--muted); font-style: normal; }
body.dark .sales-manager-health-card {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.07);
}
body.dark .sales-manager-health-card span,
body.dark .sales-manager-health-card em { color: var(--muted-darkmode); }
/* ── SM: Priority queue items ─────────────────────────────────────────────── */
.sales-manager-priority-item {
display: block;
width: 100%;
text-align: left;
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 8px;
border: 1.5px solid rgba(10,19,36,0.1);
background: rgba(255,255,255,0.7);
cursor: pointer;
transition: background 0.15s, transform 0.12s;
}
.sales-manager-priority-item strong { display: block; font-size: 0.88rem; margin-bottom: 3px; }
.sales-manager-priority-item p { margin: 0; font-size: 0.8rem; color: var(--muted); }
.sales-manager-priority-item.danger { border-color: rgba(220,38,38,0.25); background: rgba(220,38,38,0.05); }
.sales-manager-priority-item.danger strong { color: #dc2626; }
.sales-manager-priority-item.warn { border-color: rgba(217,119,6,0.25); background: rgba(217,119,6,0.05); }
.sales-manager-priority-item.warn strong { color: #b45309; }
.sales-manager-priority-item.info { border-color: rgba(3,105,161,0.2); background: rgba(3,105,161,0.04); }
.sales-manager-priority-item.info strong { color: #0369a1; }
.sales-manager-priority-item:hover { transform: translateY(-1px); }
.sales-manager-empty-state { padding: 20px 16px; text-align: center; color: var(--muted); font-size: 0.85rem; }
.sales-manager-empty-state strong { display: block; margin-bottom: 4px; color: var(--ink); }
body.dark .sales-manager-priority-item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); }
body.dark .sales-manager-priority-item.danger { background: rgba(220,38,38,0.08); }
body.dark .sales-manager-priority-item.warn { background: rgba(217,119,6,0.08); }
body.dark .sales-manager-empty-state { color: var(--muted-darkmode); }
body.dark .sales-manager-empty-state strong { color: var(--text-darkmode); }
/* ── SM: Notification items ───────────────────────────────────────────────── */
.sales-manager-notification-item {
padding: 12px 0;
border-bottom: 1px solid rgba(10,19,36,0.07);
}
.sales-manager-notification-item:last-child { border-bottom: none; }
.sales-manager-notification-item strong { display: block; font-size: 0.85rem; margin-bottom: 3px; }
.sales-manager-notification-item p { margin: 0 0 4px; font-size: 0.8rem; color: var(--muted); }
.sales-manager-notification-item span { font-size: 0.72rem; color: var(--muted); }
body.dark .sales-manager-notification-item { border-color: rgba(255,255,255,0.07); }
body.dark .sales-manager-notification-item p,
body.dark .sales-manager-notification-item span { color: var(--muted-darkmode); }
/* ── SM: Quick action pills ───────────────────────────────────────────────── */
.sales-manager-quick-actions-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.sales-manager-action-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
border-radius: 20px;
background: rgba(255,255,255,0.85);
border: 1px solid rgba(10,19,36,0.1);
font-size: 0.83rem;
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.sales-manager-action-pill:hover {
background: rgba(242,106,33,0.1);
border-color: rgba(242,106,33,0.25);
color: var(--accent);
transform: translateY(-1px);
}
.sales-manager-action-pill svg { width: 15px; height: 15px; flex-shrink: 0; }
body.dark .sales-manager-action-pill {
background: rgba(255,255,255,0.07);
border-color: rgba(255,255,255,0.1);
color: var(--text-darkmode);
}
/* ── SM: Control strip & KPI grid responsive tweaks ─────────────────────── */
.sales-manager-control-strip {
margin-bottom: 18px;
}
.sales-manager-kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 14px;
margin-bottom: 22px;
}
@media (max-width: 900px) { .sales-manager-kpi-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .sales-manager-kpi-grid { grid-template-columns: 1fr 1fr; } }
/* ── SM: Trend chart full-width panel ────────────────────────────────────── */
.sales-manager-trend-svg {
width: 100%;
height: 200px;
display: block;
overflow: hidden;
}
@media (max-width: 640px) { .sales-manager-trend-svg { height: 160px; } }
/* ═══════════════════════════════════════════════════════════════════
IMPROVEMENT PACK — applied 2026-03-20
Covers: motion reduction · typography · empty states · status chips
mobile dock · danger zone · theme persistence
═══════════════════════════════════════════════════════════════════ */
/* ── 1. prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Replace heavy backdrop-filter blur with solid semi-transparent surface */
.auth-gate,
.auth-gate-card,
.glass-card,
.hero-glass,
.modal-overlay,
.sidebar,
.admin-sidebar,
.floating-panel,
.kpi-card,
.stats-card,
.menu-pages,
.admin-module-workspace {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: rgba(15, 20, 25, 0.97) !important;
}
}
/* ── 2. Typography — base legibility ── */
html { font-size: 16px; }
@media (max-width: 720px) {
html { font-size: 16px; } /* Override the existing 15px rule */
body { line-height: 1.55; }
}
/* Dense content sections: lead form, learning hub, legal text */
.lead-form-section,
.learning-topic-body,
.legal-consent-text,
.broker-authority-form,
.modal-form-grid,
.form-group,
.auth-gate-card p,
.page-subtitle {
font-size: 1rem;
line-height: 1.6;
}
/* Outdoor readability: increase label weight for form fields in bright light */
.form-group label,
.field-label,
.input-label {
font-weight: 600;
letter-spacing: 0.01em;
}
/* ── 3. Empty states ── */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 48px 24px;
text-align: center;
color: var(--muted, #5F6E86);
}
.empty-state-icon {
width: 56px;
height: 56px;
opacity: 0.45;
flex-shrink: 0;
}
.empty-state-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 1rem;
font-weight: 600;
color: var(--ink, #0A1324);
margin: 0;
}
.dark-mode .empty-state-title { color: var(--text-darkmode, #E6ECF3); }
.empty-state-hint {
font-size: 0.875rem;
line-height: 1.5;
max-width: 280px;
margin: 0;
}
.empty-state-cta {
margin-top: 8px;
padding: 9px 20px;
border-radius: 8px;
background: var(--accent, #F26A21);
color: #fff;
font-weight: 600;
font-size: 0.875rem;
border: none;
cursor: pointer;
transition: opacity 0.18s;
}
.empty-state-cta:hover { opacity: 0.88; }
/* ── 4. Status chip standardisation ──
Single token set used across user and admin views.
All chips: same pill radius, same size, same colour-to-state mapping. */
.status-chip,
.capacity-chip,
.performance-chip,
.lead-status-chip,
.fa-status-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1.4;
white-space: nowrap;
}
/* Available / On Track / Active / New */
.chip-green,
.status-available, .capacity-available,
.chip-on-track, .chip-new, .chip-active {
background: rgba(34, 197, 94, 0.14);
color: #16a34a;
border: 1px solid rgba(34, 197, 94, 0.28);
}
.dark-mode .chip-green,
.dark-mode .status-available,
.dark-mode .chip-on-track,
.dark-mode .chip-new,
.dark-mode .chip-active {
background: rgba(34, 197, 94, 0.18);
color: #4ade80;
border-color: rgba(34, 197, 94, 0.32);
}
/* Near Full / Monitor / Pending / Contacted */
.chip-amber,
.status-near-full, .capacity-near-full,
.chip-monitor, .chip-pending, .chip-contacted {
background: rgba(245, 158, 11, 0.14);
color: #b45309;
border: 1px solid rgba(245, 158, 11, 0.28);
}
.dark-mode .chip-amber,
.dark-mode .status-near-full,
.dark-mode .chip-monitor,
.dark-mode .chip-pending,
.dark-mode .chip-contacted {
background: rgba(245, 158, 11, 0.18);
color: #fbbf24;
border-color: rgba(245, 158, 11, 0.32);
}
/* Full / Needs Support / Unsuccessful / Not Available */
.chip-red,
.status-full, .capacity-full, .status-not-available,
.chip-needs-support, .chip-unsuccessful {
background: rgba(239, 68, 68, 0.12);
color: #dc2626;
border: 1px solid rgba(239, 68, 68, 0.24);
}
.dark-mode .chip-red,
.dark-mode .status-full,
.dark-mode .chip-needs-support,
.dark-mode .chip-unsuccessful {
background: rgba(239, 68, 68, 0.18);
color: #f87171;
border-color: rgba(239, 68, 68, 0.32);
}
/* FA Allocated / Successful / Quality Check */
.chip-blue,
.chip-fa-allocated, .chip-successful, .chip-quality {
background: rgba(54, 118, 255, 0.12);
color: #2563eb;
border: 1px solid rgba(54, 118, 255, 0.24);
}
.dark-mode .chip-blue,
.dark-mode .chip-fa-allocated,
.dark-mode .chip-successful {
background: rgba(54, 118, 255, 0.18);
color: #93c5fd;
border-color: rgba(54, 118, 255, 0.32);
}
/* ── 5. Mobile dock — stronger active state ── */
.mobile-dock-btn,
.dock-btn,
.mobile-nav-item {
position: relative;
transition: color 0.18s, background 0.18s;
}
.mobile-dock-btn.active,
.mobile-dock-btn[aria-current="page"],
.dock-btn.active,
.mobile-nav-item.active {
color: var(--accent, #F26A21) !important;
background: rgba(242, 106, 33, 0.1) !important;
border-radius: 10px;
}
/* Bottom bar underline indicator */
.mobile-dock-btn.active::after,
.dock-btn.active::after,
.mobile-nav-item.active::after {
content: '';
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 3px;
border-radius: 2px;
background: var(--accent, #F26A21);
}
/* ── 6. Danger Zone — stronger visual separation ── */
.danger-zone,
.admin-danger-zone,
#dangerZone,
[data-section="danger"] {
margin-top: 48px !important;
border-radius: 14px !important;
border: 2px solid rgba(239, 68, 68, 0.5) !important;
background: rgba(239, 68, 68, 0.04) !important;
padding: 24px !important;
position: relative;
}
/* Full-width warning banner above the section */
.danger-zone::before,
.admin-danger-zone::before,
#dangerZone::before {
content: '⚠ DANGER ZONE — IRREVERSIBLE ACTIONS';
display: block;
width: calc(100% + 4px);
margin: -24px -24px 20px -24px;
padding: 10px 24px;
background: rgba(239, 68, 68, 0.15);
border-radius: 12px 12px 0 0;
border-bottom: 1px solid rgba(239, 68, 68, 0.3);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
color: #dc2626;
}
.dark-mode .danger-zone::before,
.dark-mode .admin-danger-zone::before,
.dark-mode #dangerZone::before {
color: #f87171;
background: rgba(239, 68, 68, 0.2);
}
/* Invisible scroll barrier — 80px of empty space before danger zone */
.danger-zone-spacer {
display: block;
height: 80px;
pointer-events: none;
user-select: none;
}
/* ── 7. Dark mode theme class (applied via localStorage on load) ── */
html.dark-mode,
html[data-theme="dark"],
body.dark-mode {
background-color: var(--surface-dark, #0E1626);
color: var(--text-darkmode, #E6ECF3);
}
html.dark-mode .form-group label,
html[data-theme="dark"] .form-group label {
color: var(--text-darkmode, #E6ECF3);
}
html.dark-mode .empty-state-title,
html[data-theme="dark"] .empty-state-title {
color: var(--text-darkmode, #E6ECF3);
}