/**
* BFS Unified Design System
* Version: 1.0.0
*
* A consistent design system for all BFS portals.
* No Bootstrap dependencies - fully custom CSS.
*
* Usage:
* 1. Include Poppins font in :
*
*
*
*
* 2. Include this CSS file:
*
*
* 3. Include bfs-theme.js for dark mode toggle:
*
*/
/* ==========================================================================
CSS RESET
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
tab-size: 4;
}
body {
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
a {
text-decoration: none;
color: inherit;
}
ul, ol {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ==========================================================================
CSS VARIABLES - LIGHT MODE (Default)
========================================================================== */
:root {
/* === BRAND COLORS === */
--bfs-blue: #0170B9;
--bfs-blue-hover: #015a94;
--bfs-blue-light: #e6f3fa;
--bfs-blue-rgb: 1, 112, 185;
/* === TEXT COLORS === */
--text-primary: #1e293b;
--text-secondary: #475569;
--text-muted: #64748b;
--text-on-primary: #ffffff;
/* === BACKGROUND COLORS === */
--bg-page: #e8f4fc; /* Soft sky blue - easier on eyes */
--bg-card: #ffffff;
--bg-secondary: #f0f7ff; /* Very light blue for secondary areas */
--bg-hover: #dbeafe; /* Light blue for hover states */
--bg-input: #ffffff;
/* === BORDER COLORS === */
--border-color: #93c5fd; /* Visible blue border */
--border-focus: var(--bfs-blue);
/* === STATUS COLORS === */
--color-success: #16a34a;
--color-success-bg: #dcfce7;
--color-success-border: #bbf7d0;
--color-warning: #ca8a04;
--color-warning-bg: #fef9c3;
--color-warning-border: #fef08a;
--color-error: #dc2626;
--color-error-bg: #fee2e2;
--color-error-border: #fecaca;
--color-info: #2563eb;
--color-info-bg: #dbeafe;
--color-info-border: #bfdbfe;
/* === SHADOWS === */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
/* === SPACING === */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
/* === BORDER RADIUS === */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-full: 9999px;
/* === TYPOGRAPHY === */
--font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
/* === TRANSITIONS === */
--transition-fast: 150ms ease;
--transition-normal: 200ms ease;
--transition-slow: 300ms ease;
/* === Z-INDEX SCALE === */
--z-dropdown: 100;
--z-sticky: 200;
--z-modal-backdrop: 300;
--z-modal: 400;
--z-toast: 500;
/* === NAVBAR === */
--navbar-bg: var(--bfs-blue);
--navbar-text: #ffffff;
--navbar-height: 60px;
/* === FOOTER === */
--footer-bg: var(--bg-secondary);
--footer-text: var(--text-secondary);
}
/* ==========================================================================
CSS VARIABLES - DARK MODE (Blue-tinted Slate)
========================================================================== */
[data-theme="dark"],
.dark-mode {
/* === BRAND COLORS === */
--bfs-blue: #3b82f6;
--bfs-blue-hover: #60a5fa;
--bfs-blue-light: #1e3a5f;
--bfs-blue-rgb: 59, 130, 246;
/* === TEXT COLORS === */
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--text-on-primary: #ffffff;
/* === BACKGROUND COLORS === */
--bg-page: #0f172a;
--bg-card: #1e293b;
--bg-secondary: #334155;
--bg-hover: #475569;
--bg-input: #1e293b;
/* === BORDER COLORS === */
--border-color: #334155;
--border-focus: var(--bfs-blue);
/* === STATUS COLORS === */
--color-success: #22c55e;
--color-success-bg: rgba(34, 197, 94, 0.15);
--color-success-border: rgba(34, 197, 94, 0.3);
--color-warning: #eab308;
--color-warning-bg: rgba(234, 179, 8, 0.15);
--color-warning-border: rgba(234, 179, 8, 0.3);
--color-error: #ef4444;
--color-error-bg: rgba(239, 68, 68, 0.15);
--color-error-border: rgba(239, 68, 68, 0.3);
--color-info: #3b82f6;
--color-info-bg: rgba(59, 130, 246, 0.15);
--color-info-border: rgba(59, 130, 246, 0.3);
/* === SHADOWS (stronger for dark mode) === */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
/* === NAVBAR === */
--navbar-bg: #1e293b;
--navbar-text: #f1f5f9;
/* === FOOTER === */
--footer-bg: #1e293b;
--footer-text: var(--text-secondary);
}
/* ==========================================================================
BASE STYLES
========================================================================== */
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: var(--font-primary);
font-size: 0.9375rem;
font-weight: 400;
color: var(--text-primary);
background-color: var(--bg-page);
min-height: 100vh;
display: flex;
flex-direction: column;
transition: background-color var(--transition-slow), color var(--transition-slow);
}
/* ==========================================================================
TYPOGRAPHY
========================================================================== */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.3;
color: var(--text-primary);
margin-bottom: 0.5em;
}
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; font-weight: 500; }
h5 { font-size: 1rem; font-weight: 500; }
h6 { font-size: 0.875rem; font-weight: 500; }
p {
margin-bottom: 1rem;
}
p:last-child {
margin-bottom: 0;
}
a {
color: var(--bfs-blue);
transition: color var(--transition-fast);
}
a:hover {
color: var(--bfs-blue-hover);
}
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-info { color: var(--color-info); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
/* ==========================================================================
LAYOUT - CONTAINER
========================================================================== */
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--space-md);
}
.container-sm { max-width: 640px; }
.container-md { max-width: 768px; }
.container-lg { max-width: 1024px; }
.container-xl { max-width: 1280px; }
.container-full { max-width: 100%; }
/* ==========================================================================
LAYOUT - FLEXBOX UTILITIES
========================================================================== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
/* ==========================================================================
LAYOUT - GRID UTILITIES
========================================================================== */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto-fit {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-auto-fill {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
/* ==========================================================================
SPACING UTILITIES
========================================================================== */
/* Margin */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* Padding */
.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.pt-0 { padding-top: 0; }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pb-0 { padding-bottom: 0; }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
/* ==========================================================================
BUTTONS
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: 0.5rem 1rem;
font-family: var(--font-primary);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.5;
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
transition: all var(--transition-normal);
white-space: nowrap;
text-decoration: none;
}
.btn:focus-visible {
outline: 2px solid var(--bfs-blue);
outline-offset: 2px;
}
.btn:disabled,
.btn.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Primary Button */
.btn-primary {
background-color: var(--bfs-blue);
color: var(--text-on-primary);
border-color: var(--bfs-blue);
}
.btn-primary:hover {
background-color: var(--bfs-blue-hover);
border-color: var(--bfs-blue-hover);
}
/* Secondary Button */
.btn-secondary {
background-color: var(--bg-secondary);
color: var(--text-primary);
border-color: var(--border-color);
}
.btn-secondary:hover {
background-color: var(--bg-hover);
border-color: var(--border-color);
}
/* Success Button */
.btn-success {
background-color: var(--color-success);
color: var(--text-on-primary);
border-color: var(--color-success);
}
.btn-success:hover {
opacity: 0.9;
}
/* Danger Button */
.btn-danger {
background-color: var(--color-error);
color: var(--text-on-primary);
border-color: var(--color-error);
}
.btn-danger:hover {
opacity: 0.9;
}
/* Warning Button */
.btn-warning {
background-color: var(--color-warning);
color: #1e293b;
border-color: var(--color-warning);
}
.btn-warning:hover {
opacity: 0.9;
}
/* Outline Buttons */
.btn-outline-primary {
background-color: transparent;
color: var(--bfs-blue);
border-color: var(--bfs-blue);
}
.btn-outline-primary:hover {
background-color: var(--bfs-blue);
color: var(--text-on-primary);
}
.btn-outline-secondary {
background-color: transparent;
color: var(--text-secondary);
border-color: var(--border-color);
}
.btn-outline-secondary:hover {
background-color: var(--bg-hover);
}
.btn-outline-success {
background-color: transparent;
color: var(--color-success);
border-color: var(--color-success);
}
.btn-outline-success:hover {
background-color: var(--color-success);
color: var(--text-on-primary);
}
.btn-outline-danger {
background-color: transparent;
color: var(--color-error);
border-color: var(--color-error);
}
.btn-outline-danger:hover {
background-color: var(--color-error);
color: var(--text-on-primary);
}
/* Ghost Button (no border) */
.btn-ghost {
background-color: transparent;
color: var(--text-secondary);
border-color: transparent;
}
.btn-ghost:hover {
background-color: var(--bg-hover);
color: var(--text-primary);
}
/* Button Sizes */
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
}
.btn-lg {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
/* Full Width */
.btn-block {
display: flex;
width: 100%;
}
/* Button with icon */
.btn i,
.btn svg {
width: 1em;
height: 1em;
}
/* ==========================================================================
FORMS
========================================================================== */
.form-group {
margin-bottom: var(--space-md);
}
.form-label {
display: block;
margin-bottom: var(--space-xs);
font-weight: 500;
font-size: 0.875rem;
color: var(--text-primary);
}
.form-label.required::after {
content: " *";
color: var(--color-error);
}
.form-input,
.form-select,
.form-textarea {
display: block;
width: 100%;
padding: 0.5rem 0.75rem;
font-family: var(--font-primary);
font-size: 0.9375rem;
line-height: 1.5;
color: var(--text-primary);
background-color: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--border-focus);
box-shadow: 0 0 0 3px rgba(var(--bfs-blue-rgb), 0.15);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--text-muted);
}
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
background-color: var(--bg-secondary);
color: var(--text-muted);
cursor: not-allowed;
}
.form-select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
padding-right: 2.5rem;
}
[data-theme="dark"] .form-select,
.dark-mode .form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}
.form-textarea {
min-height: 100px;
resize: vertical;
}
.form-checkbox,
.form-radio {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
}
.form-checkbox input,
.form-radio input {
width: 1.125rem;
height: 1.125rem;
cursor: pointer;
accent-color: var(--bfs-blue);
}
.form-hint {
margin-top: var(--space-xs);
font-size: 0.75rem;
color: var(--text-muted);
}
.form-error {
margin-top: var(--space-xs);
font-size: 0.75rem;
color: var(--color-error);
}
/* Input with error state */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
border-color: var(--color-error);
}
.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus {
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
/* Input group */
.input-group {
display: flex;
}
.input-group .form-input {
flex: 1;
border-radius: 0;
}
.input-group .form-input:first-child {
border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.input-group .form-input:last-child {
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.input-group .btn {
border-radius: 0;
}
.input-group .btn:last-child {
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.input-group-text {
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
color: var(--text-secondary);
font-size: 0.875rem;
}
/* ==========================================================================
CARDS
========================================================================== */
.card {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: background-color var(--transition-slow), border-color var(--transition-slow);
}
.card-header {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--border-color);
background-color: var(--bg-secondary);
}
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5 {
margin-bottom: 0;
}
.card-body {
padding: var(--space-lg);
}
.card-footer {
padding: var(--space-md) var(--space-lg);
border-top: 1px solid var(--border-color);
background-color: var(--bg-secondary);
}
/* Card with hover effect */
.card-hover {
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.card-hover:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Clickable card */
.card-link {
display: block;
text-decoration: none;
color: inherit;
}
.card-link:hover .card {
border-color: var(--bfs-blue);
}
/* ==========================================================================
TABLES
========================================================================== */
.table-container {
overflow-x: auto;
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
}
.table {
width: 100%;
background-color: var(--bg-card);
}
.table th,
.table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
vertical-align: middle;
}
.table th {
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
background-color: var(--bg-secondary);
white-space: nowrap;
}
.table tbody tr:last-child td {
border-bottom: none;
}
/* Striped rows */
.table-striped tbody tr:nth-child(even) {
background-color: var(--bg-secondary);
}
/* Hover rows */
.table-hover tbody tr:hover {
background-color: var(--bg-hover);
}
/* Compact table */
.table-sm th,
.table-sm td {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
/* ==========================================================================
BADGES
========================================================================== */
.badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
font-size: 0.75rem;
font-weight: 500;
line-height: 1;
border-radius: var(--radius-full);
white-space: nowrap;
}
.badge-primary {
background-color: var(--bfs-blue-light);
color: var(--bfs-blue);
}
.badge-secondary {
background-color: var(--bg-secondary);
color: var(--text-secondary);
}
.badge-success {
background-color: var(--color-success-bg);
color: var(--color-success);
}
.badge-warning {
background-color: var(--color-warning-bg);
color: var(--color-warning);
}
.badge-error {
background-color: var(--color-error-bg);
color: var(--color-error);
}
.badge-info {
background-color: var(--color-info-bg);
color: var(--color-info);
}
/* Solid badges */
.badge-solid-primary {
background-color: var(--bfs-blue);
color: var(--text-on-primary);
}
.badge-solid-success {
background-color: var(--color-success);
color: var(--text-on-primary);
}
.badge-solid-warning {
background-color: var(--color-warning);
color: #1e293b;
}
.badge-solid-error {
background-color: var(--color-error);
color: var(--text-on-primary);
}
/* ==========================================================================
ALERTS / FLASH MESSAGES
========================================================================== */
.alert {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-md);
border-radius: var(--radius-lg);
border: 1px solid transparent;
margin-bottom: var(--space-md);
}
.alert-success {
background-color: var(--color-success-bg);
border-color: var(--color-success-border);
color: var(--color-success);
}
.alert-warning {
background-color: var(--color-warning-bg);
border-color: var(--color-warning-border);
color: var(--color-warning);
}
.alert-error {
background-color: var(--color-error-bg);
border-color: var(--color-error-border);
color: var(--color-error);
}
.alert-info {
background-color: var(--color-info-bg);
border-color: var(--color-info-border);
color: var(--color-info);
}
.alert-title {
font-weight: 600;
margin-bottom: var(--space-xs);
}
.alert-close {
margin-left: auto;
background: none;
border: none;
cursor: pointer;
padding: 0;
color: inherit;
opacity: 0.7;
font-size: 1.25rem;
line-height: 1;
}
.alert-close:hover {
opacity: 1;
}
/* ==========================================================================
NAVBAR - UNIFIED ACROSS ALL BFS PORTALS
========================================================================== */
.navbar {
background: linear-gradient(135deg, var(--bfs-blue) 0%, #015a94 100%);
padding: 0.5rem 1.5rem;
position: sticky;
top: 0;
z-index: var(--z-sticky);
box-shadow: 0 2px 8px rgba(1, 112, 185, 0.3);
}
[data-theme="dark"] .navbar,
.dark-mode .navbar {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.nav-container {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-brand {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
.nav-brand .brand-link {
display: block;
text-decoration: none;
}
.nav-brand .nav-logo {
height: 40px;
width: auto;
display: block;
}
.nav-brand .nav-subtitle {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.85);
letter-spacing: 0.3px;
margin: 0;
}
/* Alternative brand layout with title + subtitle stacked */
.nav-brand .brand-text {
display: flex;
flex-direction: column;
gap: 0;
}
.nav-brand .brand-text h1 {
font-size: 0.95rem;
font-weight: 600;
color: white;
margin: 0;
line-height: 1.2;
}
.nav-brand .brand-text span,
.nav-brand .brand-text p {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.8);
margin: 0;
}
.nav-menu {
display: flex;
list-style: none;
gap: 0.5rem;
align-items: center;
margin: 0;
padding: 0;
}
.nav-link {
display: inline-block;
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
font-size: 0.875rem;
border-radius: var(--radius-md);
transition: all 0.2s;
text-decoration: none;
background: transparent;
border: none;
cursor: pointer;
}
.nav-link:hover {
color: white;
background-color: rgba(255, 255, 255, 0.15);
}
.nav-link.active {
color: white;
background-color: rgba(255, 255, 255, 0.2);
}
/* Logout button variant */
.nav-link.logout {
background-color: rgba(239, 68, 68, 0.8);
color: white;
}
.nav-link.logout:hover {
background-color: rgba(239, 68, 68, 1);
}
/* Navbar dropdown */
.navbar .dropdown {
position: relative;
}
.navbar .dropdown-toggle::after {
content: " ▾";
font-size: 0.7em;
opacity: 0.8;
}
.navbar .dropdown-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
min-width: 180px;
z-index: 1000;
padding: 0.5rem 0;
margin-top: 0.25rem;
}
.navbar .dropdown:hover .dropdown-menu,
.navbar .dropdown-menu.show {
display: block;
}
.navbar .dropdown-item {
display: block;
padding: 0.5rem 1rem;
color: var(--text-primary);
text-decoration: none;
font-size: 0.875rem;
transition: background 0.2s;
}
.navbar .dropdown-item:hover {
background: var(--bg-secondary);
}
.navbar .dropdown-divider {
border: none;
border-top: 1px solid var(--border-color);
margin: 0.5rem 0;
}
/* Legacy class names for backwards compatibility */
.navbar-brand {
display: flex;
align-items: center;
gap: var(--space-sm);
font-weight: 700;
font-size: 1.125rem;
color: white;
text-decoration: none;
}
.navbar-brand img {
height: 40px;
width: auto;
}
.navbar-nav {
display: flex;
align-items: center;
gap: var(--space-md);
}
/* ==========================================================================
THEME TOGGLE
========================================================================== */
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background-color: rgba(255, 255, 255, 0.1);
border: none;
border-radius: var(--radius-md);
color: var(--navbar-text);
cursor: pointer;
transition: background-color var(--transition-fast);
}
.theme-toggle:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.theme-toggle:active {
background-color: rgba(255, 255, 255, 0.3);
transform: scale(0.95);
}
.theme-toggle:focus {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 2px;
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon,
.theme-toggle .theme-icon {
font-size: 1.25rem;
pointer-events: none;
}
/* Light mode: show moon, hide sun */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
/* Dark mode: show sun, hide moon */
[data-theme="dark"] .theme-toggle .icon-sun,
.dark-mode .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon,
.dark-mode .theme-toggle .icon-moon { display: none; }
/* Non-navbar theme toggle (for cards, etc.) */
.theme-toggle-standalone {
background-color: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.theme-toggle-standalone:hover {
background-color: var(--bg-hover);
}
/* ==========================================================================
FOOTER
========================================================================== */
.footer {
margin-top: auto;
padding: var(--space-lg);
background-color: var(--footer-bg);
color: var(--footer-text);
text-align: center;
font-size: 0.875rem;
border-top: 1px solid var(--border-color);
}
.footer a {
color: var(--bfs-blue);
}
.footer a:hover {
text-decoration: underline;
}
/* ==========================================================================
MODALS
========================================================================== */
.modal-backdrop {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: var(--z-modal-backdrop);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
.modal-backdrop.show {
opacity: 1;
visibility: visible;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
z-index: var(--z-modal);
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
background-color: var(--bg-card);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal);
}
.modal.show {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--border-color);
}
.modal-title {
font-size: 1.125rem;
font-weight: 600;
margin: 0;
}
.modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-md);
color: var(--text-muted);
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.modal-close:hover {
background-color: var(--bg-hover);
color: var(--text-primary);
}
.modal-body {
padding: var(--space-lg);
}
.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
border-top: 1px solid var(--border-color);
}
/* ==========================================================================
DROPDOWN
========================================================================== */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: var(--z-dropdown);
min-width: 180px;
padding: var(--space-xs) 0;
margin-top: var(--space-xs);
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
}
.dropdown-menu.show,
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
color: var(--text-primary);
font-size: 0.875rem;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.dropdown-item:hover {
background-color: var(--bg-hover);
}
.dropdown-divider {
height: 1px;
margin: var(--space-xs) 0;
background-color: var(--border-color);
}
/* ==========================================================================
TABS
========================================================================== */
.tabs {
display: flex;
gap: var(--space-xs);
border-bottom: 1px solid var(--border-color);
margin-bottom: var(--space-lg);
}
.tab {
padding: var(--space-sm) var(--space-md);
font-weight: 500;
font-size: 0.875rem;
color: var(--text-secondary);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast);
margin-bottom: -1px;
}
.tab:hover {
color: var(--text-primary);
}
.tab.active {
color: var(--bfs-blue);
border-bottom-color: var(--bfs-blue);
}
/* Tab content - Bootstrap compatible */
/* .tab-content is visible container, .tab-pane children are hidden/shown */
.tab-content > .tab-pane {
display: none;
}
.tab-content > .tab-pane.active,
.tab-content > .tab-pane.show {
display: block;
}
/* ==========================================================================
BREADCRUMBS
========================================================================== */
.breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-xs);
font-size: 0.875rem;
margin-bottom: var(--space-md);
}
.breadcrumb-item {
color: var(--text-muted);
}
.breadcrumb-item a {
color: var(--bfs-blue);
}
.breadcrumb-item a:hover {
text-decoration: underline;
}
.breadcrumb-item + .breadcrumb-item::before {
content: "/";
margin-right: var(--space-xs);
color: var(--text-muted);
}
.breadcrumb-item.active {
color: var(--text-primary);
}
/* ==========================================================================
PROGRESS BAR
========================================================================== */
.progress {
height: 8px;
background-color: var(--bg-secondary);
border-radius: var(--radius-full);
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: var(--bfs-blue);
border-radius: var(--radius-full);
transition: width var(--transition-slow);
}
.progress-bar-success { background-color: var(--color-success); }
.progress-bar-warning { background-color: var(--color-warning); }
.progress-bar-error { background-color: var(--color-error); }
/* ==========================================================================
PAGINATION
========================================================================== */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
}
.page-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 var(--space-sm);
font-size: 0.875rem;
color: var(--text-primary);
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.page-link:hover {
background-color: var(--bg-hover);
border-color: var(--bfs-blue);
color: var(--bfs-blue);
}
.page-link.active {
background-color: var(--bfs-blue);
border-color: var(--bfs-blue);
color: var(--text-on-primary);
}
.page-link.disabled {
opacity: 0.5;
pointer-events: none;
}
/* ==========================================================================
EMPTY STATE
========================================================================== */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-2xl);
text-align: center;
}
.empty-state-icon {
font-size: 3rem;
color: var(--text-muted);
margin-bottom: var(--space-md);
}
.empty-state-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: var(--space-sm);
}
.empty-state-description {
color: var(--text-secondary);
max-width: 400px;
margin-bottom: var(--space-lg);
}
/* ==========================================================================
LOADING SPINNER
========================================================================== */
.spinner {
display: inline-block;
width: 24px;
height: 24px;
border: 3px solid var(--border-color);
border-top-color: var(--bfs-blue);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.spinner-sm {
width: 16px;
height: 16px;
border-width: 2px;
}
.spinner-lg {
width: 40px;
height: 40px;
border-width: 4px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ==========================================================================
TOAST / NOTIFICATIONS
========================================================================== */
.toast-container {
position: fixed;
top: var(--space-lg);
right: var(--space-lg);
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.toast {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-md);
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
min-width: 300px;
max-width: 400px;
animation: slideIn var(--transition-normal) ease;
}
.toast-success { border-left: 4px solid var(--color-success); }
.toast-warning { border-left: 4px solid var(--color-warning); }
.toast-error { border-left: 4px solid var(--color-error); }
.toast-info { border-left: 4px solid var(--color-info); }
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ==========================================================================
ACCESSIBILITY
========================================================================== */
/* Focus visible for keyboard navigation */
*:focus {
outline: none;
}
*:focus-visible {
outline: 2px solid var(--bfs-blue);
outline-offset: 2px;
}
/* Skip link for screen readers */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-md);
z-index: 9999;
padding: var(--space-sm) var(--space-md);
background-color: var(--bg-card);
border-radius: var(--radius-md);
transition: top var(--transition-fast);
}
.skip-link:focus {
top: var(--space-md);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Visually hidden but accessible */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
UTILITY CLASSES
========================================================================== */
/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
/* Visibility */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
/* Width */
.w-full { width: 100%; }
.w-auto { width: auto; }
/* Height */
.h-full { height: 100%; }
.h-screen { height: 100vh; }
/* Border radius */
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }
/* Border */
.border { border: 1px solid var(--border-color); }
.border-0 { border: 0; }
.border-t { border-top: 1px solid var(--border-color); }
.border-b { border-bottom: 1px solid var(--border-color); }
/* Background */
.bg-page { background-color: var(--bg-page); }
.bg-card { background-color: var(--bg-card); }
.bg-secondary { background-color: var(--bg-secondary); }
/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
/* Transition */
.transition { transition: all var(--transition-normal); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }
/* ==========================================================================
RESPONSIVE BREAKPOINTS
========================================================================== */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
.container { padding: 0 var(--space-lg); }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
.d-md-none { display: none; }
.d-md-block { display: block; }
.d-md-flex { display: flex; }
.grid-cols-md-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-md-3 { grid-template-columns: repeat(3, 1fr); }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.d-lg-none { display: none; }
.d-lg-block { display: block; }
.d-lg-flex { display: flex; }
.grid-cols-lg-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-lg-4 { grid-template-columns: repeat(4, 1fr); }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.container { max-width: 1200px; }
}
/* Mobile-first responsive utilities */
@media (max-width: 767px) {
.hide-mobile { display: none; }
.navbar {
padding: 0 var(--space-md);
}
.navbar-nav {
gap: var(--space-sm);
}
.nav-link {
padding: var(--space-xs) var(--space-sm);
}
.grid-cols-2,
.grid-cols-3,
.grid-cols-4 {
grid-template-columns: 1fr;
}
.modal {
width: 95%;
max-height: 95vh;
}
}