/* ApptQ Helper — Custom Styles Brand: navy navbar #18234a · indigo accent #4361ee · bg #f0f2f6 Font: Inter (loaded in layout ) */ /* ── Bootstrap variable overrides ──────────────────────────────── */ :root { --bs-primary: #4361ee; --bs-primary-rgb: 67, 97, 238; --bs-link-color: #4361ee; --bs-link-hover-color: #3451d1; --bs-body-bg: #f0f2f6; --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif; --bs-card-border-radius: 0.625rem; --bs-border-radius: 0.4rem; --bs-border-radius-lg: 0.625rem; } /* ── Base ───────────────────────────────────────────────────────── */ body { background-color: #f0f2f6; font-family: 'Inter', system-ui, -apple-system, sans-serif; } /* ── Navbar ─────────────────────────────────────────────────────── */ .navbar { background-color: #18234a !important; box-shadow: 0 2px 12px rgba(24, 35, 74, .3); padding-top: 0.5rem; padding-bottom: 0.5rem; } .navbar-brand { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; } .navbar-dark .nav-link { font-size: 0.875rem; font-weight: 500; padding: 0.35rem 0.7rem; border-radius: 0.375rem; transition: background-color .15s; } .navbar-dark .nav-link:hover, .navbar-dark .nav-link:focus { background-color: rgba(255, 255, 255, .1); } .navbar-dark .nav-link.active { background-color: rgba(255, 255, 255, .15); font-weight: 600; color: #fff !important; } /* ── Import button in nav ───────────────────────────────────────── */ #nav-import-btn { transition: transform .15s, box-shadow .15s; } #nav-import-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.25); } #nav-import-btn.drag-over { transform: scale(1.08); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #198754; } /* ── Cards ──────────────────────────────────────────────────────── */ .card { border-radius: 0.625rem; border: 1px solid rgba(0, 0, 0, .06); } .card.border-0 { border: 1px solid rgba(0, 0, 0, .05) !important; } .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.06) !important; } /* ── Stat card icons ────────────────────────────────────────────── */ .stat-icon { width: 52px; height: 52px; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .stat-icon.si-primary { background: rgba(67, 97, 238, .1); color: #4361ee; } .stat-icon.si-success { background: rgba(25, 135, 84, .1); color: #198754; } .stat-icon.si-info { background: rgba(8, 145, 178, .1); color: #0891b2; } .stat-icon.si-warning { background: rgba(245, 158, 11, .1); color: #d97706; } /* ── Headings ───────────────────────────────────────────────────── */ h1.h3 { font-weight: 700; letter-spacing: -0.025em; color: #1a1f36; } /* ── Tables ─────────────────────────────────────────────────────── */ .table th { font-size: 0.775rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6c757d; white-space: nowrap; font-weight: 600; } /* ── Form controls ──────────────────────────────────────────────── */ .form-control, .form-select { border-color: rgba(0, 0, 0, .13); border-radius: 0.4rem; font-size: 0.9rem; } .form-control:focus, .form-select:focus { border-color: #4361ee; box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, .15); } /* ── Buttons ────────────────────────────────────────────────────── */ .btn { font-weight: 500; border-radius: 0.4rem; } .btn-primary { background-color: #4361ee; border-color: #4361ee; } .btn-primary:hover, .btn-primary:active { background-color: #3451d1; border-color: #3451d1; } .btn-primary:focus-visible { box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, .35); } .btn-outline-primary { color: #4361ee; border-color: #4361ee; } .btn-outline-primary:hover { background-color: #4361ee; border-color: #4361ee; } /* ── Alerts ─────────────────────────────────────────────────────── */ .alert { border-radius: 0.5rem; border-left-width: 4px; } /* ── Appointment status colors ──────────────────────────────────── */ .status-confirmed { color: #198754; } .status-cancelled { color: #dc3545; } /* Cancelled rows in tables */ tr.appt-cancelled td { opacity: .55; } /* ── Monospace in template editor ───────────────────────────────── */ textarea.font-monospace { font-size: 0.82rem; line-height: 1.6; } /* ── Print styles ───────────────────────────────────────────────── */ @media print { .navbar, .no-print, nav, .alert, footer { display: none !important; } main { padding: 0 !important; } body { font-size: 10pt; color: #000; background: #fff; } .card { border: 1px solid #ccc !important; box-shadow: none !important; } a { text-decoration: none; color: inherit; } }