:root { --cf-navy: #0F172A; --cf-primary: #0E4B5A; --cf-primary-2: #13677C; --cf-accent: #C6A15B; --cf-bg: #F7F8FA; --cf-surface: #FFFFFF; --cf-text: #111827; --cf-muted: #6B7280; --cf-border: #E5E7EB; } /* Base wrapper: apply on */ .cf { background: var(--cf-bg); color: var(--cf-text); /* Bootstrap 5 variable mapping */ --bs-body-bg: var(--cf-bg); --bs-body-color: var(--cf-text); --bs-secondary-color: var(--cf-muted); --bs-border-color: var(--cf-border); --bs-primary: var(--cf-primary); --bs-secondary: var(--cf-primary-2); --bs-link-color: var(--cf-primary); --bs-link-hover-color: var(--cf-primary-2); } /* Parent overlay: apply on */ .cf-parent { --bs-primary: var(--parent-primary, var(--cf-primary)); --bs-secondary: var(--parent-secondary, var(--cf-primary-2)); --bs-link-color: var(--parent-primary, var(--cf-primary)); --bs-link-hover-color: var(--parent-secondary, var(--cf-primary-2)); } /* Header */ .cf-header { background: var(--cf-navy) !important; } .cf-parent .cf-header { background: var(--parent-primary, var(--cf-primary)) !important; } .cf-header .navbar-brand, .cf-header .nav-link { color: rgba(255, 255, 255, 0.92) !important; } .cf-header .nav-link:hover { color: #fff !important; } .cf-header .nav-link.active { color: #fff !important; text-decoration: none; border-bottom: 2px solid var(--cf-accent); } /* Optional non-Bootstrap nav links used in parent layout */ .cf-nav-link { color: rgba(255, 255, 255, 0.92); text-decoration: none; padding: 0.5rem 0.75rem; border-bottom: 2px solid transparent; } .cf-nav-link:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.35); } .cf-nav-link.is-active { color: #fff; border-bottom-color: var(--cf-accent); } /* Cards */ .cf-card, .cf .card { background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: 12px; box-shadow: 0 1px 10px rgba(16, 24, 40, 0.06); } /* Buttons */ .cf-btn-primary, .cf .btn-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); } .cf-btn-primary:hover, .cf .btn-primary:hover { background-color: var(--bs-secondary); border-color: var(--bs-secondary); } .cf-btn-secondary, .cf .btn-outline-secondary { background: #fff; border-color: var(--cf-border); color: var(--cf-text); } .cf-btn-secondary:hover, .cf .btn-outline-secondary:hover { background: var(--cf-bg); border-color: var(--cf-border); color: var(--cf-text); } .cf-btn-danger { background: var(--bs-danger); border-color: var(--bs-danger); color: #fff; } .cf-btn-danger:hover { filter: brightness(0.95); color: #fff; } /* Badges */ .cf-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.5rem; border-radius: 999px; font-weight: 600; font-size: 0.75rem; border: 1px solid var(--cf-border); background: var(--cf-surface); color: var(--cf-text); } .cf-badge--primary { border-color: rgba(14, 75, 90, 0.35); background: rgba(14, 75, 90, 0.08); color: var(--cf-primary); } .cf-badge--success { border-color: rgba(25, 135, 84, 0.35); background: rgba(25, 135, 84, 0.08); color: #198754; } .cf-badge--warning, .cf-badge--pending { border-color: rgba(198, 161, 91, 0.55); background: rgba(198, 161, 91, 0.12); color: #7a5b25; } .cf-badge--danger { border-color: rgba(220, 53, 69, 0.35); background: rgba(220, 53, 69, 0.08); color: #dc3545; } /* Tables */ .cf-table { width: 100%; border-collapse: collapse; background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: 12px; overflow: hidden; } .cf-table th, .cf-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--cf-border); } .cf-table tbody tr:nth-child(even) { background: rgba(15, 23, 42, 0.02); } .cf-table tbody tr:hover { background: rgba(14, 75, 90, 0.04); } /* Parent banner */ .cf-banner { background: var(--cf-surface); border-bottom: 1px solid var(--cf-border); } /* ============================================ GLOBAL RESPONSIVE STYLES - MOBILE FIRST ============================================ */ /* Base responsive utilities */ .cf-hide-mobile { display: none !important; } .cf-show-mobile { display: block !important; } @media (min-width: 576px) { .cf-hide-mobile { display: block !important; } .cf-show-mobile { display: none !important; } } /* Container adjustments */ @media (max-width: 575px) { .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; } } /* Typography responsive */ h1, .h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); } h2, .h2 { font-size: clamp(1.35rem, 3.5vw, 1.875rem); } h3, .h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); } h4, .h4 { font-size: clamp(1.1rem, 2.5vw, 1.25rem); } /* Card responsive padding */ @media (max-width: 575px) { .cf .card-body, .cf-card .card-body { padding: 1rem; } .cf .card-header, .cf-card .card-header { padding: 0.75rem 1rem; } } /* Form elements responsive */ @media (max-width: 575px) { .cf .form-control-lg, .cf .form-select-lg { font-size: 1rem; padding: 0.5rem 0.75rem; } .cf .btn-lg { font-size: 1rem; padding: 0.5rem 1rem; } } /* Table responsive improvements */ @media (max-width: 767px) { .cf .table-responsive { border-radius: 12px; border: 1px solid var(--cf-border); } .cf .table { font-size: 0.875rem; } .cf .table th, .cf .table td { padding: 0.5rem; } } /* Buttons touch-friendly on mobile */ @media (max-width: 767px) { .cf .btn { min-height: 44px; padding-top: 0.5rem; padding-bottom: 0.5rem; } .cf .btn-sm { min-height: 36px; } } /* Navbar responsive */ @media (max-width: 991px) { .cf-header .navbar-nav { padding: 1rem 0; gap: 0.25rem; } .cf-header .nav-link { padding: 0.75rem 1rem !important; border-radius: 8px; } .cf-header .nav-link:hover { background: rgba(255,255,255,0.1); } .cf-header .d-flex.gap-2 { flex-direction: column; gap: 0.5rem !important; padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 0.5rem; } .cf-header .d-flex.gap-2 .btn { width: 100%; justify-content: center; } } /* Badge responsive */ @media (max-width: 575px) { .cf .badge, .cf-badge { font-size: 0.65rem; padding: 0.2rem 0.4rem; } } /* Modal responsive */ @media (max-width: 575px) { .cf .modal-dialog { margin: 0.5rem; } .cf .modal-content { border-radius: 12px; } .cf .modal-header, .cf .modal-footer { padding: 0.75rem 1rem; } .cf .modal-body { padding: 1rem; } } /* Pagination responsive */ @media (max-width: 575px) { .cf .pagination { flex-wrap: wrap; justify-content: center; gap: 0.25rem; } .cf .page-link { padding: 0.4rem 0.65rem; font-size: 0.85rem; } } /* Alert responsive */ @media (max-width: 575px) { .cf .alert { padding: 0.75rem 1rem; font-size: 0.875rem; border-radius: 8px; } } /* Dropdown responsive */ @media (max-width: 575px) { .cf .dropdown-menu { position: fixed !important; left: 0.5rem !important; right: 0.5rem !important; width: auto !important; max-width: none !important; transform: none !important; } .cf .dropdown-item { padding: 0.75rem 1rem; } } /* Flex gap responsive utilities */ @media (max-width: 575px) { .gap-3 { gap: 0.75rem !important; } .gap-4 { gap: 1rem !important; } } /* Grid spacing responsive */ @media (max-width: 575px) { .row.g-4 { --bs-gutter-y: 1rem; --bs-gutter-x: 0.75rem; } .row.g-3 { --bs-gutter-y: 0.75rem; --bs-gutter-x: 0.5rem; } } /* Make text more readable on mobile */ @media (max-width: 575px) { body { font-size: 0.9375rem; line-height: 1.6; } .small, small { font-size: 0.8125rem; } } /* Touch scroll improvements */ .cf { -webkit-overflow-scrolling: touch; } .cf .table-responsive, .cf .overflow-auto { -webkit-overflow-scrolling: touch; scrollbar-width: thin; } /* Improve tap targets */ @media (max-width: 767px) { .cf a:not(.btn), .cf button:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; } } /* Card soft variant for sections */ .cf .card-soft { border: 1px solid var(--cf-border); border-radius: 12px; box-shadow: 0 1px 10px rgba(16, 24, 40, 0.04); } @media (max-width: 575px) { .cf .card-soft { border-radius: 8px; margin-left: -0.5rem; margin-right: -0.5rem; border-left: none; border-right: none; border-radius: 0; } } /* Image contain for photo grids */ .cf img.responsive-contain { max-width: 100%; height: auto; object-fit: contain; } /* Safe area insets for notched devices */ @supports (padding: max(0px)) { .cf-header { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } @media (max-width: 575px) { .container, .container-fluid { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } } }