/* ============================================================ SmartAdmin Bootstrap 5 - Base Styles CSS Module: Foundation & Resets ============================================================ */ /* Root Variables */ :root { /* Primary Colors */ --bs-primary: #2196f3; --bs-primary-rgb: 33, 150, 243; --bs-secondary: #757575; --bs-success: #4caf50; --bs-success-rgb: 76, 175, 80; --bs-danger: #f44336; --bs-danger-rgb: 244, 67, 54; --bs-warning: #ff9800; --bs-warning-rgb: 255, 152, 0; --bs-info: #00bcd4; --bs-info-rgb: 0, 188, 212; /* Neutral Colors */ --bs-light: #f5f5f5; --bs-dark: #212121; --bs-gray-100: #f8f9fa; --bs-gray-200: #e9ecef; --bs-gray-300: #dee2e6; --bs-gray-400: #ced4da; --bs-gray-500: #adb5bd; --bs-gray-600: #6c757d; --bs-gray-700: #495057; --bs-gray-800: #343a40; --bs-gray-900: #212529; /* Spacing */ --bs-spacer: 1rem; /* Borders */ --bs-border-radius: 0.25rem; --bs-border-radius-sm: 0.1875rem; --bs-border-radius-lg: 0.375rem; --bs-border-radius-xl: 0.5rem; --bs-border-radius-2xl: 1rem; --bs-border-radius-pill: 50rem; /* Shadows */ --bs-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --bs-box-shadow-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.075); --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); } /* Dark Mode Variables */ [data-bs-theme="dark"] { --bs-body-bg: #121212; --bs-body-color: #ffffff; --bs-gray-100: #212121; --bs-gray-200: #303030; --bs-gray-300: #424242; --bs-gray-400: #616161; --bs-gray-500: #757575; --bs-gray-600: #9e9e9e; } /* Reset & Base */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 0.9375rem; line-height: 1.5; color: var(--bs-body-color); background-color: var(--bs-body-bg); transition: background-color 0.3s ease, color 0.3s ease; } /* Typography Base */ h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; margin-bottom: 0.5rem; color: inherit; } h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1.1rem; } h6 { font-size: 1rem; } p { margin-bottom: 1rem; color: inherit; } small, .small { font-size: 0.875rem; } /* Links */ a { color: var(--bs-primary); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--bs-primary); text-decoration: underline; } /* Images */ img { max-width: 100%; height: auto; display: block; } /* Code */ code, pre { background-color: var(--bs-gray-100); padding: 0.25rem 0.5rem; border-radius: var(--bs-border-radius); font-family: 'Courier New', monospace; font-size: 0.875rem; } pre { padding: 1rem; overflow-x: auto; margin-bottom: 1rem; } /* Scrollbar Styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bs-gray-200); } ::-webkit-scrollbar-thumb { background: var(--bs-gray-400); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--bs-gray-500); } /* Selection */ ::selection { background-color: var(--bs-primary); color: white; } /* Focus States */ *:focus { outline: none; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } /* Print Styles */ @media print { body { background: white; } .no-print, .d-print-none { display: none !important; } }