/* ═══════════════════════════════════════════════════════════════════════════ HRIS Glass Theme — premium glassmorphism applied to ALL pages. ─────────────────────────────────────────────────────────────────────────── Loaded AFTER style.css / widgets.css so its rules take priority. Component rules (.card, .btn, input, table, .badge, .modal, etc.) are GLOBAL — no parent-scope required — so they apply on: · Authenticated app pages (under .main-content) · Standalone pages with their own (auth.php, hours_summary, payroll_history, employee_register, reset_password, clearance_system, employee_time_tracker_popup) · Any future page that uses the same shared class names. Page background gradient is applied to body, .main-content, AND .auth-page so even the login screen and floating popups pick up the mesh. What it does NOT do: · Change layout, positioning, dimensions, flex/grid configuration · Override inline styles set on individual pages (those still win) · Touch any JS class hooks (.is-open, .active, .selected, etc.) · Change DOM structure, routing, computations, permissions, or queries Reusable utility classes: .glass-card, .glass-panel, .glass-btn, .glass-badge, .glass-form-control, .glass-modal, .glass-drawer, .glass-table, .glass-filter. ═══════════════════════════════════════════════════════════════════════════ */ :root { --gt-blur: 22px; --gt-blur-lg: 28px; --gt-blur-sm: 14px; --gt-bg: rgba(255, 255, 255, 0.62); --gt-bg-strong: rgba(255, 255, 255, 0.78); --gt-bg-soft: rgba(255, 255, 255, 0.45); --gt-border: rgba(255, 255, 255, 0.72); --gt-border-soft:rgba(255, 255, 255, 0.45); --gt-ink: #0f172a; --gt-mute: #64748b; --gt-line: rgba(15, 23, 42, 0.06); --gt-shadow-sm: 0 1px 0 rgba(255,255,255,.6) inset, 0 4px 12px -4px rgba(15,23,42,.08); --gt-shadow-md: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 28px -12px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.04); --gt-shadow-lg: 0 1px 0 rgba(255,255,255,.7) inset, 0 22px 44px -16px rgba(15,23,42,.22), 0 4px 12px rgba(15,23,42,.06); --gt-radius: 16px; --gt-radius-sm: 10px; --gt-radius-lg: 18px; --gt-c-success: #16a34a; --gt-c-success-bg: linear-gradient(135deg, rgba(34,197,94,.18), rgba(34,197,94,.08)); --gt-c-warning: #d97706; --gt-c-warning-bg: linear-gradient(135deg, rgba(245,158,11,.20), rgba(245,158,11,.08)); --gt-c-danger: #dc2626; --gt-c-danger-bg: linear-gradient(135deg, rgba(239,68,68,.18), rgba(239,68,68,.08)); --gt-c-info: #2563eb; --gt-c-info-bg: linear-gradient(135deg, rgba(37,99,235,.20), rgba(37,99,235,.08)); --gt-c-purple: #7c3aed; --gt-c-purple-bg: linear-gradient(135deg, rgba(124,58,237,.20), rgba(124,58,237,.08)); --gt-c-mute: #6b7280; --gt-c-mute-bg: linear-gradient(135deg, rgba(148,163,184,.22), rgba(148,163,184,.08)); } /* ─────────────────────────────────────────────────────────────────────────── GLOBAL BACKGROUND — soft enterprise mesh + slow floating blobs. Applied to body so EVERY page gets it, plus .main-content and .auth-page for cases where they need the gradient on a contained surface. ─────────────────────────────────────────────────────────────────────────── */ body, .main-content, .auth-page { position: relative; background: radial-gradient(circle at 12% 16%, rgba(99, 102, 241, .12), transparent 42%), radial-gradient(circle at 88% 8%, rgba(56, 189, 248, .12), transparent 45%), radial-gradient(circle at 78% 92%, rgba(236, 72, 153, .08), transparent 48%), radial-gradient(circle at 25% 88%, rgba(34, 197, 94, .07), transparent 45%), linear-gradient(180deg, #f7f9ff 0%, #eef3fb 100%); isolation: isolate; } /* Soft-light "blobs" — purely decorative, behind everything. Use on body so they show on standalone pages too. */ body::before, body::after { content: ''; position: fixed; pointer-events: none; z-index: 0; width: 360px; height: 360px; border-radius: 9999px; filter: blur(80px); opacity: .45; animation: gtFloatBlob 22s ease-in-out infinite alternate; } body::before { top: -60px; left: -80px; background: radial-gradient(circle, #a5b4fc 0%, transparent 70%); } body::after { top: 38vh; right: -100px; background: radial-gradient(circle, #7dd3fc 0%, transparent 70%); animation-delay: -8s; } @keyframes gtFloatBlob { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(28px,-18px,0) scale(1.06); } 100% { transform: translate3d(-22px,22px,0) scale(0.96); } } /* Lift the actual UI above the blobs so they don't intercept clicks. */ .app-layout, .auth-page, .main-content { position: relative; z-index: 1; } /* ─────────────────────────────────────────────────────────────────────────── SIDEBAR — deep frosted glass panel. The previous light glass was washing out the existing nav-link text colors (they were defined for a solid background). Switching to a dark navy glass gives much higher text contrast, matches premium SaaS / Apple VisionOS, and makes the active blue-gradient state pop. All nav-link text is force-set to light so the existing class names keep working — no DOM/JS changes. ─────────────────────────────────────────────────────────────────────────── */ .sidebar { background: #000000 !important; border-right: 1px solid rgba(255, 255, 255, 0.10); color: rgba(241, 245, 249, 0.92); } /* Header (logo + collapse button + company title) */ .sidebar .sidebar-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .sidebar .sidebar-title, .sidebar h1, .sidebar h2, .sidebar h3 { color: #fff !important; } .sidebar .sidebar-subtitle, .sidebar .sidebar-brand-text .sidebar-subtitle { color: rgba(203, 213, 225, 0.78) !important; } .sidebar .sidebar-collapse-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(241, 245, 249, 0.9); } .sidebar .sidebar-collapse-btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; } .sidebar .sb-dot { background: #34d399 !important; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); } /* Section labels (Overview, Employee Management, etc.) */ .sidebar .nav-section-label { color: rgba(148, 163, 184, 0.85) !important; font-weight: 700; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; padding-top: .9rem; } /* Nav links — base state */ .sidebar .nav-link { color: rgba(226, 232, 240, 0.88) !important; border-radius: var(--gt-radius-sm); transition: background .2s ease, color .2s ease, transform .15s ease; } .sidebar .nav-link .nav-icon, .sidebar .nav-link .nav-label { color: inherit !important; } /* Nav links — hover */ .sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff !important; transform: translateX(2px); } /* Nav links — active (selected page) */ .sidebar .nav-link.active { background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(99, 102, 241, 0.92)); color: #fff !important; box-shadow: 0 8px 22px -8px rgba(37, 99, 235, 0.65), 0 1px 0 rgba(255, 255, 255, 0.25) inset; } .sidebar .nav-link.active .nav-icon, .sidebar .nav-link.active .nav-label { color: #fff !important; } /* Bottom user / sign-out block */ .sidebar .sidebar-user { border-top: 1px solid rgba(255, 255, 255, 0.10); background: rgba(0, 0, 0, 0.55); } .sidebar .sidebar-user .user-email, .sidebar .sidebar-user .user-info, .sidebar .sidebar-user .sb-user-meta { color: rgba(241, 245, 249, 0.92) !important; } .sidebar .sidebar-user .user-email { font-weight: 600; } .sidebar .sidebar-user .sb-user-meta > div:not(.user-email) { color: rgba(148, 163, 184, 0.85) !important; } .sidebar .sb-avatar { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; color: #fff !important; box-shadow: 0 4px 12px -4px rgba(99, 102, 241, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.15) inset; } .sidebar .signout-btn, .sidebar form[action*="logout"] button, .sidebar a[href*="logout"] { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: rgba(241, 245, 249, 0.92) !important; } .sidebar .signout-btn:hover, .sidebar form[action*="logout"] button:hover, .sidebar a[href*="logout"]:hover { background: rgba(239, 68, 68, 0.22) !important; border-color: rgba(239, 68, 68, 0.45) !important; color: #fff !important; } /* Generic chip / unread badge inside sidebar (e.g. Messages count) */ .sidebar [style*="background:#ef4444"], .sidebar [style*="background: #ef4444"] { /* Existing inline-styled red badge — boost contrast by adding a thin ring */ box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.5); } /* Scrollbar inside the dark sidebar (WebKit) */ .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 6px; } .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); } .sidebar::-webkit-scrollbar-track { background: transparent; } /* Fallback for browsers without backdrop-filter */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sidebar { background: #000000 !important; } } @media (prefers-reduced-transparency: reduce) { .sidebar { background: #000000 !important; } } /* ─────────────────────────────────────────────────────────────────────────── TOPBAR — GOVERNMENT QUICK-LINKS (SSS / PhilHealth / Pag-IBIG) Group of three icon buttons that open the official government portals in a new tab. Each one is semantically icon'd (shield / heart / house) and tinted with its own brand-adjacent color on hover. Mobile collapses the text label so only the icon remains. ─────────────────────────────────────────────────────────────────────────── */ .topbar-gov-links { display: flex; align-items: center; gap: .4rem; padding: .15rem .35rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 1px 3px rgba(15,23,42,.05); } .topbar-gov-link { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border-radius: 9999px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-decoration: none; color: var(--gt-mute, #64748b); background: transparent; border: 1px solid transparent; transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .topbar-gov-link svg { flex-shrink: 0; transition: transform .18s ease; } .topbar-gov-link-label { white-space: nowrap; } .topbar-gov-link:hover, .topbar-gov-link:focus-visible { transform: scale(1.05); } .topbar-gov-link:hover svg, .topbar-gov-link:focus-visible svg { transform: rotate(-3deg) scale(1.05); } .topbar-gov-link:focus-visible { outline: 2px solid rgba(99, 102, 241, .55); outline-offset: 2px; } /* Per-agency tint on hover. Color cues match the dashboard cards already used on payroll_compliance_settings.php so the visual language stays consistent across the system. */ .topbar-gov-link--sss:hover, .topbar-gov-link--sss:focus-visible { background: rgba(37, 99, 235, .12); color: #1d4ed8; border-color: rgba(37, 99, 235, .25); box-shadow: 0 4px 12px -4px rgba(37, 99, 235, .35); } .topbar-gov-link--phic:hover, .topbar-gov-link--phic:focus-visible { background: rgba(225, 29, 72, .10); color: #9f1239; border-color: rgba(225, 29, 72, .25); box-shadow: 0 4px 12px -4px rgba(225, 29, 72, .30); } .topbar-gov-link--hdmf:hover, .topbar-gov-link--hdmf:focus-visible { background: rgba(22, 163, 74, .12); color: #15803d; border-color: rgba(22, 163, 74, .25); box-shadow: 0 4px 12px -4px rgba(22, 163, 74, .35); } /* Responsive: hide labels on smaller screens, keep icon-only chips so the topbar doesn't crowd the bell + profile. */ @media (max-width: 1180px) { .topbar-gov-link { padding: .35rem .45rem; } .topbar-gov-link-label { display: none; } } @media (max-width: 720px) { /* On phones, hide the whole group — the same agencies are still reachable via the cards on the Payroll Compliance Settings page. */ .topbar-gov-links { display: none; } } /* Match the existing fallback for non-blur browsers + reduced transparency */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .topbar-gov-links { background: rgba(255, 255, 255, 0.96); } } @media (prefers-reduced-transparency: reduce) { .topbar-gov-links { background: rgba(255, 255, 255, 0.96); } } @media (prefers-reduced-motion: reduce) { .topbar-gov-link, .topbar-gov-link svg { transition: none !important; } .topbar-gov-link:hover, .topbar-gov-link:focus-visible { transform: none !important; } .topbar-gov-link:hover svg, .topbar-gov-link:focus-visible svg { transform: none !important; } } /* ─────────────────────────────────────────────────────────────────────────── TOPBAR / MAIN HEADER — sticky glass strip. ─────────────────────────────────────────────────────────────────────────── */ .main-header, .topbar { background: rgba(255, 255, 255, 0.6) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--gt-border-soft); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 6px 18px -10px rgba(15,23,42,.08); } .topbar .search input { background: rgba(255,255,255,.65); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 4px rgba(15,23,42,.04); } /* ─────────────────────────────────────────────────────────────────────────── CARDS — universal frosted glass (applies to ALL .card on any page). ─────────────────────────────────────────────────────────────────────────── */ .card, .glass-card, .glass-panel { background: var(--gt-bg); -webkit-backdrop-filter: saturate(180%) blur(var(--gt-blur)); backdrop-filter: saturate(180%) blur(var(--gt-blur)); border: 1px solid var(--gt-border); border-radius: var(--gt-radius); box-shadow: var(--gt-shadow-md); transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease, background .25s ease; } .card:hover, .glass-card:hover, .glass-panel:hover { background: var(--gt-bg-strong); border-color: rgba(255, 255, 255, 0.92); box-shadow: var(--gt-shadow-lg); } /* Auth-card on the login page gets a slightly stronger surface so the form stays legible centered on the gradient. */ .auth-card { background: rgba(255, 255, 255, 0.78) !important; -webkit-backdrop-filter: saturate(180%) blur(28px) !important; backdrop-filter: saturate(180%) blur(28px) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; box-shadow: var(--gt-shadow-lg) !important; border-radius: var(--gt-radius-lg) !important; } /* ─────────────────────────────────────────────────────────────────────────── BUTTONS — keep existing primary/destructive logic, layer glass on top. ─────────────────────────────────────────────────────────────────────────── */ .btn, .glass-btn { background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(var(--gt-blur-sm)); backdrop-filter: blur(var(--gt-blur-sm)); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: var(--gt-shadow-sm); color: var(--gt-ink); border-radius: var(--gt-radius-sm); transition: background .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .btn:hover:not(:disabled), .glass-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 18px -6px rgba(15,23,42,.16), 0 1px 0 rgba(255,255,255,.7) inset; transform: translateY(-1px); } .btn-primary, .glass-btn.is-primary { background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(59, 130, 246, 0.92)); color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 8px 22px -6px rgba(37,99,235,.45), 0 1px 0 rgba(255,255,255,.5) inset; } .btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(59, 130, 246, 1)); box-shadow: 0 12px 28px -8px rgba(37,99,235,.55), 0 1px 0 rgba(255,255,255,.6) inset; } .btn-outline { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.78); } .btn-outline:hover:not(:disabled) { background: rgba(255, 255, 255, 0.85); border-color: rgba(99, 102, 241, .55); } .btn-destructive, .glass-btn.is-destructive { background: linear-gradient(135deg, rgba(220, 38, 38, 0.94), rgba(239, 68, 68, 0.92)); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 8px 22px -6px rgba(220,38,38,.4); } /* ─────────────────────────────────────────────────────────────────────────── FORM CONTROLS — frosted inputs, soft focus halo (applied globally). ─────────────────────────────────────────────────────────────────────────── */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="search"], input[type="url"], input[type="month"], select, textarea, .glass-form-control { background: rgba(255, 255, 255, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 4px rgba(15,23,42,.04); border-radius: var(--gt-radius-sm); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } input:focus, select:focus, textarea:focus, .glass-form-control:focus { outline: none; border-color: rgba(99, 102, 241, .55); box-shadow: 0 0 0 3px rgba(99,102,241,.18), 0 1px 0 rgba(255,255,255,.7) inset; background: rgba(255, 255, 255, 0.92); } /* ─────────────────────────────────────────────────────────────────────────── TABLES — global glass styling. Targets bare table tags too so any page without a wrapper class still gets the look. ─────────────────────────────────────────────────────────────────────────── */ .glass-table { border-radius: var(--gt-radius); overflow: hidden; } table { background: transparent; } table thead { background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } table thead th { border-bottom: 1px solid var(--gt-border-soft) !important; background: transparent !important; } table tbody tr { transition: background .18s ease; } table tbody tr:hover td { background: rgba(255, 255, 255, 0.55) !important; } table tbody td { border-bottom: 1px solid var(--gt-line); } /* ─────────────────────────────────────────────────────────────────────────── STATUS BADGES / PILLS — global gradient sheen + soft glow. ─────────────────────────────────────────────────────────────────────────── */ .badge, .pcs-pill, .glass-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .18rem .55rem; font-size: .65rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 9999px; background-image: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0)); border: 1px solid rgba(255,255,255,.65); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 1px 3px rgba(15,23,42,.05); } .badge-success, .glass-badge.is-success, .pcs-pill.active { background: var(--gt-c-success-bg); color: var(--gt-c-success); border-color: rgba(34,197,94,.35); } .badge-warning, .glass-badge.is-warning, .pcs-pill.pending { background: var(--gt-c-warning-bg); color: var(--gt-c-warning); border-color: rgba(245,158,11,.35); } .badge-destructive,.glass-badge.is-danger, .badge-error, .pcs-pill.disabled { background: var(--gt-c-danger-bg); color: var(--gt-c-danger); border-color: rgba(239,68,68,.35); } .badge-primary, .glass-badge.is-info, .pcs-pill.global { background: var(--gt-c-info-bg); color: var(--gt-c-info); border-color: rgba(37,99,235,.35); } .badge-secondary, .glass-badge.is-purple { background: var(--gt-c-purple-bg); color: var(--gt-c-purple); border-color: rgba(124,58,237,.35); } .badge-outline, .glass-badge.is-mute { background: var(--gt-c-mute-bg); color: var(--gt-c-mute); border-color: rgba(148,163,184,.35); } /* ─────────────────────────────────────────────────────────────────────────── ALERTS — frosted, color-tinted by variant. ─────────────────────────────────────────────────────────────────────────── */ .alert { background: var(--gt-bg); -webkit-backdrop-filter: blur(var(--gt-blur-sm)); backdrop-filter: blur(var(--gt-blur-sm)); border: 1px solid var(--gt-border); border-radius: var(--gt-radius); box-shadow: var(--gt-shadow-sm); } .alert-success { background: linear-gradient(135deg, rgba(220,252,231,.85), rgba(187,247,208,.55)); border-color: rgba(34,197,94,.4); color: #166534; } .alert-error, .alert-destructive{ background: linear-gradient(135deg, rgba(254,226,226,.85), rgba(254,202,202,.55)); border-color: rgba(239,68,68,.4); color: #991b1b; } .alert-warning { background: linear-gradient(135deg, rgba(254,243,199,.85), rgba(253,230,138,.55)); border-color: rgba(245,158,11,.4); color: #92400e; } .alert-info { background: linear-gradient(135deg, rgba(219,234,254,.85), rgba(191,219,254,.55)); border-color: rgba(37,99,235,.4); color: #1e3a8a; } /* ─────────────────────────────────────────────────────────────────────────── MODALS — frosted overlay + frosted dialog. ─────────────────────────────────────────────────────────────────────────── */ .modal-overlay, .glass-modal-backdrop { background: rgba(15, 23, 42, 0.36) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .modal, .glass-modal { background: rgba(248, 250, 255, 0.84) !important; -webkit-backdrop-filter: saturate(180%) blur(var(--gt-blur-lg)); backdrop-filter: saturate(180%) blur(var(--gt-blur-lg)); border: 1px solid rgba(255, 255, 255, 0.72) !important; border-radius: var(--gt-radius-lg); box-shadow: var(--gt-shadow-lg); } .modal-header { border-bottom-color: var(--gt-border-soft) !important; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); } .modal-footer { border-top-color: var(--gt-border-soft) !important; background: linear-gradient(0deg, rgba(255,255,255,.55), rgba(255,255,255,0)) !important; } /* ─────────────────────────────────────────────────────────────────────────── RIGHT DRAWERS — utility class for any custom drawer the system might use. ─────────────────────────────────────────────────────────────────────────── */ .glass-drawer { background: rgba(248, 250, 255, 0.82); -webkit-backdrop-filter: saturate(180%) blur(var(--gt-blur-lg)); backdrop-filter: saturate(180%) blur(var(--gt-blur-lg)); border-left: 1px solid var(--gt-border); box-shadow: -8px 0 32px rgba(15,23,42,0.16); } /* ─────────────────────────────────────────────────────────────────────────── FILTER PANELS — collapsible glass strip. ─────────────────────────────────────────────────────────────────────────── */ .glass-filter { background: var(--gt-bg); -webkit-backdrop-filter: blur(var(--gt-blur)); backdrop-filter: blur(var(--gt-blur)); border: 1px solid var(--gt-border); border-radius: var(--gt-radius); box-shadow: var(--gt-shadow-sm); padding: 1rem 1.15rem; } /* ─────────────────────────────────────────────────────────────────────────── STAT-CARD CONVENTION. ─────────────────────────────────────────────────────────────────────────── */ .stat-card { position: relative; } .stat-value { letter-spacing: -.02em; font-variant-numeric: tabular-nums; } /* ─────────────────────────────────────────────────────────────────────────── TABS — common patterns get a glass strip. ─────────────────────────────────────────────────────────────────────────── */ .pcs-tabs, .nav-tabs { background: rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: blur(var(--gt-blur-sm)); backdrop-filter: blur(var(--gt-blur-sm)); border: 1px solid var(--gt-border-soft); border-radius: var(--gt-radius-sm); padding: .25rem; } /* ─────────────────────────────────────────────────────────────────────────── FALLBACKS — never sacrifice readability. ─────────────────────────────────────────────────────────────────────────── */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .card, .glass-card, .glass-panel, .modal, .glass-modal, .glass-drawer, .glass-filter, .main-header, .topbar, .auth-card { background: rgba(255, 255, 255, 0.96) !important; } /* Sidebar stays dark — see its own dedicated fallback rule above. */ } @media (prefers-reduced-transparency: reduce) { .card, .glass-card, .glass-panel, .modal, .glass-modal, .glass-drawer, .glass-filter, .main-header, .topbar, .auth-card { background: rgba(255, 255, 255, 0.96) !important; } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none !important; } .card, .btn, .glass-card, .glass-btn, .glass-drawer, .modal, .glass-modal { transition: none !important; } .sidebar .nav-link { transition: none !important; } } /* ─────────────────────────────────────────────────────────────────────────── PRINT — strip glass effects entirely so printouts stay clean. ─────────────────────────────────────────────────────────────────────────── */ @media print { body, .main-content, .auth-page, body::before, body::after { background: #fff !important; animation: none !important; } body::before, body::after { display: none !important; } .card, .glass-card, .glass-panel, .glass-drawer, .glass-filter, .glass-modal, .auth-card { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border: 1px solid #e5e7eb !important; } } /* ─────────────────────────────────────────────────────────────────────────── MOBILE — softer blur for performance on lower-end devices. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 720px) { :root { --gt-blur: 16px; --gt-blur-lg: 20px; --gt-blur-sm: 10px; } body::before { width: 220px; height: 220px; filter: blur(60px); } body::after { width: 220px; height: 220px; filter: blur(60px); } } /* ─────────────────────────────────────────────────────────────────────────── FOCUS RING — keyboard accessibility on top of glass. ─────────────────────────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid rgba(99, 102, 241, .65); outline-offset: 2px; border-radius: 6px; } /* ═══════════════════════════════════════════════════════════════════════════ LANDING-PAGE PALETTE ADAPTATION (hybrid: dark shell + light content) ─────────────────────────────────────────────────────────────────────────── Brings the in-app shell into the same visual language as /landing without touching any PHP, route, or layout. Strategy: · Topbar → dark glass with mesh accent + light text (matches landing nav) · Sidebar → keep dark base, upgrade active state to the indigo→violet→pink gradient + pink accent rail · Content → stays light (so tables, payslips, BIR forms stay readable), but cards/buttons/links pick up the landing palette · Public pages (auth, landing, pricing) → unaffected (their own surfaces are already tuned). Easy reversal: delete this entire section to restore the previous look. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Landing palette mirrors */ --lpa-indigo: #6366f1; --lpa-violet: #8b5cf6; --lpa-pink: #ec4899; --lpa-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); --lpa-grad-2: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --lpa-shell-bg: #0b1020; --lpa-shell-2: #050816; --lpa-shell-ink: #f1f5f9; --lpa-shell-ink-mute: #cbd5e1; --lpa-shell-ink-dim: rgba(226,232,240,.72); --lpa-shell-border: rgba(255,255,255,.08); --lpa-shell-border-2: rgba(255,255,255,.14); --lpa-shell-hover: rgba(255,255,255,.06); /* Refresh primary tokens to the landing palette */ --primary: #6366f1; --primary-hover: #4f46e5; --ring: #6366f1; } /* ─────────────────────────────────────────────────────────────────────────── TOPBAR — dark glass strip with subtle mesh accent. Wins over the earlier light-glass rule by virtue of source order + .hris-topbar specificity. ─────────────────────────────────────────────────────────────────────────── */ .main-header.hris-topbar, header.hris-topbar { background: radial-gradient(900px 240px at 12% -40%, rgba(99,102,241,.22), transparent 60%), radial-gradient(700px 220px at 88% -20%, rgba(236,72,153,.14), transparent 60%), linear-gradient(180deg, rgba(11,16,32,.92) 0%, rgba(15,21,42,.92) 100%) !important; -webkit-backdrop-filter: saturate(160%) blur(22px); backdrop-filter: saturate(160%) blur(22px); border-bottom: 1px solid var(--lpa-shell-border-2); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 40px -18px rgba(0,0,0,.55); color: var(--lpa-shell-ink); } /* Titles / breadcrumb / icons inside dark topbar */ .hris-topbar .topbar-company, .hris-topbar .main-header h1, .hris-topbar .main-header h2, .hris-topbar h1, .hris-topbar h2 { color: var(--lpa-shell-ink) !important; } .hris-topbar .topbar-breadcrumb, .hris-topbar .breadcrumb { color: var(--lpa-shell-ink-mute); } .hris-topbar .breadcrumb a { color: var(--lpa-shell-ink-mute); } .hris-topbar .breadcrumb a:hover { color: #fff; } .hris-topbar .breadcrumb .current, .hris-topbar .breadcrumb [aria-current="page"] { color: #fff; } .hris-topbar .breadcrumb-sep, .hris-topbar .breadcrumb span.sep { color: rgba(255,255,255,.28); } /* Icon-only buttons (hamburger, bell, etc.) — light on dark */ .hris-topbar .topbar-icon-btn { color: var(--lpa-shell-ink-mute); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .hris-topbar .topbar-icon-btn:hover { color: #fff; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); } .hris-topbar .topbar-icon-btn svg { stroke: currentColor; } /* The dark-topbar rule above re-enables `display: inline-flex` on every .topbar-icon-btn, which inadvertently overrode widgets.css's desktop hide rule for the hamburger toggle. Re-hide on desktop so the toggle only appears on mobile (where the sidebar collapses). */ @media (min-width: 769px) { .hris-topbar .hris-sidebar-toggle { display: none !important; } } /* Bell notification badge stays visible against dark bg */ .hris-topbar .notif-badge { background: var(--lpa-pink); color: #fff; border: 2px solid #0b1020; } /* Profile pill (avatar + name + chevron) */ .hris-topbar .topbar-profile-btn { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .6rem .3rem .35rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: var(--lpa-shell-ink); cursor: pointer; transition: background .15s, border-color .15s; } .hris-topbar .topbar-profile-btn:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); } .hris-topbar .topbar-profile-name { color: #fff; font-weight: 600; font-size: .82rem; } .hris-topbar .topbar-profile-role { color: var(--lpa-shell-ink-mute); font-size: .68rem; } .hris-topbar .topbar-avatar { background: var(--lpa-grad); color: #fff; border: 1px solid rgba(255,255,255,.18); } .hris-topbar .topbar-chevron { color: var(--lpa-shell-ink-mute); } /* Workspace switcher — adapt to dark topbar */ .hris-topbar .sys-switcher-btn { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); color: var(--lpa-shell-ink); } .hris-topbar .sys-switcher-btn:hover { background: rgba(255,255,255,.10); border-color: rgba(99,102,241,.6); } .hris-topbar .sys-switcher.open .sys-switcher-btn { background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.6); box-shadow: 0 0 0 3px rgba(99,102,241,.18); } .hris-topbar .sys-switcher-eyebrow { color: var(--lpa-shell-ink-mute); } .hris-topbar .sys-switcher-label { color: #fff; } .hris-topbar .sys-switcher-caret { color: var(--lpa-shell-ink-mute); } /* BIR badge — dark-topbar variant (keep green spirit, light surface) */ .hris-topbar .bir-badge { background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.35); color: #6ee7b7; } .hris-topbar .bir-dot { box-shadow: 0 0 0 3px rgba(16,185,129,.25); } /* Government quick-links — light on dark */ .hris-topbar .topbar-gov-links { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); } .hris-topbar .topbar-gov-link { color: var(--lpa-shell-ink-mute); } .hris-topbar .topbar-gov-link:hover, .hris-topbar .topbar-gov-link:focus-visible { color: #fff; background: rgba(255,255,255,.06); } /* Dropdowns spawned from the dark topbar keep their light surface for readability — they overlay onto the page below, not onto the topbar. */ .hris-topbar .topbar-profile-menu, .hris-topbar .sys-switcher-menu { background: #ffffff; border: 1px solid var(--border, #e6e8ee); color: var(--gt-ink, #0f172a); box-shadow: 0 20px 50px -12px rgba(0,0,0,.35); } /* ─────────────────────────────────────────────────────────────────────────── SIDEBAR — upgrade active state to landing's gradient + pink rail. The sidebar is already dark; we're only refining the brand moments. ─────────────────────────────────────────────────────────────────────────── */ .sidebar { background: radial-gradient(1100px 380px at -180px -140px, rgba(99,102,241,.22), transparent 60%), radial-gradient(700px 320px at 120% 110%, rgba(236,72,153,.10), transparent 60%), linear-gradient(180deg, #0b1020 0%, #050816 100%); border-right: 1px solid var(--lpa-shell-border-2); } .sidebar .nav-link.active { background: var(--lpa-grad) !important; box-shadow: 0 6px 18px -6px rgba(139,92,246,.55), inset 0 0 0 1px rgba(255,255,255,.12); } .sidebar .nav-link.active::before { background: #f9a8d4; } .sidebar .nav-group-btn.has-active { background: rgba(139,92,246,.10); border-color: rgba(139,92,246,.22); color: #e9d5ff; } .sidebar .nav-group-btn.has-active::before { background: rgba(244,114,182,.55); } /* Sidebar logo subtitle and title — pop a little harder */ .sidebar .sidebar-title-row .icon { color: #c7d2fe; stroke: #c7d2fe; } /* ─────────────────────────────────────────────────────────────────────────── MAIN CONTENT — keep light surface, swap the mesh tints for the landing palette so the indigo→violet→pink language carries through subtly. ─────────────────────────────────────────────────────────────────────────── */ body, .main-content { background: radial-gradient(circle at 12% 16%, rgba(99,102,241,.10), transparent 42%), radial-gradient(circle at 88% 8%, rgba(139,92,246,.08), transparent 45%), radial-gradient(circle at 78% 92%, rgba(236,72,153,.08), transparent 48%), radial-gradient(circle at 25% 88%, rgba(56,189,248,.06), transparent 45%), linear-gradient(180deg, #f7f9ff 0%, #eef3fb 100%); } /* Subscription status banner sitting at top of pages */ .main-content > div > .alert, .main-content > div > .banner { border-radius: 12px; } /* ─────────────────────────────────────────────────────────────────────────── PRIMARY BUTTONS — gradient lift (still readable, keeps shape). We only target solid primary so secondary/ghost variants are untouched. ─────────────────────────────────────────────────────────────────────────── */ .btn.btn-primary, .btn-primary:not(.btn-ghost):not(.btn-outline), .button-primary { background: var(--lpa-grad); color: #fff; border: 1px solid transparent; box-shadow: 0 6px 16px -6px rgba(139,92,246,.55), inset 0 1px 0 rgba(255,255,255,.18); transition: filter .15s ease, transform .15s ease, box-shadow .15s ease; } .btn.btn-primary:hover, .btn-primary:not(.btn-ghost):not(.btn-outline):hover, .button-primary:hover { filter: brightness(1.06) saturate(1.05); box-shadow: 0 10px 24px -8px rgba(236,72,153,.5), inset 0 1px 0 rgba(255,255,255,.22); transform: translateY(-1px); } .btn.btn-primary:active, .button-primary:active { transform: translateY(0); filter: brightness(.97); } /* ─────────────────────────────────────────────────────────────────────────── LINKS & FOCUS — adopt landing indigo across the app. ─────────────────────────────────────────────────────────────────────────── */ .main-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.breadcrumb a) { color: var(--lpa-indigo); } .main-content a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: var(--lpa-violet); } /* ─────────────────────────────────────────────────────────────────────────── CARDS — keep light surface but add an indigo-tinted top border accent so dashboard tiles feel cohesive with landing hero cards. ─────────────────────────────────────────────────────────────────────────── */ .main-content .card { position: relative; border-color: rgba(99,102,241,.10); } /* Stat / KPI tiles get a slim gradient top edge — purely decorative, opt-in via existing `.stat-card`, `.kpi-card`, `.metric-card` class names that already exist throughout the dashboards. */ .stat-card::before, .kpi-card::before, .metric-card::before { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; border-radius: 0 0 3px 3px; background: var(--lpa-grad); opacity: .85; } .stat-card, .kpi-card, .metric-card { position: relative; overflow: hidden; } /* ─────────────────────────────────────────────────────────────────────────── PAGE TITLE — tighten weight + add the subtle Inter feel from the landing. ─────────────────────────────────────────────────────────────────────────── */ .page-title { letter-spacing: -.025em; font-weight: 800; } /* ─────────────────────────────────────────────────────────────────────────── PRINT — restore light topbar / kill gradients so payslips/reports stay monochrome. Sits AFTER our overrides so it always wins. ─────────────────────────────────────────────────────────────────────────── */ @media print { .main-header.hris-topbar, header.hris-topbar { background: #fff !important; color: #0b1220 !important; } .hris-topbar .topbar-company, .hris-topbar .breadcrumb, .hris-topbar .breadcrumb a, .hris-topbar .breadcrumb .current { color: #0b1220 !important; } .btn.btn-primary, .button-primary { background: #4f46e5 !important; box-shadow: none !important; } .stat-card::before, .kpi-card::before, .metric-card::before { display: none !important; } } /* ─────────────────────────────────────────────────────────────────────────── REDUCED-MOTION / REDUCED-TRANSPARENCY — strip animation + lower the dark topbar to solid so users with the preference get crisp contrast. ─────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-transparency: reduce) { .main-header.hris-topbar, header.hris-topbar { background: #0b1020 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } @media (prefers-reduced-motion: reduce) { .btn.btn-primary, .button-primary { transition: none !important; transform: none !important; } } /* ─────────────────────────────────────────────────────────────────────────── MOBILE — tighter topbar pill density at narrow widths. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 720px) { .hris-topbar .topbar-profile-meta { display: none; } .hris-topbar .topbar-icon-btn { width: 34px; height: 34px; } } /* ═══════════════════════════════════════════════════════════════════════════ ACCOUNTING / GENERIC MODAL POLISH ─────────────────────────────────────────────────────────────────────────── The accounting module renders its dialogs with `
`, but `.modal-box` had no CSS rules anywhere in the system — the popup got only the dark backdrop with the form floating directly on top. Form inputs were also using a near-white border (rgba(255,255,255,.85)) which disappeared inside any white dialog surface, leaving fields that look ghost-like and hard to read. This block: 1. Gives `.modal-box` a proper opaque frosted dialog surface (matching the existing `.modal` look). 2. Strengthens input borders + opacity *only inside modals* so fields stand out clearly against the dialog while leaving page-level inputs untouched. ═══════════════════════════════════════════════════════════════════════════ */ /* 1) Dialog surface for accounting modals */ .modal-box { position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; background: rgba(255, 255, 255, 0.96) !important; -webkit-backdrop-filter: saturate(180%) blur(var(--gt-blur-lg)); backdrop-filter: saturate(180%) blur(var(--gt-blur-lg)); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: var(--gt-radius-lg); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 24px 56px -16px rgba(15, 23, 42, 0.35), 0 6px 16px rgba(15, 23, 42, 0.10); color: var(--gt-ink); animation: dialog-pop var(--t-slow, .25s) var(--ease-out, ease-out); } .modal-box .modal-header { padding: 1.1rem 1.5rem; border-bottom: 1px solid rgba(15, 23, 42, 0.08); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)); } .modal-box .modal-title { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: #0f172a; } .modal-box .modal-close { background: rgba(15, 23, 42, 0.04); border: 1px solid rgba(15, 23, 42, 0.08); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #475569; transition: background .15s, color .15s, border-color .15s; } .modal-box .modal-close:hover { background: rgba(15, 23, 42, 0.08); color: #0f172a; } .modal-box .modal-body { padding: 1.25rem 1.5rem; } .modal-box .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid rgba(15, 23, 42, 0.08); display: flex; gap: .5rem; justify-content: flex-end; background: linear-gradient(0deg, rgba(248,250,255,.85), rgba(255,255,255,0)); border-bottom-left-radius: var(--gt-radius-lg); border-bottom-right-radius: var(--gt-radius-lg); } /* 2) Stronger field contrast inside any modal (covers .modal, .modal-box, and the .modal-overlay container so legacy + accounting modals both benefit). Outside of modals, page-level inputs keep the lighter glass. */ .modal-box input, .modal-box select, .modal-box textarea, .modal-box .form-control, .modal input, .modal select, .modal textarea, .modal .form-control, .modal-overlay .modal-box input, .modal-overlay .modal-box select, .modal-overlay .modal-box textarea, .modal-overlay .modal-box .form-control { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid rgba(15, 23, 42, 0.18) !important; color: #0f172a !important; box-shadow: 0 1px 0 rgba(15,23,42,.02) !important; } .modal-box input::placeholder, .modal-box textarea::placeholder, .modal-box select::placeholder, .modal input::placeholder, .modal textarea::placeholder { color: #94a3b8 !important; opacity: 1; } .modal-box input:hover, .modal-box select:hover, .modal-box textarea:hover, .modal input:hover, .modal select:hover, .modal textarea:hover { border-color: rgba(15, 23, 42, 0.28) !important; } .modal-box input:focus, .modal-box select:focus, .modal-box textarea:focus, .modal input:focus, .modal select:focus, .modal textarea:focus { border-color: rgba(99, 102, 241, 0.65) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18), 0 1px 0 rgba(255,255,255,.7) inset !important; background: #ffffff !important; } .modal-box label, .modal-box .form-label, .modal label, .modal .form-label { color: #334155 !important; font-weight: 600; } /* Inline mini-inputs inside line-item tables (used by ar_invoices.php and the other accounting create-modals) — keep them readable. */ .modal-box table input, .modal-box table select, .modal table input, .modal table select { padding: .4rem .55rem !important; font-size: .85rem !important; } @keyframes dialog-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } } /* Mobile: keep the dialog comfortably padded but never overflow the screen. */ @media (max-width: 560px) { .modal-box { max-width: calc(100vw - 1.5rem); border-radius: var(--gt-radius); } .modal-box .modal-header, .modal-box .modal-body, .modal-box .modal-footer { padding-left: 1rem; padding-right: 1rem; } }