/* * Klimbnow Bootstrap Theme — overrides Bootstrap variables to use Klimbnow Orange, * + compatibility shims for legacy custom classes used in app.js * (so existing renderers don't need to be rewritten) * * Load order in : * 1. bootstrap.min.css (base) * 2. bootstrap-icons.css (icons) * 3. klimbnow-bootstrap.css (THIS FILE — override + shims) * 4. app.css (existing app shell, login, sidebar specifics) */ /* ── Klimbnow brand color overrides on Bootstrap ── */ :root { --bs-primary: #C2410C; --bs-primary-rgb: 194, 65, 12; --bs-link-color: #C2410C; --bs-link-color-rgb: 194, 65, 12; --bs-link-hover-color: #9A340A; --bs-link-hover-color-rgb: 154, 52, 10; --bs-body-bg: #F8F9FA; --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Google Sans", sans-serif; --bs-body-font-size: 14px; /* Klimbnow tokens */ --kn-orange: #C2410C; --kn-orange-soft: #FFEEDD; --kn-orange-on: #7C2410; --kn-orange-hover: #9A340A; --kn-bg: #F8F9FA; --kn-surface: #FFFFFF; --kn-border: #E5E7EB; --kn-border-light: #F3F4F6; --kn-text: #111827; --kn-text-muted: #6B7280; } /* btn-primary uses Klimbnow Orange */ .btn-primary { --bs-btn-bg: var(--kn-orange); --bs-btn-border-color: var(--kn-orange); --bs-btn-hover-bg: var(--kn-orange-hover); --bs-btn-hover-border-color: var(--kn-orange-hover); --bs-btn-active-bg: #7C2410; --bs-btn-active-border-color: #7C2410; --bs-btn-disabled-bg: var(--kn-orange); --bs-btn-disabled-border-color: var(--kn-orange); } .btn-outline-primary { --bs-btn-color: var(--kn-orange); --bs-btn-border-color: var(--kn-orange); --bs-btn-hover-bg: var(--kn-orange); --bs-btn-hover-border-color: var(--kn-orange); --bs-btn-active-bg: var(--kn-orange); --bs-btn-active-border-color: var(--kn-orange); } .text-primary { color: var(--kn-orange) !important; } .bg-primary { background-color: var(--kn-orange) !important; } .border-primary { border-color: var(--kn-orange) !important; } a { color: var(--kn-orange); } a:hover { color: var(--kn-orange-hover); } /* Form controls focus ring uses Klimbnow */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--kn-orange); box-shadow: 0 0 0 0.2rem rgba(194, 65, 12, 0.20); } .form-check-input:checked { background-color: var(--kn-orange); border-color: var(--kn-orange); } /* ────────────────────────────────────────────────────────── * COMPATIBILITY SHIMS for legacy custom classes used in app.js * Keeps existing renderers working without rewriting them. * ────────────────────────────────────────────────────────── */ /* Hard overrides to defeat app.css MD3 button/card/badge styles ─────── */ /* Buttons: square Bootstrap style instead of MD3 pills */ .btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--kn-text); border: 1px solid var(--kn-border); border-radius: 6px; padding: 6px 14px; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: none; transition: all 0.12s; font-family: inherit; } .btn:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .btn-primary { background: var(--kn-orange); color: #fff; border-color: var(--kn-orange); border-radius: 6px; padding: 6px 14px; font-size: 13px; font-weight: 500; box-shadow: none; } .btn-primary:hover { background: var(--kn-orange-hover); border-color: var(--kn-orange-hover); color: #fff; box-shadow: 0 2px 6px rgba(194,65,12,0.25); } .btn-outline-primary { background: #fff; color: var(--kn-orange); border: 1px solid var(--kn-orange); border-radius: 6px; padding: 6px 14px; font-size: 13px; font-weight: 500; box-shadow: none; } .btn-outline-primary:hover { background: var(--kn-orange); color: #fff; border-color: var(--kn-orange); } .btn-sm { padding: 4px 10px; font-size: 12px; } .btn-lg { padding: 8px 18px; font-size: 14px; } /* Page layout */ .page { padding: 20px 24px; } .page-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; } .page-title { font-size: 22px; font-weight: 700; margin: 0; color: var(--kn-text); font-family: inherit; } .page-sub { font-size: 12px; color: var(--kn-text-muted); margin-top: 2px; } /* Section headers */ .section-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; } .section-title { font-size: 15px; font-weight: 600; margin: 0; color: var(--kn-text); font-family: inherit; } /* Cards: cleaner Bootstrap-style border + smaller radius */ .card { background: #fff; border: 1px solid var(--kn-border); border-radius: 8px; overflow: visible; box-shadow: none; } .card-p { padding: 16px; } .card-elevated { box-shadow: 0 4px 12px rgba(0,0,0,0.06); } /* Btn variants not in Bootstrap */ .btn-tonal { background: var(--kn-orange-soft); color: var(--kn-orange-on); border: 1px solid transparent; } .btn-tonal:hover { background: #FFD9B8; color: var(--kn-orange-on); } .btn-ghost { background: transparent; color: var(--kn-text); border: 1px solid transparent; } .btn-ghost:hover { background: var(--kn-border-light); color: var(--kn-text); } .btn-outline { background: #fff; color: var(--kn-text); border: 1px solid var(--kn-border); } .btn-outline:hover { background: var(--kn-border-light); border-color: var(--kn-text-muted); color: var(--kn-text); } .btn-success { background: #198754; color: #fff; border-color: #198754; } .btn-success:hover { background: #146C43; color: #fff; border-color: #146C43; } .btn-danger { background: #DC3545; color: #fff; border-color: #DC3545; } .btn-danger:hover { background: #BB2D3B; color: #fff; border-color: #BB2D3B; } .btn-text { background: transparent; color: var(--kn-orange); border: none; padding: 4px 8px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; } .btn-text:hover { color: var(--kn-orange-hover); background: var(--kn-orange-soft); border-radius: 6px; } /* Btn xs (smaller than Bootstrap btn-sm) */ .btn-xs { padding: 3px 8px; font-size: 11px; border-radius: 4px; } /* Default .btn that doesn't have a Bootstrap variant — neutral surface */ .btn:not([class*="btn-"]) { background: #fff; color: var(--kn-text); border: 1px solid var(--kn-border); } /* Detail item layout (used in candidate detail, person detail, etc.) */ .detail-item { padding: 8px 0; border-bottom: 1px solid var(--kn-border-light); } .di-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--kn-text-muted); font-weight: 600; margin-bottom: 2px; } .di-value { font-size: 13px; color: var(--kn-text); } /* Alert-error compat (Bootstrap uses alert-danger) */ .alert-error { background: #FEE2E2; border: 1px solid #FECACA; color: #991B1B; padding: 10px 14px; border-radius: 8px; font-size: 13px; } .alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; } /* Badge — Bootstrap pill style; override app.css MD3 inline-flex variant */ .badge { display: inline-block; align-items: unset; gap: unset; padding: 3px 9px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; font-family: inherit; vertical-align: middle; } /* Form layout — ensure form-row works */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-group { margin-bottom: 14px; } .form-label { font-size: 12px; font-weight: 600; display: block; margin-bottom: 5px; color: var(--kn-text); } .form-control { font-size: 13px; } .form-control, .form-select { border-color: var(--kn-border); } /* Generic flex/spacing utility shims (some legacy code uses these) */ .flex { display: flex; } .items-center { align-items: center; } .gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mt-8 { margin-top: 8px; } .text-xs { font-size: 11px; } .text-sm { font-size: 12px; } .text-md { font-size: 14px; } /* Compat: --md-* tokens used in inline styles throughout app.js */ :root { --md-primary: #C2410C; --md-primary-c: #FFEEDD; --md-on-primary-c: #7C2410; --md-on-surface: #111827; --md-on-surface-variant: #6B7280; --md-surface: #FFFFFF; --md-surface-2: #F8F9FA; --md-outline: #E5E7EB; --md-outline-variant: #F3F4F6; --green: #10B981; --red: #EF4444; --blue: #3B82F6; --border: #E5E7EB; --border-light: #F3F4F6; --surface2: #F8F9FA; } /* ────────────────────────────────────────────────────────── * SIDEBAR — clean Bootstrap-style refresh * ────────────────────────────────────────────────────────── */ .nav-drawer { width: 240px; background: var(--kn-surface); border-right: 1px solid var(--kn-border); display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; } .nav-header { padding: 16px 16px 12px; border-bottom: 1px solid var(--kn-border); display: flex; align-items: center; gap: 10px; } .nav-logo { width: 40px; height: 40px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--kn-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; padding: 4px; } .nav-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; } .nav-logo .loader-logo-fallback, .nav-logo > div { background: var(--kn-orange); color: #fff; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; border-radius: 6px; } .nav-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--kn-text-muted); font-weight: 700; padding: 14px 16px 4px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; color: #495057; font-size: 13px; font-weight: 500; cursor: pointer; border-left: 3px solid transparent; transition: all 0.12s; } .nav-item:hover { background: var(--bs-light, #F8F9FA); color: var(--kn-orange); } .nav-item.active { background: var(--kn-orange-soft); color: var(--kn-orange-on); border-left-color: var(--kn-orange); font-weight: 600; } .nav-item .material-icons-round, .nav-item i.bi { font-size: 16px; flex-shrink: 0; } .nav-badge { margin-left: auto; font-size: 10px; padding: 2px 7px; border-radius: 10px; background: #F59E0B; color: #fff; font-weight: 700; } .nav-badge.hidden { display: none; } .nav-footer { margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--kn-border); display: flex; align-items: center; gap: 10px; } .nav-avatar { width: 40px; height: 40px; border-radius: 20px; background: var(--kn-orange-soft); color: var(--kn-orange-on); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .nav-user-name { font-size: 13px; font-weight: 600; color: var(--kn-text); } .nav-user-role { font-size: 11px; color: var(--kn-text-muted); text-transform: capitalize; } .nav-icon-btn { background: transparent; border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--kn-text-muted); margin-left: auto; } .nav-icon-btn:hover { background: var(--kn-border-light); color: var(--kn-text); } /* ────────────────────────────────────────────────────────── * TOPBAR * ────────────────────────────────────────────────────────── */ .top-bar { background: #fff; border-bottom: 1px solid var(--kn-border); padding: 10px 24px; display: flex; align-items: center; gap: 14px; } /* Search bar Bootstrap Icons sizing */ .search-bar i.bi { font-size: 16px; color: var(--kn-text-muted); flex-shrink: 0; } .icon-btn i.bi { font-size: 18px; } .nav-icon-btn i.bi { font-size: 16px; } .main { flex: 1; overflow-y: auto; background: var(--kn-bg); } /* ────────────────────────────────────────────────────────── * Modal — defeat Bootstrap's `.modal { display: none }` for the * existing app's custom modal system that uses #modal-box inside * .modal-overlay (NOT Bootstrap modals). * ────────────────────────────────────────────────────────── */ #modal-overlay, .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.hidden { display: none !important; } /* The inner modal box — override Bootstrap's display:none for this specific element */ #modal-box { display: block !important; /* defeats Bootstrap .modal { display:none } */ position: static !important; /* defeats Bootstrap .modal { position:fixed } */ width: 100% !important; height: auto !important; max-width: 640px; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); border: none; pointer-events: auto; outline: 0; } #modal-box.modal-lg { max-width: 860px; } #modal-box.modal-xl { max-width: 1060px; } /* The existing app uses .modal-header, .modal-body, .modal-footer, .modal-title class names which collide with Bootstrap's modal classes. Re-style for the app's modal-box descendants specifically. */ #modal-box .modal-header { padding: 20px 24px 14px; border-bottom: 1px solid var(--kn-border); display: flex; align-items: flex-start; justify-content: space-between; background: transparent; border-top-left-radius: 12px; border-top-right-radius: 12px; } #modal-box .modal-title { font-size: 18px; font-weight: 600; margin: 0; color: var(--kn-text); line-height: 1.4; } #modal-box .modal-body { padding: 18px 24px; } #modal-box .modal-footer { padding: 14px 24px 18px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--kn-border); background: transparent; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } /* ────────────────────────────────────────────────────────── * Material Icons compat — kept working alongside Bootstrap Icons * since 35+ render functions in app.js use * ────────────────────────────────────────────────────────── */ /* (font-face declared in app.css already) */ /* ────────────────────────────────────────────────────────── * Print styles * ────────────────────────────────────────────────────────── */ @media print { .nav-drawer, .top-bar { display: none !important; } .main { background: #fff !important; } .page { padding: 0 !important; } .card { border: 1px solid #ccc !important; box-shadow: none !important; page-break-inside: avoid; } } /* Hidden helper used in many places */ .hidden { display: none !important; }