/* ================================================================ CliniqPro Design System — v1.0 — 2026-05-06 Single source of truth for all visual tokens. Loaded by every portal template via in . Rules use !important to enforce canonical values over template-level CSS. Never override inline styles here — fix those at the template level. ================================================================ */ /* ── Color tokens (CSS custom properties) ─────────────────────── */ :root { --clq-navy: #1a2b4a; --clq-cyan: #00b4d8; --clq-bg: #f5f5f7; --clq-border: #f0f2f5; --clq-border-in: #d1d5db; --clq-th: #9ca3af; --clq-td: #374151; --clq-gray-mid: #6b7280; --clq-gray-light: #94a3b8; --clq-white: #ffffff; --clq-shadow: 0 1px 4px rgba(0,0,0,0.06); --clq-shadow-md: 0 4px 16px rgba(0,0,0,0.10); --clq-radius-card: 12px; --clq-radius-btn: 8px; --clq-radius-badge:20px; --clq-radius-input:7px; } /* ── Typography ────────────────────────────────────────────────── */ .page-title { font-size: 22px !important; font-weight: 800 !important; color: #1a2b4a !important; } .page-sub { font-size: 13px !important; color: #6b7280 !important; margin-top: 3px !important; } .card-header, .section-header, .block-header { font-size: 14px !important; font-weight: 700 !important; color: #1a2b4a !important; } /* ── Cards ─────────────────────────────────────────────────────── */ .kpi-card { border-radius: 12px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; border: 1px solid #f0f2f5 !important; padding: 20px 22px !important; background: #ffffff; } .block-card { border-radius: 12px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; border: 1px solid #f0f2f5 !important; } .section-card { background: #ffffff; border-radius: 12px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; } .savings-stat { border-radius: 10px !important; border: 1px solid #f0f2f5 !important; } /* ── Tables ─────────────────────────────────────────────────────── */ .queue-table th, .rules-table th, .data-table th { font-size: 11px !important; font-weight: 700 !important; color: #9ca3af !important; letter-spacing: 0.4px !important; padding: 10px 14px !important; text-transform: uppercase !important; } .queue-table td, .data-table td { font-size: 13.5px !important; color: #374151 !important; padding: 13px 14px !important; } .rules-table td { font-size: 13px !important; color: #374151 !important; padding: 11px 14px !important; } /* ── Badges & pills ─────────────────────────────────────────────── */ .action-badge, .status-pill, .role-badge { border-radius: 20px !important; } .prec-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 8px; border-radius: 10px; margin-left: 8px; vertical-align: middle; } .prec-badge.prec-high { background: #dcfce7; color: #16a34a; } .prec-badge.prec-med { background: #fef3c7; color: #d97706; } .prec-badge.prec-low { background: #fee2e2; color: #dc2626; } .prec-badge.prec-none { background: #f3f4f6; color: #9ca3af; } /* ── Buttons ────────────────────────────────────────────────────── */ .btn-primary, .btn-action, .btn-create, .btn-save { border-radius: 8px !important; } /* ── Form inputs ────────────────────────────────────────────────── */ input[type="text"]:not([class*="search"]):not(.filter-input):not(.atnav):not([style]), input[type="email"]:not([style]), input[type="password"]:not([style]), input[type="tel"]:not([style]), input[type="number"]:not([style]), select:not([style]), textarea:not([style]) { border-radius: 7px; border: 1.5px solid #d1d5db; font-size: 13px; padding: 9px 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ── Sidebar chrome ─────────────────────────────────────────────── */ aside.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 220px; background: #1a2b4a !important; display: flex; flex-direction: column; padding: 24px 0; z-index: 100; } aside.sidebar .sidebar-brand { padding: 0 14px 28px; border-bottom: 1px solid rgba(255,255,255,0.08); } aside.sidebar .brand-name { font-size: 20px; font-weight: 800; color: #ffffff; } aside.sidebar .brand-name span { color: #00b4d8; } aside.sidebar .nav { padding: 20px 0; flex: 1; overflow-y: auto; } aside.sidebar .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: rgba(255,255,255,0.6); font-size: 13.5px; text-decoration: none; transition: color 0.15s, background 0.15s; border-left: 3px solid transparent; } aside.sidebar .nav-item:hover, aside.sidebar .nav-item.active { color: #ffffff; background: rgba(0,180,216,0.1); border-left-color: #00b4d8; } aside.sidebar .nav-section-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.4); padding: 14px 16px 4px; display: block; } aside.sidebar .sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); } aside.sidebar .logout { font-size: 12px; color: #00b4d8; text-decoration: none; display: block; margin-top: 6px; } aside.sidebar .user-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); } aside.sidebar .agency-tag { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 2px; } /* ── Hamburger / mobile sidebar ─────────────────────────────────── */ input.sidebar-checkbox { display: none; } label.hamburger-btn { display: none; position: fixed; top: 12px; left: 12px; z-index: 200; width: 36px; height: 36px; background: #1a2b4a; color: #ffffff; border-radius: 6px; font-size: 18px; cursor: pointer; align-items: center; justify-content: center; } label.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99; cursor: pointer; } label.sidebar-close { display: none; position: absolute; top: 12px; right: 12px; color: rgba(255,255,255,0.6); font-size: 18px; cursor: pointer; z-index: 1; } @media (max-width: 768px) { label.hamburger-btn { display: flex; } label.sidebar-close { display: block; } aside.sidebar { transform: translateX(-100%); transition: transform 0.25s ease; } input.sidebar-checkbox:checked ~ aside.sidebar { transform: translateX(0); } input.sidebar-checkbox:checked ~ label.sidebar-overlay { display: block; } } /* ── Page background ─────────────────────────────────────────────── */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f7; }