/* ====================================================== THEME TOKENS - Light defaults in :root - Dark overrides in html[data-bs-theme="dark"] ====================================================== */ :root { /* -------------------------------------------- Core color system NOTE: --gc-blue is DB-driven in app.blade :root fallback only applies if DB vars are missing -------------------------------------------- */ --gc-blue: var(--gc-blue, #1a73e8); /* Map Bootstrap "primary" to icon blue */ --bs-primary: var(--gc-blue); --bs-link-color: var(--gc-blue); /* If you need RGB utilities for primary and want accuracy, set --bs-primary-rgb in app.blade too (recommended). */ /* --bs-primary-rgb: 26, 115, 232; */ /* Brand tokens (DB-driven in app.blade via :root variables) */ --ats-primary: var(--ats-primary, #039426); --ats-primary-rgb: var(--ats-primary-rgb, 3, 148, 38); --ats-icon-color: var(--ats-icon-color, #ffffff); /* Page */ --ats-bg: #f6f8fb; --ats-border: rgba(0, 0, 0, 0.08); --ats-muted: #6c757d; /* Sidebar / surface system */ --gc-surface: #ffffff; --gc-border: #e6e8eb; --gc-text: #202124; --gc-muted: #5f6368; /* Hover/active */ --gc-hover: rgba(26, 115, 232, 0.08); --gc-active: rgba(26, 115, 232, 0.14); --gc-radius: 14px; --ats-sidebar-width: 260px; --ats-sidebar-mini-width: 78px; /* Flyout submenu (mini mode) */ --ats-flyout-width: 230px; --ats-flyout-radius: 14px; --ats-flyout-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); /* Animations */ --ats-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ats-dur: 220ms; /* Typography scale aligned with index table font tokens */ --ats-index-font-sm: var(--saas-dt-fs-sm, 0.8rem); --ats-index-font-xs: var(--saas-dt-fs-xs, 0.72rem); --ats-nav-font-size: clamp(0.88rem, calc(var(--ats-index-font-sm) + 0.1rem), 0.98rem); --ats-subnav-font-size: calc(var(--ats-nav-font-size) - 0.04rem); --ats-nav-icon-size: calc(var(--ats-nav-font-size) + 0.08rem); --ats-topbar-font-size: clamp( 0.8rem, calc(var(--ats-index-font-sm) + 0.03rem), 0.86rem ); --ats-topbar-icon-size: calc(var(--ats-topbar-font-size) + 0.1rem); --ats-topbar-brand-size: clamp( 0.9rem, calc(var(--ats-index-font-sm) + 0.15rem), 1rem ); } /* ====================================================== DARK MODE OVERRIDES (Bootstrap 5.3) Triggered by: ====================================================== */ html[data-bs-theme="dark"] { --ats-bg: var(--bs-body-bg); --ats-border: rgba(255, 255, 255, 0.12); --ats-muted: rgba(229, 231, 235, 0.72); --gc-surface: var(--bs-body-bg); --gc-border: rgba(255, 255, 255, 0.1); --gc-text: #e5e7eb; --gc-muted: rgba(229, 231, 235, 0.7); /* subtle neutral hover/active in dark mode */ --gc-hover: rgba(255, 255, 255, 0.06); --gc-active: rgba(255, 255, 255, 0.1); --ats-flyout-shadow: 0 16px 32px rgba(0, 0, 0, 0.55); /* Optional: boost icon/primary visibility in dark mode */ --gc-blue: color-mix(in srgb, var(--gc-blue) 85%, #ffffff 15%); } /* ====================================================== BASE ====================================================== */ body { background: var(--ats-bg) !important; } /* Logo size only */ .ats-navbar-logo { height: 46px; } /* Icon buttons (topbar + sidebar burger) */ .ats-icon-btn { color: var(--gc-text) !important; text-decoration: none !important; padding: 0.35rem 0.55rem !important; border-radius: 10px; line-height: 1; } .ats-icon-btn i { line-height: 1; } .ats-icon-btn:hover { background: var(--gc-hover); } /* ====================================================== SIDEBAR + OFFCANVAS ====================================================== */ .ats-sidebar { width: var(--ats-sidebar-width); background: var(--gc-surface); border-right: 1px solid var(--gc-border); transition: width var(--ats-dur) var(--ats-ease); will-change: width; } .ats-sidebar-inner { height: 100%; overflow-y: auto; scrollbar-gutter: stable; } /* Offcanvas (mobile) */ .ats-offcanvas { width: min(92vw, var(--ats-sidebar-width)); background: var(--gc-surface); } .offcanvas.offcanvas-start.ats-offcanvas { width: min(92vw, var(--ats-sidebar-width)); } /* User avatar */ .ats-avatar { width: 38px; height: 38px; border-radius: 12px; background: var(--ats-primary); color: var(--ats-icon-color); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; } /* ====================================================== NAV LINKS ====================================================== */ .ats-navlink, .ats-navlink-btn { width: 100%; display: flex; align-items: center; gap: 12px; border-radius: var(--gc-radius); padding: 10px 12px; color: var(--gc-text); text-decoration: none; font-size: var(--ats-nav-font-size); line-height: 1.24; } .ats-navlink-btn { background: transparent; border: 0; text-align: left; } .ats-navlink i, .ats-navlink-btn i { width: 22px; flex: 0 0 22px; text-align: center; color: var(--gc-muted); font-size: var(--ats-nav-icon-size); line-height: 1; } /* Interaction polish */ .ats-navlink i, .ats-navlink-btn i, .ats-navlink, .ats-navlink-btn { transition: background-color 160ms var(--ats-ease), color 160ms var(--ats-ease), padding 160ms var(--ats-ease); } .ats-navlink:hover, .ats-navlink-btn:hover { background: var(--gc-hover); color: var(--gc-text); } .ats-navlink.active, .ats-navlink-btn.active { background: var(--gc-active); font-weight: 800; } .ats-navlink.active i, .ats-navlink-btn.active i { color: var(--gc-blue); } /* Chevron rotate */ .ats-chevron { transition: transform 150ms var(--ats-ease); color: var(--gc-muted); } .ats-chevron.rot { transform: rotate(90deg); } /* ====================================================== SUBNAV ====================================================== */ .ats-subnav { padding-left: 40px; gap: 4px; } .ats-subnavlink { width: 100%; display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 8px 10px; color: var(--gc-text); text-decoration: none; font-size: var(--ats-subnav-font-size); line-height: 1.22; transition: background-color 160ms var(--ats-ease), color 160ms var(--ats-ease); } .ats-subnavlink i { width: 20px; text-align: center; color: var(--gc-muted); font-size: calc(var(--ats-nav-icon-size) - 0.06rem); line-height: 1; } .ats-subnavlink:hover { background: var(--gc-hover); color: var(--gc-text); } .ats-subnavlink.active { background: var(--gc-active); font-weight: 800; } /* ====================================================== MAIN CONTENT SPACING ====================================================== */ .ats-main { padding: 18px 18px 18px 12px; } .ats-container { padding-left: 12px !important; padding-right: 18px !important; } /* ====================================================== MINI SIDEBAR (DESKTOP) + HOVER FLYOUT ====================================================== */ @media (min-width: 992px) { body.ats-sidebar-mini .ats-sidebar-inner { scrollbar-gutter: auto; /* don't reserve space */ overflow-y: auto; /* keep scrolling */ -ms-overflow-style: none; /* IE/Edge legacy */ scrollbar-width: none; /* Firefox */ } body.ats-sidebar-mini .ats-sidebar-inner::-webkit-scrollbar { width: 0; height: 0; display: none; /* Chromium/Safari */ } .ats-main { transition: padding-left var(--ats-dur) var(--ats-ease); } body.ats-sidebar-mini .ats-sidebar { width: var(--ats-sidebar-mini-width); } body.ats-sidebar-mini .ats-sidebar .min-w-0 { display: none !important; } body.ats-sidebar-mini .ats-sidebar .ats-navlink span, body.ats-sidebar-mini .ats-sidebar .ats-navlink-btn span { display: none !important; } body.ats-sidebar-mini .ats-sidebar .ats-chevron { display: none !important; } body.ats-sidebar-mini .ats-sidebar .ats-navlink, body.ats-sidebar-mini .ats-sidebar .ats-navlink-btn { justify-content: center; align-items: center; padding: 12px 0; gap: 0; } body.ats-sidebar-mini .ats-sidebar .ats-navlink i, body.ats-sidebar-mini .ats-sidebar .ats-navlink-btn i { width: 24px; flex: 0 0 24px; text-align: center; margin: 0; font-size: var(--ats-nav-icon-size); } body.ats-sidebar-mini .ats-sidebar .ats-navlink.active i, body.ats-sidebar-mini .ats-sidebar .ats-navlink-btn.active i { color: var(--gc-blue); } body.ats-sidebar-mini .ats-sidebar .ats-navlink:hover i, body.ats-sidebar-mini .ats-sidebar .ats-navlink-btn:hover i { color: var(--gc-blue); } /* Flyout */ body.ats-sidebar-mini .ats-sidebar .nav-item { position: relative; } body.ats-sidebar-mini .ats-sidebar .nav-item > .collapse { display: block !important; height: auto !important; position: absolute; top: 0; left: calc(100% + 10px); width: var(--ats-flyout-width); padding: 10px; background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: var(--ats-flyout-radius); box-shadow: var(--ats-flyout-shadow); z-index: 1050; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 140ms var(--ats-ease), transform 160ms var(--ats-ease), visibility 0ms linear 160ms; } body.ats-sidebar-mini .ats-sidebar .nav-item:hover > .collapse, body.ats-sidebar-mini .ats-sidebar .nav-item > .collapse:hover { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition: opacity 140ms var(--ats-ease), transform 160ms var(--ats-ease), visibility 0ms; } body.ats-sidebar-mini .ats-sidebar .nav-item > .collapse::before { content: attr(data-ats-flyout-title); display: block; font-weight: 800; font-size: 0.85rem; color: var(--gc-muted); padding: 2px 6px 10px 6px; } body.ats-sidebar-mini .ats-sidebar .nav-item > .collapse:not([data-ats-flyout-title])::before { display: none; } body.ats-sidebar-mini .ats-sidebar .nav-item > .collapse .ats-subnav { padding-left: 0; margin: 0; } body.ats-sidebar-mini .ats-sidebar .nav-item > .collapse .ats-subnavlink { padding: 10px 12px; border-radius: 12px; font-size: var(--ats-subnav-font-size); } .ats-main { padding-left: 10px; } .ats-container { padding-left: 10px !important; } } /* ====================================================== UTILITIES ====================================================== */ .page-wrap { max-width: 1100px; } .rounded-12 { border-radius: 12px !important; } .card-soft { background: var(--gc-surface); border: 1px solid var(--ats-border); border-radius: 12px; body.ats-sidebar-mini .ats-sidebar-inner { scrollbar-gutter: auto; /* don't reserve space */ overflow-y: auto; /* keep scrolling */ -ms-overflow-style: none; /* IE/Edge legacy */ scrollbar-width: none; /* Firefox */ } body.ats-sidebar-mini .ats-sidebar-inner::-webkit-scrollbar { width: 0; height: 0; display: none; /* Chromium/Safari */ } } .text-muted-ats { color: var(--ats-muted) !important; } .form-actions .btn { min-height: 44px; padding: 0.55rem 1.1rem; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; } /* Brand-colored text */ .ats-brand-text, .ats-user-name { color: var(--gc-blue) !important; } .ats-topbar .btn.btn-link { font-size: var(--ats-topbar-font-size); line-height: 1.15; } .ats-topbar .btn.btn-link > i, .ats-topbar .dropdown-toggle > i { font-size: var(--ats-topbar-icon-size); line-height: 1; } .ats-topbar #atsAccountDropdown .fa-circle-user { font-size: var(--ats-topbar-icon-size) !important; } .ats-topbar .ats-icon-btn { font-size: var(--ats-topbar-font-size); } .ats-topbar .ats-icon-btn i { font-size: var(--ats-topbar-icon-size); } .ats-topbar .navbar-brand { font-size: var(--ats-topbar-brand-size); line-height: 1.1; } .ats-topbar .ats-navbar-logo { height: 38px; } @media (max-width: 575.98px) { .ats-topbar .ats-navbar-logo { height: 34px; } } .ats-topbar .ats-account-menu { min-width: 15.5rem; padding: 0.34rem 0; font-size: var(--ats-topbar-font-size); } .ats-topbar .ats-account-menu .dropdown-divider { margin: 0.3rem 0; } .ats-topbar .ats-account-menu .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.82rem; font-size: var(--ats-topbar-font-size); line-height: 1.2; } .ats-topbar .ats-account-menu .dropdown-item > i { width: 1rem; flex: 0 0 1rem; text-align: center; font-size: calc(var(--ats-topbar-icon-size) - 0.04rem); line-height: 1; } .ats-topbar .ats-account-head { padding: 0.5rem 0.82rem !important; } .ats-topbar .ats-account-head .ats-user-name { font-size: calc(var(--ats-topbar-font-size) + 0.01rem); line-height: 1.2; } .ats-topbar .ats-account-head .text-muted { font-size: calc(var(--ats-topbar-font-size) - 0.06rem) !important; } .ats-topbar .ats-account-theme-row { padding: 0.5rem 0.82rem !important; font-size: var(--ats-topbar-font-size); } .ats-topbar .ats-account-theme-row #atsThemeIcon { font-size: calc(var(--ats-topbar-icon-size) - 0.04rem); line-height: 1; } .ats-topbar .ats-account-theme-row .form-check-input { width: 1.9rem; height: 1rem; margin-top: 0; } /* Keep dark-mode chrome surfaces visually consistent with page body */ html[data-bs-theme="dark"] .ats-sidebar, html[data-bs-theme="dark"] .ats-offcanvas, html[data-bs-theme="dark"] .ats-topbar, html[data-bs-theme="dark"] .ats-topbar .dropdown-menu, html[data-bs-theme="dark"] .ats-topbar .ats-account-menu { background: var(--ats-bg) !important; } html[data-bs-theme="dark"] .ats-topbar { border-bottom-color: var(--gc-border) !important; } html[data-bs-theme="dark"] .ats-topbar .dropdown-item, html[data-bs-theme="dark"] .ats-topbar .ats-account-head, html[data-bs-theme="dark"] .ats-topbar .ats-account-theme-row { background: transparent; } html[data-bs-theme="dark"] .ats-topbar .dropdown-divider { border-top-color: var(--gc-border); } /* ========================================= ATS Brand Text – Masking Animation ========================================= */ .ats-brand-text { /* Use icon color from your app */ --brand-color: var(--ats-primary, #039426); position: relative; display: inline-block; font-weight: 700; letter-spacing: 0.02em; /* Gradient that will animate */ background: linear-gradient( 90deg, transparent 0%, var(--brand-color) 50%, transparent 100% ); background-size: 200% 100%; background-position: 0% 0%; /* Text masking */ -webkit-background-clip: text; background-clip: text; color: transparent; animation: ats-text-reveal 2.2s ease-out forwards; } /* Dark mode still readable after animation */ html[data-bs-theme="dark"] .ats-brand-text { text-shadow: 0 0 12px color-mix(in srgb, var(--brand-color) 35%, transparent); } /* Animation */ @keyframes ats-text-reveal { 0% { background-position: 0% 0%; opacity: 0; } 30% { opacity: 1; } 100% { background-position: 100% 0%; } } /* ========================================= Fallback (no background-clip support) ========================================= */ @supports not (-webkit-background-clip: text) { .ats-brand-text { color: var(--brand-color); background: none; animation: ats-fade-in 0.8s ease-out forwards; } } @keyframes ats-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }