/** * VICH Digital Client Portal Stylesheet * Single source of truth for Blesta Client Template * Matches VICH Digital design system (TARDIS Blue #003B6F, Sky CTA #0284C7, Sky Hover #0EA5E9) * WCAG 2.2 AA Conformance Target */ /* Google Fonts — Poppins (headings) and Open Sans (body) */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap'); /* Semantic Color Tokens */ :root { /* Sticky-footer geometry: navbar block height (60px bar + 1px border + 48px subnav = 108). body.vich-dashboard-mode drops it to 61 (sub-nav hidden, all widths). */ --vich-navbar-h: 108px; --vich-navbar-h-public: 61px; /* public/auth header: bar + border only */ --vich-tardis: #003B6F; --vich-tardis-dark: #00284D; --vich-sky: #0EA5E9; --vich-cta: #0284C7; --vich-cta-hover: #0369A1; --vich-canvas: #E9F1F9; --vich-surface: rgba(255, 255, 255, 0.90); --vich-surface-soft: rgba(242, 246, 251, 0.95); --vich-ink: #0F172A; --vich-ink-muted: #5C6B84; --vich-line: rgba(15, 23, 42, 0.10); --vich-line-strong: rgba(15, 23, 42, 0.18); --vich-glass-bg: rgba(255, 255, 255, 0.85); --vich-glass-border: rgba(15, 23, 42, 0.08); --vich-shadow: 0 10px 30px -5px rgba(0, 59, 111, 0.07), 0 4px 12px -2px rgba(0, 0, 0, 0.04); --vich-shadow-lg: 0 20px 40px -10px rgba(0, 59, 111, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.06); /* Modern Table Tokens (Light Mode) */ --vich-table-bg: #FFFFFF; --vich-table-header-bg: linear-gradient(180deg, #F0F5FA 0%, #E6EEF8 100%); --vich-table-header-text: #003B6F; --vich-table-header-border: rgba(0, 59, 111, 0.18); --vich-table-row-bg: #FFFFFF; --vich-table-row-stripe: #F0F6FC; --vich-table-row-hover: #E1EFFE; --vich-table-expand-bg: #F8FAFC; --vich-category-badge-bg: rgba(0, 59, 111, 0.10); --vich-category-badge-text: #003B6F; /* Status Badge Tokens (Light Mode) */ --vich-badge-success-bg: #ECFDF5; --vich-badge-success-text: #065F46; --vich-badge-success-border: #A7F3D0; --vich-badge-info-bg: #E0F2FE; --vich-badge-info-text: #0369A1; --vich-badge-info-border: #BAE6FD; --vich-badge-warning-bg: #FEF3C7; --vich-badge-warning-text: #92400E; --vich-badge-warning-border: #FDE68A; --vich-badge-danger-bg: #FEE2E2; --vich-badge-danger-text: #991B1B; --vich-badge-danger-border: #FECACA; } /* Navbar-block height by breakpoint: subnav collapses to 44px below lg. body.vich-dashboard-mode { --vich-navbar-h: 61px } (end of file) beats these at every width — a declaration on shadows the :root value it inherits, which is correct: the dashboard hides the subnav on mobile too. */ @media (max-width: 991.98px) { :root { --vich-navbar-h: 105px; /* 60 bar + 1 border + 44 collapsed subnav */ } } @media (min-width: 992px) { :root { --vich-navbar-h: 108px; /* 60 bar + 1 border + 48 subnav */ } } /* Dark Theme Overrides */ html.dark, body.dark, [data-theme="dark"], [data-bs-theme="dark"] { --vich-tardis: #003B6F; --vich-tardis-dark: #001E3D; --vich-sky: #38BDF8; --vich-cta: #0284C7; --vich-cta-hover: #38BDF8; --vich-canvas: #0B1120; --vich-surface: rgba(15, 23, 42, 0.90); --vich-surface-soft: rgba(30, 41, 59, 0.85); --vich-ink: #F1F5F9; --vich-ink-muted: #9AA9BC; --vich-line: rgba(255, 255, 255, 0.10); --vich-line-strong: rgba(255, 255, 255, 0.20); --vich-glass-bg: rgba(15, 23, 42, 0.80); --vich-glass-border: rgba(255, 255, 255, 0.08); --vich-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5); --vich-shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.7); /* Modern Table Tokens (Dark Mode) */ --vich-table-bg: #0F172A; --vich-table-header-bg: linear-gradient(180deg, #162238 0%, #0F172A 100%); --vich-table-header-text: #38BDF8; --vich-table-header-border: rgba(56, 189, 248, 0.28); --vich-table-row-bg: #0F172A; --vich-table-row-stripe: #162238; --vich-table-row-hover: rgba(56, 189, 248, 0.16); --vich-table-expand-bg: #1E293B; --vich-category-badge-bg: rgba(255, 255, 255, 0.15); --vich-category-badge-text: #F1F5F9; /* Status Badge Tokens (Dark Mode) */ --vich-badge-success-bg: rgba(16, 185, 129, 0.18); --vich-badge-success-text: #34D399; --vich-badge-success-border: rgba(52, 211, 153, 0.35); --vich-badge-info-bg: rgba(56, 189, 248, 0.18); --vich-badge-info-text: #38BDF8; --vich-badge-info-border: rgba(56, 189, 248, 0.35); --vich-badge-warning-bg: rgba(245, 158, 11, 0.18); --vich-badge-warning-text: #FBBF24; --vich-badge-warning-border: rgba(251, 191, 36, 0.35); --vich-badge-danger-bg: rgba(239, 68, 68, 0.18); --vich-badge-danger-text: #F87171; --vich-badge-danger-border: rgba(248, 113, 113, 0.35); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.light) { --vich-tardis: #003B6F; --vich-tardis-dark: #001E3D; --vich-sky: #38BDF8; --vich-cta: #0284C7; --vich-cta-hover: #38BDF8; --vich-canvas: #0B1120; --vich-surface: rgba(15, 23, 42, 0.90); --vich-surface-soft: rgba(30, 41, 59, 0.85); --vich-ink: #F1F5F9; --vich-ink-muted: #9AA9BC; --vich-line: rgba(255, 255, 255, 0.10); --vich-line-strong: rgba(255, 255, 255, 0.20); --vich-glass-bg: rgba(15, 23, 42, 0.80); --vich-glass-border: rgba(255, 255, 255, 0.08); --vich-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5); --vich-shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.7); /* Modern Table Tokens (Dark Mode) */ --vich-table-bg: #0F172A; --vich-table-header-bg: linear-gradient(180deg, #162238 0%, #0F172A 100%); --vich-table-header-text: #38BDF8; --vich-table-header-border: rgba(56, 189, 248, 0.28); --vich-table-row-bg: #0F172A; --vich-table-row-stripe: #162238; --vich-table-row-hover: rgba(56, 189, 248, 0.16); --vich-table-expand-bg: #1E293B; --vich-category-badge-bg: rgba(255, 255, 255, 0.15); --vich-category-badge-text: #F1F5F9; /* Status Badge Tokens (Dark Mode) */ --vich-badge-success-bg: rgba(16, 185, 129, 0.18); --vich-badge-success-text: #34D399; --vich-badge-success-border: rgba(52, 211, 153, 0.35); --vich-badge-info-bg: rgba(56, 189, 248, 0.18); --vich-badge-info-text: #38BDF8; --vich-badge-info-border: rgba(56, 189, 248, 0.35); --vich-badge-warning-bg: rgba(245, 158, 11, 0.18); --vich-badge-warning-text: #FBBF24; --vich-badge-warning-border: rgba(251, 191, 36, 0.35); --vich-badge-danger-bg: rgba(239, 68, 68, 0.18); --vich-badge-danger-text: #F87171; --vich-badge-danger-border: rgba(248, 113, 113, 0.35); } } /* Base Body Styling */ body { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; background-color: var(--vich-canvas) !important; color: var(--vich-ink) !important; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================================== Native Form Controls — theme-correct select popups (WCAG contrast) color-scheme drives the OS-rendered popup (macOS/Windows/Android); explicit opaque option colors cover engines that let authors paint rows. Belt and braces: the FOUC script + applyTheme() also set style.colorScheme on . ========================================================================== */ :root { color-scheme: light; } html.dark { color-scheme: dark; } select, select.form-control, select.form-select { color-scheme: light; background-color: #FFFFFF !important; /* opaque — rgba surface breaks native popups */ } html.dark select, html.dark select.form-control, html.dark select.form-select { color-scheme: dark; background-color: #0F172A !important; } option { background-color: #FFFFFF; color: var(--vich-ink); } html.dark option { background-color: #0F172A; color: var(--vich-ink); /* ~16:1 dark, ~17:1 light — both modes AA/AAA */ } /* ========================================================================== My Account page (main/edit) — tab pill strip + section cards ========================================================================== */ .vich-edit-tabs { display: flex !important; flex-wrap: wrap !important; gap: 0.35rem !important; padding: 4px !important; margin: 0 0 1.75rem 0 !important; border: 1px solid var(--vich-line) !important; border-radius: 12px !important; background: var(--vich-surface-soft) !important; list-style: none !important; } .vich-edit-tab { display: inline-flex !important; align-items: center !important; min-height: 40px !important; padding: 0.45rem 1rem !important; border: 1px solid transparent !important; border-radius: 9px !important; font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 500 !important; color: var(--vich-ink-muted) !important; text-decoration: none !important; background: transparent !important; cursor: pointer !important; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important; user-select: none !important; } .vich-edit-tab:hover { color: var(--vich-ink) !important; background: var(--vich-surface) !important; text-decoration: none !important; } .vich-edit-tab.active { color: var(--vich-cta) !important; background: var(--vich-surface) !important; border-color: var(--vich-line) !important; font-weight: 600 !important; box-shadow: 0 1px 3px rgba(2, 32, 71, 0.08) !important; } html.dark .vich-edit-tab.active { color: #38BDF8 !important; } .vich-edit-tab:focus-visible { outline: 2px solid var(--vich-sky) !important; outline-offset: 2px !important; } /* Section cards inside the tab panes */ .vich-edit-card { background: var(--vich-surface) !important; border: 1px solid var(--vich-line) !important; border-radius: 16px !important; padding: 1.5rem !important; margin-bottom: 1.5rem !important; box-shadow: var(--vich-shadow) !important; } @media (max-width: 575.98px) { .vich-edit-card { padding: 1.15rem 1rem !important; } } .vich-edit-eyebrow { display: block !important; font-family: 'Poppins', sans-serif !important; font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--vich-sky) !important; margin-bottom: 0.25rem !important; } html.dark .vich-edit-eyebrow { color: #38BDF8 !important; /* --vich-cta #0284C7 fails 4.5:1 on dark surface */ } .vich-edit-title { font-family: 'Poppins', sans-serif !important; font-size: 1.125rem !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--vich-ink) !important; margin: 0 0 1.25rem 0 !important; line-height: 1.3 !important; } .vich-edit-subtitle { font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important; color: var(--vich-ink-muted) !important; text-transform: uppercase !important; margin: 1.75rem 0 1rem 0 !important; padding-top: 1.25rem !important; border-top: 1px solid var(--vich-line) !important; } .vich-edit-card .vich-edit-subtitle:first-of-type { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; } .vich-edit-card .form-group { margin-bottom: 1.15rem !important; } .vich-edit-card label { font-weight: 600 !important; } /* Two-column field grouping on wide forms */ @media (min-width: 900px) { .vich-edit-cols { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 1.75rem !important; } } /* Marketing-blue bg-light surfaces inside this page only (dark-safe) */ #vich-edit-page .bg-light { background: var(--vich-surface-soft) !important; } #vich-edit-page .btn-light { background: var(--vich-surface) !important; border-color: var(--vich-line) !important; color: var(--vich-ink) !important; } #vich-edit-page .btn-light.active { background: var(--vich-cta) !important; border-color: var(--vich-cta) !important; color: #FFFFFF !important; } /* Submit footer bar with spinner slot */ .vich-edit-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 0.75rem !important; position: relative !important; padding-top: 1.25rem !important; margin-top: 0.5rem !important; border-top: 1px solid var(--vich-line) !important; } .vich-edit-spinner { position: absolute !important; right: 0 !important; top: calc(50% + 0.7rem) !important; width: 18px !important; height: 18px !important; margin: -9px 0 0 -9px !important; border: 2.5px solid rgba(14, 165, 233, 0.25) !important; border-top-color: #0EA5E9 !important; border-radius: 50% !important; z-index: 5 !important; display: none !important; animation: vich-spin 0.7s linear infinite !important; } .vich-edit-form.is-submitting .vich-edit-spinner { display: block !important; } @media (prefers-reduced-motion: reduce) { .vich-edit-tab, .vich-edit-tab:hover { transition: none !important; } .vich-edit-spinner { animation-duration: 1.4s !important; } } /* Headings — Poppins */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .title h3, .card-header, .modal-title { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 600; letter-spacing: -0.025em; color: var(--vich-ink); } /* Links */ a { color: var(--vich-cta); transition: color 0.15s ease, text-decoration 0.15s ease; } a:hover, a:focus { color: var(--vich-sky); text-decoration: underline; } /* ========================================================================== Unified SaaS Header & Top Navigation ========================================================================== */ .vich-saas-header, .header { position: sticky !important; top: 0 !important; z-index: 1000 !important; background: var(--vich-surface) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid var(--vich-line) !important; box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important; padding: 0 !important; transition: background-color 0.2s ease, border-color 0.2s ease; } html.dark .vich-saas-header, html.dark .header, [data-theme="dark"] .vich-saas-header, [data-theme="dark"] .header { background: rgba(15, 23, 42, 0.92) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4) !important; } html.light .vich-saas-header, html.light .header, [data-theme="light"] .vich-saas-header, [data-theme="light"] .header { background: rgba(255, 255, 255, 0.94) !important; border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important; } .vich-header-fluid { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 60px !important; padding: 0 1.5rem !important; gap: 1.25rem !important; width: 100% !important; } /* Brand & Workspace Indicator */ .vich-brand-area { display: flex !important; align-items: center !important; gap: 0.75rem !important; flex-shrink: 0 !important; } .vich-brand-mark { display: inline-flex !important; align-items: center !important; gap: 0.65rem !important; text-decoration: none !important; } .vich-brand-mark:hover { text-decoration: none !important; } .vich-brand-mark img, .vich-brand-logo { height: 20px !important; max-height: 20px !important; width: auto !important; transition: opacity 0.15s ease; } @media (max-width: 575.98px) { .vich-brand-mark img, .vich-brand-logo { height: 18px !important; max-height: 18px !important; } } /* Dual Logo Theme Switching */ .vich-brand-logo.logo-dark { display: inline-block !important; } .vich-brand-logo.logo-light { display: none !important; } html.light .vich-brand-logo.logo-dark, [data-theme="light"] .vich-brand-logo.logo-dark, [data-bs-theme="light"] .vich-brand-logo.logo-dark, body.light .vich-brand-logo.logo-dark { display: none !important; } html.light .vich-brand-logo.logo-light, [data-theme="light"] .vich-brand-logo.logo-light, [data-bs-theme="light"] .vich-brand-logo.logo-light, body.light .vich-brand-logo.logo-light { display: inline-block !important; } .vich-brand-logo-badge { width: 26px !important; height: 26px !important; border-radius: 7px !important; background: linear-gradient(135deg, #0EA5E9, #0284C7) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35) !important; flex-shrink: 0 !important; } .vich-brand-title { font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; font-size: 1.05rem !important; color: var(--vich-ink) !important; letter-spacing: -0.025em !important; line-height: 1 !important; } .vich-brand-title span { color: var(--vich-sky) !important; } .vich-header-telemetry-badge { font-family: 'Poppins', sans-serif !important; font-size: 0.6875rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #10B981 !important; background: rgba(16, 185, 129, 0.12) !important; border: 1px solid rgba(16, 185, 129, 0.28) !important; padding: 3px 9px !important; border-radius: 9999px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-left: 0.25rem !important; } .vich-telemetry-label { display: inline-block !important; } /* Center Search / Command Palette Hint — Full-width fluid responsive container */ .vich-header-center { flex: 1 1 auto !important; display: flex !important; justify-content: center !important; max-width: 760px !important; width: 100% !important; margin: 0 1.25rem !important; } .vich-header-search-bar { display: flex !important; align-items: center !important; gap: 0.65rem !important; padding: 0.42rem 0.95rem !important; border-radius: 9999px !important; background: var(--vich-surface-soft) !important; border: 1px solid var(--vich-line) !important; color: var(--vich-ink-muted) !important; font-size: 0.8125rem !important; width: 100% !important; transition: all 0.15s ease !important; cursor: pointer !important; user-select: none !important; text-align: left !important; outline: none !important; } .vich-header-search-bar:hover, .vich-header-search-bar:focus-visible { border-color: var(--vich-sky) !important; background: var(--vich-surface) !important; color: var(--vich-ink) !important; box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2) !important; } .vich-search-placeholder { flex: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .vich-search-kbd { font-family: inherit !important; font-size: 0.6875rem !important; font-weight: 600 !important; padding: 2px 6px !important; border-radius: 4px !important; background: var(--vich-surface) !important; border: 1px solid var(--vich-line) !important; color: var(--vich-ink-muted) !important; line-height: 1 !important; } .vich-header-search-mobile-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 8px !important; background: var(--vich-surface-soft) !important; border: 1px solid var(--vich-line) !important; color: var(--vich-ink-muted) !important; cursor: pointer !important; transition: all 0.15s ease !important; padding: 0 !important; } .vich-header-search-mobile-btn:hover { color: var(--vich-sky) !important; border-color: var(--vich-sky) !important; background: var(--vich-surface) !important; } .vich-client-id-badge { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 0.35rem 0.75rem !important; border-radius: 9999px !important; background: var(--vich-surface-soft) !important; border: 1px solid var(--vich-line) !important; font-family: 'Poppins', sans-serif !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--vich-sky) !important; user-select: none !important; } /* Header Utilities & Actions */ .vich-header-right { display: flex !important; align-items: center !important; gap: 0.75rem !important; flex-shrink: 0 !important; } /* Language selector in SaaS header */ .vich-lang-toggle { font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 500 !important; color: var(--vich-ink-muted) !important; padding: 0.35rem 0.65rem !important; border-radius: 8px !important; background: var(--vich-surface-soft) !important; border: 1px solid var(--vich-line) !important; display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; text-decoration: none !important; } .vich-lang-toggle:hover { color: var(--vich-ink) !important; text-decoration: none !important; } /* Theme Toggle Component (Auto / Light / Dark) */ .vich-theme-toggle { display: inline-flex !important; align-items: center !important; gap: 2px !important; background: var(--vich-surface-soft) !important; border: 1px solid var(--vich-line) !important; border-radius: 9999px !important; padding: 3px !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important; } .vich-theme-btn { display: inline-flex !important; align-items: center !important; gap: 4px !important; background: transparent !important; border: none !important; outline: none !important; border-radius: 9999px !important; padding: 3px 9px !important; font-family: 'Poppins', sans-serif !important; font-size: 0.75rem !important; font-weight: 500 !important; color: var(--vich-ink-muted) !important; cursor: pointer !important; transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important; line-height: 1 !important; user-select: none !important; } .vich-theme-btn:hover { color: var(--vich-ink) !important; background: rgba(14, 165, 233, 0.08) !important; } .vich-theme-btn:focus-visible { outline: 2px solid var(--vich-sky) !important; outline-offset: 1px !important; } .vich-theme-btn.active { background: var(--vich-surface) !important; color: var(--vich-cta) !important; font-weight: 600 !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important; } html.dark .vich-theme-btn.active { color: #38BDF8 !important; background: rgba(255, 255, 255, 0.14) !important; } .vich-theme-icon { width: 13px !important; height: 13px !important; display: inline-block !important; vertical-align: middle !important; } @media (max-width: 767.98px) { .vich-theme-label { display: none !important; } .vich-theme-btn { padding: 5px !important; } } /* User Avatar & Profile Dropdown */ .vich-user-pill { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; background: var(--vich-surface-soft) !important; border: 1px solid var(--vich-line) !important; border-radius: 9999px !important; padding: 3px 10px 3px 4px !important; cursor: pointer !important; transition: all 0.15s ease !important; outline: none !important; min-width: 44px !important; min-height: 44px !important; justify-content: center !important; } .vich-user-pill:hover, .vich-user-pill:focus { border-color: rgba(14, 165, 233, 0.4) !important; background: var(--vich-surface) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; } .vich-avatar { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: linear-gradient(135deg, #0EA5E9 0%, #003B6F 100%) !important; color: #FFFFFF !important; font-family: 'Poppins', sans-serif !important; font-size: 0.75rem !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; letter-spacing: -0.02em !important; } .vich-login-btn { font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 600 !important; padding: 0.45rem 1.05rem !important; border-radius: 9999px !important; background: linear-gradient(135deg, #0284C7 0%, #003B6F 100%) !important; color: #FFFFFF !important; border: none !important; display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important; transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important; text-decoration: none !important; } .vich-login-btn:hover { background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(14, 165, 233, 0.45) !important; color: #FFFFFF !important; text-decoration: none !important; } /* ========================================================================== Horizontal Sub-Nav Bar Directly Below Top Bar (.vich-top-subnav) ========================================================================== */ .vich-top-subnav { height: 48px !important; background: var(--vich-surface) !important; border-top: 1px solid var(--vich-line) !important; display: flex !important; align-items: center !important; padding: 0 1.5rem !important; width: 100% !important; position: relative !important; z-index: 995 !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important; transition: background-color 0.2s ease, border-color 0.2s ease !important; } html.dark .vich-top-subnav { background: rgba(11, 17, 32, 0.95) !important; border-top-color: rgba(255, 255, 255, 0.08) !important; } .vich-subnav-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; height: 100% !important; gap: 1rem !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; } .vich-subnav-inner::-webkit-scrollbar { display: none !important; } .vich-subnav-tabs { display: flex !important; align-items: center !important; gap: 0.35rem !important; height: 100% !important; flex-shrink: 0 !important; } .vich-subnav-link { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; height: 34px !important; padding: 0 0.85rem !important; border-radius: 8px !important; font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 500 !important; color: var(--vich-ink-muted) !important; text-decoration: none !important; white-space: nowrap !important; transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important; border: 1px solid transparent !important; position: relative !important; } .vich-subnav-link:hover { color: var(--vich-ink) !important; background: rgba(14, 165, 233, 0.08) !important; text-decoration: none !important; } .vich-subnav-link.active { color: var(--vich-sky) !important; background: rgba(14, 165, 233, 0.12) !important; border-color: rgba(14, 165, 233, 0.25) !important; font-weight: 600 !important; box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15) !important; } .vich-subnav-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; opacity: 0.75 !important; transition: opacity 0.15s ease, transform 0.15s ease !important; } .vich-subnav-icon svg, .vich-subnav-icon i { width: 15px !important; height: 15px !important; } .vich-subnav-link:hover .vich-subnav-icon, .vich-subnav-link.active .vich-subnav-icon { opacity: 1 !important; color: var(--vich-sky) !important; } .vich-subnav-label { line-height: 1 !important; } /* Secondary Subnav Tabs */ .vich-subnav-secondary { display: flex !important; align-items: center !important; gap: 0.75rem !important; height: 100% !important; flex-shrink: 0 !important; } .vich-subnav-sep { display: inline-block !important; width: 1px !important; height: 20px !important; background: var(--vich-line) !important; } .vich-subnav-sec-tabs { display: flex !important; align-items: center !important; gap: 0.25rem !important; } .vich-subnav-sec-link { display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; height: 28px !important; padding: 0 0.65rem !important; border-radius: 6px !important; font-size: 0.75rem !important; font-weight: 500 !important; color: var(--vich-ink-muted) !important; text-decoration: none !important; white-space: nowrap !important; transition: all 0.12s ease !important; } .vich-subnav-sec-link:hover { color: var(--vich-ink) !important; background: rgba(14, 165, 233, 0.08) !important; text-decoration: none !important; } .vich-subnav-sec-link.active { color: var(--vich-sky) !important; background: rgba(14, 165, 233, 0.15) !important; font-weight: 600 !important; } .vich-subnav-sec-icon { font-size: 0.7rem !important; opacity: 0.8 !important; } @media (max-width: 991.98px) { .vich-top-subnav { padding: 0 0.85rem !important; height: 44px !important; } .vich-subnav-tabs { gap: 0.25rem !important; } .vich-subnav-link { height: 30px !important; padding: 0 0.6rem !important; font-size: 0.75rem !important; gap: 0.35rem !important; } .vich-subnav-icon svg, .vich-subnav-icon i { width: 13px !important; height: 13px !important; } } /* Mobile Hamburger Button */ .vich-mobile-toggler { border: 1px solid var(--vich-line) !important; border-radius: 10px !important; padding: 6px 9px !important; background: var(--vich-surface-soft) !important; color: var(--vich-ink) !important; cursor: pointer !important; } .vich-mobile-drawer { background: var(--vich-surface) !important; border-top: 1px solid var(--vich-line) !important; padding: 1rem 0 !important; } .vich-mobile-nav { list-style: none !important; padding: 0 !important; margin: 0 !important; } .vich-mobile-nav .nav-link { font-family: 'Poppins', sans-serif !important; font-size: 0.9375rem !important; font-weight: 500 !important; color: var(--vich-ink) !important; padding: 0.65rem 1rem !important; border-radius: 10px !important; display: flex !important; align-items: center !important; gap: 0.65rem !important; } .vich-mobile-nav .nav-item.active .nav-link { background: rgba(14, 165, 233, 0.12) !important; color: var(--vich-cta) !important; font-weight: 600 !important; } /* Modern Dropdowns */ .vich-dropdown-menu, .dropdown-menu { border-radius: 14px !important; background: var(--vich-surface) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid var(--vich-line) !important; box-shadow: var(--vich-shadow-lg) !important; padding: 0.45rem !important; margin-top: 0.5rem !important; } .dropdown-item { border-radius: 8px !important; padding: 0.5rem 0.85rem !important; font-family: 'Open Sans', sans-serif !important; font-size: 0.85rem !important; color: var(--vich-ink) !important; display: flex !important; align-items: center !important; gap: 0.55rem !important; transition: background-color 0.15s, color 0.15s !important; } .dropdown-item:hover, .dropdown-item:focus { background: rgba(14, 165, 233, 0.12) !important; color: var(--vich-cta) !important; } .dropdown-divider { border-top-color: var(--vich-line) !important; margin: 0.35rem 0 !important; } /* ========================================================================== Modern SaaS Breadcrumbs & Page Header ========================================================================== */ .vich-saas-page-header { padding: 1.75rem 0 1.25rem 0 !important; background: transparent !important; } .vich-page-header-row { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 1rem !important; } .vich-breadcrumb-nav { margin-bottom: 0.35rem !important; } .vich-breadcrumbs { background: transparent !important; padding: 0 !important; margin: 0 !important; font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; } .vich-breadcrumbs .breadcrumb-item + .breadcrumb-item::before { content: "/" !important; color: var(--vich-line-strong) !important; padding: 0 0.45rem !important; } .vich-breadcrumbs a { color: var(--vich-ink-muted) !important; text-decoration: none !important; transition: color 0.15s ease !important; } .vich-breadcrumbs a:hover { color: var(--vich-sky) !important; } .vich-breadcrumbs .breadcrumb-item.active { color: var(--vich-sky) !important; font-weight: 600 !important; } .vich-page-heading { font-family: 'Poppins', sans-serif !important; font-size: 1.65rem !important; font-weight: 700 !important; letter-spacing: -0.03em !important; color: var(--vich-ink) !important; margin: 0 !important; line-height: 1.2 !important; } /* Legacy Title Bar fallback for compatibility */ .title { display: none !important; } /* ========================================================================== Modern SaaS App Workspace Layout (single column, sidebar merged into page) ========================================================================== */ .vich-saas-public-layout { min-height: calc(100vh - var(--vich-navbar-h-public)) !important; background: var(--vich-canvas) !important; display: flex !important; flex-direction: column !important; } /* Identity avatar (shared with the account rail) */ .vich-sidebar-welcome-avatar { width: 34px !important; height: 34px !important; border-radius: 10px !important; background: linear-gradient(135deg, #003B6F, #0284C7) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #FFFFFF !important; font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 700 !important; letter-spacing: 0.02em !important; flex-shrink: 0 !important; box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important; } /* Account card section titles */ .vich-sidebar-section-title { font-family: 'Poppins', sans-serif !important; font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--vich-ink-muted) !important; padding: 0.4rem 0.65rem 0.3rem !important; } .vich-status-card-label { font-family: 'Poppins', sans-serif !important; font-size: 0.61rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #10B981 !important; } .vich-sidebar-external-link { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.4rem !important; padding: 0.35rem 0.65rem !important; font-family: 'Poppins', sans-serif !important; font-size: 0.75rem !important; font-weight: 500 !important; color: var(--vich-ink-muted) !important; text-decoration: none !important; border-radius: 8px !important; transition: all 0.15s ease !important; } .vich-sidebar-external-link:hover { color: var(--vich-sky) !important; background: rgba(14, 165, 233, 0.06) !important; text-decoration: none !important; } /* Main Workspace Area — the flex column that hosts page header + main + footer. Its min-height (viewport minus the sticky navbar block) is what pins the footer flush to the bottom on short pages. */ .vich-saas-app-main { min-height: calc(100vh - var(--vich-navbar-h)) !important; background: var(--vich-canvas) !important; display: flex !important; flex-direction: column !important; } .vich-main-wrapper { flex: 1 0 auto !important; /* grow to fill, never shrink below content */ padding-bottom: 3.5rem !important; } .vich-main-full-col { padding: 0 !important; width: 100% !important; } /* Secondary Sub-Tabs in Page Header */ .vich-saas-subtabs-wrap { margin-top: 0.65rem !important; } .vich-saas-subtabs { display: flex !important; align-items: center !important; gap: 0.4rem !important; overflow-x: auto !important; padding: 3px !important; list-style: none !important; margin: 0 !important; } .vich-saas-subtab-pill { display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; padding: 0.38rem 0.85rem !important; border-radius: 9999px !important; background: var(--vich-surface-soft) !important; border: 1px solid var(--vich-line) !important; color: var(--vich-ink-muted) !important; font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 500 !important; text-decoration: none !important; transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important; white-space: nowrap !important; user-select: none !important; } .vich-saas-subtab-pill:hover { color: var(--vich-ink) !important; background: var(--vich-surface) !important; text-decoration: none !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important; } .vich-saas-subtab-pill.active { color: #FFFFFF !important; background: var(--vich-cta) !important; border-color: var(--vich-cta) !important; font-weight: 600 !important; box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important; text-decoration: none !important; } /* Dashboard Workspace Full-Width Layout (100% Main Content Workspace) */ .vich-main-full-col > .row { display: flex !important; flex-wrap: wrap !important; width: 100% !important; margin: 0 !important; } .vich-main-full-col > .row > .right_content, .right_content { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; } /* Dashboard stat cards container — unified below under Bento Stat Metric Cards */ /* Dashboard widgets (Active Services, Invoices, Tickets) full width */ .right_content > [class*="col-"], .right_content > div > [class*="col-"], .right_content .card-blesta, .right_content .table-responsive { width: 100% !important; max-width: 100% !important; } /* Card & Panels — Frosted Glassmorphism */ .card, .card-blesta { border-radius: 16px !important; background: var(--vich-surface) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--vich-line) !important; box-shadow: var(--vich-shadow); overflow: hidden; margin-bottom: 1.5rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover, .card-blesta:hover { box-shadow: var(--vich-shadow-lg); } .card > .card-header, .card-blesta > .card-header { background: var(--vich-surface-soft) !important; border-bottom: 1px solid var(--vich-line) !important; padding: 1.1rem 1.5rem !important; font-family: 'Poppins', sans-serif !important; font-weight: 600; color: var(--vich-ink) !important; font-size: 1.05rem; } .card > .card-body, .card-blesta > .card-body { padding: 1.25rem 1.5rem 1.5rem 1.5rem !important; color: var(--vich-ink); } .card > .card-footer, .card-blesta > .card-footer { background: var(--vich-surface-soft) !important; border-top: 1px solid var(--vich-line) !important; padding: 0.85rem 1.5rem !important; } /* ========================================================================== Dashboard Friendly Welcome & Quick Actions Hero Banner ========================================================================== */ .vich-dashboard-welcome-banner { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 1.25rem !important; padding: 1.25rem 1.6rem !important; margin-bottom: 1.25rem !important; border-radius: 16px !important; background: var(--vich-surface) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid var(--vich-glass-border) !important; box-shadow: var(--vich-shadow) !important; position: relative !important; overflow: hidden !important; } .vich-dashboard-welcome-banner::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 4px !important; background: linear-gradient(180deg, #003B6F, #0EA5E9) !important; } .vich-welcome-banner-left { display: flex !important; flex-direction: column !important; gap: 0.3rem !important; min-width: 0 !important; } .vich-welcome-tag { display: inline-flex !important; align-items: center !important; gap: 6px !important; width: fit-content !important; font-family: 'Poppins', sans-serif !important; font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--vich-sky) !important; } .vich-status-pulse { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #10B981 !important; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important; display: inline-block !important; } .vich-welcome-banner-title { font-family: 'Poppins', sans-serif !important; font-size: clamp(1.2rem, 1.75vw, 1.55rem) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; color: var(--vich-ink) !important; margin: 0 !important; } .vich-sky-text { color: var(--vich-sky) !important; } .vich-welcome-banner-subtitle { font-family: 'Open Sans', sans-serif !important; font-size: 0.84rem !important; color: var(--vich-ink-muted) !important; margin: 0 !important; line-height: 1.4 !important; } .vich-welcome-banner-right { display: flex !important; align-items: center !important; gap: 0.65rem !important; flex-shrink: 0 !important; } .vich-welcome-btn { display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 600 !important; padding: 0.5rem 0.95rem !important; border-radius: 10px !important; transition: all 0.15s ease !important; white-space: nowrap !important; text-decoration: none !important; } .vich-welcome-btn svg { flex-shrink: 0 !important; } @media (max-width: 767.98px) { .vich-dashboard-welcome-banner { flex-direction: column !important; align-items: flex-start !important; padding: 1.1rem 1.25rem !important; gap: 0.85rem !important; } .vich-welcome-banner-right { width: 100% !important; gap: 0.5rem !important; } .vich-welcome-btn { flex: 1 1 auto !important; justify-content: center !important; } } /* ========================================================================== Bento Stat Metric Cards (.cards .card) — Simple, Friendly & High-Scan ========================================================================== */ .right_content .row.cards, .cards.row, .row.cards { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0.75rem !important; margin: 0 0 1.25rem 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .right_content .row.cards > [class*="col-"], .cards.row > [class*="col-"], .row.cards > [class*="col-"], .right_content .row.cards > .vich-card-col, .vich-card-col { flex: 1 1 0px !important; max-width: none !important; width: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; } /* Card Tab Ordering (1-7) */ .vich-card-col[data-tab-target="services"], .vich-card-col:has([data-tab-target="services"]) { order: 1 !important; } .vich-card-col[data-tab-target="invoices"], .vich-card-col:has([data-tab-target="invoices"]) { order: 2 !important; } .vich-card-col[data-tab-target="tickets"], .vich-card-col:has([data-tab-target="tickets"]) { order: 3 !important; } .vich-card-col[data-tab-target="transactions"], .vich-card-col:has([data-tab-target="transactions"]) { order: 4 !important; } .vich-card-col[data-tab-target="quotations"], .vich-card-col:has([data-tab-target="quotations"]) { order: 5 !important; } .vich-card-col[data-tab-target="orders"], .vich-card-col:has([data-tab-target="orders"]) { order: 6 !important; } .vich-card-col[data-tab-target="domains"], .vich-card-col:has([data-tab-target="domains"]) { order: 7 !important; } .right_content .row.cards a, .cards.row a, .row.cards a, .vich-card-col > a, .vich-card-link-wrapper { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; text-decoration: none !important; color: inherit !important; } .right_content .cards .card, .cards.card, .vich-simple-stat-card { border-radius: 16px !important; background: var(--vich-surface) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid var(--vich-glass-border) !important; box-shadow: var(--vich-shadow) !important; padding: 0.95rem 1.1rem !important; position: relative !important; overflow: hidden !important; margin: 0 !important; width: 100% !important; height: 100% !important; min-height: 100px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease !important; box-sizing: border-box !important; cursor: pointer !important; user-select: none !important; } .right_content .cards .card::before, .cards .card::before, .vich-simple-stat-card::before { display: none !important; /* Clean modern styling: no harsh top border */ } .right_content .cards .card:hover, .cards .card:hover, .vich-simple-stat-card:hover { transform: translateY(-3px) !important; box-shadow: var(--vich-shadow-lg) !important; border-color: rgba(14, 165, 233, 0.45) !important; } .cards .card .card-content, .vich-simple-stat-card .card-content { display: flex !important; flex-direction: column !important; padding: 0 !important; min-width: 0 !important; height: 100% !important; justify-content: space-between !important; } /* Stat Header Row: Icon Badge (left) */ .vich-stat-header-row { display: flex !important; align-items: center !important; justify-content: flex-start !important; margin-bottom: 0.55rem !important; width: 100% !important; } .vich-stat-icon { width: 34px !important; height: 34px !important; border-radius: 9px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: transform 0.2s ease !important; flex-shrink: 0 !important; } .vich-simple-stat-card:hover .vich-stat-icon { transform: scale(1.06) !important; } /* Stat Jump Arrow: Absolute Top-Right Corner */ .vich-stat-jump-arrow { position: absolute !important; top: 0.75rem !important; right: 0.75rem !important; width: 26px !important; height: 26px !important; border-radius: 7px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--vich-ink-muted) !important; opacity: 0.45 !important; z-index: 10 !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; text-decoration: none !important; background: transparent !important; } .vich-stat-jump-arrow:hover { opacity: 1 !important; color: var(--vich-sky) !important; background: var(--vich-surface-soft) !important; transform: translate(2px, -2px) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important; } .vich-simple-stat-card:hover .vich-stat-jump-arrow { opacity: 0.85 !important; } /* Big Bold Number & Human-Friendly Label */ .cards .card .card-value, .vich-simple-stat-card .card-value { font-family: 'Poppins', sans-serif !important; font-size: clamp(1.6rem, 2.2vw, 2.15rem) !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.03em !important; color: var(--vich-ink) !important; font-variant-numeric: tabular-nums !important; margin-bottom: 0.2rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .cards .card .card-label, .vich-simple-stat-card .card-label { font-family: 'Open Sans', sans-serif !important; font-size: 0.78rem !important; font-weight: 600 !important; letter-spacing: 0.01em !important; color: var(--vich-ink-muted) !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Themed Icon Accents */ .vich-card-theme-services .vich-stat-icon { background: rgba(14, 165, 233, 0.12) !important; color: #0284C7 !important; } .vich-card-theme-invoices .vich-stat-icon { background: rgba(16, 185, 129, 0.12) !important; color: #059669 !important; } .vich-card-theme-support .vich-stat-icon { background: rgba(99, 102, 241, 0.12) !important; color: #4F46E5 !important; } .vich-card-theme-domains .vich-stat-icon { background: rgba(6, 182, 212, 0.12) !important; color: #0891B2 !important; } .vich-card-theme-orders .vich-stat-icon { background: rgba(139, 92, 246, 0.12) !important; color: #7C3AED !important; } .vich-card-theme-transactions .vich-stat-icon { background: rgba(16, 185, 129, 0.12) !important; color: #059669 !important; } .vich-card-theme-quotations .vich-stat-icon { background: rgba(245, 158, 11, 0.12) !important; color: #D97706 !important; } .vich-card-theme-default .vich-stat-icon { background: rgba(14, 165, 233, 0.10) !important; color: #0284C7 !important; } /* Dark Mode Card Theming */ html.dark .vich-card-theme-services .vich-stat-icon { background: rgba(14, 165, 233, 0.22) !important; color: #38BDF8 !important; } html.dark .vich-card-theme-invoices .vich-stat-icon { background: rgba(16, 185, 129, 0.22) !important; color: #34D399 !important; } html.dark .vich-card-theme-support .vich-stat-icon { background: rgba(99, 102, 241, 0.22) !important; color: #818CF8 !important; } html.dark .vich-card-theme-transactions .vich-stat-icon { background: rgba(16, 185, 129, 0.22) !important; color: #34D399 !important; } html.dark .vich-card-theme-quotations .vich-stat-icon { background: rgba(245, 158, 11, 0.22) !important; color: #FBBF24 !important; } html.dark .vich-card-theme-domains .vich-stat-icon { background: rgba(6, 182, 212, 0.22) !important; color: #22D3EE !important; } html.dark .vich-card-theme-orders .vich-stat-icon { background: rgba(139, 92, 246, 0.22) !important; color: #A78BFA !important; } html.dark .vich-card-theme-default .vich-stat-icon { background: rgba(14, 165, 233, 0.20) !important; color: #38BDF8 !important; } /* ========================================================================== Interactive Card-Tabs & Dynamic Table Workspace ========================================================================== */ .vich-simple-stat-card.active { border-color: #0284C7 !important; box-shadow: 0 0 0 1.5px #0284C7, 0 8px 24px -4px rgba(2, 132, 199, 0.25) !important; background: var(--vich-surface) !important; } html.dark .vich-simple-stat-card.active { border-color: #0EA5E9 !important; box-shadow: 0 0 0 1.5px #0EA5E9, 0 8px 26px -4px rgba(14, 165, 233, 0.35) !important; } .vich-card-tab-indicator { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: #0284C7; border-radius: 3px 3px 0 0; transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; opacity: 0; pointer-events: none; } html.dark .vich-card-tab-indicator { background: #0EA5E9; box-shadow: 0 -1px 8px rgba(14, 165, 233, 0.6); } .vich-simple-stat-card.active .vich-card-tab-indicator { width: 52px; opacity: 1; } /* Dashboard Card-Tabs Table Workspace */ .vich-dashboard-tables-wrap { position: relative !important; width: 100% !important; margin-top: 1.25rem !important; min-height: 250px !important; } .vich-dashboard-table-pane { display: none !important; } .vich-dashboard-table-pane.active { display: block !important; animation: vichTableFadeIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } @keyframes vichTableFadeIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .vich-dashboard-table-pane.active { animation: none !important; } .vich-card-tab-indicator { transition: none !important; } } /* Table Loading Spinner State */ .vich-table-loading-spinner { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 1.5rem; gap: 1rem; border-radius: 16px; background: var(--vich-surface); border: 1px dashed var(--vich-line); box-shadow: var(--vich-shadow); color: var(--vich-ink-muted); font-family: 'Open Sans', sans-serif; font-size: 0.9rem; font-weight: 500; text-align: center; } .vich-loading-spinner { width: 32px; height: 32px; border: 3px solid rgba(14, 165, 233, 0.2); border-top-color: #0EA5E9; border-radius: 50%; animation: vichSpin 0.75s linear infinite; } @keyframes vichSpin { to { transform: rotate(360deg); } } @media (max-width: 991.98px) { .right_content .row.cards, .cards.row, .row.cards { flex-wrap: wrap !important; gap: 0.65rem !important; } .right_content .row.cards > [class*="col-"], .cards.row > [class*="col-"], .row.cards > [class*="col-"], .vich-card-col { flex: 1 1 calc(33.333% - 0.5rem) !important; max-width: calc(33.333% - 0.5rem) !important; } } @media (max-width: 575.98px) { .right_content .row.cards > [class*="col-"], .cards.row > [class*="col-"], .row.cards > [class*="col-"], .vich-card-col { flex: 1 1 calc(50% - 0.35rem) !important; max-width: calc(50% - 0.35rem) !important; } } /* ========================================================================== Profile & ID Card (#my-info) ========================================================================== */ #my-info .card-blesta { position: relative !important; border-radius: 16px !important; overflow: hidden !important; } #my-info .card-blesta::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, #003B6F, #0EA5E9) !important; } #my-info .card-header { font-size: 0.875rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: var(--vich-sky) !important; padding: 0.95rem 1.25rem !important; } #my-info address { font-style: normal !important; font-size: 0.875rem !important; line-height: 1.65 !important; color: var(--vich-ink) !important; margin-bottom: 0 !important; } #my-info address strong { font-family: 'Poppins', sans-serif !important; font-size: 1.05rem !important; font-weight: 600 !important; color: var(--vich-ink) !important; display: block !important; margin-bottom: 0.25rem !important; } #my-info address hr { border-top-color: var(--vich-line) !important; margin: 0.85rem 0 !important; } #my-info address a { color: var(--vich-cta) !important; word-break: break-all !important; } #my-info .list-group-item { border-color: var(--vich-line) !important; background: transparent !important; color: var(--vich-ink) !important; font-size: 0.875rem !important; padding: 0.75rem 1.25rem !important; transition: background-color 0.15s ease !important; } #my-info .list-group-item:hover { background: rgba(14, 165, 233, 0.08) !important; color: var(--vich-cta) !important; } /* Buttons — VICH CTA & Sky Accent */ .btn { border-radius: 12px !important; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.875rem; padding: 0.55rem 1.25rem; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; } .btn-primary, .btn-primary:not(:disabled):not(.disabled) { background: var(--vich-cta) !important; border-color: var(--vich-cta) !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--vich-sky) !important; border-color: var(--vich-sky) !important; color: #FFFFFF !important; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14, 165, 233, 0.38); } .btn-secondary, .btn-default, .btn-outline-secondary { background: var(--vich-surface-soft) !important; border: 1px solid var(--vich-line-strong) !important; color: var(--vich-ink) !important; } .btn-secondary:hover, .btn-default:hover, .btn-outline-secondary:hover { background: rgba(14, 165, 233, 0.1) !important; border-color: var(--vich-sky) !important; color: var(--vich-cta) !important; } .btn-success { background: #10B981 !important; border-color: #10B981 !important; color: #FFFFFF !important; } .btn-success:hover { background: #059669 !important; border-color: #059669 !important; } .btn-danger { background: #EF4444 !important; border-color: #EF4444 !important; color: #FFFFFF !important; } .btn-danger:hover { background: #DC2626 !important; border-color: #DC2626 !important; } /* Form Inputs & Controls */ .form-control, .form-select, select.form-control, textarea.form-control, input.form-control { border-radius: 12px !important; background: var(--vich-surface) !important; border: 1px solid var(--vich-line-strong) !important; color: var(--vich-ink) !important; padding: 0.65rem 1rem; font-size: 0.9375rem; transition: border-color 0.2s, box-shadow 0.2s; } /* One control height everywhere — explicit beats per-engine 'auto' math (select's intrinsic option row vs input's field box diverge otherwise). 46px = 15px×1.5 line + 20.8px padding + 2px border, rounded up. Widget filter forms keep their own 40px (higher-specificity rule wins). */ input.form-control, select, select.form-control, .form-select { height: 46px !important; } textarea.form-control { height: auto !important; } .form-control:focus, .form-select:focus, select.form-control:focus, textarea.form-control:focus, input.form-control:focus { border-color: var(--vich-sky) !important; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22) !important; outline: none !important; } label { font-weight: 500; font-size: 0.875rem; color: var(--vich-ink); margin-bottom: 0.35rem; } /* ========================================================================== VICH Digital Modern Data Tables & Layout (UI/UX Pro Max Redesign) ========================================================================== */ /* Table Scroll Wrapper */ .table-responsive { border-radius: 12px !important; border: 1px solid var(--vich-line) !important; background: var(--vich-table-bg) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important; margin-bottom: 0 !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; padding: 0 !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Custom Scrollbar for Responsive Tables */ .table-responsive::-webkit-scrollbar { height: 6px; } .table-responsive::-webkit-scrollbar-track { background: transparent; } .table-responsive::-webkit-scrollbar-thumb { background: var(--vich-line-strong); border-radius: 9999px; } .table-responsive::-webkit-scrollbar-thumb:hover { background: var(--vich-sky); } /* Base Table Element */ table.table, .table-curved, .table { width: 100% !important; margin: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; border: none !important; background-color: transparent !important; color: var(--vich-ink) !important; font-family: 'Open Sans', sans-serif !important; font-size: 0.875rem !important; line-height: 1.5 !important; table-layout: auto !important; } /* Reset Outdated 2012 .table-curved borders */ .table-curved td, .table-curved th, .table-curved tbody > tr > td, .table-curved tbody > tr > td:first-child, .table-curved th:first-child, .table-curved th:last-child { border-left: none !important; border-radius: 0 !important; } /* Table Headers */ table.table thead th, table.table thead tr th, .table-curved thead th, .table-curved th, .table > thead > tr > th { font-family: 'Poppins', sans-serif !important; font-size: 0.75rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; padding: 0.85rem 1.25rem !important; background: var(--vich-table-header-bg) !important; color: var(--vich-table-header-text) !important; border: none !important; border-bottom: 2px solid var(--vich-table-header-border) !important; white-space: nowrap !important; vertical-align: middle !important; } /* Last TH Header min-width for Expand/Options Columns */ table.table thead th:last-child, .table-curved thead th:last-child, .table > thead > tr > th:last-child { min-width: 140px !important; padding-right: 1.25rem !important; } /* First & Last TH Corner Radius */ table.table thead tr:first-child th:first-child, .table-curved thead tr:first-child th:first-child { border-top-left-radius: 11px !important; } table.table thead tr:first-child th:last-child, .table-curved thead tr:first-child th:last-child { border-top-right-radius: 11px !important; } /* Sort Links in Headers */ table.table thead th a, table.table thead tr th a, .table-curved thead th a, .table > thead > tr > th > a { color: var(--vich-table-header-text) !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; transition: color 0.15s ease, opacity 0.15s ease !important; } table.table thead th a:hover, table.table thead tr th a:hover, .table-curved thead th a:hover, .table > thead > tr > th > a:hover { color: var(--vich-sky) !important; text-decoration: none !important; } /* Sort Icons */ th > a.asc::after, th > a.desc::after { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; font-size: 0.75rem !important; color: var(--vich-sky) !important; margin-left: 0.35rem !important; } /* Table Body Rows & Cells - High Specificity Override of Bootstrap */ table.table > tbody > tr, .table-striped > tbody > tr, .table-striped-alt > tbody > tr, .table-hover > tbody > tr { background-color: transparent !important; background: transparent !important; } table.table tbody td, table.table tbody th, .table-curved tbody td, .table-curved tbody th, .table > tbody > tr > td, .table > tbody > tr > th, .table-striped > tbody > tr > td, .table-striped-alt > tbody > tr > td, .table-striped > tbody > tr > th, .table-striped-alt > tbody > tr > th { padding: 0.85rem 1.25rem !important; border: none !important; border-bottom: 1px solid var(--vich-line) !important; color: var(--vich-ink) !important; background-color: var(--vich-table-row-bg) !important; vertical-align: middle !important; transition: background-color 0.15s ease, color 0.15s ease !important; } /* Zebra Striping — Override Bootstrap's >tr:nth-child(2n+1)>td hardcoded backgrounds */ table.table.table-striped > tbody > tr:nth-of-type(odd) > td, table.table.table-striped > tbody > tr:nth-of-type(odd) > th, table.table.table-striped-alt > tbody > tr:nth-of-type(odd) > td, table.table.table-striped-alt > tbody > tr:nth-of-type(odd) > th, .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped-alt > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th, .table-striped-alt > tbody > tr:nth-child(2n+1) > th, .table-striped-alt > tbody > tr:nth-child(4n+3) > td, .table-striped-alt > tbody > tr:nth-child(4n+3) > th { background-color: var(--vich-table-row-stripe) !important; } table.table.table-striped > tbody > tr:nth-of-type(even) > td, table.table.table-striped > tbody > tr:nth-of-type(even) > th, table.table.table-striped-alt > tbody > tr:nth-of-type(even) > td, table.table.table-striped-alt > tbody > tr:nth-of-type(even) > th, .table-striped > tbody > tr:nth-child(2n) > td, .table-striped-alt > tbody > tr:nth-child(2n) > td, .table-striped > tbody > tr:nth-child(2n) > th, .table-striped-alt > tbody > tr:nth-child(2n) > th { background-color: var(--vich-table-row-bg) !important; } /* Row Hover State — HIGHEST SPECIFICITY to kill Bootstrap's color: #212529 */ table.table.table-hover > tbody > tr:hover, table.table.table-hover > tbody > tr:hover > td, table.table.table-hover > tbody > tr:hover > th, .table-hover > tbody > tr:hover, .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th, .table-hover > tbody > tr:hover > * { background-color: var(--vich-table-row-hover) !important; color: var(--vich-ink) !important; } /* Bottom Row Corners */ table.table tbody tr:last-child td:first-child, .table-curved tbody tr:last-child td:first-child { border-bottom-left-radius: 11px !important; } table.table tbody tr:last-child td:last-child, .table-curved tbody tr:last-child td:last-child { border-bottom-right-radius: 11px !important; } /* Remove bottom border on last row */ table.table tbody tr:last-child td, .table-curved tbody tr:last-child td { border-bottom: none !important; } /* Numeric and Currency Alignment */ .table td .currency_value, .table td.numeric, .table td.text-right { font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" !important; font-weight: 600; } /* Secondary Meta Text in Cells (Dates, IDs) */ .table td small, .table td .text-muted { color: var(--vich-ink-muted) !important; font-size: 0.8125rem !important; } /* Expandable Rows */ tr.expand { cursor: pointer !important; } tr.expand td:last-of-type, tr.expand td:last-child { min-width: 140px !important; padding-right: 3rem !important; position: relative !important; overflow: visible !important; } tr.expand td:last-of-type .btn-group, tr.expand td:last-child .btn-group { margin-right: 0.5rem !important; vertical-align: middle !important; } tr.expand td:last-of-type::after, tr.expand td:last-child::after { content: "\f078" !important; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; font-size: 0.75rem !important; line-height: 1 !important; color: var(--vich-sky) !important; position: absolute !important; right: 1.25rem !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; padding: 0 !important; float: none !important; width: 0.75rem !important; height: 0.75rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; pointer-events: none !important; transform-origin: center center !important; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important; } tr.expand.expanded td:last-of-type::after, tr.expand.expanded td:last-child::after { transform: translateY(-50%) rotate(180deg) !important; color: var(--vich-cta) !important; } html.dark tr.expand.expanded td:last-of-type::after, html.dark tr.expand.expanded td:last-child::after { color: #38BDF8 !important; } /* Expand Details Panel */ table.table > tbody > tr.expand_details > td, table.table > tbody > tr.expand_details > td:hover, .table > tbody > tr.expand_details > td, .table > tbody > tr.expand_details > td:hover { background-color: var(--vich-table-expand-bg) !important; border-top: 1px dashed var(--vich-line-strong) !important; border-bottom: 2px solid var(--vich-line-strong) !important; color: var(--vich-ink) !important; padding: 1.15rem 1.35rem !important; } .subtable .table-responsive { border-radius: 10px !important; box-shadow: none !important; margin: 0.5rem 0 !important; } /* Nested Email Header in Email Logs */ .table.multi_heading .email_header, .table.multi_heading .email_header td { background-color: var(--vich-surface-soft) !important; color: var(--vich-ink) !important; border-bottom: 1px solid var(--vich-line) !important; font-weight: 600; } /* Action Buttons inside Tables */ .table .btn-group .btn, .table .btn-xs, .table .btn-light, .btn-xs.btn-light { background: var(--vich-surface-soft) !important; border: 1px solid var(--vich-line-strong) !important; color: var(--vich-ink) !important; font-family: 'Poppins', sans-serif !important; font-size: 0.785rem !important; font-weight: 500 !important; padding: 0.35rem 0.65rem !important; border-radius: 8px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; transition: all 0.15s ease !important; } .table .btn-group .btn:hover, .table .btn-xs:hover, .table .btn-light:hover, .btn-xs.btn-light:hover { background: var(--vich-cta) !important; border-color: var(--vich-cta) !important; color: #FFFFFF !important; transform: translateY(-1px) !important; box-shadow: 0 3px 8px rgba(2, 132, 199, 0.3) !important; } /* ========================================================================== EXPLICIT DARK MODE TABLE OVERRIDES (Bulletproof Contrast & Dark Surfaces) Targeting: html.dark, body.dark, [data-theme="dark"], [data-bs-theme="dark"] ========================================================================== */ /* Dark Table Scroll Container */ html.dark .table-responsive, body.dark .table-responsive, [data-theme="dark"] .table-responsive, [data-bs-theme="dark"] .table-responsive { background-color: #0F172A !important; background: #0F172A !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5) !important; } /* Dark Base Table Element */ html.dark table, html.dark table.table, html.dark .table, html.dark .table-curved, html.dark .table-striped, html.dark .table-striped-alt, html.dark .table-hover, body.dark table, body.dark table.table, body.dark .table, body.dark .table-curved, body.dark .table-striped, body.dark .table-striped-alt, [data-theme="dark"] table, [data-theme="dark"] .table, [data-bs-theme="dark"] table, [data-bs-theme="dark"] .table { background-color: #0F172A !important; background: #0F172A !important; color: #F1F5F9 !important; border-color: rgba(255, 255, 255, 0.08) !important; } /* Dark Table Headers */ html.dark table thead th, html.dark table thead tr th, html.dark table.table thead th, html.dark table.table thead tr th, html.dark .table thead th, html.dark .table-curved thead th, html.dark .table > thead > tr > th, body.dark table thead th, body.dark .table thead th, [data-theme="dark"] table thead th, [data-theme="dark"] .table thead th, [data-bs-theme="dark"] table thead th, [data-bs-theme="dark"] .table thead th { background: linear-gradient(180deg, #162238 0%, #0F172A 100%) !important; background-color: #162238 !important; color: #38BDF8 !important; border: none !important; border-bottom: 2px solid rgba(56, 189, 248, 0.30) !important; } /* Dark Table Header Sort Links */ html.dark table thead th a, html.dark table thead tr th a, body.dark table thead th a, [data-theme="dark"] table thead th a, [data-bs-theme="dark"] table thead th a { color: #38BDF8 !important; } html.dark table thead th a:hover, body.dark table thead th a:hover, [data-theme="dark"] table thead th a:hover, [data-bs-theme="dark"] table thead th a:hover { color: #7DD3FC !important; } /* Dark Table Body Cells — Base Dark Slate #0F172A */ html.dark table tbody td, html.dark table tbody th, html.dark table.table tbody td, html.dark table.table tbody th, html.dark .table tbody td, html.dark .table tbody th, html.dark .table-curved tbody td, html.dark .table-curved tbody th, html.dark .table > tbody > tr > td, html.dark .table > tbody > tr > th, html.dark .table-striped > tbody > tr > td, html.dark .table-striped-alt > tbody > tr > td, html.dark .table-striped > tbody > tr > th, html.dark .table-striped-alt > tbody > tr > th, html.dark table.table > tbody > tr:nth-child(n) > td, html.dark table.table > tbody > tr:nth-child(n) > th, html.dark .table-striped > tbody > tr:nth-child(n) > td, html.dark .table-striped-alt > tbody > tr:nth-child(n) > td, body.dark table tbody td, body.dark .table tbody td, body.dark .table-striped > tbody > tr > td, body.dark .table-striped-alt > tbody > tr > td, [data-theme="dark"] table tbody td, [data-theme="dark"] .table tbody td, [data-theme="dark"] .table-striped > tbody > tr > td, [data-theme="dark"] .table-striped-alt > tbody > tr > td, [data-bs-theme="dark"] table tbody td, [data-bs-theme="dark"] .table tbody td, [data-bs-theme="dark"] .table-striped > tbody > tr > td, [data-bs-theme="dark"] .table-striped-alt > tbody > tr > td { background-color: #0F172A !important; background: #0F172A !important; color: #F1F5F9 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; border-top: none !important; border-left: none !important; border-right: none !important; } /* Dark Table Alternating Zebra Stripes — Rich Contrast Slate #162238 */ html.dark table.table.table-striped > tbody > tr:nth-of-type(odd) > td, html.dark table.table.table-striped > tbody > tr:nth-of-type(odd) > th, html.dark table.table.table-striped-alt > tbody > tr:nth-of-type(odd) > td, html.dark table.table.table-striped-alt > tbody > tr:nth-of-type(odd) > th, html.dark .table-striped > tbody > tr:nth-child(2n+1) > td, html.dark .table-striped-alt > tbody > tr:nth-child(2n+1) > td, html.dark .table-striped > tbody > tr:nth-child(2n+1) > th, html.dark .table-striped-alt > tbody > tr:nth-child(2n+1) > th, html.dark .table-striped-alt > tbody > tr:nth-child(4n+3) > td, html.dark .table-striped-alt > tbody > tr:nth-child(4n+3) > th, body.dark .table-striped > tbody > tr:nth-child(2n+1) > td, body.dark .table-striped-alt > tbody > tr:nth-child(2n+1) > td, [data-theme="dark"] .table-striped > tbody > tr:nth-child(2n+1) > td, [data-theme="dark"] .table-striped-alt > tbody > tr:nth-child(2n+1) > td, [data-bs-theme="dark"] .table-striped > tbody > tr:nth-child(2n+1) > td, [data-bs-theme="dark"] .table-striped-alt > tbody > tr:nth-child(2n+1) > td { background-color: #162238 !important; background: #162238 !important; color: #F1F5F9 !important; } /* Dark Table Even Rows — Deep Solid Slate #0F172A */ html.dark table.table.table-striped > tbody > tr:nth-of-type(even) > td, html.dark table.table.table-striped > tbody > tr:nth-of-type(even) > th, html.dark table.table.table-striped-alt > tbody > tr:nth-of-type(even) > td, html.dark table.table.table-striped-alt > tbody > tr:nth-of-type(even) > th, html.dark .table-striped > tbody > tr:nth-child(2n) > td, html.dark .table-striped-alt > tbody > tr:nth-child(2n) > td, html.dark .table-striped > tbody > tr:nth-child(2n) > th, html.dark .table-striped-alt > tbody > tr:nth-child(2n) > th, body.dark .table-striped > tbody > tr:nth-child(2n) > td, body.dark .table-striped-alt > tbody > tr:nth-child(2n) > td, [data-theme="dark"] .table-striped > tbody > tr:nth-child(2n) > td, [data-theme="dark"] .table-striped-alt > tbody > tr:nth-child(2n) > td, [data-bs-theme="dark"] .table-striped > tbody > tr:nth-child(2n) > td, [data-bs-theme="dark"] .table-striped-alt > tbody > tr:nth-child(2n) > td { background-color: #0F172A !important; background: #0F172A !important; color: #F1F5F9 !important; } /* Dark Table Row Hover — Sky Glow Highlight */ html.dark table.table.table-hover > tbody > tr:hover, html.dark table.table.table-hover > tbody > tr:hover > td, html.dark table.table.table-hover > tbody > tr:hover > th, html.dark .table-hover > tbody > tr:hover, html.dark .table-hover > tbody > tr:hover > td, html.dark .table-hover > tbody > tr:hover > th, html.dark .table-hover > tbody > tr:hover > *, body.dark .table-hover > tbody > tr:hover > td, [data-theme="dark"] .table-hover > tbody > tr:hover > td, [data-bs-theme="dark"] .table-hover > tbody > tr:hover > td { background-color: rgba(56, 189, 248, 0.16) !important; background: rgba(56, 189, 248, 0.16) !important; color: #F1F5F9 !important; } /* Dark Table Expandable Rows & Details Panels */ html.dark tr.expand, body.dark tr.expand, [data-theme="dark"] tr.expand, [data-bs-theme="dark"] tr.expand { color: #F1F5F9 !important; } html.dark table.table > tbody > tr.expand_details > td, html.dark table.table > tbody > tr.expand_details > td:hover, html.dark .table > tbody > tr.expand_details > td, html.dark .table > tbody > tr.expand_details > td:hover, html.dark tr.expand_details, html.dark tr.expand_details > td, body.dark tr.expand_details > td, [data-theme="dark"] tr.expand_details > td, [data-bs-theme="dark"] tr.expand_details > td { background-color: #1E293B !important; background: #1E293B !important; color: #F1F5F9 !important; border-top: 1px dashed rgba(56, 189, 248, 0.25) !important; border-bottom: 2px solid rgba(56, 189, 248, 0.25) !important; } /* Dark Subtables Inside Expand Details */ html.dark .subtable, html.dark .subtable table, html.dark .subtable table td, html.dark .subtable table th, body.dark .subtable td, [data-theme="dark"] .subtable td, [data-bs-theme="dark"] .subtable td { background-color: #162238 !important; background: #162238 !important; color: #F1F5F9 !important; border-color: rgba(255, 255, 255, 0.08) !important; } /* Dark Text & Links Inside Table Cells */ html.dark .table td, html.dark .table th, html.dark .table td span, html.dark .table td strong, html.dark .table td b { color: #F1F5F9 !important; } html.dark .table td a:not(.btn) { color: #38BDF8 !important; } html.dark .table td a:not(.btn):hover { color: #7DD3FC !important; text-decoration: underline !important; } html.dark .table td small, html.dark .table td .text-muted { color: #9AA9BC !important; } /* Dark Table Action Buttons */ html.dark .table .btn-light, html.dark .table .btn-xs, html.dark .table .btn-group .btn, html.dark .btn-xs.btn-light, body.dark .table .btn-light, [data-theme="dark"] .table .btn-light, [data-bs-theme="dark"] .table .btn-light { background: #1E293B !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #F1F5F9 !important; } html.dark .table .btn-light:hover, html.dark .table .btn-xs:hover, html.dark .btn-xs.btn-light:hover, body.dark .table .btn-light:hover, [data-theme="dark"] .table .btn-light:hover, [data-bs-theme="dark"] .table .btn-light:hover { background: #334155 !important; border-color: #38BDF8 !important; color: #38BDF8 !important; } /* Category Filter Tabs (.card-links) & Filter Bars Redesign */ .card-nav, .card-filter-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; margin-bottom: 1rem !important; } .card-nav > .float-left { float: none !important; flex: 1 1 auto !important; display: flex !important; align-items: center !important; max-width: 100% !important; } .card-nav > .float-right { float: none !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; flex-shrink: 0 !important; } .card-nav .filter-toggle, .card-nav a.filter-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.45rem !important; padding: 0.45rem 0.85rem !important; min-height: 34px !important; min-width: 36px !important; border-radius: 10px !important; background: var(--vich-surface-soft) !important; border: 1px solid var(--vich-line) !important; color: var(--vich-ink-muted) !important; cursor: pointer !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; text-decoration: none !important; } .card-nav .filter-toggle:hover, .card-nav a.filter-toggle:hover { background: rgba(14, 165, 233, 0.12) !important; border-color: var(--vich-sky) !important; color: var(--vich-cta) !important; } .card-nav .filter-toggle.active, .card-nav a.filter-toggle.active { background: var(--vich-cta) !important; border-color: var(--vich-cta) !important; color: #FFFFFF !important; box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important; } html.dark .card-nav .filter-toggle.active, html.dark .card-nav a.filter-toggle.active { background: var(--vich-sky) !important; border-color: var(--vich-sky) !important; color: #0F172A !important; box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4) !important; } .card-links { display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; padding: 4px !important; background: var(--vich-surface-soft) !important; border: 1px solid var(--vich-line) !important; border-radius: 9999px !important; list-style: none !important; margin: 0 !important; flex-wrap: wrap; } .card-links > li { display: inline-block !important; padding: 0 !important; margin: 0 !important; } .card-links > li + li::before { display: none !important; content: "" !important; } .card-links > li > a { display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; padding: 0.45rem 0.95rem !important; border-radius: 9999px !important; font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 500 !important; color: var(--vich-ink-muted) !important; text-decoration: none !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .card-links > li > a:hover { color: var(--vich-cta) !important; background: rgba(14, 165, 233, 0.08) !important; text-decoration: none !important; } .card-links > li.active > a, .card-links > li > a.active { background: var(--vich-cta) !important; color: #FFFFFF !important; font-weight: 600 !important; box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important; } /* Badge inside Category Tabs */ .card-links .badge, .card-links > li > a .badge { background: var(--vich-category-badge-bg) !important; color: var(--vich-category-badge-text) !important; border-radius: 9999px !important; font-size: 0.6875rem !important; font-weight: 700 !important; padding: 0.15rem 0.5rem !important; min-width: 18px !important; border: none !important; } .card-links > li.active > a .badge, .card-links > li > a.active .badge { background: rgba(255, 255, 255, 0.25) !important; color: #FFFFFF !important; } /* 100% Full-Width Table Filter Bar & Filter Forms */ form.widget_filter_form { width: 100% !important; max-width: 100% !important; margin-bottom: 1.15rem !important; background: transparent !important; border: none !important; padding: 0 !important; transition: opacity 0.2s ease, transform 0.2s ease !important; } form.widget_filter_form[style*="display: none"], form.widget_filter_form[style*="display:none"], form.widget_filter_form.d-none { display: none !important; } form.widget_filter_form > .card, form.widget_filter_form .card.p-3 { width: 100% !important; max-width: 100% !important; display: block !important; background: var(--vich-surface-soft) !important; border: 1px solid var(--vich-line) !important; border-radius: 12px !important; padding: 1.15rem 1.35rem !important; margin-bottom: 0 !important; box-shadow: none !important; } form.widget_filter_form .row { width: 100% !important; max-width: 100% !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; margin: 0 -0.5rem !important; } form.widget_filter_form .row > [class*="col-"] { padding: 0 0.5rem !important; } form.widget_filter_form .form-group { margin-bottom: 0.75rem !important; width: 100% !important; } form.widget_filter_form .form-control, form.widget_filter_form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), form.widget_filter_form select { width: 100% !important; max-width: 100% !important; border-radius: 10px !important; height: 40px !important; background: var(--vich-surface) !important; border: 1px solid var(--vich-line) !important; color: var(--vich-ink) !important; font-size: 0.875rem !important; padding: 0.45rem 0.85rem !important; } form.widget_filter_form input[type="submit"], form.widget_filter_form .btn-light { border-radius: 10px !important; height: 40px !important; padding: 0.45rem 1.25rem !important; font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; font-size: 0.875rem !important; background: var(--vich-cta) !important; border: 1px solid var(--vich-cta) !important; color: #FFFFFF !important; transition: all 0.2s ease !important; } form.widget_filter_form input[type="submit"]:hover, form.widget_filter_form .btn-light:hover { background: var(--vich-sky) !important; border-color: var(--vich-sky) !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important; } /* Full-Width Search Fields & Managed Account Search */ .vich-managed-search-wrap, .vich-managed-search-wrap input, .dataTables_filter, .dataTables_filter input, .table-filter-bar, .table-filter-bar input, .search-filter-wrap, .search-filter-wrap input { width: 100% !important; max-width: 100% !important; } /* Pagination */ div.pagination { margin: 1.5rem 0 0 0 !important; display: flex !important; justify-content: flex-end !important; } div.pagination ul.pagination { display: inline-flex !important; gap: 0.35rem !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } div.pagination ul.pagination li a, div.pagination ul.pagination li span { background: var(--vich-surface) !important; border: 1px solid var(--vich-line) !important; color: var(--vich-ink) !important; font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 500 !important; padding: 0.45rem 0.85rem !important; border-radius: 8px !important; text-decoration: none !important; transition: all 0.15s ease !important; } div.pagination ul.pagination li a:hover { border-color: var(--vich-sky) !important; color: var(--vich-sky) !important; background: var(--vich-surface-soft) !important; } div.pagination ul.pagination li.active a, div.pagination ul.pagination li.active span { background: var(--vich-cta) !important; border-color: var(--vich-cta) !important; color: #FFFFFF !important; font-weight: 600 !important; box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35) !important; } /* Status Badges */ .badge { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 9999px !important; font-family: 'Poppins', sans-serif; font-weight: 600 !important; padding: 0.35rem 0.85rem !important; font-size: 0.725rem !important; letter-spacing: 0.03em; text-transform: uppercase; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .badge-success, .status-active, .badge-paid { background-color: var(--vich-badge-success-bg) !important; color: var(--vich-badge-success-text) !important; border: 1px solid var(--vich-badge-success-border) !important; } .badge-info, .status-pending, .badge-in-progress { background-color: var(--vich-badge-info-bg) !important; color: var(--vich-badge-info-text) !important; border: 1px solid var(--vich-badge-info-border) !important; } .badge-warning, .status-unpaid, .badge-due { background-color: var(--vich-badge-warning-bg) !important; color: var(--vich-badge-warning-text) !important; border: 1px solid var(--vich-badge-warning-border) !important; } .badge-danger, .status-suspended, .badge-canceled { background-color: var(--vich-badge-danger-bg) !important; color: var(--vich-badge-danger-text) !important; border: 1px solid var(--vich-badge-danger-border) !important; } /* Secondary List Groups (Side Nav in Account Areas) */ .list-group { border-radius: 14px; } .list-group-item { border-radius: 12px !important; margin-bottom: 0.4rem; border: 1px solid transparent; background: var(--vich-surface); color: var(--vich-ink); font-weight: 500; padding: 0.75rem 1rem; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.5rem; } .list-group-item:hover { background: rgba(14, 165, 233, 0.08); color: var(--vich-cta); border-color: rgba(14, 165, 233, 0.2); transform: translateX(4px); } .list-group-item.active { background: var(--vich-cta) !important; border-color: var(--vich-cta) !important; color: #FFFFFF !important; font-weight: 600; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3); } /* Modals */ .modal-content { border-radius: 20px !important; background: var(--vich-surface) !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--vich-line); box-shadow: var(--vich-shadow-lg); overflow: hidden; } .modal-header { border-bottom: 1px solid var(--vich-line); padding: 1.25rem 1.5rem; } .modal-footer { border-top: 1px solid var(--vich-line); padding: 1rem 1.5rem; } /* Alert Boxes — Theme-aware frosted alerts */ .alert { border-radius: 12px; border-width: 1px; padding: 1rem 1.25rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .alert-success { background-color: var(--vich-badge-success-bg) !important; border-color: var(--vich-badge-success-border) !important; color: var(--vich-badge-success-text) !important; } .alert-info { background-color: var(--vich-badge-info-bg) !important; border-color: var(--vich-badge-info-border) !important; color: var(--vich-badge-info-text) !important; } .alert-warning { background-color: var(--vich-badge-warning-bg) !important; border-color: var(--vich-badge-warning-border) !important; color: var(--vich-badge-warning-text) !important; } .alert-danger { background-color: var(--vich-badge-danger-bg) !important; border-color: var(--vich-badge-danger-border) !important; color: var(--vich-badge-danger-text) !important; } /* ========================================================================== Marketing Site Footer (port of app/src/components/layout/Footer.tsx) ========================================================================== */ .vich-saas-footer, .footer { flex-shrink: 0 !important; /* sticky-footer: never squashed by the growing main */ background: var(--vich-surface) !important; /* surface token already carries alpha (0.90) */ backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-top: 1px solid var(--vich-line) !important; padding: 1.5rem 0 !important; /* py-6 */ color: var(--vich-ink) !important; font-size: 0.8125rem !important; transition: background-color 0.2s ease, border-color 0.2s ease !important; } @media (min-width: 768px) { .vich-saas-footer, .footer { padding: 2rem 0 !important; /* md:py-8 */ } } /* max-w-7xl (1280px) + responsive gutters 16/24/32px */ .vich-footer-container { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1rem !important; padding-right: 1rem !important; } @media (min-width: 640px) { .vich-footer-container { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } } @media (min-width: 1024px) { .vich-footer-container { padding-left: 2rem !important; padding-right: 2rem !important; } } /* portal footer flex layout */ .vich-footer-row { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 1rem !important; } @media (min-width: 768px) { .vich-footer-row { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; } } .vich-footer-nav { display: flex !important; align-items: center !important; justify-content: center !important; } .vich-footer-links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 0.5rem 1.25rem !important; font-size: 0.8125rem !important; color: var(--vich-ink-muted) !important; margin: 0 !important; padding: 0 !important; } .vich-footer-links a { color: var(--vich-ink-muted) !important; text-decoration: none !important; transition: color 0.2s ease !important; } .vich-footer-links a:hover, .vich-footer-links a:focus-visible { color: var(--vich-ink) !important; text-decoration: none !important; } .vich-footer-sep { color: var(--vich-line) !important; opacity: 0.6 !important; } .vich-footer-copy { font-size: 0.8125rem !important; color: var(--vich-ink-muted) !important; text-align: center !important; white-space: nowrap !important; margin: 0 !important; } @media (min-width: 768px) { .vich-footer-copy { text-align: right !important; } } .vich-footer-brandgroup { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 0.75rem !important; text-align: center !important; } .vich-footer-brand { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; } /* bg-brand rounded square + globe glyph */ .vich-footer-mark { width: 28px !important; height: 28px !important; border-radius: 8px !important; background: var(--vich-tardis) !important; /* bg-brand = TARDIS blue #003B6F */ color: #FFFFFF !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; flex-shrink: 0 !important; } .vich-footer-wordmark { font-family: 'Poppins', sans-serif !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: -0.025em !important; color: var(--vich-ink) !important; } @media (min-width: 640px) { .vich-footer-wordmark { font-size: 1.125rem !important; } } .vich-footer-accent { color: var(--vich-cta) !important; /* sky-600 — text-white sits at 4.5:1 on both canvases */ } html.dark .vich-footer-accent { color: #38BDF8 !important; /* dark mode → sky-400 */ } .vich-footer-sep { color: var(--vich-ink) !important; opacity: 0.25 !important; } .vich-footer-region { display: inline-flex !important; align-items: center !important; gap: 0.375rem !important; font-size: 0.75rem !important; color: var(--vich-ink-muted) !important; } .vich-footer-region svg { color: #EF4444 !important; /* red-500 maple star — decorative, aria-hidden */ flex-shrink: 0 !important; } .vich-footer-copy { font-size: 0.75rem !important; color: var(--vich-ink-muted) !important; text-align: center !important; margin: 0 !important; } .vich-status-pulse { width: 7px !important; height: 7px !important; border-radius: 50% !important; background-color: #10B981 !important; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7) !important; animation: vichPulse 2s infinite cubic-bezier(0.66, 0, 0, 1) !important; display: inline-block !important; } @keyframes vichPulse { to { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } } /* ========================================================================== Hi-Tech Auth Terminal Experience (.vich-auth-*) ========================================================================== */ .vich-auth-wrapper { position: relative !important; width: 100% !important; max-width: 100% !important; height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 0 !important; margin: 0 !important; background-color: var(--vich-canvas) !important; overflow: hidden !important; box-sizing: border-box !important; } .vich-auth-bg-grid { position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 0 !important; background-image: linear-gradient(rgba(0, 59, 111, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 59, 111, 0.04) 1px, transparent 1px) !important; background-size: 36px 36px !important; mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%) !important; -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%) !important; } html.dark .vich-auth-bg-grid { background-image: linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px) !important; } /* Warp-grid canvas: only painted by JS when fine pointer + motion allowed. Hidden by default so the static CSS grid above remains the no-JS/touch/ reduced-motion fallback; when active it takes over (div faded out) and sits between the bg layers (z 0) and the content (z 2). */ .vich-grid-canvas { position: absolute !important; inset: 0 !important; /* explicit CSS box: canvas is a replaced element, inset:0 alone does NOT stretch it — intrinsic (dpr-scaled) size anchors top-left and warps land offset from the cursor */ width: 100% !important; height: 100% !important; z-index: 1 !important; pointer-events: none !important; display: none !important; } .vich-auth-wrapper.vich-grid-active .vich-grid-canvas { display: block !important; } .vich-auth-wrapper.vich-grid-active .vich-auth-bg-grid { opacity: 0 !important; } .vich-auth-glow-orb { position: absolute !important; width: 700px !important; height: 700px !important; top: 15% !important; right: 5% !important; border-radius: 50% !important; pointer-events: none !important; z-index: 0 !important; background: radial-gradient(circle, rgba(2, 132, 199, 0.10) 0%, rgba(224, 242, 254, 0.4) 40%, transparent 70%) !important; filter: blur(40px) !important; } html.dark .vich-auth-glow-orb { background: radial-gradient(circle, rgba(14, 165, 233, 0.16) 0%, rgba(0, 59, 111, 0.12) 40%, transparent 70%) !important; } /* 50/50 Split Showcase: Contained, serene 3D globe (No box, no text clutter) */ .vich-auth-globe-stage { position: relative !important; width: 100% !important; max-width: 480px !important; height: clamp(320px, 50vh, 460px) !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; box-shadow: none !important; pointer-events: none !important; margin: 0 auto !important; overflow: visible !important; } #vich-auth-globe-canvas { width: 100% !important; height: 100% !important; display: block !important; background: transparent !important; pointer-events: none !important; } /* Full-Width Edge-to-Edge Content Container */ .vich-auth-container { position: relative !important; z-index: 2 !important; max-width: 100% !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; box-sizing: border-box !important; } .vich-auth-header-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 1rem clamp(1.25rem, 3.5vw, 3.5rem) !important; border-bottom: 1px solid var(--vich-line) !important; flex-shrink: 0 !important; width: 100% !important; box-sizing: border-box !important; } .vich-auth-brand { display: inline-flex !important; align-items: center !important; gap: 0.75rem !important; text-decoration: none !important; } .vich-auth-brand:hover { text-decoration: none !important; } .vich-auth-logo-badge { width: 28px !important; height: 28px !important; border-radius: 8px !important; background: linear-gradient(135deg, #0EA5E9, #0284C7) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35) !important; flex-shrink: 0 !important; } .vich-auth-brand-text { font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; font-size: 1.1rem !important; color: var(--vich-ink) !important; letter-spacing: -0.025em !important; line-height: 1 !important; } .vich-sky-text { color: var(--vich-sky) !important; } .vich-auth-env-pill { font-family: 'Poppins', sans-serif !important; font-size: 0.6875rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--vich-sky) !important; background: rgba(14, 165, 233, 0.12) !important; border: 1px solid rgba(14, 165, 233, 0.28) !important; padding: 3px 8px !important; border-radius: 9999px !important; line-height: 1 !important; display: inline-block !important; } .vich-auth-nav-actions { display: flex !important; align-items: center !important; gap: 1.25rem !important; } .vich-auth-back-link { display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 500 !important; color: var(--vich-ink-muted) !important; text-decoration: none !important; transition: color 0.15s ease !important; } .vich-auth-back-link:hover { color: var(--vich-sky) !important; text-decoration: none !important; } /* 50/50 Split Showcase Layout */ .vich-auth-split-row { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; max-width: 1060px !important; width: 100% !important; margin: 0 auto !important; min-height: 0 !important; position: relative !important; z-index: 5 !important; } .vich-auth-globe-col { display: flex !important; align-items: center !important; justify-content: center !important; padding: 1rem 1.5rem !important; min-height: 0 !important; } .vich-auth-form-col { display: flex !important; align-items: center !important; justify-content: center !important; padding: 1rem 1.5rem !important; min-height: 0 !important; } .vich-auth-main-row { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; max-width: 1060px !important; margin: 0 auto !important; width: 100% !important; min-height: 0 !important; position: relative !important; z-index: 5 !important; } .vich-auth-single-row { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; max-width: 1060px !important; margin: 0 auto !important; width: 100% !important; min-height: 0 !important; position: relative !important; z-index: 5 !important; } .vich-auth-centered-col { max-width: 400px !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; position: relative !important; z-index: 5 !important; } .vich-auth-card { position: relative !important; width: 100% !important; max-width: 400px !important; margin: 0 auto !important; border-radius: 18px !important; /* LIQUID GLASS refraction core: lowered fill alpha so the warp grid, glow orb and globe read THROUGH the card, lensed by a stronger blur+saturate pass. Alphas picked by WCAG compositing math (worst case = saturated orb bleed under the card): light .62 -> muted #5C6B84 lands 5.03:1, ink 16.6:1; dark .72 -> muted 7.11:1, ink 15.5:1. All >= 4.5:1 in both themes with headroom. */ background: rgba(255, 255, 255, 0.62) !important; backdrop-filter: blur(28px) saturate(170%) !important; -webkit-backdrop-filter: blur(28px) saturate(170%) !important; border: 1px solid var(--vich-line-strong) !important; box-shadow: var(--vich-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 24px rgba(255, 255, 255, 0.05) !important; padding: 1.6rem 1.85rem !important; overflow: hidden !important; transition: background 450ms cubic-bezier(0.16, 1, 0.3, 1) !important; } html.dark .vich-auth-card { background: rgba(11, 17, 32, 0.72) !important; box-shadow: var(--vich-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 28px rgba(56, 189, 248, 0.05) !important; } .vich-auth-card::before { display: none !important; } /* ========================================================================== Scrolltide-Style Animated Glowing Border Beam (Subtle & Slower) Smooth, focused photonic comet beam tracing calmly around the card perimeter using @property --vich-beam-angle, conic-gradient, and dual-layer mask clipping (content-box vs border-box exclusion). - 6.5s linear infinite orbit tracing all 4 sides of the card - High-luminance white head leading into VICH Sky/Cyan (#38BDF8, #0EA5E9) - Soft, delicate drop-shadow glow filter creating subtle atmospheric bloom - Full WCAG 2.2 AA & prefers-reduced-motion accessibility ========================================================================== */ @property --vich-beam-angle { syntax: ''; initial-value: 0deg; inherits: false; } .vich-auth-card::after { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; padding: 1.5px !important; background: conic-gradient( from var(--vich-beam-angle, 0deg), transparent 0deg, transparent 255deg, rgba(2, 132, 199, 0.05) 280deg, rgba(14, 165, 233, 0.30) 315deg, rgba(56, 189, 248, 0.65) 345deg, rgba(255, 255, 255, 0.85) 356deg, transparent 360deg ) !important; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.40)) drop-shadow(0 0 8px rgba(14, 165, 233, 0.15)) !important; pointer-events: none !important; opacity: 0.80 !important; animation: vich-border-spin 6.5s linear infinite !important; } html.dark .vich-auth-card::after { padding: 1.5px !important; background: conic-gradient( from var(--vich-beam-angle, 0deg), transparent 0deg, transparent 255deg, rgba(2, 132, 199, 0.08) 280deg, rgba(14, 165, 233, 0.35) 315deg, rgba(56, 189, 248, 0.70) 345deg, rgba(255, 255, 255, 0.90) 356deg, transparent 360deg ) !important; filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.50)) drop-shadow(0 0 10px rgba(14, 165, 233, 0.20)) !important; opacity: 0.85 !important; } @keyframes vich-border-spin { to { --vich-beam-angle: 360deg; } } @media (prefers-reduced-motion: reduce) { .vich-auth-card, html.dark .vich-auth-card { transition: none !important; } .vich-auth-card::after { animation: none !important; --vich-beam-angle: 45deg !important; } } .vich-auth-card-top { text-align: left !important; margin-bottom: 1.25rem !important; } .vich-auth-card-title { font-family: 'Poppins', sans-serif !important; font-size: 1.35rem !important; font-weight: 700 !important; letter-spacing: -0.025em !important; color: var(--vich-ink) !important; margin-bottom: 0.25rem !important; } .vich-auth-card-subtitle { font-family: 'Open Sans', sans-serif !important; font-size: 0.8125rem !important; color: var(--vich-ink-muted) !important; margin: 0 !important; } .vich-auth-alert { margin-bottom: 1.25rem !important; } .vich-auth-group { margin-bottom: 1.25rem !important; } .vich-auth-label { font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 600 !important; color: var(--vich-ink) !important; margin-bottom: 0.4rem !important; display: block !important; } .vich-auth-forgot-link, .vich-auth-recovery-tab { font-family: 'Poppins', sans-serif !important; font-size: 0.75rem !important; font-weight: 500 !important; color: var(--vich-cta) !important; text-decoration: none !important; background: transparent !important; border: none !important; padding: 2px 0 !important; min-width: 24px !important; min-height: 24px !important; cursor: pointer !important; line-height: 1.4 !important; } .vich-auth-forgot-link:hover, .vich-auth-recovery-tab:hover { color: var(--vich-sky) !important; text-decoration: underline !important; } .vich-auth-forgot-link:focus-visible, .vich-auth-recovery-tab:focus-visible { outline: 2px solid var(--vich-sky) !important; outline-offset: 2px !important; border-radius: 4px !important; } .vich-auth-input-container { position: relative !important; display: flex !important; align-items: center !important; } .vich-auth-field-icon { position: absolute !important; left: 14px !important; color: var(--vich-ink-muted) !important; opacity: 0.75 !important; pointer-events: none !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 2 !important; } .vich-auth-input { height: 48px !important; padding-left: 44px !important; padding-right: 44px !important; border-radius: 12px !important; /* Layered inner glass, deliberately WITHOUT a nested backdrop-filter: inputs are typing surfaces, and a child lens would re-sample on every caret blink/paint (Safari ghosting, Chrome repaint churn). Flatter translucent fills over the card's 28px lens + an inset top highlight read as a second glass layer for free. */ background: rgba(242, 246, 251, 0.55) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; border: 1px solid var(--vich-line-strong) !important; color: var(--vich-ink) !important; font-size: 0.9375rem !important; transition: border-color 0.16s ease, box-shadow 0.16s ease !important; } html.dark .vich-auth-input { background: rgba(30, 41, 59, 0.45) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; } .vich-auth-input:focus { border-color: var(--vich-sky) !important; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; background: var(--vich-surface) !important; outline: none !important; } html.dark .vich-auth-input:focus { box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; } .vich-auth-otp-input { text-align: center !important; font-family: monospace, Courier, sans-serif !important; font-size: 1.35rem !important; letter-spacing: 0.35em !important; font-weight: 700 !important; } .vich-auth-pwd-toggle { position: absolute !important; right: 12px !important; background: transparent !important; border: none !important; color: var(--vich-ink-muted) !important; cursor: pointer !important; padding: 6px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 2 !important; transition: color 0.15s ease, background-color 0.15s ease !important; } .vich-auth-pwd-toggle:hover { color: var(--vich-sky) !important; background: rgba(14, 165, 233, 0.1) !important; } .vich-auth-options-row { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 1.15rem 0 1.35rem !important; } .vich-auth-switch-label { display: inline-flex !important; align-items: center !important; gap: 0.65rem !important; cursor: pointer !important; user-select: none !important; margin: 0 !important; } .vich-switch-wrapper { position: relative !important; width: 38px !important; height: 22px !important; display: inline-block !important; } .vich-switch-input { opacity: 0 !important; width: 0 !important; height: 0 !important; position: absolute !important; } .vich-switch-track { position: absolute !important; inset: 0 !important; background: rgba(148, 163, 184, 0.35) !important; border-radius: 9999px !important; transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .vich-switch-track::after { content: '' !important; position: absolute !important; top: 2px !important; left: 2px !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #FFFFFF !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .vich-switch-input:checked + .vich-switch-track { background: var(--vich-cta) !important; } .vich-switch-input:checked + .vich-switch-track::after { transform: translateX(16px) !important; } .vich-switch-text { font-family: 'Open Sans', sans-serif !important; font-size: 0.8125rem !important; color: var(--vich-ink-muted) !important; } .vich-auth-submit-btn { width: 100% !important; height: 48px !important; border-radius: 12px !important; /* Solid fill (deepened from #0284C7 for 4.5:1 white-text contrast) — no dark-fading gradient */ background: #0277B3 !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 24px rgba(2, 132, 199, 0.32) !important; color: #FFFFFF !important; font-family: 'Poppins', sans-serif !important; font-size: 0.9375rem !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; cursor: pointer !important; transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important; } .vich-auth-submit-btn:hover { /* #027DBA: brightest skiable lift that keeps white label >=4.5:1 (4.52:1) */ background: #027DBA !important; transform: translateY(-1px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 28px rgba(14, 165, 233, 0.5) !important; color: #FFFFFF !important; } .vich-auth-submit-btn:active { transform: translateY(0) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 2px 4px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(2, 132, 199, 0.25) !important; } .vich-auth-submit-btn:focus-visible { outline: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 3px rgba(14, 165, 233, 0.35), 0 8px 24px rgba(2, 132, 199, 0.32) !important; } .vich-auth-submit-btn:disabled, .vich-auth-submit-btn[disabled] { opacity: 0.6 !important; pointer-events: none !important; transform: none !important; } .vich-btn-arrow, .vich-submit-arrow { transition: transform 0.18s ease !important; } .vich-auth-submit-btn:hover .vich-btn-arrow, .vich-auth-submit-btn:hover .vich-submit-arrow { transform: translateX(3px) !important; } @media (prefers-reduced-motion: reduce) { .vich-auth-submit-btn, .vich-btn-arrow, .vich-submit-arrow { transition: none !important; transform: none !important; } } .vich-auth-card-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: 1.25rem !important; padding-top: 0.85rem !important; border-top: 1px solid var(--vich-line) !important; } .vich-auth-recovery-link { font-family: 'Poppins', sans-serif !important; font-size: 0.75rem !important; font-weight: 500 !important; color: var(--vich-ink-muted) !important; display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; text-decoration: none !important; transition: color 0.15s ease !important; } .vich-auth-recovery-link:hover { color: var(--vich-sky) !important; text-decoration: underline !important; } /* ========================================================================== Login card face swap — FRONT face = sign-in, BACK face = recovery. The card itself never moves: both faces share one grid cell (height = tallest face, no resize, no 3D). Modern tab-mode-switch convention: the LEAVING face lifts up 6px and fades out (150ms ease-in); the ENTERING face rises from 8px below and fades in (220ms ease-out) — same rule in both directions, so open is the exact mirror of close. visibility (0s linear, delayed to the fade-out end on outgoing faces) keeps the hidden face out of tab order; aria-hidden mirrored by JS. Card skin (background/border/shadow/padding/glass ::before) stays on .vich-auth-card untouched — faces are plain content boxes. ========================================================================== */ .vich-auth-flip { display: grid !important; } .vich-auth-flip > .vich-auth-face { grid-area: 1 / 1 !important; min-width: 0 !important; /* Shorter face (recovery) centers vertically in the shared cell; no-op for the tallest */ align-self: center !important; opacity: 1 !important; transform: translateY(0) !important; visibility: visible !important; /* Enter (after-change style): rise from below + fade in */ transition: transform 220ms ease-out, opacity 220ms ease-out, visibility 0s linear 0s !important; } .vich-auth-flip > .vich-auth-face-back { /* Parked 8px low, waiting to rise in */ opacity: 0 !important; transform: translateY(8px) !important; visibility: hidden !important; /* Close: stays painted for the 150ms lift-out, then switches off */ transition: transform 150ms ease-in, opacity 150ms ease-in, visibility 0s linear 150ms !important; } .vich-auth-flip-card.is-flipped .vich-auth-face-front { opacity: 0 !important; transform: translateY(-6px) !important; visibility: hidden !important; /* Open: stays painted for the 150ms lift-out, then switches off */ transition: transform 150ms ease-in, opacity 150ms ease-in, visibility 0s linear 150ms !important; } .vich-auth-flip-card.is-flipped .vich-auth-face-back { opacity: 1 !important; transform: translateY(0) !important; visibility: visible !important; transition: transform 220ms ease-out, opacity 220ms ease-out, visibility 0s linear 0s !important; } /* Recovery region: plain content sheet inside the back face (region id kept for aria-controls / $recovery_mode contract) */ .vich-auth-recovery { display: block !important; } .vich-auth-recovery [data-panel]:not(.is-active) { display: none !important; } /* Sub-form crosslink switch while shown: instant dip + 120ms fade-in */ .vich-auth-recovery [data-panel].is-active { opacity: 1 !important; transition: opacity 0.12s ease !important; } .vich-auth-recovery.is-swapping [data-panel].is-active { opacity: 0 !important; transition: none !important; } .vich-auth-recovery-switch { margin: 0.9rem 0 0 !important; text-align: center !important; font-family: 'Open Sans', sans-serif !important; font-size: 0.75rem !important; color: var(--vich-ink-muted) !important; } @media (prefers-reduced-motion: reduce) { /* Opacity-only crossfade is motion-free (WCAG 2.2.22): keep the fade, zero the translate, keep visibility stepping, shorten to 150ms */ .vich-auth-flip > .vich-auth-face { transform: none !important; transition: opacity 150ms ease, visibility 0s linear 0s !important; } .vich-auth-flip > .vich-auth-face-back { transform: none !important; transition: opacity 150ms ease, visibility 0s linear 150ms !important; } .vich-auth-flip-card.is-flipped .vich-auth-face-front { transform: none !important; transition: opacity 150ms ease, visibility 0s linear 150ms !important; } .vich-auth-flip-card.is-flipped .vich-auth-face-back { transform: none !important; transition: opacity 150ms ease, visibility 0s linear 0s !important; } .vich-auth-recovery [data-panel].is-active { transition-duration: 0.15s !important; } } .vich-auth-recovery-title { font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 600 !important; color: var(--vich-ink) !important; margin: 0 0 0.25rem !important; } .vich-auth-recovery-desc { font-family: 'Open Sans', sans-serif !important; font-size: 0.75rem !important; color: var(--vich-ink-muted) !important; margin: 0 0 1rem !important; } .vich-auth-recovery .vich-auth-group { margin-bottom: 1rem !important; } .vich-auth-recovery-close { /* Labeled ghost button, shared by both sub-panels, bottom of the region. Auto width + centered (matches the crosslink tabs' DNA); 44px target. */ display: flex !important; width: max-content !important; margin: 1.25rem auto 0 !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; min-height: 44px !important; min-width: 44px !important; padding: 0.55rem 1rem !important; background: transparent !important; border: 1px solid var(--vich-line-strong) !important; border-radius: 10px !important; font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 500 !important; color: var(--vich-ink-muted) !important; cursor: pointer !important; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease !important; } .vich-auth-recovery-close .vich-recovery-back-arrow { transition: transform 0.15s ease !important; } .vich-auth-recovery-close:hover { color: var(--vich-sky) !important; border-color: rgba(14, 165, 233, 0.45) !important; background: rgba(14, 165, 233, 0.06) !important; } .vich-auth-recovery-close:hover .vich-recovery-back-arrow { transform: translateX(-2px) !important; } .vich-auth-recovery-close:focus-visible { outline: 2px solid var(--vich-sky) !important; outline-offset: 2px !important; } @media (prefers-reduced-motion: reduce) { .vich-auth-recovery-close, .vich-auth-recovery-close .vich-recovery-back-arrow, .vich-auth-recovery-close:hover .vich-recovery-back-arrow { transform: none !important; transition: none !important; } } .vich-auth-bottom-bar { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; padding: 0.85rem clamp(1.25rem, 3.5vw, 3.5rem) !important; border-top: 1px solid var(--vich-line) !important; flex-shrink: 0 !important; width: 100% !important; font-family: 'Open Sans', sans-serif !important; font-size: 0.75rem !important; color: var(--vich-ink-muted) !important; box-sizing: border-box !important; } @media (min-width: 640px) { .vich-auth-bottom-bar { flex-direction: row !important; justify-content: space-between !important; gap: 1rem !important; } } .vich-auth-copy { margin: 0 !important; font-size: 0.75rem !important; color: var(--vich-ink-muted) !important; text-align: center !important; white-space: nowrap !important; } .vich-auth-legal-links { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.75rem !important; font-size: 0.75rem !important; color: var(--vich-ink-muted) !important; } .vich-auth-legal-link { color: var(--vich-ink-muted) !important; text-decoration: none !important; transition: color 0.2s ease !important; } .vich-auth-legal-link:hover, .vich-auth-legal-link:focus-visible { color: var(--vich-ink) !important; text-decoration: none !important; } .vich-auth-dot-sep { color: var(--vich-line) !important; opacity: 0.6 !important; } .vich-dot-sep { opacity: 0.4 !important; } /* Full Viewport Viewport Overrides for Auth Screens */ .vich-auth-main-full { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; height: 100vh !important; overflow: hidden !important; } .vich-auth-full-row { margin: 0 !important; height: 100% !important; width: 100% !important; } body:has(.vich-auth-wrapper), body.client-client_login-index, body.client-client_login-reset, body.client-client_login-forgot, body.client-client_login-confirmreset, body.client-client_login-otp { overflow: hidden !important; height: 100vh !important; } @media (max-height: 640px), (max-width: 768px) { body:has(.vich-auth-wrapper), body.client-client_login-index, body.client-client_login-reset, body.client-client_login-forgot, body.client-client_login-confirmreset, body.client-client_login-otp, .vich-auth-wrapper, .vich-auth-main-full { height: auto !important; min-height: 100vh !important; max-height: none !important; overflow-y: auto !important; } .vich-auth-container { height: auto !important; } .vich-auth-split-row, .vich-auth-main-row { margin: 1rem 0 !important; } /* Short-viewport fallback stacking (unchanged for desktop >=768px; the mobile block below overrides this for true <768px viewports) */ .vich-auth-globe-col, .vich-auth-form-col { padding: 0.5rem 0 !important; width: 100% !important; } .vich-auth-globe-stage { height: clamp(200px, 28vh, 260px) !important; margin-bottom: 0.75rem !important; } .vich-auth-card { max-width: 400px !important; } } @media (max-width: 767.98px) { /* MOBILE ONLY (<768px): clean edge-friendly spacing, card is the hero */ /* Explicit flex chain: wrapper(min-height) > container(grow) > row(grow, never shrink below content) > footer(margin-top:auto). Footer sticks to the viewport bottom whenever there's room, and flows below content (page scrolls) when content is taller. */ .vich-auth-main-full, .vich-auth-wrapper { min-height: 100vh !important; min-height: 100dvh !important; } .vich-auth-container { flex: 1 1 auto !important; padding: 0 !important; /* Zero outer page padding on mobile - header & footer sit edge-to-edge flush to viewport */ } .vich-auth-split-row, .vich-auth-main-row, .vich-auth-single-row { flex: 1 0 auto !important; margin: 0.4rem 0 !important; /* minimal vertical row gap */ padding: 0 1rem !important; /* side breathing room for card inside the viewport */ overflow: hidden !important; width: 100% !important; box-sizing: border-box !important; } .vich-auth-bottom-bar { margin-top: auto !important; padding: 0.65rem 1rem calc(0.5rem + env(safe-area-inset-bottom)) 1rem !important; } /* Card is the hero: full-width stack, centered; globe turns ambient */ .vich-auth-globe-col { position: absolute !important; inset: 0 !important; width: auto !important; padding: 0 !important; display: block !important; z-index: 0 !important; pointer-events: none !important; opacity: 0.25 !important; /* light: sits behind glass, text contrast untouched */ } html.dark .vich-auth-globe-col { opacity: 0.35 !important; } .vich-auth-globe-stage { /* Explicit square px dimensions => vich-globe.js (measures this element) keeps a sane canvas size + aspect while it renders behind the card */ position: absolute !important; top: -6vw !important; right: -16vw !important; left: auto !important; width: 65vw !important; height: 65vw !important; max-width: 480px !important; max-height: 480px !important; margin: 0 !important; } .vich-auth-form-col { position: relative !important; z-index: 2 !important; width: 100% !important; padding: 0 !important; /* eliminate double side padding on mobile */ } .vich-auth-card { max-width: 400px !important; width: 100% !important; margin: 0 auto !important; padding: 1.6rem 1.85rem !important; /* Mobile liquid-glass reconciliation: the ambient globe + grid sit directly behind the card here (desktop keeps them off to the side), so raise the fill alpha - the lens stays, the busy pattern under text zones fades. Composited worst case: light muted 4.87:1, dark muted 7.19:1 - both clear 4.5:1 */ background: rgba(255, 255, 255, 0.72) !important; } html.dark .vich-auth-card { background: rgba(11, 17, 32, 0.82) !important; } /* Auth header at 375px: wrap instead of squeeze; env pill folds, toggle buttons keep a 44px touch target (auth-only scope: the shared mobile label rule at 767.98px shrinks padding, which lands under 24px) */ .vich-auth-header-bar { flex-wrap: wrap !important; gap: 0.5rem 0.85rem !important; padding: 0.75rem 1rem 0.65rem 1rem !important; } .vich-auth-nav-actions { gap: 0.85rem !important; margin-left: auto !important; } .vich-auth-header-bar .vich-theme-btn { min-width: 44px !important; min-height: 44px !important; justify-content: center !important; } .vich-auth-env-pill { display: none !important; } } @media (max-width: 767.98px) and (max-width: 419.98px) { /* Below 420px even the back-link wording is too much: icon-only */ .vich-auth-back-link span { display: none !important; } } /* Legacy fallback panel styling */ .panel, .panel-blesta { border-radius: 18px !important; background: var(--vich-surface) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid var(--vich-line) !important; box-shadow: var(--vich-shadow-lg) !important; overflow: hidden !important; margin-bottom: 1.75rem !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .panel-heading { background: var(--vich-surface-soft) !important; border-bottom: 1px solid var(--vich-line) !important; padding: 1.15rem 1.5rem !important; font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; font-size: 1.1rem !important; color: var(--vich-ink) !important; } .panel-body { padding: 1.75rem !important; color: var(--vich-ink) !important; } .panel-footer { background: var(--vich-surface-soft) !important; border-top: 1px solid var(--vich-line) !important; padding: 1rem 1.5rem !important; display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 0.875rem !important; } .panel-footer a { color: var(--vich-cta) !important; font-weight: 500 !important; } .panel-footer a:hover { color: var(--vich-sky) !important; text-decoration: underline !important; } .row.login, .row.vich-login-page { padding: 0 !important; margin: 0 !important; } .row.login .card, .row.login .card-blesta, .row.login .panel, .row.login .panel-blesta { max-width: 460px !important; width: 100% !important; margin: 1rem auto !important; } /* WCAG 2.2 AA Accessibility & Focus Visibility */ :focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--vich-sky) !important; outline-offset: 2px !important; } /* Reduced Motion Safety */ @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; transform: none !important; } .vich-status-pulse { animation: none !important; } } /* ========================================================================== COMMAND PALETTE / QUICK SEARCH (⌘K) MODAL ========================================================================== */ .vich-cmd-palette-modal { position: fixed !important; inset: 0 !important; z-index: 10050 !important; display: none !important; align-items: flex-start !important; justify-content: center !important; padding: 10vh 1rem 2rem !important; } .vich-cmd-palette-modal.open { display: flex !important; } .vich-cmd-backdrop { position: fixed !important; inset: 0 !important; background: rgba(11, 17, 32, 0.72) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; z-index: 1 !important; } .vich-cmd-container { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: 600px !important; animation: vichCmdEnter 0.16s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } @keyframes vichCmdEnter { from { opacity: 0; transform: scale(0.96) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .vich-cmd-dialog { display: flex !important; flex-direction: column !important; width: 100% !important; max-height: 75vh !important; background: var(--vich-surface) !important; border: 1px solid var(--vich-line) !important; border-radius: 16px !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05) !important; overflow: hidden !important; } .vich-cmd-header { display: flex !important; align-items: center !important; gap: 0.75rem !important; padding: 0.85rem 1.15rem !important; border-bottom: 1px solid var(--vich-line) !important; background: var(--vich-surface-soft) !important; } .vich-cmd-search-icon { color: var(--vich-sky) !important; flex-shrink: 0 !important; } .vich-cmd-input { flex: 1 !important; background: transparent !important; border: none !important; outline: none !important; font-family: 'Poppins', sans-serif !important; font-size: 0.9375rem !important; color: var(--vich-ink) !important; padding: 0 !important; } .vich-cmd-input::placeholder { color: var(--vich-ink-muted) !important; } .vich-cmd-close-btn { background: transparent !important; border: none !important; padding: 0 !important; cursor: pointer !important; display: inline-flex !important; } .vich-cmd-kbd { font-family: inherit !important; font-size: 0.65rem !important; font-weight: 600 !important; padding: 2px 6px !important; border-radius: 5px !important; background: var(--vich-surface) !important; border: 1px solid var(--vich-line) !important; color: var(--vich-ink-muted) !important; line-height: 1 !important; } .vich-cmd-body { padding: 0.5rem !important; overflow-y: auto !important; max-height: 50vh !important; } .vich-cmd-group-label { font-family: 'Poppins', sans-serif !important; font-size: 0.6875rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--vich-ink-muted) !important; padding: 0.65rem 0.75rem 0.25rem !important; } .vich-cmd-item { display: flex !important; align-items: center !important; gap: 0.75rem !important; padding: 0.65rem 0.85rem !important; border-radius: 10px !important; cursor: pointer !important; color: var(--vich-ink) !important; text-decoration: none !important; margin-bottom: 2px !important; transition: all 0.12s ease !important; } .vich-cmd-item:hover, .vich-cmd-item.active { background: rgba(14, 165, 233, 0.12) !important; color: var(--vich-sky) !important; } .vich-cmd-item-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 8px !important; background: var(--vich-surface-soft) !important; color: var(--vich-sky) !important; flex-shrink: 0 !important; } .vich-cmd-item-title { flex: 1 !important; font-size: 0.875rem !important; font-weight: 500 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .vich-cmd-item-badge { font-size: 0.6875rem !important; font-weight: 600 !important; padding: 0.15rem 0.45rem !important; border-radius: 6px !important; background: var(--vich-surface-soft) !important; border: 1px solid var(--vich-line) !important; color: var(--vich-ink-muted) !important; } .vich-cmd-item-arrow { color: var(--vich-ink-muted) !important; opacity: 0.5 !important; transition: transform 0.15s ease !important; } .vich-cmd-item:hover .vich-cmd-item-arrow, .vich-cmd-item.active .vich-cmd-item-arrow { opacity: 1 !important; transform: translateX(2px) !important; } .vich-cmd-empty { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; padding: 2.5rem 1rem !important; color: var(--vich-ink-muted) !important; font-size: 0.875rem !important; text-align: center !important; } .vich-cmd-empty-icon { opacity: 0.3 !important; } .vich-cmd-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0.55rem 1rem !important; border-top: 1px solid var(--vich-line) !important; background: var(--vich-surface-soft) !important; font-size: 0.75rem !important; color: var(--vich-ink-muted) !important; } .vich-cmd-hints { display: flex !important; align-items: center !important; gap: 0.85rem !important; } .vich-cmd-hint { display: inline-flex !important; align-items: center !important; gap: 0.25rem !important; } .vich-cmd-telemetry { display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; font-family: 'Poppins', sans-serif !important; font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; color: #10B981 !important; } body.vich-cmd-open { overflow: hidden !important; } /* ========================================================================== LEFT SIDEBAR ACCOUNT & CONTACTS SECTION ========================================================================== */ .vich-sidebar-account-card, .vich-sidebar-info-box { background: var(--vich-surface-soft) !important; border: 1px solid var(--vich-line) !important; border-radius: 12px !important; padding: 0.75rem !important; margin-bottom: 0.6rem !important; } .vich-sidebar-info-header, .vich-sidebar-account-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 0.45rem !important; } .vich-sidebar-info-title, .vich-sidebar-account-title { display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; font-family: 'Poppins', sans-serif !important; font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--vich-ink-muted) !important; } .vich-sidebar-account-label { display: block !important; font-family: 'Poppins', sans-serif !important; font-size: 0.61rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--vich-ink-muted) !important; } .vich-sidebar-mini-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; border-radius: 6px !important; color: var(--vich-ink-muted) !important; transition: all 0.15s ease !important; } .vich-sidebar-mini-action:hover { color: var(--vich-sky) !important; background: var(--vich-surface) !important; } .vich-sidebar-mini-pill { display: inline-flex !important; align-items: center !important; gap: 0.2rem !important; padding: 0.15rem 0.5rem !important; border-radius: 9999px !important; background: var(--vich-surface) !important; border: 1px solid var(--vich-line) !important; color: var(--vich-sky) !important; font-family: 'Poppins', sans-serif !important; font-size: 0.6875rem !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.15s ease !important; } .vich-sidebar-mini-pill:hover { background: var(--vich-cta) !important; border-color: var(--vich-cta) !important; color: #FFFFFF !important; text-decoration: none !important; } .vich-sidebar-user-name, .vich-sidebar-account-name { font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 600 !important; color: var(--vich-ink) !important; line-height: 1.25 !important; } .vich-sidebar-user-company, .vich-sidebar-account-company { font-size: 0.72rem !important; color: var(--vich-sky) !important; font-weight: 500 !important; margin-top: 1px !important; } .vich-sidebar-address-block { font-size: 0.72rem !important; color: var(--vich-ink-muted) !important; line-height: 1.4 !important; margin-top: 0.35rem !important; padding-top: 0.35rem !important; border-top: 1px dashed var(--vich-line) !important; } .vich-sidebar-contact-meta { display: flex !important; align-items: center !important; gap: 0.4rem !important; font-size: 0.72rem !important; color: var(--vich-ink-muted) !important; margin-top: 0.3rem !important; } .vich-sidebar-contact-meta a { color: var(--vich-sky) !important; text-decoration: none !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .vich-sidebar-contact-meta a:hover { text-decoration: underline !important; } .vich-sidebar-contacts-list { display: flex !important; flex-direction: column !important; gap: 0.25rem !important; } .vich-sidebar-contact-row { display: flex !important; align-items: center !important; gap: 0.45rem !important; padding: 0.35rem 0.5rem !important; border-radius: 8px !important; color: var(--vich-ink) !important; font-size: 0.75rem !important; font-weight: 500 !important; text-decoration: none !important; transition: all 0.12s ease !important; } .vich-sidebar-contact-row:hover { background: rgba(14, 165, 233, 0.08) !important; color: var(--vich-sky) !important; text-decoration: none !important; } .vich-contact-avatar-dot { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: rgba(14, 165, 233, 0.15) !important; color: var(--vich-sky) !important; font-size: 0.6rem !important; font-weight: 700 !important; flex-shrink: 0 !important; } .vich-contact-row-name { flex: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .vich-contact-row-arrow { color: var(--vich-ink-muted) !important; opacity: 0.4 !important; } .vich-sidebar-empty-state { padding: 0.5rem !important; font-size: 0.72rem !important; color: var(--vich-ink-muted) !important; text-align: center !important; } .vich-sidebar-setting-row { display: flex !important; align-items: center !important; gap: 0.5rem !important; padding: 0.45rem 0.65rem !important; border-radius: 8px !important; font-size: 0.75rem !important; color: var(--vich-ink) !important; border: 1px solid transparent !important; background: transparent !important; } .vich-sidebar-setting-row:hover { background: var(--vich-surface) !important; color: var(--vich-sky) !important; } /* Sidebar Balances & Amounts Box */ .vich-sidebar-amounts-box .amounts .list-group { margin: 0 !important; border: none !important; background: transparent !important; } .vich-sidebar-amounts-box .amounts .list-group-item.credits { background: var(--vich-surface) !important; border: 1px solid var(--vich-line) !important; border-radius: 8px !important; padding: 0.45rem 0.65rem !important; margin-bottom: 0.35rem !important; display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 0.75rem !important; color: var(--vich-ink) !important; } .vich-sidebar-amounts-box .amounts .currency_value { font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; color: #10B981 !important; } .vich-sidebar-amounts-box .amounts a.list-group-item { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; width: 100% !important; padding: 0.38rem 0.75rem !important; border-radius: 8px !important; background: var(--vich-cta) !important; border: 1px solid var(--vich-cta) !important; color: #FFFFFF !important; font-family: 'Poppins', sans-serif !important; font-size: 0.75rem !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.15s ease !important; margin-top: 0.25rem !important; } .vich-sidebar-amounts-box .amounts a.list-group-item:hover { background: var(--vich-sky) !important; color: #FFFFFF !important; text-decoration: none !important; } /* Sidebar Search Input & Dark Mode Enhancements */ .vich-managed-search-wrap { margin-bottom: 0.5rem !important; } .vich-sidebar-input { background: var(--vich-surface) !important; border: 1px solid var(--vich-line) !important; color: var(--vich-ink) !important; font-size: 0.75rem !important; border-radius: 8px !important; padding: 0.35rem 0.65rem !important; } .vich-sidebar-input:focus { border-color: var(--vich-sky) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15) !important; } html.dark .vich-sidebar-account-card, html.dark .vich-sidebar-info-box { background: rgba(15, 23, 42, 0.8) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html.dark .vich-sidebar-amounts-box .amounts .list-group-item.credits { background: rgba(30, 41, 59, 0.7) !important; border-color: rgba(255, 255, 255, 0.08) !important; } /* Dashboard in-page filter loading state */ .vich-dashboard-table-pane .vich-filter-loading { opacity: .55; pointer-events: none; transition: opacity .15s ease; } /* Core-loaded stat cards: pin the "view all" arrow to the top-right corner instead of letting the stretched-link flex layout center it */ .right_content .cards .vich-simple-stat-card .vich-stat-jump-arrow, .right_content .cards .vich-simple-stat-card a.vich-stat-jump-arrow { position: absolute !important; top: 0.85rem !important; right: 0.85rem !important; left: auto !important; bottom: auto !important; width: 28px !important; height: 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; z-index: 10 !important; opacity: 0.45 !important; background: transparent !important; } .right_content .cards .vich-simple-stat-card:hover .vich-stat-jump-arrow { opacity: 0.85 !important; } .right_content .cards .vich-simple-stat-card .vich-arrow-inline { position: absolute !important; top: 1.05rem !important; right: 1.05rem !important; z-index: 10 !important; opacity: 0.45 !important; } /* Dashboard filter request spinner */ .vich-dashboard-table-pane .card, .vich-dashboard-table-pane .card-body { position: relative; } .vich-card-spinner { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 3px solid rgba(14, 165, 233, 0.25); border-top-color: #0EA5E9; border-radius: 50%; z-index: 15; animation: vich-spin 0.7s linear infinite; } @keyframes vich-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .vich-card-spinner { animation-duration: 1.4s; } } /* ========================================================================== LEFT ACCOUNT RAIL — static flow column in a flex row (v2.4.7) One scrollbar (the document's); rail pins with sticky, never scrolls itself. ========================================================================== */ .vich-saas-app-layout { width: 100% !important; /* Sticky-footer: row min-height mirrors the main column via the same token so neither overshoots the other; the desktop media query below flips direction to row. Per-child min-heights carry the gutter rail. */ min-height: calc(100vh - var(--vich-navbar-h)) !important; position: relative !important; } .vich-account-rail { position: sticky !important; /* desktop-only effect; inert on <992 (fixed drawer below) */ top: var(--vich-navbar-h) !important; /* navbar 60 + border 1 + subnav 48; 61 on dashboard via body token */ width: 280px !important; max-width: 280px !important; min-width: 280px !important; z-index: 980 !important; /* below navbar (1000) & subnav (995), above content */ background: var(--vich-surface-soft) !important; border-right: 1px solid var(--vich-line) !important; overflow: visible !important; /* no internal scrollbar on desktop */ } html.dark .vich-account-rail { border-right-color: rgba(255, 255, 255, 0.08) !important; } .vich-rail-inner { display: flex !important; flex-direction: column !important; min-height: 100% !important; /* mobile fixed drawer; desktop override below */ padding: 1rem 0.85rem !important; gap: 0.35rem !important; } /* Identity header */ .vich-rail-identity { display: flex !important; align-items: flex-start !important; gap: 0.65rem !important; padding-bottom: 0.85rem !important; margin-bottom: 0.6rem !important; border-bottom: 1px solid var(--vich-line) !important; } .vich-rail-identity-text { display: flex !important; flex-direction: column !important; gap: 1px !important; min-width: 0 !important; line-height: 1.3 !important; } .vich-rail-hello { font-family: 'Open Sans', sans-serif !important; font-size: 0.6875rem !important; color: var(--vich-ink-muted) !important; } .vich-rail-name { font-family: 'Poppins', sans-serif !important; font-size: 0.9rem !important; font-weight: 700 !important; color: var(--vich-ink) !important; overflow-wrap: anywhere !important; } .vich-rail-email { font-size: 0.72rem !important; color: var(--vich-sky) !important; text-decoration: none !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .vich-rail-email:hover { text-decoration: underline !important; } /* Close button — mobile off-canvas only */ .vich-rail-close { display: none !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; flex-shrink: 0 !important; border-radius: 8px !important; background: var(--vich-surface) !important; border: 1px solid var(--vich-line) !important; color: var(--vich-ink-muted) !important; cursor: pointer !important; transition: all 0.15s ease !important; } .vich-rail-close:hover { color: var(--vich-ink) !important; background: rgba(14, 165, 233, 0.1) !important; } /* Blocks & nav list */ .vich-rail-block { margin-bottom: 0.5rem !important; } .vich-rail-nav-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .vich-rail-nav-link { display: flex !important; align-items: center !important; gap: 0.65rem !important; min-height: 36px !important; padding: 0.45rem 0.75rem !important; border-radius: 10px !important; font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 500 !important; color: var(--vich-ink) !important; text-decoration: none !important; transition: background-color 0.15s ease, color 0.15s ease !important; } .vich-rail-nav-link svg { color: var(--vich-sky) !important; flex-shrink: 0 !important; } .vich-rail-nav-link:hover { background: rgba(14, 165, 233, 0.08) !important; color: var(--vich-cta) !important; text-decoration: none !important; } html.dark .vich-rail-nav-link:hover { color: #38BDF8 !important; } .vich-rail-nav-link:focus-visible { outline: 2px solid var(--vich-sky) !important; outline-offset: 1px !important; } /* Footer — pinned to rail bottom */ .vich-rail-footer { margin-top: auto !important; padding-top: 0.75rem !important; border-top: 1px solid var(--vich-line) !important; display: flex !important; flex-direction: column !important; gap: 0.4rem !important; } .vich-rail-status { display: flex !important; align-items: center !important; gap: 6px !important; padding: 0.4rem 0.5rem !important; border-radius: 8px !important; background: var(--vich-surface) !important; border: 1px solid var(--vich-line) !important; } .vich-rail-logout { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; min-height: 36px !important; padding: 0.45rem 0.75rem !important; border-radius: 10px !important; font-family: 'Poppins', sans-serif !important; font-size: 0.8125rem !important; font-weight: 500 !important; color: #EF4444 !important; text-decoration: none !important; transition: background-color 0.15s ease !important; } .vich-rail-logout:hover { background: rgba(239, 68, 68, 0.08) !important; color: #EF4444 !important; text-decoration: none !important; } html.dark .vich-rail-logout { color: #F87171 !important; } html.dark .vich-rail-logout:hover { background: rgba(248, 113, 113, 0.1) !important; color: #F87171 !important; } /* Desktop: rail + main are flow siblings in a flex row; mobile keeps plain block flow (rail is a fixed overlay drawer there, so no flex basis needed). */ @media (min-width: 992px) { .vich-saas-app-layout { display: flex !important; align-items: flex-start !important; /* required for the rail's sticky to engage */ } .vich-account-rail { flex: 0 0 280px !important; min-height: calc(100vh - var(--vich-navbar-h)) !important; /* gutter fills column, footer pins */ } .vich-rail-inner { min-height: calc(100vh - var(--vich-navbar-h)) !important; } .vich-saas-app-main { flex: 1 1 auto !important; min-width: 0 !important; /* allow shrink beside the 280px rail */ } .vich-rail-toggle { display: none !important; /* rail is always visible — toggle would duplicate it */ } } /* Backdrop (mobile only, hidden on desktop) */ .vich-rail-backdrop { display: none !important; } /* Off-canvas rail (< 992px) — overlay drawer, fixed is correct here */ @media (max-width: 991.98px) { .vich-account-rail { position: fixed !important; /* overrides sticky; overlay, not a flow column */ top: 0 !important; bottom: 0 !important; height: 100vh !important; max-width: 85vw !important; flex: 0 0 auto !important; overflow-y: auto !important; /* drawer scrolls its own content full-height */ z-index: 1050 !important; transform: translateX(-100%) !important; visibility: hidden !important; /* out of tab order while closed */ transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.25s !important; background: var(--vich-surface) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important; border-right: none !important; } body.vich-rail-open .vich-account-rail { transform: translateX(0) !important; visibility: visible !important; } .vich-rail-close { display: inline-flex !important; } .vich-rail-backdrop { position: fixed !important; display: block !important; inset: 0 !important; background: rgba(11, 17, 32, 0.65) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; z-index: 1040 !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.25s ease !important; } body.vich-rail-open .vich-rail-backdrop { opacity: 1 !important; pointer-events: auto !important; } body.vich-rail-open { overflow: hidden !important; } /* Rail turns surface here — push cards back to surface-soft for contrast (body prefix raises specificity over the end-of-file lift rule) */ body .vich-account-rail .vich-sidebar-account-card, body .vich-account-rail .vich-sidebar-info-box, body .vich-account-rail .vich-rail-status { background: var(--vich-surface-soft) !important; } } @media (prefers-reduced-motion: reduce) { .vich-account-rail { transition: none !important; } .vich-rail-backdrop { transition: none !important; } } /* Mounted #my-info inside the rail */ #vich-sidebar-account-slot .vich-sidebar-myinfo-wrap { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; } #vich-sidebar-account-slot .vich-sidebar-info-box { margin-bottom: 0 !important; } /* Lift cards off the rail canvas (both default to surface-soft) */ .vich-account-rail .vich-sidebar-account-card, .vich-account-rail .vich-sidebar-info-box { background: var(--vich-surface) !important; } /* ========================================================================== DASHBOARD MODE — top sub-nav hidden (bento cards are the section nav there). Navbar height drops to 61px (60px bar + 1px border, sub-nav gone). Setting the token on cascades into every calc(100vh - var()) consumer and the rail's sticky top — geometry stays harmonized with zero duplicated min-height overrides. Safe at every width: the mobile drawer pins top:0 independently, so only the column/row min-heights (footer pin) read this. ========================================================================== */ body.vich-dashboard-mode .vich-top-subnav { display: none !important; } body.vich-dashboard-mode { --vich-navbar-h: 61px; }