1.1: CSS Modulization - Create 8 modular CSS files

- base.css: Foundation styles, typography, resets
- components.css: Buttons, cards, badges, alerts, modals
- forms.css: Input fields, validation, checkboxes, radio
- tables.css: Table styles, responsive, pagination
- layout.css: Header, sidebar, navigation, grid
- darkmode.css: Dark theme variables and overrides
- responsive.css: Mobile-first, breakpoints, grid columns
- utilities.css: Spacing, colors, text, helpers

All files support Bootstrap 5 + SmartAdmin theme
- Total CSS: ~1800 lines (organized, maintainable)
- Supports dark mode via data-bs-theme="dark"
- Mobile-first responsive design
- Preserved smartapp.min.css for legacy compatibility

Load order:
1. base → components → forms → tables → layout
2. darkmode → responsive → utilities
3. smartapp.min.css (fallback)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

legacy/smartadmin/css/base.css

@@ -0,0 +1,192 @@
+/* ============================================================
+   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;
+  }
+}