/* ========================================================================== Cledge Dashboard — design tokens Light theme lives on :root; dark theme overrides via [data-theme="dark"], set on before first paint by the inline script in (see templates/head.php) so there is no flash of the wrong theme. ========================================================================== */ :root { color-scheme: light; --cd-bg: #f5f6fb; --cd-surface: #ffffff; --cd-surface-alt: #f8f8fd; --cd-surface-raised: #ffffff; --cd-text: #171b2e; --cd-text-muted: #676d84; --cd-text-faint: #9298ab; --cd-border: #e7e9f2; --cd-border-strong: #d6d9e8; --cd-primary: #6d5bff; --cd-primary-dark: #4f3fd6; --cd-primary-soft: rgba(109, 91, 255, 0.1); --cd-pink: #ff5da2; --cd-orange: #ff9f43; --cd-teal: #17c3b2; --cd-green: #2ecc71; --cd-blue: #3d8bfd; --cd-red: #ef4444; --cd-yellow: #f5c518; --cd-status-active-bg: #e7f9ef; --cd-status-active-text: #1a9c56; --cd-status-pending-bg: #fff4e0; --cd-status-pending-text: #b8770a; --cd-status-danger-bg: #fdeaea; --cd-status-danger-text: #c62828; --cd-status-trial-bg: #ecebff; --cd-status-trial-text: #5644d6; --cd-alert-error-bg: #fdeaea; --cd-alert-error-text: #c62828; --cd-alert-success-bg: #e7f9ef; --cd-alert-success-text: #1a9c56; --cd-alert-info-bg: #ecebff; --cd-alert-info-text: #5644d6; --cd-sidebar-from: #1a1330; --cd-sidebar-to: #3a1a5c; --cd-radius: 14px; --cd-radius-sm: 10px; --cd-radius-lg: 18px; --cd-shadow: 0 4px 20px rgba(30, 20, 60, 0.06); --cd-shadow-lg: 0 20px 60px rgba(20, 10, 40, 0.16); --cd-space-xs: 4px; --cd-space-sm: 8px; --cd-space-md: 16px; --cd-space-lg: 24px; --cd-space-xl: 32px; --cd-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cd-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --cd-transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } :root[data-theme="dark"] { color-scheme: dark; --cd-bg: #11121c; --cd-surface: #191b29; --cd-surface-alt: #20222f; --cd-surface-raised: #22243380; --cd-text: #eef0fb; --cd-text-muted: #a3a8c2; --cd-text-faint: #767c99; --cd-border: #2c2e42; --cd-border-strong: #3b3d57; --cd-primary: #8a7aff; --cd-primary-dark: #6d5bff; --cd-primary-soft: rgba(138, 122, 255, 0.16); --cd-pink: #ff7bb4; --cd-orange: #ffb166; --cd-teal: #2fe0cd; --cd-green: #35d67d; --cd-blue: #5c9fff; --cd-red: #f47272; --cd-yellow: #f7d24a; --cd-status-active-bg: rgba(53, 214, 125, 0.14); --cd-status-active-text: #4ee08d; --cd-status-pending-bg: rgba(255, 177, 102, 0.16); --cd-status-pending-text: #ffb166; --cd-status-danger-bg: rgba(244, 114, 114, 0.16); --cd-status-danger-text: #f78b8b; --cd-status-trial-bg: rgba(138, 122, 255, 0.18); --cd-status-trial-text: #ab9dff; --cd-alert-error-bg: rgba(244, 114, 114, 0.14); --cd-alert-error-text: #f78b8b; --cd-alert-success-bg: rgba(53, 214, 125, 0.14); --cd-alert-success-text: #4ee08d; --cd-alert-info-bg: rgba(138, 122, 255, 0.16); --cd-alert-info-text: #ab9dff; --cd-shadow: 0 4px 20px rgba(0, 0, 0, 0.28); --cd-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5); } * { box-sizing: border-box; } body { background: var(--cd-bg); color: var(--cd-text); font-family: var(--cd-font-sans); font-variant-numeric: tabular-nums; margin: 0; transition: var(--cd-transition); } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--cd-font-sans); letter-spacing: -0.01em; } :focus-visible { outline: 2px solid var(--cd-primary); outline-offset: 2px; } .cd-app { display: flex; min-height: 100vh; } /* Sidebar — stays on the dark brand gradient in both themes, this is the one surface that intentionally doesn't flip, matching the auth/public pages' fixed brand backdrop. */ .cd-sidebar { width: 260px; flex-shrink: 0; background: linear-gradient(180deg, var(--cd-sidebar-from), var(--cd-sidebar-to)); color: #fff; padding: 24px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .cd-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 24px; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; color: #fff; } .cd-brand .dot, .cd-public-brand .dot, .cd-wordmark .dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--cd-pink), var(--cd-orange)); box-shadow: 0 0 0 4px rgba(255, 93, 162, 0.15); } .cd-brand .cd-brand-sub { font-weight: 400; opacity: 0.75; } /* Logo lockup: a solid rounded badge ("Cledge") plus a plain adjacent product-name suffix — rendered in CSS/text rather than the uploaded image, since that file's "Cledge" lettering has permanent double-exposure ghosting baked into its pixels that no amount of cropping fixes. Crisp at any size/DPI and themes correctly, unlike a raster image. */ .cd-logo-badge { display: inline-flex; align-items: center; background: #424c5d; color: #fff; font-weight: 800; border-radius: 8px; letter-spacing: -0.01em; line-height: 1; flex-shrink: 0; } .cd-logo-suffix { font-weight: 400; flex-shrink: 0; } .cd-brand .cd-logo-badge { font-size: 1.05rem; padding: 7px 10px; } .cd-brand .cd-logo-suffix { font-size: 1.05rem; color: rgba(255,255,255,0.75); } .cd-wordmark .cd-logo-badge { font-size: 1.55rem; padding: 9px 14px; } .cd-wordmark .cd-logo-suffix { font-size: 1.55rem; color: rgba(255,255,255,0.75); } .cd-nav-section { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.45); margin: 18px 8px 8px; } .cd-nav a { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.8); padding: 10px 12px; border-radius: 10px; font-size: 0.92rem; font-weight: 500; margin-bottom: 2px; transition: background 0.15s ease, color 0.15s ease; } .cd-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; } .cd-nav a.active { background: rgba(255,255,255,0.14); color: #fff; } .cd-nav a .ico { width: 18px; text-align: center; } /* Main */ .cd-main { flex: 1; min-width: 0; } .cd-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 28px; background: var(--cd-surface); border-bottom: 1px solid var(--cd-border); position: sticky; top: 0; z-index: 5; transition: var(--cd-transition); } .cd-topbar h1 { font-size: 1.15rem; margin: 0; font-weight: 700; } .cd-topbar-right { display: flex; align-items: center; gap: 10px; } .cd-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--cd-border); background: var(--cd-surface); color: var(--cd-text-muted); cursor: pointer; transition: var(--cd-transition); } .cd-theme-toggle:hover { border-color: var(--cd-primary); color: var(--cd-primary); } .cd-theme-toggle svg { width: 18px; height: 18px; display: block; } .cd-theme-toggle .icon-moon { display: none; } [data-theme="dark"] .cd-theme-toggle .icon-sun { display: none; } [data-theme="dark"] .cd-theme-toggle .icon-moon { display: block; } .cd-content { padding: 28px; } /* Cards */ .cd-card { background: var(--cd-surface); border-radius: var(--cd-radius); box-shadow: var(--cd-shadow); border: 1px solid var(--cd-border); padding: 20px; transition: var(--cd-transition); } .cd-card h6 { font-weight: 700; font-size: 0.95rem; } .cd-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 24px; } .cd-stat { border-radius: var(--cd-radius); padding: 20px; color: #fff; box-shadow: var(--cd-shadow); position: relative; overflow: hidden; } .cd-stat .label { font-size: 0.8rem; opacity: 0.85; margin-bottom: 6px; } .cd-stat .value { font-size: 1.7rem; font-weight: 800; } .cd-stat .sub { font-size: 0.75rem; opacity: 0.8; margin-top: 4px; } .cd-stat.bg-1 { background: linear-gradient(135deg, #6d5bff, #ff5da2); } .cd-stat.bg-2 { background: linear-gradient(135deg, #17c3b2, #3d8bfd); } .cd-stat.bg-3 { background: linear-gradient(135deg, #ff9f43, #ff5da2); } .cd-stat.bg-4 { background: linear-gradient(135deg, #2ecc71, #17c3b2); } .cd-stat.bg-5 { background: linear-gradient(135deg, #3d8bfd, #6d5bff); } .cd-product-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #fff; } .cd-product-badge.pharm { background: #17c3b2; } .cd-product-badge.lab { background: #6d5bff; } .cd-product-badge.sales { background: #ff9f43; } .cd-product-badge.fit { background: #2ecc71; } .cd-product-badge.desk { background: #3d8bfd; } .cd-product-badge.care { background: #f5576c; } .badge-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; } .badge-status.active { background: var(--cd-status-active-bg); color: var(--cd-status-active-text); } .badge-status.pending { background: var(--cd-status-pending-bg); color: var(--cd-status-pending-text); } .badge-status.overdue, .badge-status.locked, .badge-status.suspended, .badge-status.deleted { background: var(--cd-status-danger-bg); color: var(--cd-status-danger-text); } .badge-status.trial { background: var(--cd-status-trial-bg); color: var(--cd-status-trial-text); } /* Forms */ .cd-form label { font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; display: block; color: var(--cd-text); } .cd-form .form-control, .cd-form .form-select, .form-control, .form-select { border-radius: 10px; border: 1px solid var(--cd-border); padding: 10px 12px; background: var(--cd-surface); color: var(--cd-text); transition: var(--cd-transition); } .cd-form .form-control:focus, .cd-form .form-select:focus, .form-control:focus, .form-select:focus { border-color: var(--cd-primary); box-shadow: 0 0 0 3px var(--cd-primary-soft); background: var(--cd-surface); color: var(--cd-text); } .form-control::placeholder { color: var(--cd-text-faint); } .btn-cd-primary { background: linear-gradient(135deg, var(--cd-primary), var(--cd-pink)); border: none; color: #fff; font-weight: 600; padding: 10px 18px; border-radius: 10px; transition: transform 0.1s ease, opacity 0.15s ease; } .btn-cd-primary:hover { opacity: 0.92; color: #fff; } .btn-cd-primary:active { transform: scale(0.98); } .btn-cd-outline { border: 1px solid var(--cd-border); background: var(--cd-surface); color: var(--cd-text); font-weight: 600; padding: 9px 16px; border-radius: 10px; transition: var(--cd-transition); } .btn-cd-outline:hover { border-color: var(--cd-primary); color: var(--cd-primary); } /* Table */ .cd-table { width: 100%; border-collapse: separate; border-spacing: 0; } .cd-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cd-text-muted); padding: 10px 14px; border-bottom: 1px solid var(--cd-border); } .cd-table td { padding: 14px; border-bottom: 1px solid var(--cd-border); font-size: 0.9rem; color: var(--cd-text); } .cd-table tr:last-child td { border-bottom: none; } .cd-table tr:hover td { background: var(--cd-surface-alt); } /* Auth pages */ .cd-auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a1330, #3a1a5c 45%, #6d5bff 100%); padding: 20px; position: relative; } /* Rotating forest backdrop for the real auth pages only (login, forgot/reset password, 2FA) - an opt-in class so the 403/404/500 error pages, which also use .cd-auth-wrap, are unaffected. The background-image itself is set inline per-page (see templates/auth-bg-init.php); this just adds the sizing/position and a legibility overlay on top of whichever photo shows, keeping the gradient above as the no-JS/no-image fallback. */ .cd-auth-wrap.cd-auth-bg { background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; } .cd-auth-wrap.cd-auth-bg::before { content: ''; position: fixed; inset: 0; background: radial-gradient(circle at center, rgba(10, 20, 15, 0.35) 0%, rgba(4, 12, 8, 0.65) 100%); z-index: 0; pointer-events: none; } .cd-auth-wrap.cd-auth-bg .cd-theme-toggle { z-index: 1; } .cd-auth-wrap.cd-auth-bg .cd-auth-logo-wrap, .cd-auth-wrap.cd-auth-bg .cd-auth-card { position: relative; z-index: 1; } .cd-auth-wrap .cd-theme-toggle { position: absolute; top: 20px; right: 20px; border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); } .cd-auth-wrap .cd-theme-toggle:hover { border-color: rgba(255,255,255,0.5); color: #fff; } .cd-auth-logo-wrap { display: flex; justify-content: center; margin-bottom: 24px; } .cd-wordmark { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.6rem; letter-spacing: -0.01em; color: #fff; } .cd-wordmark .dot { width: 16px; height: 16px; } .cd-wordmark .cd-brand-sub { font-weight: 400; color: rgba(255,255,255,0.65); } .cd-auth-card { width: 100%; max-width: 400px; background: var(--cd-surface); color: var(--cd-text); border-radius: 20px; padding: 36px 32px; box-shadow: var(--cd-shadow-lg); transition: var(--cd-transition); } .cd-auth-card h2 { font-weight: 800; margin-bottom: 4px; font-size: 1.5rem; } .cd-auth-card .sub { color: var(--cd-text-muted); font-size: 0.9rem; margin-bottom: 24px; } .cd-auth-links { text-align: center; margin-top: 20px; font-size: 0.85rem; color: var(--cd-text-muted); } .cd-auth-links a { color: var(--cd-primary); font-weight: 600; text-decoration: none; } .cd-auth-links a:hover { text-decoration: underline; } .cd-auth-forgot { text-align: right; margin: -10px 0 16px; } .cd-auth-forgot a { font-size: 0.8rem; color: var(--cd-text-muted); text-decoration: none; font-weight: 600; } .cd-auth-forgot a:hover { color: var(--cd-primary); } .cd-password-wrap { position: relative; } .cd-password-wrap input { padding-right: 42px; } .cd-password-toggle { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--cd-text-faint); cursor: pointer; padding: 6px 10px; display: flex; align-items: center; } .cd-password-toggle:hover { color: var(--cd-primary); } .cd-password-toggle svg { width: 18px; height: 18px; } .cd-password-toggle .icon-eye-off { display: none; } .cd-password-toggle.is-visible .icon-eye { display: none; } .cd-password-toggle.is-visible .icon-eye-off { display: block; } .cd-alert { border-radius: 10px; padding: 10px 14px; font-size: 0.88rem; margin-bottom: 16px; } .cd-alert.error { background: var(--cd-alert-error-bg); color: var(--cd-alert-error-text); } .cd-alert.success { background: var(--cd-alert-success-bg); color: var(--cd-alert-success-text); } .cd-alert.info { background: var(--cd-alert-info-bg); color: var(--cd-alert-info-text); } .cd-empty { text-align: center; padding: 48px 20px; color: var(--cd-text-muted); } .cd-copy-link { font-family: var(--cd-font-mono); cursor: pointer; } code { font-family: var(--cd-font-mono); color: var(--cd-primary-dark); background: var(--cd-primary-soft); padding: 1px 6px; border-radius: 6px; font-size: 0.85em; } [data-theme="dark"] code { color: var(--cd-primary); } /* One-time username/temp-password reveal (facility-admin-provision.php, facility-admin-reset.php) — deliberately louder than a plain .cd-alert since this is the only moment the password is ever shown. */ .cd-credential-reveal { border-radius: var(--cd-radius); padding: 18px 20px; margin-bottom: 16px; background: linear-gradient(135deg, var(--cd-primary-soft), rgba(255, 93, 162, 0.08)); border: 1px solid rgba(109, 91, 255, 0.25); } .cd-credential-reveal-title { font-weight: 700; margin-bottom: 12px; color: var(--cd-text); } .cd-credential-reveal-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .cd-credential-reveal-row .label { width: 150px; flex-shrink: 0; font-size: 0.8rem; font-weight: 600; color: var(--cd-text-muted); } .cd-credential-reveal-row input { max-width: 320px; background: var(--cd-surface); color: var(--cd-text); } .cd-credential-reveal-warn { font-size: 0.8rem; color: var(--cd-orange); font-weight: 600; margin-top: 4px; } /* Public client-facing pages (pay-invoice, pay-invoice-return) — no sidebar/topbar, just a centered card on the same gradient brand look. */ .cd-public-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--cd-sidebar-from), var(--cd-sidebar-to)); padding: 24px; } .cd-public-wrap { width: 100%; max-width: 560px; } .cd-public-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 1.3rem; margin-bottom: 18px; padding-left: 4px; } .cd-public-card { background: var(--cd-surface); color: var(--cd-text); border-radius: var(--cd-radius); box-shadow: var(--cd-shadow); padding: 32px; transition: var(--cd-transition); } /* Dropdowns/menus follow Bootstrap's own data-bs-theme switch (set alongside data-theme, see head.php), this just tightens the shell. */ .dropdown-menu { border-radius: 12px; border-color: var(--cd-border); box-shadow: var(--cd-shadow); } @media (max-width: 900px) { .cd-sidebar { position: fixed; left: -280px; z-index: 40; transition: left 0.2s ease; } .cd-sidebar.open { left: 0; } .cd-content { padding: 18px; } .cd-credential-reveal-row .label { width: 110px; } }