@rovela-ai/sdk 0.1.28 → 0.1.30

package/src/admin/styles/admin-theme.css

@@ -0,0 +1,1308 @@
+/**
+ * Rovela Admin Theme
+ *
+ * This CSS file defines the complete visual design system for the admin panel.
+ * It ensures the admin experience looks like Rovela regardless of the store's theme.
+ *
+ * Usage: Wrap admin content with class="rovela-admin-theme"
+ */
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   DESIGN TOKENS - CSS Variables
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme {
+  /* ─────────────────────────────────────────────────────────────────────────
+     COLOR PALETTE - Rovela Brand
+     ───────────────────────────────────────────────────────────────────────── */
+
+  /* Primary - Emerald */
+  --admin-primary: 163 86% 37%;           /* #0CAF7D */
+  --admin-primary-hover: 163 86% 32%;     /* Darker on hover */
+  --admin-primary-light: 163 86% 95%;     /* Very light tint */
+  --admin-primary-foreground: 0 0% 100%;  /* White text on primary */
+
+  /* Backgrounds */
+  --admin-background: 36 36% 97%;         /* Warm off-white #F7F5F2 */
+  --admin-background-subtle: 36 30% 94%;  /* Slightly darker #F2EEE9 */
+  --admin-card: 0 0% 100%;                /* Pure white cards */
+  --admin-sidebar: 220 20% 14%;           /* Dark charcoal #1E2433 */
+  --admin-sidebar-hover: 220 20% 18%;     /* Sidebar hover state */
+
+  /* Text Colors */
+  --admin-foreground: 220 20% 14%;        /* Near-black text */
+  --admin-foreground-muted: 220 10% 46%;  /* Secondary text #6B7280 */
+  --admin-foreground-subtle: 220 10% 64%; /* Tertiary/placeholder */
+  --admin-sidebar-foreground: 220 10% 90%;/* Light text on dark */
+  --admin-sidebar-foreground-muted: 220 10% 60%;
+
+  /* Borders */
+  --admin-border: 220 13% 91%;            /* Light gray border #E5E7EB */
+  --admin-border-hover: 220 13% 85%;      /* Darker on hover */
+  --admin-border-focus: 163 86% 37%;      /* Primary on focus */
+
+  /* Status Colors - Semantic */
+  --admin-success: 142 71% 45%;           /* Green #22C55E */
+  --admin-success-light: 142 76% 95%;     /* Light green bg */
+  --admin-success-dark: 142 71% 35%;      /* Dark green text */
+  --admin-warning: 38 92% 50%;            /* Amber #F59E0B */
+  --admin-warning-light: 38 92% 95%;      /* Light amber bg */
+  --admin-warning-dark: 38 92% 35%;       /* Dark amber text */
+  --admin-error: 0 84% 60%;               /* Red #EF4444 */
+  --admin-error-light: 0 86% 97%;         /* Light red bg */
+  --admin-error-dark: 0 84% 45%;          /* Dark red text */
+  --admin-info: 199 89% 48%;              /* Blue #0EA5E9 */
+  --admin-info-light: 199 89% 96%;        /* Light blue bg */
+  --admin-info-dark: 199 89% 35%;         /* Dark blue text */
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     TYPOGRAPHY - Plus Jakarta Sans
+     ───────────────────────────────────────────────────────────────────────── */
+  --admin-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --admin-font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
+
+  /* Font Sizes */
+  --admin-text-xs: 0.75rem;      /* 12px */
+  --admin-text-sm: 0.8125rem;    /* 13px */
+  --admin-text-base: 0.875rem;   /* 14px - base for admin */
+  --admin-text-md: 0.9375rem;    /* 15px */
+  --admin-text-lg: 1rem;         /* 16px */
+  --admin-text-xl: 1.125rem;     /* 18px */
+  --admin-text-2xl: 1.375rem;    /* 22px */
+  --admin-text-3xl: 1.625rem;    /* 26px */
+
+  /* Font Weights */
+  --admin-font-normal: 400;
+  --admin-font-medium: 500;
+  --admin-font-semibold: 600;
+  --admin-font-bold: 700;
+
+  /* Line Heights */
+  --admin-leading-tight: 1.25;
+  --admin-leading-normal: 1.5;
+  --admin-leading-relaxed: 1.625;
+
+  /* Letter Spacing */
+  --admin-tracking-tight: -0.025em;
+  --admin-tracking-normal: 0;
+  --admin-tracking-wide: 0.05em;
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     SPACING SCALE (8px base)
+     ───────────────────────────────────────────────────────────────────────── */
+  --admin-space-0: 0;
+  --admin-space-0-5: 0.125rem;  /* 2px */
+  --admin-space-1: 0.25rem;     /* 4px */
+  --admin-space-1-5: 0.375rem;  /* 6px */
+  --admin-space-2: 0.5rem;      /* 8px */
+  --admin-space-2-5: 0.625rem;  /* 10px */
+  --admin-space-3: 0.75rem;     /* 12px */
+  --admin-space-3-5: 0.875rem;  /* 14px */
+  --admin-space-4: 1rem;        /* 16px */
+  --admin-space-5: 1.25rem;     /* 20px */
+  --admin-space-6: 1.5rem;      /* 24px */
+  --admin-space-7: 1.75rem;     /* 28px */
+  --admin-space-8: 2rem;        /* 32px */
+  --admin-space-9: 2.25rem;     /* 36px */
+  --admin-space-10: 2.5rem;     /* 40px */
+  --admin-space-12: 3rem;       /* 48px */
+  --admin-space-14: 3.5rem;     /* 56px */
+  --admin-space-16: 4rem;       /* 64px */
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     BORDERS & RADIUS
+     ───────────────────────────────────────────────────────────────────────── */
+  --admin-radius-none: 0;
+  --admin-radius-sm: 0.375rem;    /* 6px - small elements */
+  --admin-radius-md: 0.5rem;      /* 8px - inputs, buttons */
+  --admin-radius-lg: 0.75rem;     /* 12px - cards */
+  --admin-radius-xl: 1rem;        /* 16px - modals, large cards */
+  --admin-radius-2xl: 1.25rem;    /* 20px - extra large */
+  --admin-radius-full: 9999px;    /* Pills, avatars */
+
+  /* Border Widths */
+  --admin-border-width: 1px;
+  --admin-border-width-2: 2px;
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     SHADOWS
+     ───────────────────────────────────────────────────────────────────────── */
+  --admin-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.03);
+  --admin-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
+  --admin-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.04);
+  --admin-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.04);
+  --admin-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.06), 0 8px 10px -6px rgb(0 0 0 / 0.04);
+  --admin-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.15);
+
+  /* Colored Shadows - Primary glow */
+  --admin-shadow-primary-sm: 0 2px 8px 0 hsl(163 86% 37% / 0.12);
+  --admin-shadow-primary: 0 4px 14px 0 hsl(163 86% 37% / 0.15);
+  --admin-shadow-primary-lg: 0 8px 24px 0 hsl(163 86% 37% / 0.2);
+
+  /* Inner shadows */
+  --admin-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.04);
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     TRANSITIONS & ANIMATIONS
+     ───────────────────────────────────────────────────────────────────────── */
+  --admin-transition-fast: 100ms ease-out;
+  --admin-transition-base: 150ms ease-out;
+  --admin-transition-slow: 200ms ease-out;
+  --admin-transition-slower: 300ms ease-out;
+
+  /* Specific transitions */
+  --admin-transition-colors: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, fill 150ms ease-out, stroke 150ms ease-out;
+  --admin-transition-opacity: opacity 150ms ease-out;
+  --admin-transition-shadow: box-shadow 150ms ease-out;
+  --admin-transition-transform: transform 150ms ease-out;
+  --admin-transition-all: all 150ms ease-out;
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     Z-INDEX SCALE
+     ───────────────────────────────────────────────────────────────────────── */
+  --admin-z-base: 0;
+  --admin-z-dropdown: 50;
+  --admin-z-sticky: 100;
+  --admin-z-fixed: 150;
+  --admin-z-overlay: 200;
+  --admin-z-modal: 250;
+  --admin-z-popover: 300;
+  --admin-z-toast: 400;
+  --admin-z-tooltip: 500;
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     STANDARD CSS VARIABLE MAPPING (for component compatibility)
+     ───────────────────────────────────────────────────────────────────────── */
+  --background: var(--admin-background);
+  --foreground: var(--admin-foreground);
+  --card: var(--admin-card);
+  --card-foreground: var(--admin-foreground);
+  --popover: var(--admin-card);
+  --popover-foreground: var(--admin-foreground);
+  --primary: var(--admin-primary);
+  --primary-foreground: var(--admin-primary-foreground);
+  --secondary: var(--admin-background-subtle);
+  --secondary-foreground: var(--admin-foreground);
+  --muted: var(--admin-background-subtle);
+  --muted-foreground: var(--admin-foreground-muted);
+  --accent: var(--admin-primary-light);
+  --accent-foreground: var(--admin-primary);
+  --border: var(--admin-border);
+  --input: var(--admin-border);
+  --ring: var(--admin-primary);
+  --destructive: var(--admin-error);
+  --destructive-foreground: 0 0% 100%;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   BASE STYLES
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme {
+  font-family: var(--admin-font-sans);
+  font-size: var(--admin-text-base);
+  line-height: var(--admin-leading-normal);
+  color: hsl(var(--admin-foreground));
+  background: hsl(var(--admin-background));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.rovela-admin-theme *,
+.rovela-admin-theme *::before,
+.rovela-admin-theme *::after {
+  border-color: hsl(var(--admin-border));
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   TYPOGRAPHY UTILITIES
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-heading-1 {
+  font-size: var(--admin-text-3xl);
+  font-weight: var(--admin-font-bold);
+  line-height: var(--admin-leading-tight);
+  letter-spacing: var(--admin-tracking-tight);
+  color: hsl(var(--admin-foreground));
+}
+
+.rovela-admin-theme .admin-heading-2 {
+  font-size: var(--admin-text-2xl);
+  font-weight: var(--admin-font-semibold);
+  line-height: var(--admin-leading-tight);
+  letter-spacing: var(--admin-tracking-tight);
+  color: hsl(var(--admin-foreground));
+}
+
+.rovela-admin-theme .admin-heading-3 {
+  font-size: var(--admin-text-xl);
+  font-weight: var(--admin-font-semibold);
+  line-height: var(--admin-leading-tight);
+  color: hsl(var(--admin-foreground));
+}
+
+.rovela-admin-theme .admin-heading-4 {
+  font-size: var(--admin-text-lg);
+  font-weight: var(--admin-font-semibold);
+  line-height: var(--admin-leading-tight);
+  color: hsl(var(--admin-foreground));
+}
+
+.rovela-admin-theme .admin-text-muted {
+  color: hsl(var(--admin-foreground-muted));
+}
+
+.rovela-admin-theme .admin-text-subtle {
+  color: hsl(var(--admin-foreground-subtle));
+}
+
+.rovela-admin-theme .admin-label {
+  display: block;
+  font-size: var(--admin-text-sm);
+  font-weight: var(--admin-font-medium);
+  color: hsl(var(--admin-foreground));
+  margin-bottom: var(--admin-space-1-5);
+}
+
+.rovela-admin-theme .admin-label-required::after {
+  content: ' *';
+  color: hsl(var(--admin-error));
+}
+
+.rovela-admin-theme .admin-helper-text {
+  font-size: var(--admin-text-xs);
+  color: hsl(var(--admin-foreground-muted));
+  margin-top: var(--admin-space-1);
+}
+
+.rovela-admin-theme .admin-error-text {
+  font-size: var(--admin-text-xs);
+  color: hsl(var(--admin-error));
+  margin-top: var(--admin-space-1);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   CARD COMPONENT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-card {
+  background: hsl(var(--admin-card));
+  border: var(--admin-border-width) solid hsl(var(--admin-border));
+  border-radius: var(--admin-radius-lg);
+  box-shadow: var(--admin-shadow-sm);
+}
+
+.rovela-admin-theme .admin-card-hover {
+  transition: var(--admin-transition-shadow), var(--admin-transition-colors);
+}
+
+.rovela-admin-theme .admin-card-hover:hover {
+  box-shadow: var(--admin-shadow-md);
+  border-color: hsl(var(--admin-border-hover));
+}
+
+.rovela-admin-theme .admin-card-header {
+  padding: var(--admin-space-5) var(--admin-space-6);
+  border-bottom: var(--admin-border-width) solid hsl(var(--admin-border));
+}
+
+.rovela-admin-theme .admin-card-body {
+  padding: var(--admin-space-6);
+}
+
+.rovela-admin-theme .admin-card-footer {
+  padding: var(--admin-space-4) var(--admin-space-6);
+  border-top: var(--admin-border-width) solid hsl(var(--admin-border));
+  background: hsl(var(--admin-background-subtle) / 0.5);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   INPUT COMPONENTS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-input {
+  display: flex;
+  width: 100%;
+  height: 2.5rem; /* 40px */
+  padding: 0 var(--admin-space-3);
+  font-family: var(--admin-font-sans);
+  font-size: var(--admin-text-base);
+  color: hsl(var(--admin-foreground));
+  background: hsl(var(--admin-card));
+  border: var(--admin-border-width) solid hsl(var(--admin-border));
+  border-radius: var(--admin-radius-md);
+  outline: none;
+  transition: var(--admin-transition-colors), var(--admin-transition-shadow);
+}
+
+.rovela-admin-theme .admin-input::placeholder {
+  color: hsl(var(--admin-foreground-subtle));
+}
+
+.rovela-admin-theme .admin-input:hover:not(:focus):not(:disabled) {
+  border-color: hsl(var(--admin-border-hover));
+}
+
+.rovela-admin-theme .admin-input:focus {
+  border-color: hsl(var(--admin-primary));
+  box-shadow: 0 0 0 3px hsl(var(--admin-primary) / 0.1);
+}
+
+.rovela-admin-theme .admin-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: hsl(var(--admin-background-subtle));
+}
+
+.rovela-admin-theme .admin-input-error {
+  border-color: hsl(var(--admin-error));
+}
+
+.rovela-admin-theme .admin-input-error:focus {
+  border-color: hsl(var(--admin-error));
+  box-shadow: 0 0 0 3px hsl(var(--admin-error) / 0.1);
+}
+
+/* Textarea */
+.rovela-admin-theme .admin-textarea {
+  min-height: 5rem;
+  padding: var(--admin-space-3);
+  resize: vertical;
+}
+
+/* Select */
+.rovela-admin-theme .admin-select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--admin-space-3) center;
+  padding-right: var(--admin-space-10);
+}
+
+/* Input with icon */
+.rovela-admin-theme .admin-input-icon-wrapper {
+  position: relative;
+}
+
+.rovela-admin-theme .admin-input-icon-wrapper .admin-input {
+  padding-left: var(--admin-space-10);
+}
+
+.rovela-admin-theme .admin-input-icon {
+  position: absolute;
+  left: var(--admin-space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.25rem;
+  height: 1.25rem;
+  color: hsl(var(--admin-foreground-muted));
+  pointer-events: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   BUTTON COMPONENTS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--admin-space-2);
+  height: 2.5rem;
+  padding: 0 var(--admin-space-4);
+  font-family: var(--admin-font-sans);
+  font-size: var(--admin-text-base);
+  font-weight: var(--admin-font-medium);
+  line-height: 1;
+  white-space: nowrap;
+  border-radius: var(--admin-radius-md);
+  border: var(--admin-border-width) solid transparent;
+  cursor: pointer;
+  outline: none;
+  transition: var(--admin-transition-all);
+}
+
+.rovela-admin-theme .admin-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.rovela-admin-theme .admin-btn:focus-visible {
+  outline: 2px solid hsl(var(--admin-primary));
+  outline-offset: 2px;
+}
+
+/* Primary Button */
+.rovela-admin-theme .admin-btn-primary {
+  background: hsl(var(--admin-primary));
+  color: hsl(var(--admin-primary-foreground));
+}
+
+.rovela-admin-theme .admin-btn-primary:hover:not(:disabled) {
+  background: hsl(var(--admin-primary-hover));
+  box-shadow: var(--admin-shadow-primary-sm);
+}
+
+.rovela-admin-theme .admin-btn-primary:active:not(:disabled) {
+  background: hsl(var(--admin-primary-hover));
+  box-shadow: var(--admin-shadow-inner);
+}
+
+/* Secondary Button */
+.rovela-admin-theme .admin-btn-secondary {
+  background: hsl(var(--admin-card));
+  color: hsl(var(--admin-foreground));
+  border-color: hsl(var(--admin-border));
+}
+
+.rovela-admin-theme .admin-btn-secondary:hover:not(:disabled) {
+  background: hsl(var(--admin-background-subtle));
+  border-color: hsl(var(--admin-border-hover));
+}
+
+.rovela-admin-theme .admin-btn-secondary:active:not(:disabled) {
+  background: hsl(var(--admin-background-subtle));
+  box-shadow: var(--admin-shadow-inner);
+}
+
+/* Ghost Button */
+.rovela-admin-theme .admin-btn-ghost {
+  background: transparent;
+  color: hsl(var(--admin-foreground));
+}
+
+.rovela-admin-theme .admin-btn-ghost:hover:not(:disabled) {
+  background: hsl(var(--admin-background-subtle));
+}
+
+/* Destructive Button */
+.rovela-admin-theme .admin-btn-destructive {
+  background: hsl(var(--admin-error));
+  color: white;
+}
+
+.rovela-admin-theme .admin-btn-destructive:hover:not(:disabled) {
+  background: hsl(var(--admin-error-dark));
+}
+
+/* Button Sizes */
+.rovela-admin-theme .admin-btn-sm {
+  height: 2rem;
+  padding: 0 var(--admin-space-3);
+  font-size: var(--admin-text-sm);
+  border-radius: var(--admin-radius-sm);
+}
+
+.rovela-admin-theme .admin-btn-lg {
+  height: 2.75rem;
+  padding: 0 var(--admin-space-6);
+  font-size: var(--admin-text-md);
+}
+
+.rovela-admin-theme .admin-btn-icon {
+  width: 2.5rem;
+  padding: 0;
+}
+
+.rovela-admin-theme .admin-btn-icon.admin-btn-sm {
+  width: 2rem;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   BADGE COMPONENTS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--admin-space-0-5) var(--admin-space-2);
+  font-size: var(--admin-text-xs);
+  font-weight: var(--admin-font-medium);
+  line-height: var(--admin-leading-normal);
+  border-radius: var(--admin-radius-full);
+  white-space: nowrap;
+}
+
+.rovela-admin-theme .admin-badge-success {
+  background: hsl(var(--admin-success-light));
+  color: hsl(var(--admin-success-dark));
+}
+
+.rovela-admin-theme .admin-badge-warning {
+  background: hsl(var(--admin-warning-light));
+  color: hsl(var(--admin-warning-dark));
+}
+
+.rovela-admin-theme .admin-badge-error {
+  background: hsl(var(--admin-error-light));
+  color: hsl(var(--admin-error-dark));
+}
+
+.rovela-admin-theme .admin-badge-info {
+  background: hsl(var(--admin-info-light));
+  color: hsl(var(--admin-info-dark));
+}
+
+.rovela-admin-theme .admin-badge-neutral {
+  background: hsl(var(--admin-background-subtle));
+  color: hsl(var(--admin-foreground-muted));
+}
+
+.rovela-admin-theme .admin-badge-primary {
+  background: hsl(var(--admin-primary-light));
+  color: hsl(var(--admin-primary));
+}
+
+/* Dot badge variant */
+.rovela-admin-theme .admin-badge-dot {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--admin-space-1-5);
+}
+
+.rovela-admin-theme .admin-badge-dot::before {
+  content: '';
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--admin-radius-full);
+  background: currentColor;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   TABLE COMPONENTS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-table-wrapper {
+  overflow: hidden;
+  border-radius: var(--admin-radius-lg);
+  border: var(--admin-border-width) solid hsl(var(--admin-border));
+  background: hsl(var(--admin-card));
+}
+
+.rovela-admin-theme .admin-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--admin-text-base);
+}
+
+.rovela-admin-theme .admin-table th {
+  padding: var(--admin-space-3) var(--admin-space-4);
+  font-size: var(--admin-text-xs);
+  font-weight: var(--admin-font-semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--admin-tracking-wide);
+  color: hsl(var(--admin-foreground-muted));
+  background: hsl(var(--admin-background-subtle));
+  text-align: left;
+  border-bottom: var(--admin-border-width) solid hsl(var(--admin-border));
+}
+
+.rovela-admin-theme .admin-table td {
+  padding: var(--admin-space-4);
+  color: hsl(var(--admin-foreground));
+  border-bottom: var(--admin-border-width) solid hsl(var(--admin-border));
+  vertical-align: middle;
+}
+
+.rovela-admin-theme .admin-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.rovela-admin-theme .admin-table tbody tr {
+  transition: var(--admin-transition-colors);
+}
+
+.rovela-admin-theme .admin-table tbody tr:hover {
+  background: hsl(var(--admin-background-subtle) / 0.5);
+}
+
+.rovela-admin-theme .admin-table-empty {
+  padding: var(--admin-space-12) var(--admin-space-4);
+  text-align: center;
+  color: hsl(var(--admin-foreground-muted));
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   SIDEBAR COMPONENTS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 16rem;
+  min-height: 100vh;
+  background: hsl(var(--admin-sidebar));
+  color: hsl(var(--admin-sidebar-foreground));
+}
+
+.rovela-admin-theme .admin-sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: var(--admin-space-3);
+  padding: var(--admin-space-5) var(--admin-space-4);
+  border-bottom: 1px solid hsl(220 20% 22%);
+}
+
+.rovela-admin-theme .admin-sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--admin-space-3);
+  font-size: var(--admin-text-lg);
+  font-weight: var(--admin-font-semibold);
+  color: hsl(var(--admin-sidebar-foreground));
+}
+
+.rovela-admin-theme .admin-sidebar-nav {
+  flex: 1;
+  padding: var(--admin-space-4);
+  overflow-y: auto;
+}
+
+.rovela-admin-theme .admin-sidebar-section {
+  margin-bottom: var(--admin-space-6);
+}
+
+.rovela-admin-theme .admin-sidebar-section-title {
+  padding: var(--admin-space-2) var(--admin-space-3);
+  font-size: var(--admin-text-xs);
+  font-weight: var(--admin-font-semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--admin-tracking-wide);
+  color: hsl(var(--admin-sidebar-foreground-muted));
+}
+
+.rovela-admin-theme .admin-sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: var(--admin-space-3);
+  padding: var(--admin-space-2-5) var(--admin-space-3);
+  font-size: var(--admin-text-base);
+  color: hsl(var(--admin-sidebar-foreground-muted));
+  border-radius: var(--admin-radius-md);
+  transition: var(--admin-transition-colors);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.rovela-admin-theme .admin-sidebar-item:hover {
+  background: hsl(var(--admin-sidebar-hover));
+  color: hsl(var(--admin-sidebar-foreground));
+}
+
+.rovela-admin-theme .admin-sidebar-item.active {
+  background: hsl(var(--admin-primary) / 0.15);
+  color: hsl(var(--admin-primary));
+}
+
+.rovela-admin-theme .admin-sidebar-item.active .admin-sidebar-item-icon {
+  color: hsl(var(--admin-primary));
+}
+
+.rovela-admin-theme .admin-sidebar-item-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+.rovela-admin-theme .admin-sidebar-footer {
+  padding: var(--admin-space-4);
+  border-top: 1px solid hsl(220 20% 22%);
+}
+
+.rovela-admin-theme .admin-sidebar-footer-link {
+  display: flex;
+  align-items: center;
+  gap: var(--admin-space-2);
+  font-size: var(--admin-text-sm);
+  color: hsl(var(--admin-sidebar-foreground-muted) / 0.6);
+  text-decoration: none;
+  transition: var(--admin-transition-colors);
+}
+
+.rovela-admin-theme .admin-sidebar-footer-link:hover {
+  color: hsl(var(--admin-sidebar-foreground-muted));
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   HEADER COMPONENT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 4rem;
+  padding: 0 var(--admin-space-6);
+  background: hsl(var(--admin-card));
+  border-bottom: var(--admin-border-width) solid hsl(var(--admin-border));
+}
+
+.rovela-admin-theme .admin-header-title {
+  font-size: var(--admin-text-lg);
+  font-weight: var(--admin-font-semibold);
+  color: hsl(var(--admin-foreground));
+}
+
+.rovela-admin-theme .admin-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--admin-space-3);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   AVATAR COMPONENT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: var(--admin-radius-full);
+  background: hsl(var(--admin-primary));
+  color: hsl(var(--admin-primary-foreground));
+  font-size: var(--admin-text-sm);
+  font-weight: var(--admin-font-semibold);
+  overflow: hidden;
+}
+
+.rovela-admin-theme .admin-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.rovela-admin-theme .admin-avatar-sm {
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: var(--admin-text-xs);
+}
+
+.rovela-admin-theme .admin-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: var(--admin-text-lg);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   DROPDOWN COMPONENT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.rovela-admin-theme .admin-dropdown-content {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: var(--admin-z-dropdown);
+  min-width: 12rem;
+  margin-top: var(--admin-space-1);
+  padding: var(--admin-space-1);
+  background: hsl(var(--admin-card));
+  border: var(--admin-border-width) solid hsl(var(--admin-border));
+  border-radius: var(--admin-radius-lg);
+  box-shadow: var(--admin-shadow-lg);
+}
+
+.rovela-admin-theme .admin-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--admin-space-2);
+  width: 100%;
+  padding: var(--admin-space-2) var(--admin-space-3);
+  font-size: var(--admin-text-sm);
+  color: hsl(var(--admin-foreground));
+  border-radius: var(--admin-radius-sm);
+  cursor: pointer;
+  transition: var(--admin-transition-colors);
+}
+
+.rovela-admin-theme .admin-dropdown-item:hover {
+  background: hsl(var(--admin-background-subtle));
+}
+
+.rovela-admin-theme .admin-dropdown-item-destructive {
+  color: hsl(var(--admin-error));
+}
+
+.rovela-admin-theme .admin-dropdown-item-destructive:hover {
+  background: hsl(var(--admin-error-light));
+}
+
+.rovela-admin-theme .admin-dropdown-divider {
+  height: 1px;
+  margin: var(--admin-space-1) 0;
+  background: hsl(var(--admin-border));
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   MODAL/DIALOG COMPONENT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--admin-z-overlay);
+  background: rgb(0 0 0 / 0.5);
+  backdrop-filter: blur(4px);
+}
+
+.rovela-admin-theme .admin-modal {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: var(--admin-z-modal);
+  width: 100%;
+  max-width: 28rem;
+  max-height: calc(100vh - 4rem);
+  overflow-y: auto;
+  background: hsl(var(--admin-card));
+  border-radius: var(--admin-radius-xl);
+  box-shadow: var(--admin-shadow-2xl);
+}
+
+.rovela-admin-theme .admin-modal-header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--admin-space-3);
+  padding: var(--admin-space-6);
+  border-bottom: var(--admin-border-width) solid hsl(var(--admin-border));
+}
+
+.rovela-admin-theme .admin-modal-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--admin-radius-full);
+  flex-shrink: 0;
+}
+
+.rovela-admin-theme .admin-modal-icon-error {
+  background: hsl(var(--admin-error-light));
+  color: hsl(var(--admin-error));
+}
+
+.rovela-admin-theme .admin-modal-icon-warning {
+  background: hsl(var(--admin-warning-light));
+  color: hsl(var(--admin-warning));
+}
+
+.rovela-admin-theme .admin-modal-icon-success {
+  background: hsl(var(--admin-success-light));
+  color: hsl(var(--admin-success));
+}
+
+.rovela-admin-theme .admin-modal-icon-info {
+  background: hsl(var(--admin-info-light));
+  color: hsl(var(--admin-info));
+}
+
+.rovela-admin-theme .admin-modal-title {
+  font-size: var(--admin-text-lg);
+  font-weight: var(--admin-font-semibold);
+  color: hsl(var(--admin-foreground));
+}
+
+.rovela-admin-theme .admin-modal-description {
+  margin-top: var(--admin-space-1);
+  font-size: var(--admin-text-sm);
+  color: hsl(var(--admin-foreground-muted));
+}
+
+.rovela-admin-theme .admin-modal-body {
+  padding: var(--admin-space-6);
+}
+
+.rovela-admin-theme .admin-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--admin-space-3);
+  padding: var(--admin-space-4) var(--admin-space-6);
+  border-top: var(--admin-border-width) solid hsl(var(--admin-border));
+  background: hsl(var(--admin-background-subtle) / 0.5);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   TOGGLE/SWITCH COMPONENT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 2.75rem;
+  height: 1.5rem;
+  padding: var(--admin-space-0-5);
+  background: hsl(var(--admin-border));
+  border-radius: var(--admin-radius-full);
+  cursor: pointer;
+  transition: var(--admin-transition-colors);
+}
+
+.rovela-admin-theme .admin-toggle[data-state="checked"] {
+  background: hsl(var(--admin-primary));
+}
+
+.rovela-admin-theme .admin-toggle-thumb {
+  width: 1.25rem;
+  height: 1.25rem;
+  background: white;
+  border-radius: var(--admin-radius-full);
+  box-shadow: var(--admin-shadow-sm);
+  transition: var(--admin-transition-transform);
+}
+
+.rovela-admin-theme .admin-toggle[data-state="checked"] .admin-toggle-thumb {
+  transform: translateX(1.25rem);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   CHECKBOX COMPONENT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: hsl(var(--admin-card));
+  border: var(--admin-border-width-2) solid hsl(var(--admin-border));
+  border-radius: var(--admin-radius-sm);
+  cursor: pointer;
+  transition: var(--admin-transition-all);
+}
+
+.rovela-admin-theme .admin-checkbox:hover {
+  border-color: hsl(var(--admin-primary));
+}
+
+.rovela-admin-theme .admin-checkbox[data-state="checked"] {
+  background: hsl(var(--admin-primary));
+  border-color: hsl(var(--admin-primary));
+  color: white;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   PAGINATION COMPONENT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--admin-space-3) var(--admin-space-4);
+  border-top: var(--admin-border-width) solid hsl(var(--admin-border));
+}
+
+.rovela-admin-theme .admin-pagination-info {
+  font-size: var(--admin-text-sm);
+  color: hsl(var(--admin-foreground-muted));
+}
+
+.rovela-admin-theme .admin-pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--admin-space-2);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   EMPTY STATE COMPONENT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--admin-space-16) var(--admin-space-4);
+  text-align: center;
+}
+
+.rovela-admin-theme .admin-empty-state-icon {
+  width: 3rem;
+  height: 3rem;
+  margin-bottom: var(--admin-space-4);
+  color: hsl(var(--admin-foreground-subtle));
+}
+
+.rovela-admin-theme .admin-empty-state-title {
+  font-size: var(--admin-text-lg);
+  font-weight: var(--admin-font-semibold);
+  color: hsl(var(--admin-foreground));
+  margin-bottom: var(--admin-space-2);
+}
+
+.rovela-admin-theme .admin-empty-state-description {
+  font-size: var(--admin-text-sm);
+  color: hsl(var(--admin-foreground-muted));
+  max-width: 24rem;
+  margin-bottom: var(--admin-space-6);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   LOADING STATES
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-spinner {
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid hsl(var(--admin-border));
+  border-top-color: hsl(var(--admin-primary));
+  border-radius: var(--admin-radius-full);
+  animation: admin-spin 0.6s linear infinite;
+}
+
+@keyframes admin-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.rovela-admin-theme .admin-skeleton {
+  background: linear-gradient(
+    90deg,
+    hsl(var(--admin-background-subtle)) 0%,
+    hsl(var(--admin-border)) 50%,
+    hsl(var(--admin-background-subtle)) 100%
+  );
+  background-size: 200% 100%;
+  animation: admin-shimmer 1.5s ease-in-out infinite;
+  border-radius: var(--admin-radius-md);
+}
+
+@keyframes admin-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   STAT CARD COMPONENT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-stat-card {
+  position: relative;
+  padding: var(--admin-space-6);
+  background: hsl(var(--admin-card));
+  border: var(--admin-border-width) solid hsl(var(--admin-border));
+  border-radius: var(--admin-radius-lg);
+  box-shadow: var(--admin-shadow-sm);
+  transition: var(--admin-transition-all);
+  overflow: hidden;
+}
+
+.rovela-admin-theme .admin-stat-card:hover {
+  box-shadow: var(--admin-shadow-md);
+  border-color: hsl(var(--admin-border-hover));
+}
+
+.rovela-admin-theme .admin-stat-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, hsl(var(--admin-primary) / 0.03) 0%, transparent 60%);
+  opacity: 0;
+  transition: var(--admin-transition-opacity);
+}
+
+.rovela-admin-theme .admin-stat-card:hover::before {
+  opacity: 1;
+}
+
+.rovela-admin-theme .admin-stat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  background: hsl(var(--admin-primary-light));
+  color: hsl(var(--admin-primary));
+  border-radius: var(--admin-radius-lg);
+}
+
+.rovela-admin-theme .admin-stat-value {
+  font-size: var(--admin-text-2xl);
+  font-weight: var(--admin-font-bold);
+  color: hsl(var(--admin-foreground));
+  margin-top: var(--admin-space-4);
+}
+
+.rovela-admin-theme .admin-stat-label {
+  font-size: var(--admin-text-sm);
+  color: hsl(var(--admin-foreground-muted));
+  margin-top: var(--admin-space-1);
+}
+
+.rovela-admin-theme .admin-stat-trend {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--admin-space-1);
+  font-size: var(--admin-text-xs);
+  font-weight: var(--admin-font-medium);
+  margin-top: var(--admin-space-2);
+}
+
+.rovela-admin-theme .admin-stat-trend-up {
+  color: hsl(var(--admin-success));
+}
+
+.rovela-admin-theme .admin-stat-trend-down {
+  color: hsl(var(--admin-error));
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   CHART COLORS (for Recharts)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme {
+  --chart-primary: 163 86% 37%;      /* Emerald - main data */
+  --chart-secondary: 199 89% 48%;    /* Blue - secondary data */
+  --chart-tertiary: 38 92% 50%;      /* Amber - tertiary data */
+  --chart-quaternary: 142 71% 45%;   /* Green - success */
+  --chart-quinary: 0 84% 60%;        /* Red - error/negative */
+  --chart-grid: 220 13% 91%;         /* Grid lines */
+  --chart-text: 220 10% 46%;         /* Axis text */
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   ALERT/NOTICE COMPONENT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-alert {
+  display: flex;
+  gap: var(--admin-space-3);
+  padding: var(--admin-space-4);
+  border-radius: var(--admin-radius-lg);
+  border-left: 4px solid;
+}
+
+.rovela-admin-theme .admin-alert-info {
+  background: hsl(var(--admin-info-light));
+  border-left-color: hsl(var(--admin-info));
+  color: hsl(var(--admin-info-dark));
+}
+
+.rovela-admin-theme .admin-alert-success {
+  background: hsl(var(--admin-success-light));
+  border-left-color: hsl(var(--admin-success));
+  color: hsl(var(--admin-success-dark));
+}
+
+.rovela-admin-theme .admin-alert-warning {
+  background: hsl(var(--admin-warning-light));
+  border-left-color: hsl(var(--admin-warning));
+  color: hsl(var(--admin-warning-dark));
+}
+
+.rovela-admin-theme .admin-alert-error {
+  background: hsl(var(--admin-error-light));
+  border-left-color: hsl(var(--admin-error));
+  color: hsl(var(--admin-error-dark));
+}
+
+.rovela-admin-theme .admin-alert-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+.rovela-admin-theme .admin-alert-title {
+  font-weight: var(--admin-font-semibold);
+  margin-bottom: var(--admin-space-1);
+}
+
+.rovela-admin-theme .admin-alert-description {
+  font-size: var(--admin-text-sm);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   TAG/CHIP COMPONENT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--admin-space-1);
+  padding: var(--admin-space-1) var(--admin-space-2);
+  font-size: var(--admin-text-xs);
+  font-weight: var(--admin-font-medium);
+  background: hsl(var(--admin-primary-light));
+  color: hsl(var(--admin-primary));
+  border-radius: var(--admin-radius-full);
+}
+
+.rovela-admin-theme .admin-tag-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--admin-radius-full);
+  cursor: pointer;
+  transition: var(--admin-transition-colors);
+}
+
+.rovela-admin-theme .admin-tag-remove:hover {
+  background: hsl(var(--admin-primary) / 0.2);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   FORM SECTION COMPONENT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.rovela-admin-theme .admin-form-section {
+  background: hsl(var(--admin-card));
+  border: var(--admin-border-width) solid hsl(var(--admin-border));
+  border-radius: var(--admin-radius-lg);
+  box-shadow: var(--admin-shadow-sm);
+}
+
+.rovela-admin-theme .admin-form-section-header {
+  padding: var(--admin-space-5) var(--admin-space-6);
+  border-bottom: var(--admin-border-width) solid hsl(var(--admin-border));
+}
+
+.rovela-admin-theme .admin-form-section-title {
+  font-size: var(--admin-text-lg);
+  font-weight: var(--admin-font-semibold);
+  color: hsl(var(--admin-foreground));
+}
+
+.rovela-admin-theme .admin-form-section-description {
+  font-size: var(--admin-text-sm);
+  color: hsl(var(--admin-foreground-muted));
+  margin-top: var(--admin-space-1);
+}
+
+.rovela-admin-theme .admin-form-section-content {
+  padding: var(--admin-space-6);
+}
+
+.rovela-admin-theme .admin-form-row {
+  display: grid;
+  gap: var(--admin-space-4);
+}
+
+.rovela-admin-theme .admin-form-row-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.rovela-admin-theme .admin-form-group {
+  margin-bottom: var(--admin-space-4);
+}
+
+.rovela-admin-theme .admin-form-group:last-child {
+  margin-bottom: 0;
+}