appclean 2.0.2 → 2.0.3

package/src/ui/client/styles/responsive.css

@@ -0,0 +1,388 @@
+/* ============================================================================
+   Responsive Design - Mobile, Tablet, Desktop
+   ============================================================================ */
+
+/* ============================================================================
+   Mobile First (0px - 640px)
+   ============================================================================ */
+
+@media (max-width: 640px) {
+  :root {
+    --sidebar-width: 16rem;
+    --header-height: 3.5rem;
+  }
+
+  /* Header Adjustments */
+  .header-container {
+    padding: 0 var(--space-3);
+  }
+
+  .sidebar-toggle {
+    display: flex;
+  }
+
+  .logo-text {
+    display: none;
+  }
+
+  .header-actions {
+    gap: var(--space-2);
+  }
+
+  /* Sidebar Adjustments */
+  .sidebar {
+    width: 100%;
+    max-width: 80%;
+    transform: translateX(-100%);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .sidebar.open {
+    transform: translateX(0);
+  }
+
+  .sidebar-overlay {
+    display: block;
+  }
+
+  .sidebar-overlay.active {
+    opacity: 1;
+  }
+
+  /* Main Content Adjustments */
+  .main-content {
+    margin-left: 0;
+    width: 100%;
+  }
+
+  .content-wrapper {
+    padding: var(--space-4) var(--space-3);
+  }
+
+  /* Typography Adjustments */
+  h1 {
+    font-size: var(--font-2xl);
+  }
+
+  h2 {
+    font-size: var(--font-xl);
+  }
+
+  h3 {
+    font-size: var(--font-lg);
+  }
+
+  /* Grid Adjustments */
+  .grid-cols-2,
+  .grid-cols-3,
+  .grid-cols-4 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  /* Card Adjustments */
+  .card {
+    margin-bottom: var(--space-4);
+  }
+
+  /* Modal Adjustments */
+  .modal-dialog {
+    width: 95%;
+    border-radius: var(--radius-xl);
+  }
+
+  /* Notification Adjustments */
+  .notifications-container {
+    right: var(--space-2);
+    left: var(--space-2);
+    width: auto;
+  }
+
+  .notification {
+    width: 100%;
+  }
+
+  /* Button Adjustments */
+  .btn {
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--font-sm);
+  }
+
+  /* Table Adjustments */
+  table {
+    font-size: var(--font-sm);
+  }
+
+  th,
+  td {
+    padding: var(--space-2) var(--space-3);
+  }
+
+  /* Form Adjustments */
+  input,
+  textarea,
+  select {
+    font-size: 16px; /* Prevents zoom on iOS */
+  }
+
+  /* Flexbox Adjustments */
+  .flex-reverse {
+    flex-direction: column-reverse;
+  }
+
+  /* Hide Elements on Mobile */
+  .hide-mobile {
+    display: none !important;
+  }
+}
+
+/* ============================================================================
+   Small Tablet (641px - 768px)
+   ============================================================================ */
+
+@media (min-width: 641px) and (max-width: 768px) {
+  .grid-cols-3,
+  .grid-cols-4 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .sidebar {
+    width: var(--sidebar-width);
+    transform: translateX(0);
+  }
+
+  .sidebar-toggle {
+    display: flex;
+  }
+
+  .logo-text {
+    display: none;
+  }
+
+  .main-content {
+    margin-left: var(--sidebar-width);
+  }
+
+  .sidebar-overlay {
+    display: none;
+  }
+
+  .content-wrapper {
+    padding: var(--space-6) var(--space-4);
+  }
+}
+
+/* ============================================================================
+   Tablet & Large Devices (769px - 1024px)
+   ============================================================================ */
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .grid-cols-4 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .hide-tablet {
+    display: none !important;
+  }
+
+  .show-tablet {
+    display: block !important;
+  }
+}
+
+/* ============================================================================
+   Desktop & Larger (1025px+)
+   ============================================================================ */
+
+@media (min-width: 1025px) {
+  .hide-desktop {
+    display: none !important;
+  }
+
+  .show-desktop {
+    display: block !important;
+  }
+}
+
+/* ============================================================================
+   Large Desktop (1536px+)
+   ============================================================================ */
+
+@media (min-width: 1536px) {
+  :root {
+    --sidebar-width: 18rem;
+  }
+
+  .max-content-xl {
+    max-width: var(--max-width-2xl);
+  }
+}
+
+/* ============================================================================
+   Landscape Orientation
+   ============================================================================ */
+
+@media (orientation: landscape) {
+  body {
+    overflow-x: auto;
+  }
+
+  :root {
+    --header-height: 3rem;
+  }
+}
+
+/* ============================================================================
+   High DPI / Retina Displays
+   ============================================================================ */
+
+@media (min-resolution: 2dppx) {
+  img {
+    image-rendering: -webkit-optimize-contrast;
+  }
+
+  .logo-image {
+    image-rendering: -webkit-optimize-contrast;
+  }
+}
+
+/* ============================================================================
+   Touch Devices
+   ============================================================================ */
+
+@media (hover: none) and (pointer: coarse) {
+  button,
+  a {
+    padding: var(--space-3);
+    min-height: 44px;
+  }
+
+  .btn-icon {
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  /* Increase touch targets */
+  .nav-item {
+    padding: var(--space-4);
+  }
+}
+
+/* ============================================================================
+   Print Media
+   ============================================================================ */
+
+@media print {
+  .app-header,
+  .sidebar,
+  .sidebar-overlay,
+  .header-actions,
+  .notifications-container,
+  .btn,
+  button {
+    display: none !important;
+  }
+
+  .main-content {
+    margin-left: 0;
+  }
+
+  .content-wrapper {
+    padding: 0;
+  }
+
+  body {
+    background: white;
+  }
+
+  .page-container {
+    max-width: 100%;
+  }
+}
+
+/* ============================================================================
+   Reduced Motion
+   ============================================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ============================================================================
+   Dark Mode Media Query
+   ============================================================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-primary: var(--dark-bg-primary);
+    --bg-secondary: var(--dark-bg-secondary);
+    --text-primary: var(--dark-text-primary);
+    --text-secondary: var(--dark-text-secondary);
+  }
+}
+
+/* ============================================================================
+   Light Mode Media Query
+   ============================================================================ */
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg-primary: var(--color-neutral-0);
+    --bg-secondary: var(--color-neutral-50);
+    --text-primary: var(--color-neutral-900);
+    --text-secondary: var(--color-neutral-600);
+  }
+}
+
+/* ============================================================================
+   iPad & Safari Specific Fixes
+   ============================================================================ */
+
+@supports (-webkit-touch-callout: none) {
+  /* iOS specific adjustments */
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  textarea {
+    font-size: 16px;
+    border-radius: 0;
+  }
+
+  select {
+    font-size: 16px;
+  }
+
+  body {
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+  }
+
+  input,
+  textarea,
+  select {
+    -webkit-user-select: text;
+  }
+
+  .sidebar {
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* ============================================================================
+   Container Queries (When supported)
+   ============================================================================ */
+
+@supports (container-type: inline-size) {
+  .card-grid {
+    container-type: inline-size;
+  }
+
+  @container (max-width: 300px) {
+    .card-grid > * {
+      grid-template-columns: 1fr;
+    }
+  }
+}

package/src/ui/client/styles/variables.css

@@ -1,13 +1,24 @@
-/* Design System - CSS Variables */
+/* ============================================================================
+   Modern Design System - CSS Variables
+   ============================================================================ */
 
 :root {
-  /* Colors - Primary */
-  --color-primary: #3b82f6;
-  --color-primary-hover: #2563eb;
-  --color-primary-light: #dbeafe;
-  --color-primary-dark: #1e40af;
+  /* ========== Color Palette ========== */
 
-  /* Colors - Semantic */
+  /* Primary Colors - Blues (Modern, Professional) */
+  --color-primary: #3b82f6;
+  --color-primary-50: #eff6ff;
+  --color-primary-100: #dbeafe;
+  --color-primary-200: #bfdbfe;
+  --color-primary-300: #93c5fd;
+  --color-primary-400: #60a5fa;
+  --color-primary-500: #3b82f6;
+  --color-primary-600: #2563eb;
+  --color-primary-700: #1d4ed8;
+  --color-primary-800: #1e40af;
+  --color-primary-900: #1e3a8a;
+
+  /* Semantic Colors */
   --color-success: #10b981;
   --color-success-light: #d1fae5;
   --color-warning: #f59e0b;
@@ -17,10 +28,11 @@
   --color-info: #0ea5e9;
   --color-info-light: #cffafe;
 
-  /* Colors - Neutral */
+  /* Neutral Colors - Gray Scale */
   --color-neutral-0: #ffffff;
   --color-neutral-50: #f9fafb;
   --color-neutral-100: #f3f4f6;
+  --color-neutral-150: #f0f1f3;
   --color-neutral-200: #e5e7eb;
   --color-neutral-300: #d1d5db;
   --color-neutral-400: #9ca3af;
@@ -30,44 +42,81 @@
   --color-neutral-800: #1f2937;
   --color-neutral-900: #111827;
 
-  /* Background & Surface */
-  --bg-primary: var(--color-neutral-0);
-  --bg-secondary: var(--color-neutral-50);
-  --bg-hover: var(--color-neutral-100);
-  --text-primary: var(--color-neutral-900);
-  --text-secondary: var(--color-neutral-600);
-  --text-muted: var(--color-neutral-500);
-  --border-color: var(--color-neutral-200);
-  --border-color-hover: var(--color-neutral-300);
-
-  /* Dark Mode */
-  --dark-bg-primary: var(--color-neutral-900);
-  --dark-bg-secondary: var(--color-neutral-800);
-  --dark-bg-hover: var(--color-neutral-700);
-  --dark-text-primary: var(--color-neutral-0);
-  --dark-text-secondary: var(--color-neutral-300);
-  --dark-text-muted: var(--color-neutral-400);
-  --dark-border-color: var(--color-neutral-700);
-  --dark-border-color-hover: var(--color-neutral-600);
-
-  /* Typography */
-  --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  /* ========== Light Mode (Default) ========== */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f9fafb;
+  --bg-tertiary: #f3f4f6;
+  --bg-hover: #f3f4f6;
+  --bg-active: #eff6ff;
+
+  --text-primary: #111827;
+  --text-secondary: #4b5563;
+  --text-tertiary: #6b7280;
+  --text-muted: #9ca3af;
+  --text-inverse: #ffffff;
+
+  --border-color: #e5e7eb;
+  --border-color-light: #f3f4f6;
+  --border-color-hover: #d1d5db;
+  --border-color-active: #3b82f6;
+
+  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+  /* ========== Dark Mode ========== */
+  --dark-bg-primary: #0f172a;
+  --dark-bg-secondary: #1e293b;
+  --dark-bg-tertiary: #334155;
+  --dark-bg-hover: #1e293b;
+  --dark-bg-active: #1e40af;
+
+  --dark-text-primary: #f8fafc;
+  --dark-text-secondary: #cbd5e1;
+  --dark-text-tertiary: #94a3b8;
+  --dark-text-muted: #64748b;
+  --dark-text-inverse: #0f172a;
+
+  --dark-border-color: #334155;
+  --dark-border-color-light: #1e293b;
+  --dark-border-color-hover: #475569;
+  --dark-border-color-active: #3b82f6;
+
+  --dark-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --dark-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  --dark-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
+
+  /* ========== Gradients ========== */
+  --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+
+  /* ========== Typography ========== */
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
 
-  /* Font Sizes */
-  --font-xs: 0.75rem;     /* 12px */
-  --font-sm: 0.875rem;    /* 14px */
-  --font-base: 1rem;      /* 16px */
-  --font-lg: 1.125rem;    /* 18px */
-  --font-xl: 1.25rem;     /* 20px */
-  --font-2xl: 1.5rem;     /* 24px */
-  --font-3xl: 1.875rem;   /* 30px */
+  /* Font Sizes (Refined Scale) */
+  --font-xs: 0.75rem;      /* 12px */
+  --font-sm: 0.875rem;     /* 14px */
+  --font-base: 1rem;       /* 16px */
+  --font-lg: 1.125rem;     /* 18px */
+  --font-xl: 1.25rem;      /* 20px */
+  --font-2xl: 1.5rem;      /* 24px */
+  --font-3xl: 1.875rem;    /* 30px */
+  --font-4xl: 2.25rem;     /* 36px */
+  --font-5xl: 3rem;        /* 48px */
 
   /* Font Weights */
+  --fw-light: 300;
   --fw-regular: 400;
   --fw-medium: 500;
   --fw-semibold: 600;
   --fw-bold: 700;
+  --fw-extrabold: 800;
 
   /* Line Heights */
   --lh-tight: 1.25;
@@ -75,66 +124,111 @@
   --lh-relaxed: 1.625;
   --lh-loose: 2;
 
-  /* Spacing Scale (4px base unit) */
+  /* ========== Spacing (4px base unit) ========== */
   --space-0: 0;
-  --space-1: 0.25rem;   /* 4px */
-  --space-2: 0.5rem;    /* 8px */
-  --space-3: 0.75rem;   /* 12px */
-  --space-4: 1rem;      /* 16px */
-  --space-6: 1.5rem;    /* 24px */
-  --space-8: 2rem;      /* 32px */
-  --space-12: 3rem;     /* 48px */
-  --space-16: 4rem;     /* 64px */
-
-  /* Border Radius */
+  --space-1: 0.25rem;      /* 4px */
+  --space-2: 0.5rem;       /* 8px */
+  --space-3: 0.75rem;      /* 12px */
+  --space-4: 1rem;         /* 16px */
+  --space-5: 1.25rem;      /* 20px */
+  --space-6: 1.5rem;       /* 24px */
+  --space-8: 2rem;         /* 32px */
+  --space-10: 2.5rem;      /* 40px */
+  --space-12: 3rem;        /* 48px */
+  --space-16: 4rem;        /* 64px */
+  --space-20: 5rem;        /* 80px */
+  --space-24: 6rem;        /* 96px */
+
+  /* ========== Border Radius ========== */
   --radius-none: 0;
-  --radius-sm: 0.375rem;    /* 6px */
-  --radius-md: 0.5rem;      /* 8px */
-  --radius-lg: 0.75rem;     /* 12px */
-  --radius-xl: 1rem;        /* 16px */
-  --radius-2xl: 1.5rem;     /* 24px */
-  --radius-full: 9999px;    /* Pill-shaped */
-
-  /* Shadows */
-  --shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-
-  /* Transitions */
-  --transition-fast: 150ms ease-out;
+  --radius-xs: 0.25rem;    /* 4px */
+  --radius-sm: 0.375rem;   /* 6px */
+  --radius-md: 0.5rem;     /* 8px */
+  --radius-lg: 0.75rem;    /* 12px */
+  --radius-xl: 1rem;       /* 16px */
+  --radius-2xl: 1.5rem;    /* 24px */
+  --radius-3xl: 2rem;      /* 32px */
+  --radius-full: 9999px;   /* Pill-shaped */
+
+  /* ========== Transitions ========== */
+  --transition-xs: 100ms ease-out;
+  --transition-sm: 150ms ease-out;
   --transition-normal: 250ms ease-out;
   --transition-slow: 350ms ease-out;
+  --transition-slower: 500ms ease-out;
 
-  /* Layout */
+  /* ========== Layout Constraints ========== */
+  --max-width-xs: 320px;
   --max-width-sm: 640px;
   --max-width-md: 768px;
   --max-width-lg: 1024px;
   --max-width-xl: 1280px;
   --max-width-2xl: 1536px;
 
-  /* Z-index */
+  /* ========== Z-index Scale ========== */
   --z-hide: -1;
   --z-auto: auto;
   --z-base: 0;
   --z-dropdown: 1000;
   --z-sticky: 1020;
   --z-fixed: 1030;
-  --z-modal-backdrop: 1040;
+  --z-modal-overlay: 1040;
   --z-modal: 1050;
   --z-popover: 1060;
   --z-tooltip: 1070;
+  --z-notification: 1080;
+
+  /* ========== Layout Variables ========== */
+  --header-height: 3.5rem;  /* 56px */
+  --sidebar-width: 16rem;   /* 256px */
+  --sidebar-width-collapsed: 4rem; /* 64px */
+
+  /* ========== Responsive Breakpoints ========== */
+  --breakpoint-xs: 0;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
 }
 
-/* Dark mode */
+/* ============================================================================
+   Dark Mode Theme
+   ============================================================================ */
+
 body.dark-mode {
   --bg-primary: var(--dark-bg-primary);
   --bg-secondary: var(--dark-bg-secondary);
+  --bg-tertiary: var(--dark-bg-tertiary);
   --bg-hover: var(--dark-bg-hover);
+  --bg-active: var(--dark-bg-active);
+
   --text-primary: var(--dark-text-primary);
   --text-secondary: var(--dark-text-secondary);
+  --text-tertiary: var(--dark-text-tertiary);
   --text-muted: var(--dark-text-muted);
+  --text-inverse: var(--dark-text-inverse);
+
   --border-color: var(--dark-border-color);
+  --border-color-light: var(--dark-border-color-light);
   --border-color-hover: var(--dark-border-color-hover);
+  --border-color-active: var(--dark-border-color-active);
+
+  --shadow-sm: var(--dark-shadow-sm);
+  --shadow-md: var(--dark-shadow-md);
+  --shadow-lg: var(--dark-shadow-lg);
+
+  color-scheme: dark;
+}
+
+/* ============================================================================
+   Print Styles
+   ============================================================================ */
+
+@media print {
+  :root {
+    --bg-primary: #ffffff;
+    --text-primary: #000000;
+    --border-color: #cccccc;
+  }
 }