/** * Repario Design System - CSS Custom Properties * * Source: ai-system/ui/tokens/tokens.json + stitch-export reconciliation * Version: 2.0.0 * Themes: light (default) + dark (Stitch) * * Primary: #5c5cff (Stitch source of truth) * Font: Manrope (Stitch source of truth) * * Light theme applied via html[data-theme="light"] * Dark theme applied via html[data-theme="dark"] */ /* ═══════════════════════════════════════════════════════════════════════════ BASE TOKENS (theme-agnostic) ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Font families ── */ --rep-font-family-base: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --rep-font-family-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --rep-font-family-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', Consolas, 'Liberation Mono', Menlo, monospace; /* ── Font sizes ── */ --rep-font-size-xs: 0.75rem; --rep-font-size-sm: 0.875rem; --rep-font-size-base: 0.9375rem; --rep-font-size-lg: 1.0625rem; --rep-font-size-xl: 1.25rem; --rep-font-size-2xl: 1.5rem; --rep-font-size-3xl: 1.875rem; --rep-font-size-4xl: 2.25rem; --rep-font-size-5xl: 3rem; /* ── Font weights ── */ --rep-font-weight-light: 300; --rep-font-weight-normal: 400; --rep-font-weight-medium: 500; --rep-font-weight-semibold: 600; --rep-font-weight-bold: 700; /* ── Line heights ── */ --rep-line-height-none: 1; --rep-line-height-tight: 1.25; --rep-line-height-snug: 1.375; --rep-line-height-normal: 1.5; --rep-line-height-relaxed: 1.625; --rep-line-height-loose: 2; /* ── Letter spacing ── */ --rep-letter-spacing-tighter: -0.04em; --rep-letter-spacing-tight: -0.02em; --rep-letter-spacing-normal: 0; --rep-letter-spacing-wide: 0.02em; --rep-letter-spacing-wider: 0.04em; /* ── Spacing ── */ --rep-space-0: 0; --rep-space-px: 1px; --rep-space-0-5: 0.125rem; --rep-space-1: 0.25rem; --rep-space-1-5: 0.375rem; --rep-space-2: 0.5rem; --rep-space-2-5: 0.625rem; --rep-space-3: 0.75rem; --rep-space-3-5: 0.875rem; --rep-space-4: 1rem; --rep-space-5: 1.25rem; --rep-space-6: 1.5rem; --rep-space-7: 1.75rem; --rep-space-8: 2rem; --rep-space-9: 2.25rem; --rep-space-10: 2.5rem; --rep-space-11: 2.75rem; --rep-space-12: 3rem; --rep-space-14: 3.5rem; --rep-space-16: 4rem; --rep-space-20: 5rem; --rep-space-24: 6rem; /* ── Border radius ── */ --rep-radius-none: 0; --rep-radius-sm: 0.25rem; --rep-radius-md: 0.375rem; --rep-radius-lg: 0.5rem; --rep-radius-xl: 0.75rem; --rep-radius-2xl: 1rem; --rep-radius-3xl: 1.5rem; --rep-radius-full: 9999px; /* ── Shadows ── */ --rep-shadow-none: none; --rep-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --rep-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --rep-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --rep-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --rep-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --rep-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --rep-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); --rep-shadow-ring: 0 0 0 3px rgba(92, 92, 255, 0.15); --rep-shadow-ring-error: 0 0 0 3px rgba(220, 38, 38, 0.15); --rep-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.04); --rep-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15); --rep-shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.2); /* ── Transitions ── */ --rep-transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1); --rep-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1); --rep-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --rep-transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Z-index ── */ --rep-z-base: 0; --rep-z-dropdown: 1000; --rep-z-sticky: 1100; --rep-z-fixed: 1200; --rep-z-modal-backdrop: 1300; --rep-z-modal: 1400; --rep-z-popover: 1500; --rep-z-tooltip: 1600; --rep-z-toast: 1700; /* ── Static colors (theme-agnostic) ── */ --rep-color-primary-50: #ededff; --rep-color-primary-100: #d8d8ff; --rep-color-primary-200: #b4b4ff; --rep-color-primary-300: #8c8cff; --rep-color-primary-400: #7474ff; --rep-color-primary-500: #5c5cff; --rep-color-primary-600: #4a4adb; --rep-color-primary-700: #3939b7; --rep-color-primary-800: #2d2d93; --rep-color-primary-900: #21216f; --rep-color-primary-base: #5c5cff; --rep-color-primary-hover: #4a4adb; --rep-color-primary-active: #3939b7; --rep-color-primary-disabled: #b4b4ff; --rep-color-accent-base: #eb4899; --rep-color-accent-hover: #d9287a; --rep-color-accent-orange: #fa6938; --rep-badge-purple-text: #a78bfa; --rep-badge-purple-bg: rgba(139, 92, 246, 0.1); --rep-color-semantic-success-base: #059669; --rep-color-semantic-success-bg: #d1fae5; --rep-color-semantic-success-text: #065f46; --rep-color-semantic-success-border: #34d399; --rep-color-semantic-warning-base: #d97706; --rep-color-semantic-warning-bg: #fef3c7; --rep-color-semantic-warning-text: #92400e; --rep-color-semantic-warning-border: #fbbf24; --rep-color-semantic-error-base: #dc2626; --rep-color-semantic-error-bg: #fee2e2; --rep-color-semantic-error-text: #991b1b; --rep-color-semantic-error-border: #f87171; --rep-color-semantic-info-base: #0284c7; --rep-color-semantic-info-bg: #e0f2fe; --rep-color-semantic-info-text: #075985; --rep-color-semantic-info-border: #38bdf8; /* Status colors */ --rep-color-status-pending: #f59e0b; --rep-color-status-pending-bg: #fef3c7; --rep-color-status-in-progress: #eab308; --rep-color-status-in-progress-bg: rgba(234, 179, 8, 0.1); --rep-color-status-waiting-parts: #ef4444; --rep-color-status-waiting-parts-bg: rgba(239, 68, 68, 0.1); --rep-color-status-ready: #10b981; --rep-color-status-ready-bg: rgba(16, 185, 129, 0.1); --rep-color-status-completed: #059669; --rep-color-status-completed-bg: #d1fae5; --rep-color-status-diagnosing: #3b82f6; --rep-color-status-diagnosing-bg: rgba(59, 130, 246, 0.1); --rep-color-status-cancelled: #6b7280; --rep-color-status-cancelled-bg: #f3f4f6; /* Priority colors */ --rep-color-priority-low: #6b7280; --rep-color-priority-low-bg: #f3f4f6; --rep-color-priority-normal: #3b82f6; --rep-color-priority-normal-bg: #dbeafe; --rep-color-priority-high: #f59e0b; --rep-color-priority-high-bg: #fef3c7; --rep-color-priority-urgent: #dc2626; --rep-color-priority-urgent-bg: #fee2e2; /* ── Theme-dependent defaults (dark = default) ── */ --rep-bg-page: #070b12; --rep-bg-primary: #070b12; --rep-bg-surface: #111c2c; --rep-bg-secondary: #111c2c; --rep-bg-elevated: #162236; --rep-bg-tertiary: #162236; --rep-bg-subtle: #0d1520; --rep-bg-hover: rgba(255, 255, 255, 0.05); --rep-bg-input: #070b12; --rep-bg-overlay: rgba(0, 0, 0, 0.7); --rep-accent: #6366f1; --rep-text-primary: #f1f5f9; --rep-text-secondary: #9a9abc; --rep-text-muted: #64748b; --rep-text-disabled: #475569; --rep-text-inverse: #0f1c31; --rep-text-link: #7474ff; --rep-border-default: #2d4360; --rep-border-strong: #3a5578; --rep-border-subtle: rgba(45, 67, 96, 0.5); --rep-border-focus: #5c5cff; --rep-sidebar-bg: #111c2c; --rep-sidebar-border: #2d4360; --rep-sidebar-text: #9a9abc; --rep-sidebar-text-hover: #ffffff; --rep-sidebar-hover-bg: rgba(255, 255, 255, 0.05); --rep-sidebar-active-bg: rgba(92, 92, 255, 0.1); --rep-sidebar-active-text: #5c5cff; --rep-topbar-bg: rgba(17, 28, 44, 0.5); --rep-card-bg: #111c2c; --rep-card-border: #2d4360; --rep-card-shadow: none; --rep-table-header-bg: rgba(7, 11, 18, 0.5); --rep-table-row-hover: rgba(255, 255, 255, 0.05); --rep-table-border: #2d4360; --rep-chart-bar-idle: #2d4360; --rep-chart-bar-active: #5c5cff; --rep-chart-bar-hover: rgba(92, 92, 255, 0.5); --rep-badge-emerald-bg: rgba(16, 185, 129, 0.1); --rep-badge-emerald-text: #34d399; --rep-badge-orange-bg: rgba(249, 115, 22, 0.1); --rep-badge-orange-text: #fb923c; --rep-badge-red-bg: rgba(239, 68, 68, 0.1); --rep-badge-red-text: #f87171; --rep-badge-blue-bg: rgba(59, 130, 246, 0.1); --rep-badge-blue-text: #60a5fa; --rep-badge-yellow-bg: rgba(234, 179, 8, 0.1); --rep-badge-yellow-text: #facc15; --rep-scrollbar-track: #070b12; --rep-scrollbar-thumb: #2d4360; --rep-scrollbar-thumb-hover: #5c5cff; --rep-kpi-icon-primary-bg: rgba(92, 92, 255, 0.1); --rep-kpi-icon-indigo-bg: rgba(99, 102, 241, 0.1); --rep-kpi-icon-orange-bg: rgba(249, 115, 22, 0.1); --rep-kpi-icon-emerald-bg: rgba(16, 185, 129, 0.1); --rep-kpi-icon-purple-bg: rgba(139, 92, 246, 0.1); } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT THEME (default) Source: stitch-export/repario_dashboard_light ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { --rep-bg-page: #f3f6fc; --rep-bg-primary: #f3f6fc; --rep-bg-surface: #ffffff; --rep-bg-secondary: #ffffff; --rep-bg-elevated: #ffffff; --rep-bg-tertiary: #f3f4f6; --rep-bg-subtle: #f3f4f6; --rep-bg-hover: rgba(0, 0, 0, 0.04); --rep-bg-input: #f3f6fc; --rep-bg-overlay: rgba(17, 24, 39, 0.6); --rep-accent: #5c5cff; --rep-text-primary: #0f1c31; --rep-text-secondary: #64748b; --rep-text-muted: #9ca3af; --rep-text-disabled: #d1d5db; --rep-text-inverse: #ffffff; --rep-text-link: #5c5cff; --rep-border-default: #d5dfef; --rep-border-strong: #c5cede; --rep-border-subtle: #e8edf5; --rep-border-focus: #5c5cff; --rep-sidebar-bg: #ffffff; --rep-sidebar-border: #d5dfef; --rep-sidebar-text: #64748b; --rep-sidebar-text-hover: #0f1c31; --rep-sidebar-hover-bg: #f1f5f9; --rep-sidebar-active-bg: rgba(92, 92, 255, 0.1); --rep-sidebar-active-text: #5c5cff; --rep-topbar-bg: #ffffff; --rep-card-bg: #ffffff; --rep-card-border: #d5dfef; --rep-card-shadow: var(--rep-shadow-sm); --rep-table-header-bg: #f3f6fc; --rep-table-row-hover: #f8fafc; --rep-table-border: #d5dfef; --rep-chart-bar-idle: #d5dfef; --rep-chart-bar-active: #5c5cff; --rep-chart-bar-hover: rgba(92, 92, 255, 0.5); --rep-badge-emerald-bg: #ecfdf5; --rep-badge-emerald-text: #059669; --rep-badge-orange-bg: #fff7ed; --rep-badge-orange-text: #ea580c; --rep-badge-red-bg: #fef2f2; --rep-badge-red-text: #dc2626; --rep-badge-blue-bg: #eff6ff; --rep-badge-blue-text: #2563eb; --rep-badge-yellow-bg: #fefce8; --rep-badge-yellow-text: #ca8a04; --rep-scrollbar-track: #f3f6fc; --rep-scrollbar-thumb: #d5dfef; --rep-scrollbar-thumb-hover: #5c5cff; --rep-kpi-icon-primary-bg: rgba(92, 92, 255, 0.08); --rep-kpi-icon-indigo-bg: rgba(99, 102, 241, 0.08); --rep-kpi-icon-orange-bg: rgba(249, 115, 22, 0.08); --rep-kpi-icon-emerald-bg: rgba(16, 185, 129, 0.08); --rep-kpi-icon-purple-bg: rgba(139, 92, 246, 0.08); } /* ═══════════════════════════════════════════════════════════════════════════ DARK THEME Source: stitch-export/repario_dashboard_dark ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { --rep-bg-page: #070b12; --rep-bg-primary: #070b12; --rep-bg-surface: #111c2c; --rep-bg-secondary: #111c2c; --rep-bg-elevated: #162236; --rep-bg-tertiary: #162236; --rep-bg-subtle: #0d1520; --rep-bg-hover: rgba(255, 255, 255, 0.05); --rep-bg-input: #070b12; --rep-bg-overlay: rgba(0, 0, 0, 0.7); --rep-accent: #6366f1; --rep-text-primary: #f1f5f9; --rep-text-secondary: #9a9abc; --rep-text-muted: #64748b; --rep-text-disabled: #475569; --rep-text-inverse: #0f1c31; --rep-text-link: #7474ff; --rep-border-default: #2d4360; --rep-border-strong: #3a5578; --rep-border-subtle: rgba(45, 67, 96, 0.5); --rep-border-focus: #5c5cff; --rep-sidebar-bg: #111c2c; --rep-sidebar-border: #2d4360; --rep-sidebar-text: #9a9abc; --rep-sidebar-text-hover: #ffffff; --rep-sidebar-hover-bg: rgba(255, 255, 255, 0.05); --rep-sidebar-active-bg: rgba(92, 92, 255, 0.1); --rep-sidebar-active-text: #5c5cff; --rep-topbar-bg: rgba(17, 28, 44, 0.5); --rep-card-bg: #111c2c; --rep-card-border: #2d4360; --rep-card-shadow: none; --rep-table-header-bg: rgba(7, 11, 18, 0.5); --rep-table-row-hover: rgba(255, 255, 255, 0.05); --rep-table-border: #2d4360; --rep-chart-bar-idle: #2d4360; --rep-chart-bar-active: #5c5cff; --rep-chart-bar-hover: rgba(92, 92, 255, 0.5); --rep-badge-emerald-bg: rgba(16, 185, 129, 0.1); --rep-badge-emerald-text: #34d399; --rep-badge-orange-bg: rgba(249, 115, 22, 0.1); --rep-badge-orange-text: #fb923c; --rep-badge-red-bg: rgba(239, 68, 68, 0.1); --rep-badge-red-text: #f87171; --rep-badge-blue-bg: rgba(59, 130, 246, 0.1); --rep-badge-blue-text: #60a5fa; --rep-badge-yellow-bg: rgba(234, 179, 8, 0.1); --rep-badge-yellow-text: #facc15; --rep-scrollbar-track: #070b12; --rep-scrollbar-thumb: #2d4360; --rep-scrollbar-thumb-hover: #5c5cff; --rep-kpi-icon-primary-bg: rgba(92, 92, 255, 0.1); --rep-kpi-icon-indigo-bg: rgba(99, 102, 241, 0.1); --rep-kpi-icon-orange-bg: rgba(249, 115, 22, 0.1); --rep-kpi-icon-emerald-bg: rgba(16, 185, 129, 0.1); --rep-kpi-icon-purple-bg: rgba(139, 92, 246, 0.1); --rep-shadow-sm: none; --rep-shadow-card: none; } /* ═══════════════════════════════════════════════════════════════════════════ GLOBAL INPUT RESETS — Remove browser-native search icons/decorations Applied to ALL inputs within the App Shell to prevent icon overlap. ═══════════════════════════════════════════════════════════════════════════ */ .rep-content input[type="search"]::-webkit-search-decoration, .rep-content input[type="search"]::-webkit-search-cancel-button, .rep-content input[type="search"]::-webkit-search-results-button, .rep-content input[type="search"]::-webkit-search-results-decoration, .rep-content input[type="text"]::-webkit-search-decoration, .rep-content input[type="text"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } .rep-content input[type="search"], .rep-content input[type="text"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /** * Repario Design System — Buttons * * Standardized button components for the App Shell. * All buttons MUST use these classes. Page-specific button * classes (td-btn, tn-btn) are deprecated — use rep-btn instead. * * Usage: * * * Back * * * * Depends on: tokens.css * @package Repario_SaaS */ /* ── Base ──────────────────────────────────────────────────────────────── */ .rep-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--rep-space-2); padding: var(--rep-space-2) var(--rep-space-4); border-radius: var(--rep-radius-lg); font-size: var(--rep-font-size-sm); font-weight: var(--rep-font-weight-bold); font-family: var(--rep-font-family-base); line-height: 1.5; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--rep-text-primary); text-decoration: none; transition: all var(--rep-transition-fast); white-space: nowrap; box-sizing: border-box; } .rep-btn:disabled, .rep-btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .rep-btn .material-symbols-outlined { font-size: 18px; } /* ── Primary ───────────────────────────────────────────────────────────── */ .rep-btn-primary { background: var(--rep-color-primary-base); color: var(--rep-text-inverse); border-color: var(--rep-color-primary-base); box-shadow: 0 4px 12px color-mix(in srgb, var(--rep-color-primary-base) 25%, transparent); } .rep-btn-primary:hover { background: var(--rep-color-primary-hover); border-color: var(--rep-color-primary-hover); } .rep-btn-primary:active { background: var(--rep-color-primary-active); border-color: var(--rep-color-primary-active); } /* ── Secondary ─────────────────────────────────────────────────────────── */ .rep-btn-secondary { background: transparent; color: var(--rep-text-primary); border-color: var(--rep-border-default); } .rep-btn-secondary:hover { background: var(--rep-bg-hover); } /* ── Ghost ─────────────────────────────────────────────────────────────── */ .rep-btn-ghost { background: none; color: var(--rep-text-secondary); border-color: transparent; } .rep-btn-ghost:hover { background: var(--rep-bg-hover); color: var(--rep-text-primary); } /* ── Danger ────────────────────────────────────────────────────────────── */ .rep-btn-danger { background: transparent; color: var(--rep-color-semantic-error-base); border-color: color-mix(in srgb, var(--rep-color-semantic-error-base) 30%, transparent); } .rep-btn-danger:hover { background: color-mix(in srgb, var(--rep-color-semantic-error-base) 8%, transparent); } /* ── Icon-only ─────────────────────────────────────────────────────────── */ .rep-btn-icon { padding: var(--rep-space-2); border-radius: var(--rep-radius-lg); } /* ── Sizes ─────────────────────────────────────────────────────────────── */ .rep-btn-sm { padding: var(--rep-space-1) var(--rep-space-3); font-size: var(--rep-font-size-xs); } .rep-btn-sm .material-symbols-outlined { font-size: 16px; } .rep-btn-lg { padding: var(--rep-space-3) var(--rep-space-6); font-size: var(--rep-font-size-base); } /** * Repario Design System — Inputs * * Standardized form input components for the App Shell. * All form elements MUST use these classes. Page-specific input * classes (tn-input, td-input) are deprecated — use rep-input instead. * * Usage: * * * * * * Depends on: tokens.css * @package Repario_SaaS */ /* ── Base Input ────────────────────────────────────────────────────────── */ .rep-input, .rep-select, .rep-textarea { width: 100%; background: var(--rep-bg-surface); color: var(--rep-text-primary); border: 1px solid var(--rep-border-default); border-radius: var(--rep-radius-lg); padding: var(--rep-space-2-5) var(--rep-space-3); font-size: var(--rep-font-size-sm); font-family: var(--rep-font-family-base); line-height: 1.5; outline: none; appearance: none; -webkit-appearance: none; transition: border-color var(--rep-transition-fast), box-shadow var(--rep-transition-fast); box-sizing: border-box; } .rep-input::placeholder, .rep-textarea::placeholder { color: var(--rep-text-muted); } /* ── Focus State ───────────────────────────────────────────────────────── */ .rep-input:focus, .rep-select:focus, .rep-textarea:focus { border-color: var(--rep-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rep-accent) 20%, transparent); } /* ── Disabled State ────────────────────────────────────────────────────── */ .rep-input:disabled, .rep-select:disabled, .rep-textarea:disabled { opacity: 0.5; cursor: not-allowed; } /* ── Select ────────────────────────────────────────────────────────────── */ .rep-select { padding-right: var(--rep-space-8); cursor: pointer; } .rep-select option { background: var(--rep-bg-surface); color: var(--rep-text-primary); } /* ── Textarea ──────────────────────────────────────────────────────────── */ .rep-textarea { resize: vertical; min-height: 4rem; } /* ── Monospace Variant ─────────────────────────────────────────────────── */ .rep-input-mono { font-family: var(--rep-font-family-mono); } /* ── Label ─────────────────────────────────────────────────────────────── */ .rep-label { display: block; font-size: var(--rep-font-size-xs); font-weight: var(--rep-font-weight-bold); color: var(--rep-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--rep-space-1-5); } /* ── Field Group (label + input wrapper) ───────────────────────────────── */ .rep-field { display: flex; flex-direction: column; gap: var(--rep-space-1-5); } /* ── Alert Messages ───────────────────────────────────────────────────── */ .rep-alert { padding: var(--rep-space-2) var(--rep-space-3); border-radius: var(--rep-radius-md); font-size: var(--rep-font-size-sm); line-height: 1.5; } .rep-alert-danger { background: color-mix(in srgb, var(--rep-color-danger) 12%, transparent); color: var(--rep-color-danger); } .rep-alert-success { background: color-mix(in srgb, var(--rep-color-success) 12%, transparent); color: var(--rep-color-success); } /** * Repario Design System — Cards * * Standardized card components for the App Shell. * * Usage: *
*
* settings *

Title

*
*
…
*
* * Depends on: tokens.css * @package Repario_SaaS */ /* ── Base Card ─────────────────────────────────────────────────────────── */ .rep-card { background: var(--rep-card-bg); border: 1px solid var(--rep-card-border); border-radius: var(--rep-radius-xl); box-shadow: var(--rep-card-shadow); overflow: hidden; } /* ── Card Header ───────────────────────────────────────────────────────── */ .rep-card-header { display: flex; align-items: center; gap: var(--rep-space-2); padding: var(--rep-space-4) var(--rep-space-5); border-bottom: 1px solid var(--rep-border-default); } .rep-card-header-row { display: flex; align-items: center; justify-content: space-between; padding: var(--rep-space-4) var(--rep-space-5); border-bottom: 1px solid var(--rep-border-default); } .rep-card-icon { color: var(--rep-color-primary-base); font-size: 20px; } .rep-card-title { font-size: var(--rep-font-size-base); font-weight: var(--rep-font-weight-bold); color: var(--rep-text-primary); margin: 0; } /* ── Card Body ─────────────────────────────────────────────────────────── */ .rep-card-body { padding: var(--rep-space-5); } /* ── Card Footer ───────────────────────────────────────────────────────── */ .rep-card-footer { padding: var(--rep-space-4) var(--rep-space-5); border-top: 1px solid var(--rep-border-default); display: flex; align-items: center; justify-content: flex-end; gap: var(--rep-space-3); } /** * Repario Design System — Modals (Compact) * * Lightweight modal components for action dialogs (create, confirm, form). * For the full-featured ticket detail modal, use components/modal.css. * * Usage: * * * Depends on: tokens.css, buttons.css * @package Repario_SaaS */ /* ── Overlay ───────────────────────────────────────────────────────────── */ .rep-dialog-overlay { position: fixed; inset: 0; z-index: var(--rep-z-modal-backdrop, 9999); background: var(--rep-bg-overlay); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: var(--rep-space-4); } /* ── Dialog Container ──────────────────────────────────────────────────── */ .rep-dialog { width: 100%; max-width: 520px; background: var(--rep-card-bg); border: 1px solid var(--rep-border-default); border-radius: var(--rep-radius-xl); box-shadow: var(--rep-shadow-2xl); overflow: hidden; } /* ── Header ────────────────────────────────────────────────────────────── */ .rep-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: var(--rep-space-4) var(--rep-space-5); border-bottom: 1px solid var(--rep-border-default); } .rep-dialog-header-left { display: flex; align-items: center; gap: var(--rep-space-3); } .rep-dialog-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--rep-radius-lg); background: var(--rep-kpi-icon-primary-bg); color: var(--rep-color-primary-base); font-size: 24px; } .rep-dialog-title { font-size: var(--rep-font-size-lg); font-weight: var(--rep-font-weight-bold); color: var(--rep-text-primary); margin: 0; } .rep-dialog-subtitle { font-size: var(--rep-font-size-sm); color: var(--rep-text-muted); margin: var(--rep-space-0-5) 0 0; } /* ── Body ──────────────────────────────────────────────────────────────── */ .rep-dialog-body { padding: var(--rep-space-4) var(--rep-space-5); display: flex; flex-direction: column; gap: var(--rep-space-3); } .rep-dialog-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rep-space-3); } /* ── Footer ────────────────────────────────────────────────────────────── */ .rep-dialog-footer { padding: var(--rep-space-3) var(--rep-space-5); border-top: 1px solid var(--rep-border-default); display: flex; justify-content: flex-end; gap: var(--rep-space-2); } /** * Repario Design System — Form Layouts * * Layout utilities for form structures. Combines with inputs.css. * * Usage: *
*
*
* * *
*
* * *
*
*
* * *
*
* * Depends on: tokens.css, inputs.css, buttons.css * @package Repario_SaaS */ /* ── Form Container ────────────────────────────────────────────────────── */ .rep-form { display: flex; flex-direction: column; gap: var(--rep-space-4); } /* ── Grid Layouts ──────────────────────────────────────────────────────── */ .rep-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rep-space-4); } .rep-form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rep-space-4); } .rep-form-stack { display: flex; flex-direction: column; gap: var(--rep-space-4); } /* ── Form Actions ──────────────────────────────────────────────────────── */ .rep-form-actions { display: flex; justify-content: flex-end; gap: var(--rep-space-3); padding-top: var(--rep-space-4); border-top: 1px solid var(--rep-border-default); } /* ── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .rep-form-grid, .rep-form-grid-3 { grid-template-columns: 1fr; } } /* ────────────────────────────────────────────── Search component – .rep-search Global shared component loaded by the App Shell. ────────────────────────────────────────────── */ .rep-search { position: relative; display: flex; align-items: center; } .rep-search__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 18px !important; line-height: 1 !important; width: 18px !important; height: 18px !important; overflow: hidden; color: var(--rep-text-muted); pointer-events: none; z-index: 2; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } .rep-search__input { width: 100%; height: 40px; padding: 0 12px 0 36px !important; background: var(--rep-bg-surface) !important; color: var(--rep-text-primary); border: 1px solid var(--rep-border-default); border-radius: 8px; font-size: var(--rep-font-size-sm); font-family: var(--rep-font-family-base); outline: none; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; transition: box-shadow var(--rep-transition-normal), border-color var(--rep-transition-normal); box-sizing: border-box; } /* Remove ALL browser-native search decorations */ .rep-search__input::-webkit-search-decoration, .rep-search__input::-webkit-search-cancel-button, .rep-search__input::-webkit-search-results-button, .rep-search__input::-webkit-search-results-decoration, input.rep-search__input::-webkit-search-decoration, input.rep-search__input::-webkit-search-cancel-button { -webkit-appearance: none !important; display: none !important; } .rep-search__input::placeholder { color: var(--rep-text-muted); } .rep-search__input:focus { border-color: var(--rep-color-primary-base); box-shadow: 0 0 0 1px var(--rep-color-primary-base); } /** * Repario — Ticket Detail Modal Styles * * Source: stitch-export/ticket_detail_modal * Scoped in .repario-admin-wrap * Depends on: tokens.css * * @package Repario_SaaS */ /* ═══════════════════════════════════════════════════════════════════════════ OVERLAY ═══════════════════════════════════════════════════════════════════════════ */ .rep-modal-overlay { position: fixed; inset: 0; z-index: var(--rep-z-modal-backdrop); background: var(--rep-bg-overlay); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: var(--rep-space-4); overflow-y: auto; animation: rep-modal-overlay-in var(--rep-transition-normal) ease forwards; } .rep-modal-overlay--closing { animation: rep-modal-overlay-out var(--rep-transition-normal) ease forwards; } .rep-modal-overlay[hidden] { display: none; } @keyframes rep-modal-overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rep-modal-overlay-out { from { opacity: 1; } to { opacity: 0; } } /* ═══════════════════════════════════════════════════════════════════════════ MODAL CONTAINER ═══════════════════════════════════════════════════════════════════════════ */ .rep-modal { width: 100%; max-width: 87.5rem; /* 1400px */ height: 95vh; background: var(--rep-card-bg); border-radius: var(--rep-radius-xl); box-shadow: var(--rep-shadow-2xl); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--rep-border-default); animation: rep-modal-in var(--rep-transition-normal) ease forwards; } .rep-modal-overlay--closing .rep-modal { animation: rep-modal-out var(--rep-transition-normal) ease forwards; } @keyframes rep-modal-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes rep-modal-out { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.96) translateY(8px); } } /* ═══════════════════════════════════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════════════════════════════════ */ .rep-modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--rep-space-4) var(--rep-space-6); border-bottom: 1px solid var(--rep-border-default); background: var(--rep-sidebar-bg); flex-shrink: 0; } .rep-modal__header-left { display: flex; align-items: center; gap: var(--rep-space-4); } .rep-modal__header-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--rep-radius-lg); background: var(--rep-kpi-icon-primary-bg); color: var(--rep-color-primary-base); flex-shrink: 0; } .rep-modal__header-icon .material-symbols-outlined { font-size: 24px; } .rep-modal__header-title-row { display: flex; align-items: center; gap: var(--rep-space-3); } .rep-modal__title { font-size: var(--rep-font-size-xl); font-weight: var(--rep-font-weight-bold); color: var(--rep-text-primary); margin: 0; line-height: var(--rep-line-height-tight); } .rep-modal__subtitle { font-size: var(--rep-font-size-sm); color: var(--rep-text-muted); margin: var(--rep-space-0-5) 0 0; } /* Status Badge */ .rep-modal__status-badge { display: inline-flex; align-items: center; padding: var(--rep-space-1) var(--rep-space-2); border-radius: var(--rep-radius-md); font-size: var(--rep-font-size-xs); font-weight: var(--rep-font-weight-medium); } .rep-modal__status-badge--pending { background: color-mix(in srgb, var(--rep-color-status-pending) 10%, transparent); color: var(--rep-color-status-pending); border: 1px solid color-mix(in srgb, var(--rep-color-status-pending) 20%, transparent); } .rep-modal__status-badge--diagnosing { background: var(--rep-kpi-icon-purple-bg); color: var(--rep-badge-purple-text); border: 1px solid color-mix(in srgb, var(--rep-badge-purple-text) 20%, transparent); } .rep-modal__status-badge--in_progress { background: var(--rep-color-status-in-progress-bg); color: var(--rep-badge-yellow-text); border: 1px solid color-mix(in srgb, var(--rep-badge-yellow-text) 20%, transparent); } .rep-modal__status-badge--in_repair { background: var(--rep-badge-orange-bg); color: var(--rep-badge-orange-text); border: 1px solid color-mix(in srgb, var(--rep-badge-orange-text) 20%, transparent); } .rep-modal__status-badge--part_order { background: var(--rep-kpi-icon-purple-bg); color: var(--rep-badge-purple-text); border: 1px solid color-mix(in srgb, var(--rep-badge-purple-text) 20%, transparent); } .rep-modal__status-badge--ready_pickup { background: color-mix(in srgb, var(--rep-color-status-ready) 10%, transparent); color: var(--rep-color-status-ready); border: 1px solid color-mix(in srgb, var(--rep-color-status-ready) 20%, transparent); } .rep-modal__status-badge--completed { background: color-mix(in srgb, var(--rep-color-semantic-success-base) 10%, transparent); color: var(--rep-color-status-ready); border: 1px solid color-mix(in srgb, var(--rep-color-semantic-success-base) 20%, transparent); } .rep-modal__status-badge--cancelled { background: color-mix(in srgb, var(--rep-text-secondary) 10%, transparent); color: var(--rep-text-secondary); border: 1px solid color-mix(in srgb, var(--rep-text-secondary) 20%, transparent); } /* Header Actions */ .rep-modal__header-actions { display: flex; align-items: center; gap: var(--rep-space-3); } .rep-modal__header-btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--rep-radius-lg); background: none; border: none; color: var(--rep-text-muted); cursor: pointer; transition: all var(--rep-transition-fast); } .rep-modal__header-btn:hover { background: var(--rep-bg-hover); color: var(--rep-text-primary); } .rep-modal__header-divider { width: 1px; height: 1.5rem; background: var(--rep-border-default); margin: 0 var(--rep-space-1); } .rep-modal__btn { display: inline-flex; align-items: center; gap: var(--rep-space-2); padding: 0 var(--rep-space-5); height: 2.5rem; border-radius: var(--rep-radius-lg); font-size: var(--rep-font-size-sm); font-weight: var(--rep-font-weight-bold); cursor: pointer; transition: all var(--rep-transition-fast); border: none; } .rep-modal__btn .material-symbols-outlined { font-size: 18px; } .rep-modal__btn--ghost { background: none; border: 1px solid var(--rep-border-default); color: var(--rep-text-primary); } .rep-modal__btn--ghost:hover { background: var(--rep-bg-hover); } .rep-modal__btn--primary { background: var(--rep-color-primary-base); color: var(--rep-text-inverse); box-shadow: 0 4px 12px color-mix(in srgb, var(--rep-color-primary-base) 25%, transparent); } .rep-modal__btn--primary:hover { background: var(--rep-color-primary-hover); } /* ═══════════════════════════════════════════════════════════════════════════ BODY (GRID) ═══════════════════════════════════════════════════════════════════════════ */ .rep-modal__body { flex: 1; overflow: hidden; display: grid; grid-template-columns: 1fr; height: 100%; } @media (min-width: 1024px) { .rep-modal__body { grid-template-columns: 2fr 1fr; } } /* ── Left Panel ── */ .rep-modal__left { overflow-y: auto; padding: var(--rep-space-6) var(--rep-space-8); display: flex; flex-direction: column; gap: var(--rep-space-8); } .rep-modal__left::-webkit-scrollbar { width: 6px; } .rep-modal__left::-webkit-scrollbar-track { background: transparent; } .rep-modal__left::-webkit-scrollbar-thumb { background: var(--rep-scrollbar-thumb); border-radius: 20px; } /* ── Right Panel ── */ .rep-modal__right { background: var(--rep-sidebar-bg); border-left: 1px solid var(--rep-border-default); padding: var(--rep-space-6) var(--rep-space-8); display: flex; flex-direction: column; height: 100%; overflow: hidden; } /* ═══════════════════════════════════════════════════════════════════════════ SECTIONS (Left Panel) ═══════════════════════════════════════════════════════════════════════════ */ .rep-modal__section { display: flex; flex-direction: column; } .rep-modal__section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--rep-space-4); } .rep-modal__section-title { display: flex; align-items: center; gap: var(--rep-space-2); font-size: var(--rep-font-size-lg); font-weight: var(--rep-font-weight-bold); color: var(--rep-text-primary); margin: 0 0 var(--rep-space-4); } .rep-modal__section-header .rep-modal__section-title { margin-bottom: 0; } .rep-modal__section-title .material-symbols-outlined { color: var(--rep-color-primary-base); } .rep-modal__section-action { display: inline-flex; align-items: center; gap: var(--rep-space-1); background: none; border: none; color: var(--rep-color-primary-base); font-size: var(--rep-font-size-xs); font-weight: var(--rep-font-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: color var(--rep-transition-fast); } .rep-modal__section-action:hover { color: var(--rep-color-primary-hover); } .rep-modal__section-action .material-symbols-outlined { font-size: 14px; } /* ── Description ── */ .rep-modal__section-card { padding: var(--rep-space-5); border-radius: var(--rep-radius-xl); background: var(--rep-sidebar-bg); border: 1px solid var(--rep-border-default); } .rep-modal__description { font-size: var(--rep-font-size-base); line-height: var(--rep-line-height-relaxed); color: var(--rep-text-secondary); margin: 0; } /* ── Details Grid ── */ .rep-modal__details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rep-space-4); } .rep-modal__detail-card { display: flex; flex-direction: column; gap: var(--rep-space-1); padding: var(--rep-space-4); border-radius: var(--rep-radius-xl); background: var(--rep-sidebar-bg); border: 1px solid var(--rep-border-default); } .rep-modal__detail-label { font-size: var(--rep-font-size-xs); font-weight: var(--rep-font-weight-semibold); color: var(--rep-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .rep-modal__detail-value { font-weight: var(--rep-font-weight-medium); color: var(--rep-text-primary); } .rep-modal__detail-value--mono { font-family: var(--rep-font-family-mono); } .rep-modal__detail-client { display: flex; align-items: center; gap: var(--rep-space-2); } .rep-modal__detail-avatar { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--rep-radius-full); background: color-mix(in srgb, var(--rep-color-primary-base) 20%, transparent); color: var(--rep-color-primary-base); font-size: var(--rep-font-size-xs); font-weight: var(--rep-font-weight-bold); } .rep-modal__detail-contact { display: flex; flex-direction: column; } .rep-modal__detail-phone { font-size: var(--rep-font-size-sm); color: var(--rep-text-muted); } /* ── Parts Table ── */ .rep-modal__table-wrap { border: 1px solid var(--rep-border-default); border-radius: var(--rep-radius-xl); overflow: hidden; } .rep-modal__table { width: 100%; text-align: left; font-size: var(--rep-font-size-sm); border-collapse: collapse; } .rep-modal__table thead { background: var(--rep-sidebar-bg); border-bottom: 1px solid var(--rep-border-default); } .rep-modal__table th { padding: var(--rep-space-3) var(--rep-space-5); color: var(--rep-text-muted); font-weight: var(--rep-font-weight-semibold); font-size: var(--rep-font-size-sm); } .rep-modal__table tbody { background: var(--rep-card-bg); } .rep-modal__table-row { border-bottom: 1px solid var(--rep-border-default); transition: background var(--rep-transition-fast); } .rep-modal__table-row:hover { background: var(--rep-bg-hover); } .rep-modal__table td { padding: var(--rep-space-3) var(--rep-space-5); } .rep-modal__table-center { text-align: center; } .rep-modal__table-right { text-align: right; } .rep-modal__table-desc { font-weight: var(--rep-font-weight-medium); color: var(--rep-text-primary); } .rep-modal__table-bold { font-weight: var(--rep-font-weight-bold); color: var(--rep-text-primary); } .rep-modal__table-action-col { width: 2.5rem; } .rep-modal__table-delete { background: none; border: none; color: var(--rep-text-muted); cursor: pointer; opacity: 0; transition: all var(--rep-transition-fast); } .rep-modal__table-row:hover .rep-modal__table-delete { opacity: 1; } .rep-modal__table-delete:hover { color: var(--rep-color-semantic-error-base); } .rep-modal__table-delete .material-symbols-outlined { font-size: 18px; } .rep-modal__table tfoot { background: var(--rep-sidebar-bg); border-top: 1px solid var(--rep-border-default); } .rep-modal__table-subtotal { font-size: var(--rep-font-size-lg); font-weight: var(--rep-font-weight-bold); color: var(--rep-text-primary); } /* ── Gallery ── */ .rep-modal__gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rep-space-4); } .rep-modal__gallery-placeholder { aspect-ratio: 1; border-radius: var(--rep-radius-xl); background: var(--rep-sidebar-bg); border: 2px dashed var(--rep-border-default); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--rep-space-1); color: var(--rep-text-muted); cursor: pointer; transition: all var(--rep-transition-fast); } .rep-modal__gallery-placeholder:hover { color: var(--rep-color-primary-base); border-color: var(--rep-color-primary-base); background: color-mix(in srgb, var(--rep-color-primary-base) 5%, transparent); } .rep-modal__gallery-placeholder .material-symbols-outlined { font-size: 2rem; } .rep-modal__gallery-placeholder span:last-child { font-size: var(--rep-font-size-xs); font-weight: var(--rep-font-weight-semibold); } /* ═══════════════════════════════════════════════════════════════════════════ RIGHT PANEL ═══════════════════════════════════════════════════════════════════════════ */ .rep-modal__panel-title { font-size: var(--rep-font-size-sm); font-weight: var(--rep-font-weight-bold); text-transform: uppercase; color: var(--rep-text-muted); letter-spacing: 0.04em; margin: 0 0 var(--rep-space-4); } /* ── Management Fields ── */ .rep-modal__management { margin-bottom: var(--rep-space-8); } .rep-modal__fields { display: flex; flex-direction: column; gap: var(--rep-space-4); } .rep-modal__field { display: flex; flex-direction: column; gap: var(--rep-space-1-5); } .rep-modal__field-label { font-size: var(--rep-font-size-xs); font-weight: var(--rep-font-weight-semibold); color: var(--rep-text-muted); } .rep-modal__input { width: 100%; padding: var(--rep-space-2-5) var(--rep-space-3); background: var(--rep-bg-surface); border: 1px solid var(--rep-border-default); border-radius: var(--rep-radius-lg); color: var(--rep-text-primary); font-size: var(--rep-font-size-sm); font-family: var(--rep-font-family-base); transition: border-color var(--rep-transition-fast); box-sizing: border-box; } .rep-modal__input::placeholder { color: var(--rep-text-muted); } .rep-modal__input:focus { outline: none; border-color: var(--rep-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rep-accent) 20%, transparent); } .rep-modal__select-wrap { position: relative; } .rep-modal__select { width: 100%; padding: var(--rep-space-2-5); padding-right: var(--rep-space-8); background: var(--rep-card-bg); border: 1px solid var(--rep-border-default); border-radius: var(--rep-radius-lg); color: var(--rep-text-primary); font-size: var(--rep-font-size-sm); font-family: var(--rep-font-family-base); appearance: none; cursor: pointer; transition: border-color var(--rep-transition-fast); } .rep-modal__select:focus { outline: none; border-color: var(--rep-color-primary-base); box-shadow: var(--rep-shadow-ring); } .rep-modal__select-arrow { position: absolute; right: var(--rep-space-2); top: 50%; transform: translateY(-50%); color: var(--rep-text-muted); pointer-events: none; font-size: 18px; } /* ── Technician Picker ── */ .rep-modal__tech-picker { display: flex; align-items: center; gap: var(--rep-space-3); padding: var(--rep-space-2); background: var(--rep-card-bg); border: 1px solid var(--rep-border-default); border-radius: var(--rep-radius-lg); cursor: pointer; transition: border-color var(--rep-transition-fast); } .rep-modal__tech-picker:hover { border-color: color-mix(in srgb, var(--rep-color-primary-base) 50%, transparent); } .rep-modal__tech-avatar { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--rep-radius-full); background: var(--rep-color-primary-base); color: var(--rep-text-inverse); font-size: var(--rep-font-size-xs); font-weight: var(--rep-font-weight-bold); flex-shrink: 0; } .rep-modal__tech-info { flex: 1; } .rep-modal__tech-name { font-size: var(--rep-font-size-sm); font-weight: var(--rep-font-weight-bold); color: var(--rep-text-primary); margin: 0; } .rep-modal__tech-level { font-size: var(--rep-font-size-xs); color: var(--rep-text-muted); margin: 0; } .rep-modal__tech-edit { color: var(--rep-text-muted); font-size: 18px; } /* ── Date Display ── */ .rep-modal__date-display { display: flex; align-items: center; gap: var(--rep-space-2); padding: var(--rep-space-2-5); background: var(--rep-card-bg); border: 1px solid var(--rep-border-default); border-radius: var(--rep-radius-lg); font-size: var(--rep-font-size-sm); font-weight: var(--rep-font-weight-medium); color: var(--rep-text-primary); } .rep-modal__date-display .material-symbols-outlined { color: var(--rep-color-primary-base); font-size: 18px; } /* ═══════════════════════════════════════════════════════════════════════════ TIMELINE ═══════════════════════════════════════════════════════════════════════════ */ .rep-modal__timeline-section { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .rep-modal__timeline { flex: 1; overflow-y: auto; padding-right: var(--rep-space-2); padding-left: var(--rep-space-4); border-left: 1px solid var(--rep-border-default); display: flex; flex-direction: column; gap: var(--rep-space-6); } .rep-modal__timeline::-webkit-scrollbar { width: 6px; } .rep-modal__timeline::-webkit-scrollbar-thumb { background: var(--rep-scrollbar-thumb); border-radius: 20px; } .rep-modal__timeline-item { position: relative; } .rep-modal__timeline-dot { position: absolute; left: calc(-1 * var(--rep-space-4) - 5px); top: var(--rep-space-1); width: 10px; height: 10px; border-radius: var(--rep-radius-full); background: var(--rep-text-muted); border: 4px solid var(--rep-sidebar-bg); } .rep-modal__timeline-dot--active { background: var(--rep-color-primary-base); } .rep-modal__timeline-content { display: flex; flex-direction: column; gap: var(--rep-space-1); } .rep-modal__timeline-text { font-size: var(--rep-font-size-sm); font-weight: var(--rep-font-weight-medium); color: var(--rep-text-primary); margin: 0; } .rep-modal__timeline-text strong { color: var(--rep-color-primary-base); } .rep-modal__timeline-date { font-size: var(--rep-font-size-xs); color: var(--rep-text-muted); margin: 0; } .rep-modal__timeline-ref { margin-top: var(--rep-space-1); padding: var(--rep-space-2); background: var(--rep-card-bg); border: 1px solid var(--rep-border-default); border-radius: var(--rep-radius-sm); font-family: var(--rep-font-family-mono); font-size: var(--rep-font-size-xs); color: var(--rep-text-muted); } .rep-modal__timeline-note { font-size: var(--rep-font-size-xs); color: var(--rep-text-muted); font-style: italic; margin: var(--rep-space-1) 0 0; } /* ── Note Input ── */ .rep-modal__note-input-wrap { position: relative; margin-top: var(--rep-space-4); padding-top: var(--rep-space-4); border-top: 1px solid var(--rep-border-default); } .rep-modal__note-input { width: 100%; padding: var(--rep-space-2-5) var(--rep-space-10) var(--rep-space-2-5) var(--rep-space-3); background: var(--rep-card-bg); border: 1px solid var(--rep-border-default); border-radius: var(--rep-radius-lg); font-size: var(--rep-font-size-sm); font-family: var(--rep-font-family-base); color: var(--rep-text-primary); transition: border-color var(--rep-transition-fast); box-sizing: border-box; } .rep-modal__note-input::placeholder { color: var(--rep-text-muted); } .rep-modal__note-input:focus { outline: none; border-color: var(--rep-color-primary-base); box-shadow: var(--rep-shadow-ring); } .rep-modal__note-send { position: absolute; right: var(--rep-space-2); top: 50%; transform: translateY(-25%); background: none; border: none; color: var(--rep-color-primary-base); cursor: pointer; transition: color var(--rep-transition-fast); } .rep-modal__note-send:hover { color: var(--rep-color-primary-hover); } .rep-modal__note-send .material-symbols-outlined { font-size: 20px; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .rep-modal { height: auto; max-height: 95vh; } .rep-modal__details-grid { grid-template-columns: 1fr; } .rep-modal__gallery { grid-template-columns: repeat(2, 1fr); } .rep-modal__header-btn { display: none; } } @media (max-width: 768px) { .rep-modal { border-radius: var(--rep-radius-lg); } .rep-modal__left { padding: var(--rep-space-4); } .rep-modal__right { padding: var(--rep-space-4); } } /* =================================================================== * Support Button Dropdown — Stitch-inspired design * Component: rep-support, rep-support-dropdown * =================================================================== */ /* — Support wrapper (relative anchor for dropdown) — */ .rep-support { position: relative; } /* — Dropdown Panel — glass morphism inspired by Stitch export — */ .rep-support-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 352px; border-radius: var(--rep-radius-xl, 12px); border: 1px solid var(--rep-border-default, #1f2937); background: var(--rep-bg-surface, rgba(21, 21, 42, 0.8)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); overflow: hidden; z-index: 1000; flex-direction: column; } .rep-support-dropdown[style*="display: none"] { display: none !important; } .rep-support-dropdown--open { display: flex !important; } /* — Dropdown Header — */ .rep-support-dropdown__header { display: flex; flex-direction: column; padding: 16px 20px 12px; border-bottom: 1px solid color-mix(in srgb, var(--rep-border-default, #1f2937) 50%, transparent); } .rep-support-dropdown__header h3 { font-size: 14px; font-weight: 700; color: var(--rep-text-primary, #f9fafb); margin: 0; } .rep-support-dropdown__header p { font-size: 12px; color: var(--rep-text-secondary, #9ca3af); margin: 4px 0 0; } /* — Menu items — Stitch action card style with colored icon containers — */ .rep-support-dropdown__menu { padding: 8px; display: flex; flex-direction: column; gap: 4px; } .rep-support-dropdown__item { display: flex; align-items: center; gap: 16px; width: 100%; padding: 12px; border: none; border-radius: var(--rep-radius-md, 8px); background: none; color: var(--rep-text-primary, #f9fafb); cursor: pointer; text-decoration: none; text-align: left; font-family: inherit; transition: background var(--rep-transition-fast, 200ms) ease; } .rep-support-dropdown__item:hover { background: var(--rep-bg-hover, rgba(255, 255, 255, .06)); } /* Icon containers are now styled inline in the PHP for per-item colors */ .rep-support-dropdown__item > .material-symbols-outlined { font-size: 22px; color: var(--rep-color-primary-base, #5c5cff); flex-shrink: 0; } .rep-support-dropdown__item > div { display: flex; flex-direction: column; gap: 2px; flex: 1; } .rep-support-dropdown__item > div strong { font-size: 13px; font-weight: 600; color: var(--rep-text-primary, #f9fafb); } .rep-support-dropdown__item > div span { font-size: 11px; color: var(--rep-text-secondary, #9ca3af); } /* Hover scale effect for icon containers (Stitch-inspired) */ .rep-support-dropdown__item:hover > div:first-child { transform: scale(1.1); } /* — Form view — Stitch inline form style — */ .rep-support-dropdown__form { padding: 12px 16px 16px; background: color-mix(in srgb, var(--rep-bg-surface, #111827) 30%, transparent); border-radius: 0 0 var(--rep-radius-xl, 12px) var(--rep-radius-xl, 12px); } .rep-support-dropdown__back { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--rep-text-secondary, #9ca3af); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; margin-bottom: 10px; transition: color 150ms; } .rep-support-dropdown__back:hover { color: var(--rep-text-primary, #f9fafb); } .rep-support-dropdown__back .material-symbols-outlined { font-size: 16px; } .rep-support-dropdown__form h4 { font-size: 14px; font-weight: 700; color: var(--rep-text-primary, #f9fafb); margin: 0 0 12px; } .rep-support-dropdown__form input[type="text"], .rep-support-dropdown__form textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--rep-border-default, #1f2937); border-radius: var(--rep-radius-md, 8px); background: var(--rep-bg-input, #0d1117); color: var(--rep-text-primary, #f9fafb); font-size: 13px; font-family: inherit; margin-bottom: 8px; box-sizing: border-box; outline: none; transition: border-color 150ms ease, box-shadow 150ms ease; } .rep-support-dropdown__form input[type="text"]:focus, .rep-support-dropdown__form textarea:focus { border-color: var(--rep-color-primary-base, #5c5cff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rep-color-primary-base, #5c5cff) 20%, transparent); } .rep-support-dropdown__form textarea { resize: none; min-height: 70px; } .rep-support-dropdown__submit { display: inline-flex; align-items: center; gap: 6px; justify-content: center; padding: 6px 16px; border: none; border-radius: var(--rep-radius-md, 8px); background: var(--rep-color-primary-base, #5c5cff); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 150ms ease; } .rep-support-dropdown__submit:hover { background: var(--rep-color-primary-hover, #4a4aee); } .rep-support-dropdown__submit:disabled { opacity: .5; cursor: not-allowed; } .rep-support-dropdown__submit .material-symbols-outlined { font-size: 14px; } /* — Cancel button in form — */ .rep-support-dropdown__cancel { font-size: 12px; font-weight: 600; color: var(--rep-text-secondary, #9ca3af); background: none; border: none; cursor: pointer; padding: 6px 12px; transition: color 150ms; } .rep-support-dropdown__cancel:hover { color: var(--rep-text-primary, #f9fafb); } /* — Success view — */ .rep-support-dropdown__success { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 20px; text-align: center; } .rep-support-dropdown__success .material-symbols-outlined { font-size: 40px; color: var(--rep-color-success-base, #22c55e); } .rep-support-dropdown__success p { font-size: 13px; color: var(--rep-text-secondary, #9ca3af); margin: 0; line-height: 1.5; } /** * Repario Dashboard - Scoped Styles * * Source: stitch-export/repario_dashboard_dark + repario_dashboard_light * All styles scoped under .repario-admin-wrap * Uses CSS variables from tokens.css (--rep-*) * * Theme switching: data-theme="dark" | data-theme="light" on .repario-admin-wrap */ /* ═══════════════════════════════════════════════════════════════════════════ GOOGLE FONTS IMPORT Manrope: self-hosted via fonts-manrope.css (loaded by Asset Loader) Material Symbols: still loaded from Google CDN via layout.php ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ ROOT LAYOUT ═══════════════════════════════════════════════════════════════════════════ */ .repario-admin-wrap { font-family: var(--rep-font-family-base); font-size: var(--rep-font-size-base); line-height: var(--rep-line-height-normal); color: var(--rep-text-primary); background-color: var(--rep-bg-page); display: flex; height: 100%; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .repario-admin-wrap *, .repario-admin-wrap *::before, .repario-admin-wrap *::after { box-sizing: border-box; } .repario-admin-wrap ::selection { background-color: rgba(92, 92, 255, 0.3); } /* ── Scrollbar ── */ .repario-admin-wrap ::-webkit-scrollbar { width: 6px; height: 6px; } .repario-admin-wrap ::-webkit-scrollbar-track { background: var(--rep-scrollbar-track); } .repario-admin-wrap ::-webkit-scrollbar-thumb { background: var(--rep-scrollbar-thumb); border-radius: 3px; } .repario-admin-wrap ::-webkit-scrollbar-thumb:hover { background: var(--rep-scrollbar-thumb-hover); } /* ── Material Symbols base ── */ .repario-admin-wrap .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* ═══════════════════════════════════════════════════════════════════════════ SIDEBAR ═══════════════════════════════════════════════════════════════════════════ */ .rep-sidebar { width: 16rem; flex-shrink: 0; border-right: 1px solid var(--rep-sidebar-border); display: flex; flex-direction: column; background-color: var(--rep-sidebar-bg); height: 100vh; transition: all var(--rep-transition-slow); } /* ── Logo area ── */ .rep-sidebar__header { padding: var(--rep-space-4); border-bottom: 1px solid var(--rep-border-subtle); } .rep-sidebar__logo { display: flex; align-items: center; gap: var(--rep-space-3); margin-bottom: var(--rep-space-4); } .rep-sidebar__logo-icon { background: linear-gradient(135deg, var(--rep-color-primary-base), #3939b7); border-radius: var(--rep-radius-lg); height: 2.5rem; width: 2.5rem; display: flex; align-items: center; justify-content: center; color: var(--rep-text-inverse); box-shadow: 0 4px 12px rgba(92, 92, 255, 0.2); } .rep-sidebar__logo-text h1 { font-weight: var(--rep-font-weight-bold); font-size: 1.125rem; line-height: var(--rep-line-height-tight); letter-spacing: var(--rep-letter-spacing-tight); margin: 0; color: var(--rep-text-primary); } .rep-sidebar__logo-text p { font-size: var(--rep-font-size-xs); color: var(--rep-text-secondary); font-weight: var(--rep-font-weight-medium); margin: 0; } /* ── Shop switcher ── */ .rep-shop-switcher { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--rep-space-2-5); border-radius: var(--rep-radius-lg); background-color: var(--rep-bg-input); border: 1px solid var(--rep-border-default); cursor: pointer; transition: border-color var(--rep-transition-normal); color: inherit; } .rep-shop-switcher:hover { border-color: rgba(92, 92, 255, 0.5); } .rep-shop-switcher__info { display: flex; align-items: center; gap: var(--rep-space-2); overflow: hidden; } .rep-shop-switcher__badge { height: 1.5rem; width: 1.5rem; border-radius: var(--rep-radius-md); background-color: rgba(16, 185, 129, 0.2); color: var(--rep-color-status-ready); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rep-shop-switcher__badge .material-symbols-outlined { font-size: var(--rep-font-size-sm); } .rep-shop-switcher__name { font-size: var(--rep-font-size-sm); font-weight: var(--rep-font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rep-shop-switcher__arrow { color: var(--rep-text-secondary); } .rep-shop-switcher__arrow .material-symbols-outlined { font-size: var(--rep-font-size-sm); } /* ── Navigation ── */ .rep-sidebar__nav { flex: 1; overflow-y: auto; padding: var(--rep-space-4) var(--rep-space-3); display: flex; flex-direction: column; gap: var(--rep-space-1); } .rep-nav-link { display: flex; align-items: center; gap: var(--rep-space-3); padding: var(--rep-space-2-5) var(--rep-space-3); border-radius: var(--rep-radius-lg); color: var(--rep-sidebar-text); font-weight: var(--rep-font-weight-medium); font-size: var(--rep-font-size-sm); transition: all var(--rep-transition-normal); text-decoration: none; cursor: pointer; } .rep-nav-link:hover { background-color: var(--rep-sidebar-hover-bg); color: var(--rep-sidebar-text-hover); } .rep-nav-link:hover .material-symbols-outlined { transform: scale(1.1); } .rep-nav-link .material-symbols-outlined { transition: transform var(--rep-transition-normal); } .rep-nav-link--active { background-color: var(--rep-sidebar-active-bg); color: var(--rep-sidebar-active-text); font-weight: var(--rep-font-weight-semibold); } .rep-nav-link--active .material-symbols-outlined { font-variation-settings: 'FILL' 1; } .rep-nav-badge { margin-left: auto; background-color: var(--rep-color-primary-base); color: var(--rep-text-inverse); font-size: 10px; font-weight: var(--rep-font-weight-bold); padding: 2px 6px; border-radius: var(--rep-radius-md); } .rep-nav-divider { padding-top: var(--rep-space-4); margin-top: var(--rep-space-4); border-top: 1px solid var(--rep-border-subtle); padding-left: var(--rep-space-3); padding-right: var(--rep-space-3); padding-bottom: var(--rep-space-2); } .rep-nav-divider__label { font-size: var(--rep-font-size-xs); font-weight: var(--rep-font-weight-bold); color: var(--rep-text-secondary); text-transform: uppercase; letter-spacing: var(--rep-letter-spacing-wider); display: block; margin-bottom: var(--rep-space-2); } /* ── Sidebar footer ── */ .rep-sidebar__footer { padding: var(--rep-space-4); border-top: 1px solid var(--rep-border-subtle); display: flex; flex-direction: column; gap: var(--rep-space-4); } .rep-sidebar__cta { width: 100%; padding: var(--rep-space-2-5) 0; background-color: var(--rep-color-primary-base); color: var(--rep-text-inverse); border-radius: var(--rep-radius-lg); font-weight: var(--rep-font-weight-bold); font-size: var(--rep-font-size-sm); box-shadow: 0 4px 12px rgba(92, 92, 255, 0.25); transition: all var(--rep-transition-normal); display: flex; align-items: center; justify-content: center; gap: var(--rep-space-2); border: none; cursor: pointer; } .rep-sidebar__cta:hover { background-color: var(--rep-color-primary-hover); } .rep-sidebar__cta .material-symbols-outlined { font-size: 1.125rem; } .rep-sidebar__user { display: flex; align-items: center; gap: var(--rep-space-3); padding-top: var(--rep-space-2); } .rep-sidebar__avatar { height: 2.5rem; width: 2.5rem; border-radius: var(--rep-radius-full); background-size: cover; background-position: center; ring: 2px solid var(--rep-border-default); flex-shrink: 0; background-color: var(--rep-bg-subtle); } .rep-sidebar__user-info { display: flex; flex-direction: column; overflow: hidden; } .rep-sidebar__user-name { font-size: var(--rep-font-size-sm); font-weight: var(--rep-font-weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rep-sidebar__user-role { font-size: var(--rep-font-size-xs); color: var(--rep-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rep-sidebar__logout { margin-left: auto; color: var(--rep-text-secondary); background: none; border: none; cursor: pointer; padding: var(--rep-space-1); transition: color var(--rep-transition-normal); } .rep-sidebar__logout:hover { color: var(--rep-text-primary); } /* ═══════════════════════════════════════════════════════════════════════════ MAIN CONTENT ═══════════════════════════════════════════════════════════════════════════ */ .rep-main { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative; } .rep-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ── Top bar ── */ .rep-topbar { height: 4rem; border-bottom: 1px solid var(--rep-border-default); background-color: var(--rep-topbar-bg); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--rep-space-6); flex-shrink: 0; z-index: 10; } .rep-breadcrumb { display: flex; align-items: center; gap: var(--rep-space-2); font-size: var(--rep-font-size-sm); } .rep-breadcrumb__item { color: var(--rep-text-secondary); } .rep-breadcrumb__separator { color: var(--rep-text-secondary); } .rep-breadcrumb__separator .material-symbols-outlined { font-size: var(--rep-font-size-base); } .rep-breadcrumb__current { font-weight: var(--rep-font-weight-medium); color: var(--rep-text-primary); } .rep-topbar__actions { display: flex; align-items: center; gap: var(--rep-space-4); } /* Search component → moved to assets/css/components/search.css */ /* Topbar-specific: hide on mobile, constrain width */ .rep-topbar .rep-search { display: none; } @media (min-width: 768px) { .rep-topbar .rep-search { display: flex; } } .rep-topbar .rep-search__input { width: 16rem; } .rep-topbar__divider { height: 2rem; width: 1px; background-color: var(--rep-border-default); margin: 0 var(--rep-space-2); } .rep-topbar__btn { padding: var(--rep-space-2); color: var(--rep-text-secondary); background: none; border: none; cursor: pointer; transition: color var(--rep-transition-normal); position: relative; border-radius: var(--rep-radius-lg); } .rep-topbar__btn:hover { color: var(--rep-text-primary); } .rep-topbar__notification-dot { position: absolute; top: 8px; right: 8px; height: 8px; width: 8px; border-radius: var(--rep-radius-full); background-color: var(--rep-color-semantic-error-base); border: 2px solid var(--rep-topbar-bg); } /* ═══════════════════════════════════════════════════════════════════════════ SCROLLABLE CONTENT ═══════════════════════════════════════════════════════════════════════════ */ .rep-content { flex: 1; min-height: 0; overflow-y: auto; padding: var(--rep-space-6); scroll-behavior: smooth; } @media (min-width: 1024px) { .rep-content { padding: var(--rep-space-8); } } .rep-content__inner { max-width: 80rem; margin: 0 auto; display: flex; flex-direction: column; gap: var(--rep-space-6); } /* ═══════════════════════════════════════════════════════════════════════════ KPI CARDS ═══════════════════════════════════════════════════════════════════════════ */ .rep-kpi-grid { display: grid; grid-template-columns: 1fr; gap: var(--rep-space-4); } @media (min-width: 768px) { .rep-kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .rep-kpi-grid { grid-template-columns: repeat(4, 1fr); } } .rep-kpi-card { background-color: var(--rep-card-bg); border: 1px solid var(--rep-card-border); border-radius: var(--rep-radius-xl); padding: var(--rep-space-5); box-shadow: var(--rep-card-shadow); transition: border-color var(--rep-transition-slow); } .rep-kpi-card:hover { border-color: rgba(92, 92, 255, 0.3); } .rep-kpi-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--rep-space-4); } .rep-kpi-card__icon { padding: var(--rep-space-2); border-radius: var(--rep-radius-lg); display: flex; align-items: center; justify-content: center; } .rep-kpi-card__icon--primary { background-color: var(--rep-kpi-icon-primary-bg); color: var(--rep-color-primary-base); } .rep-kpi-card__icon--indigo { background-color: var(--rep-kpi-icon-indigo-bg); color: var(--rep-color-primary-base); } .rep-kpi-card__icon--orange { background-color: var(--rep-kpi-icon-orange-bg); color: var(--rep-badge-orange-text); } .rep-kpi-card__icon--emerald { background-color: var(--rep-kpi-icon-emerald-bg); color: var(--rep-color-status-ready); } .rep-kpi-card__icon--purple { background-color: var(--rep-kpi-icon-purple-bg); color: var(--rep-kpi-icon-purple-bg); } .rep-kpi-card__trend { display: flex; align-items: center; gap: var(--rep-space-1); font-size: var(--rep-font-size-xs); font-weight: var(--rep-font-weight-medium); padding: 2px 8px; border-radius: var(--rep-radius-full); } .rep-kpi-card__trend--up { color: var(--rep-badge-emerald-text); background-color: var(--rep-badge-emerald-bg); } .rep-kpi-card__trend--down { color: var(--rep-badge-orange-text); background-color: var(--rep-badge-orange-bg); } .rep-kpi-card__trend .material-symbols-outlined { font-size: var(--rep-font-size-sm); } .rep-kpi-card__label { color: var(--rep-text-secondary); font-size: var(--rep-font-size-sm); font-weight: var(--rep-font-weight-medium); } .rep-kpi-card__value { font-size: var(--rep-font-size-2xl); font-weight: var(--rep-font-weight-bold); margin-top: var(--rep-space-1); color: var(--rep-text-primary); } /* ═══════════════════════════════════════════════════════════════════════════ CHARTS SECTION ═══════════════════════════════════════════════════════════════════════════ */ .rep-charts-grid { display: grid; grid-template-columns: 1fr; gap: var(--rep-space-6); } @media (min-width: 1024px) { .rep-charts-grid { grid-template-columns: 2fr 1fr; } } .rep-chart-card { background-color: var(--rep-card-bg); border: 1px solid var(--rep-card-border); border-radius: var(--rep-radius-xl); padding: var(--rep-space-6); box-shadow: var(--rep-card-shadow); } .rep-chart-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--rep-space-6); } .rep-chart-card__title { font-size: 1.125rem; font-weight: var(--rep-font-weight-bold); color: var(--rep-text-primary); margin: 0; } .rep-chart-card__subtitle { font-size: var(--rep-font-size-sm); color: var(--rep-text-secondary); margin: 0; } .rep-chart-card__action { font-size: var(--rep-font-size-xs); font-weight: var(--rep-font-weight-medium); color: var(--rep-color-primary-base); background-color: rgba(92, 92, 255, 0.1); padding: 6px var(--rep-space-3); border-radius: var(--rep-radius-lg); border: none; cursor: pointer; transition: background-color var(--rep-transition-normal); } .rep-chart-card__action:hover { background-color: rgba(92, 92, 255, 0.2); } /* ── Bar chart ── */ .rep-bar-chart { height: 16rem; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--rep-space-4); padding-top: var(--rep-space-4); padding-left: var(--rep-space-2); padding-right: var(--rep-space-2); } .rep-bar-chart__col { display: flex; flex-direction: column; align-items: center; gap: var(--rep-space-2); flex: 1; height: 100%; justify-content: flex-end; } .rep-bar-chart__bar { width: 100%; max-width: 40px; background-color: var(--rep-chart-bar-idle); border-radius: var(--rep-radius-sm) var(--rep-radius-sm) 0 0; transition: background-color var(--rep-transition-normal); position: relative; } .rep-bar-chart__col:hover .rep-bar-chart__bar { background-color: var(--rep-chart-bar-hover); } .rep-bar-chart__bar--active { background-color: var(--rep-chart-bar-active); box-shadow: 0 0 15px rgba(92, 92, 255, 0.3); } .rep-bar-chart__tooltip { position: absolute; top: -2rem; left: 50%; transform: translateX(-50%); background-color: var(--rep-bg-elevated); color: var(--rep-text-inverse); font-size: var(--rep-font-size-xs); padding: 4px 8px; border-radius: var(--rep-radius-md); opacity: 0; transition: opacity var(--rep-transition-normal); white-space: nowrap; } .rep-bar-chart__bar--active .rep-bar-chart__tooltip { opacity: 1; } .rep-bar-chart__col:hover .rep-bar-chart__tooltip { opacity: 1; } .rep-bar-chart__label { font-size: var(--rep-font-size-xs); font-weight: var(--rep-font-weight-medium); color: var(--rep-text-secondary); } .rep-bar-chart__label--active { font-weight: var(--rep-font-weight-bold); color: var(--rep-text-primary); } /* ── Donut chart ── */ .rep-donut-card { display: flex; flex-direction: column; } .rep-donut-chart { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; margin-bottom: var(--rep-space-6); } .rep-donut-chart__ring { position: relative; width: 12rem; height: 12rem; border-radius: var(--rep-radius-full); } .rep-donut-chart__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; } .rep-donut-chart__svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; } .rep-donut-chart__value { font-size: var(--rep-font-size-3xl); font-weight: var(--rep-font-weight-bold); color: var(--rep-text-primary); } .rep-donut-chart__label { font-size: var(--rep-font-size-xs); color: var(--rep-text-secondary); text-transform: uppercase; letter-spacing: var(--rep-letter-spacing-wide); } .rep-donut-legend { display: flex; flex-direction: column; gap: var(--rep-space-3); } .rep-donut-legend__item { display: flex; align-items: center; justify-content: space-between; font-size: var(--rep-font-size-sm); } .rep-donut-legend__marker { display: flex; align-items: center; gap: var(--rep-space-2); } .rep-donut-legend__dot { width: 0.75rem; height: 0.75rem; border-radius: var(--rep-radius-full); } .rep-donut-legend__name { color: var(--rep-text-secondary); } .rep-donut-legend__value { font-weight: var(--rep-font-weight-bold); color: var(--rep-text-primary); } /* ═══════════════════════════════════════════════════════════════════════════ RECENT TICKETS TABLE ═══════════════════════════════════════════════════════════════════════════ */ .rep-table-card { background-color: var(--rep-card-bg); border: 1px solid var(--rep-card-border); border-radius: var(--rep-radius-xl); overflow: hidden; box-shadow: var(--rep-card-shadow); margin-bottom: var(--rep-space-10); } .rep-table-card__header { padding: var(--rep-space-6); border-bottom: 1px solid var(--rep-card-border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rep-space-4); } .rep-table-card__title { font-size: 1.125rem; font-weight: var(--rep-font-weight-bold); color: var(--rep-text-primary); margin: 0; } .rep-table-card__actions { display: flex; gap: var(--rep-space-2); } .rep-table-card__btn { padding: 6px var(--rep-space-3); font-size: var(--rep-font-size-xs); font-weight: var(--rep-font-weight-medium); border-radius: var(--rep-radius-lg); border: 1px solid var(--rep-border-default); color: var(--rep-text-secondary); background: none; cursor: pointer; display: flex; align-items: center; gap: var(--rep-space-1); transition: all var(--rep-transition-normal); font-family: var(--rep-font-family-base); } .rep-table-card__btn:hover { color: var(--rep-text-primary); background-color: var(--rep-table-row-hover); } .rep-table-card__btn .material-symbols-outlined { font-size: var(--rep-font-size-sm); } .rep-table-wrap { overflow-x: auto; } .rep-table { width: 100%; text-align: left; font-size: var(--rep-font-size-sm); border-collapse: collapse; } .rep-table thead { background-color: var(--rep-table-header-bg); } .rep-table th { padding: var(--rep-space-4) var(--rep-space-6); color: var(--rep-text-secondary); text-transform: uppercase; font-size: var(--rep-font-size-xs); font-weight: var(--rep-font-weight-semibold); letter-spacing: var(--rep-letter-spacing-wider); white-space: nowrap; } .rep-table th:last-child { text-align: right; } .rep-table td { padding: var(--rep-space-4) var(--rep-space-6); vertical-align: middle; } .rep-table tbody tr { border-top: 1px solid var(--rep-table-border); transition: background-color var(--rep-transition-normal); } .rep-table tbody tr:hover { background-color: var(--rep-table-row-hover); } .rep-table__id { font-family: var(--rep-font-family-mono); color: var(--rep-text-secondary); } .rep-table__client { font-weight: var(--rep-font-weight-medium); color: var(--rep-text-primary); } .rep-table__device { color: var(--rep-text-secondary); } .rep-table__date { color: var(--rep-text-secondary); } .rep-table__action-cell { text-align: right; } .rep-table__action-btn { color: var(--rep-text-secondary); background: none; border: none; cursor: pointer; padding: 4px; transition: color var(--rep-transition-normal); } .rep-table__action-btn:hover { color: var(--rep-color-primary-base); } /* ── Technician cell ── */ .rep-tech { display: flex; align-items: center; gap: var(--rep-space-2); } .rep-tech__avatar { width: 1.5rem; height: 1.5rem; border-radius: var(--rep-radius-full); background-size: cover; background-position: center; background-color: var(--rep-bg-subtle); border: 1px solid var(--rep-border-default); } .rep-tech__avatar--initials { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--rep-font-weight-bold); color: var(--rep-text-secondary); } .rep-tech__name { color: var(--rep-text-secondary); } /* ── Status badges ── */ .rep-status-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--rep-radius-full); font-size: var(--rep-font-size-xs); font-weight: var(--rep-font-weight-medium); white-space: nowrap; } .rep-status-badge--in-progress { background-color: var(--rep-badge-yellow-bg); color: var(--rep-badge-yellow-text); border: 1px solid rgba(234, 179, 8, 0.2); } .rep-status-badge--ready { background-color: var(--rep-badge-emerald-bg); color: var(--rep-badge-emerald-text); border: 1px solid rgba(16, 185, 129, 0.2); } .rep-status-badge--parts-needed { background-color: var(--rep-badge-red-bg); color: var(--rep-badge-red-text); border: 1px solid rgba(239, 68, 68, 0.2); } .rep-status-badge--diagnosing { background-color: var(--rep-badge-blue-bg); color: var(--rep-badge-blue-text); border: 1px solid rgba(59, 130, 246, 0.2); } .rep-status-badge--completed { background-color: var(--rep-badge-emerald-bg); color: var(--rep-badge-emerald-text); border: 1px solid rgba(16, 185, 129, 0.2); } .rep-status-badge--pending { background-color: var(--rep-badge-orange-bg); color: var(--rep-badge-orange-text); border: 1px solid rgba(249, 115, 22, 0.2); } /* ═══════════════════════════════════════════════════════════════════════════ THEME SWITCHER ICON STATES ═══════════════════════════════════════════════════════════════════════════ */ .rep-theme-toggle__light { display: inline-block; } .rep-theme-toggle__dark { display: none; } [data-theme="dark"] .rep-theme-toggle__light { display: none; } [data-theme="dark"] .rep-theme-toggle__dark { display: inline-block; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE ADJUSTMENTS ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .rep-sidebar { position: fixed; left: -16rem; z-index: 50; transition: left var(--rep-transition-slow); } .rep-sidebar--open { left: 0; } .rep-topbar { padding: 0 var(--rep-space-4); } .rep-content { padding: var(--rep-space-4); } } /* ═══════════════════════════════════════════════════════════════════════════ WP ADMIN CHROME — FULLSCREEN OVERRIDE Ce fichier n'est chargé que sur toplevel_page_crm-repair-dashboard, donc ces règles n'affectent aucune autre page WP admin. ═══════════════════════════════════════════════════════════════════════════ */ /* Masquer la sidebar WP native */ #adminmenuwrap, #adminmenuback { display: none; } /* Supprimer le margin-left créé par la sidebar WP (160px / 36px collapsed) */ #wpcontent, #wpfooter { margin-left: 0; } /* Supprimer le padding wp-admin sur le conteneur */ #wpbody-content { padding-bottom: 0; } /* Masquer le footer WP admin */ #wpfooter { display: none; } /* Masquer la barre admin WP en haut (32px) — le dashboard Stitch a sa propre topbar */ html.wp-toolbar { padding-top: 0; } #wpadminbar { display: none; } .repario-admin-wrap { position: relative; z-index: 1; } /* ── Subscription expired banner ── */ .rep-banner { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; font-size: 0.8125rem; font-weight: 500; } .rep-banner--warning { background: rgba(245, 158, 11, 0.1); color: var(--rep-warning); border-bottom: 1px solid rgba(245, 158, 11, 0.15); } .rep-banner--warning .material-symbols-outlined { font-size: 1.125rem; } .rep-banner__link { margin-left: auto; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .rep-banner__link:hover { opacity: 0.85; } /* ── Billing tab styles ── */ .stg-billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; } .stg-billing-item__label { display: block; font-size: 0.75rem; color: var(--rep-text-muted); margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.04em; } .stg-billing-item__value { font-size: 0.9375rem; font-weight: 600; } .stg-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.625rem; border-radius: 100px; } .stg-badge--success { color: var(--rep-success); background: rgba(34, 197, 94, 0.12); } .stg-badge--info { color: var(--rep-accent); background: rgba(99, 102, 241, 0.12); } .stg-badge--warning { color: var(--rep-warning); background: rgba(245, 158, 11, 0.12); } .stg-badge--danger { color: var(--rep-danger); background: rgba(239, 68, 68, 0.12); } .stg-billing-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .stg-billing-actions__link { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: var(--rep-accent); text-decoration: none; } .stg-billing-actions__link:hover { text-decoration: underline; } .stg-billing-actions__link .material-symbols-outlined { font-size: 1rem; } .stg-billing-actions__cancel-btn { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; font-family: inherit; color: var(--rep-danger); background: none; border: 1px solid rgba(239, 68, 68, 0.2); padding: 0.375rem 0.75rem; border-radius: 6px; cursor: pointer; transition: background 0.15s; } .stg-billing-actions__cancel-btn:hover { background: rgba(239, 68, 68, 0.08); } .stg-billing-actions__cancel-btn .material-symbols-outlined { font-size: 1rem; } .stg-notice { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.875rem 1rem; border-radius: 8px; font-size: 0.8125rem; line-height: 1.5; } .stg-notice--info { background: rgba(99, 102, 241, 0.08); color: var(--rep-accent); border: 1px solid rgba(99, 102, 241, 0.15); } .stg-notice--info .material-symbols-outlined { font-size: 1.125rem; flex-shrink: 0; } .stg-notice p { margin: 0; } .stg-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .stg-table th { text-align: left; padding: 0.5rem 0.75rem; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rep-text-muted); border-bottom: 1px solid var(--rep-border-subtle); } .stg-table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--rep-border-subtle); } .stg-table tr:last-child td { border-bottom: none; } /** * Repario SaaS — App Shell Responsive v1.0.0 * * Fichier ADDITIF : ne modifie aucune règle existante, ajoute uniquement * des overrides via @media queries pour mobile et tablette. * * Breakpoints : * - ≤480px : Petit mobile (iPhone SE) * - ≤768px : Mobile standard (iPhone, Galaxy) * - ≤1024px : Tablette (iPad portrait) * - ≤1280px : Tablette landscape / petit desktop * * @package ReparioSaaS_Manager * @version 1.0.0 */ /* ========================================================================== HAMBURGER BUTTON (mobile only) ========================================================================== */ .rep-hamburger { display: none; width: 40px; height: 40px; border: none; background: none; cursor: pointer; color: var(--rep-text-primary); border-radius: var(--rep-radius-md); align-items: center; justify-content: center; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .rep-hamburger:active { background: var(--rep-bg-surface); } /* Sidebar backdrop overlay (mobile) */ .rep-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 49; opacity: 0; transition: opacity 0.3s ease; -webkit-tap-highlight-color: transparent; } .rep-sidebar-backdrop.is-visible { opacity: 1; } /* ========================================================================== TABLETTE LANDSCAPE (≤1280px) ========================================================================== */ @media (max-width: 1280px) { /* Sidebar compacte */ .rep-sidebar { width: 14rem; } .rep-sidebar__logo-text h1 { font-size: 1.125rem; } .rep-nav-link span:last-child { font-size: 0.8125rem; } /* Content padding réduit */ .rep-content { padding: var(--rep-space-4); } /* Chatbot ajusté */ #rep-chat { width: 340px !important; } } /* ========================================================================== TABLETTE PORTRAIT (≤1024px) ========================================================================== */ @media (max-width: 1024px) { /* KPI grid : 2 colonnes */ .rep-kpi-grid, .dash-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Charts : 1 colonne */ .rep-charts-grid, .dash-charts-grid { grid-template-columns: 1fr !important; } /* Templates editor : empiler les colonnes */ .rep-content > div[style*="display:flex"][style*="min-height"] { flex-direction: column !important; } /* Sidebar Templates : pleine largeur en haut */ .rep-content > div[style*="display:flex"] > aside[style*="width:18rem"] { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--rep-border-default); flex-direction: row !important; overflow-x: auto; padding: 1rem !important; } /* Preview PDF : cacher sur tablette portrait */ .rep-content > div[style*="display:flex"] > aside[style*="width:28rem"] { display: none !important; } /* Tables : scroll horizontal */ .td-table, .rep-table, table.pricing-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ========================================================================== MOBILE (≤768px) ========================================================================== */ @media (max-width: 768px) { /* Hamburger visible */ .rep-hamburger { display: flex; } /* Sidebar backdrop — hidden, JS adds .is-visible when sidebar opens */ .rep-sidebar-backdrop { display: none; pointer-events: none; } .rep-sidebar-backdrop.is-visible { display: block; pointer-events: auto; } /* Sidebar : drawer mobile */ .rep-sidebar { position: fixed; left: -16.5rem; top: 0; bottom: 0; width: 16rem; z-index: 50; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: none; } .rep-sidebar.rep-sidebar--open { left: 0; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2); } /* Main content : pleine largeur */ .rep-main { margin-left: 0 !important; width: 100% !important; } /* Topbar : compact */ .rep-topbar { padding: 0 var(--rep-space-3) !important; gap: var(--rep-space-2); } /* Breadcrumb : tronqué */ .rep-breadcrumb { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 40vw; font-size: 0.75rem; } .rep-breadcrumb__separator { margin: 0 2px; } /* Search masqué sur mobile */ .rep-search { display: none !important; } .rep-topbar__divider { display: none; } /* Content : padding réduit */ .rep-content { padding: var(--rep-space-3) !important; } /* KPI grid : 2 colonnes sur mobile */ .rep-kpi-grid, .dash-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--rep-space-2) !important; } /* Cards : marges réduites */ .td-card, .rep-card { border-radius: var(--rep-radius-md); } /* Sidebar footer : compact */ .rep-sidebar__footer { padding: var(--rep-space-2) var(--rep-space-3); } .rep-sidebar__cta { padding: var(--rep-space-2) var(--rep-space-3); font-size: 0.8125rem; } /* Notification dropdown : pleine largeur, below topbar + trial badge */ .rep-notif-dropdown { position: fixed !important; left: var(--rep-space-3) !important; right: var(--rep-space-3) !important; top: 100px !important; width: auto !important; z-index: 1000 !important; max-height: 70vh; border-radius: var(--rep-radius-lg); } /* Ticket detail : sidebar droite empilée */ .td-layout { flex-direction: column !important; } .td-layout__sidebar { width: 100% !important; max-width: 100% !important; order: -1; } /* Billing card prominent */ .td-card--billing { position: static !important; } /* Chatbot : plein écran mobile */ #rep-chat { bottom: 0 !important; right: 0 !important; left: 0 !important; width: 100% !important; max-width: 100% !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; } #rep-chat-fab { bottom: 16px !important; right: 16px !important; width: 48px !important; height: 48px !important; } /* Modals : plein écran mobile */ .rep-modal__content, .wb-modal__content { width: 100% !important; max-width: 100% !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; margin: 0 !important; } /* Tour tooltip : plus étroit */ #rt-tip { width: 300px !important; max-width: 85vw !important; } /* Grids génériques : 1 colonne */ .rep-grid-2, [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } /* Info grid (bon dépôt style) */ .info-grid { grid-template-columns: 1fr !important; } /* Tables : colonnes cachées sur mobile */ .rep-table__hide-mobile, .td-table__hide-mobile { display: none !important; } /* Boutons : full width sur mobile si dans un groupe */ .rep-btn-group--mobile-stack { flex-direction: column; } .rep-btn-group--mobile-stack > * { width: 100%; } /* Trial badge : compact */ .rep-trial-badge { font-size: 0.6875rem; padding: var(--rep-space-1) var(--rep-space-3); } /* Page title : plus petit */ h1[style*="font-size:1.875rem"], .rep-page-title { font-size: 1.25rem !important; } /* ── Bottom Action Bar — Mobile ── */ .td-bottom-bar { z-index: 9999; } .td-bottom-bar__inner { padding: 10px 16px; } .td-bottom-bar__left { display: none; } .td-bottom-bar__actions { width: 100%; justify-content: stretch; gap: 0.5rem; } .td-bottom-bar__actions .td-btn { flex: 1; justify-content: center; padding: 0.625rem 0.5rem; font-size: 0.8125rem; } .td-bottom-bar__btn-label { display: inline; } /* Extra padding-bottom so bar doesn't hide content */ .td-grid { padding-bottom: 80px !important; } } /* ========================================================================== PETIT MOBILE (≤480px) ========================================================================== */ @media (max-width: 480px) { /* KPI : 1 colonne */ .rep-kpi-grid, .dash-kpi-grid { grid-template-columns: 1fr !important; } /* Topbar actions : icônes seulement */ .rep-topbar__actions { gap: var(--rep-space-1); } .rep-topbar__btn { width: 36px; height: 36px; padding: 0; } /* Breadcrumb : 1er élément seulement */ .rep-breadcrumb__item { display: none; } .rep-breadcrumb__separator { display: none; } /* Font sizes réduits */ .rep-content { font-size: 0.8125rem; } /* Sidebar user info : nom tronqué */ .rep-sidebar__user-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ========================================================================== TOUCH TARGETS — Minimum 44px (WCAG 2.1 AA) ========================================================================== */ @media (pointer: coarse) { .rep-nav-link { min-height: 44px; } .rep-topbar__btn, .rep-hamburger, .rep-notif-bell__trigger { min-width: 44px; min-height: 44px; } button, a, [role="button"] { min-height: 44px; } .rep-search__input { min-height: 44px; } /* Checkbox/toggle larger touch area */ .wb-switch { min-width: 44px; min-height: 24px; } } /* ========================================================================== SAFE AREA (iPhone notch) ========================================================================== */ @supports (padding-bottom: env(safe-area-inset-bottom)) { .rep-sidebar__footer { padding-bottom: calc(var(--rep-space-3) + env(safe-area-inset-bottom)); } #rep-chat-fab { bottom: calc(16px + env(safe-area-inset-bottom)) !important; } .rep-content { padding-bottom: calc(var(--rep-space-4) + env(safe-area-inset-bottom)); } .td-bottom-bar { padding-bottom: env(safe-area-inset-bottom); } } /* ========================================================================== PRINT — Masquer éléments non pertinents ========================================================================== */ @media print { .rep-sidebar, .rep-topbar, .rep-hamburger, .rep-sidebar-backdrop, #rep-chat, #rep-chat-fab, #rep-tour, .rep-trial-badge, .rep-notif-bell, .rep-toast-container { display: none !important; } .rep-main { margin-left: 0 !important; width: 100% !important; } } /** * Repario UX Premium — Phase 2.3 * * Skeleton loaders, micro-interactions, loading states, * empty states, entrance animations, button feedback. * * Loaded globally on all /app/ pages (non-fullscreen). * * @package Repario_SaaS * @since 3.4.4 */ /* ═══════════════════════════════════════════════════════════════════════════ SKELETON LOADERS ═══════════════════════════════════════════════════════════════════════════ */ @keyframes rep-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .rep-skeleton { background: linear-gradient( 90deg, var(--rep-skeleton-base, rgba(255,255,255,.04)) 0%, var(--rep-skeleton-shine, rgba(255,255,255,.08)) 40%, var(--rep-skeleton-base, rgba(255,255,255,.04)) 80% ); background-size: 800px 100%; animation: rep-shimmer 1.6s ease-in-out infinite; border-radius: var(--rep-radius-md, 8px); pointer-events: none; } [data-theme="light"] .rep-skeleton, html:not(.dark) .rep-skeleton { --rep-skeleton-base: rgba(0,0,0,.06); --rep-skeleton-shine: rgba(0,0,0,.1); } /* KPI skeleton */ .rep-skeleton-kpi { height: 7.5rem; border-radius: var(--rep-radius-xl, 16px); } /* Chart skeleton */ .rep-skeleton-chart { height: 20rem; border-radius: var(--rep-radius-xl, 16px); } /* Table row skeleton */ .rep-skeleton-row { height: 3.25rem; margin-bottom: 2px; border-radius: var(--rep-radius-md, 8px); } /* Text line skeletons */ .rep-skeleton-text { height: 0.875rem; margin-bottom: 0.5rem; width: 70%; } .rep-skeleton-text--short { width: 40%; } .rep-skeleton-text--full { width: 100%; } /* Circle skeleton (avatar) */ .rep-skeleton-circle { width: 2.5rem; height: 2.5rem; border-radius: var(--rep-radius-full, 9999px); } /* ═══════════════════════════════════════════════════════════════════════════ ENTRANCE ANIMATIONS ═══════════════════════════════════════════════════════════════════════════ */ @keyframes rep-fade-in-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes rep-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rep-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Apply entrance animation to KPI cards with stagger */ .rep-kpi-card { animation: rep-fade-in-up 0.4s ease-out both; } .rep-kpi-card:nth-child(1) { animation-delay: 0ms; } .rep-kpi-card:nth-child(2) { animation-delay: 60ms; } .rep-kpi-card:nth-child(3) { animation-delay: 120ms; } .rep-kpi-card:nth-child(4) { animation-delay: 180ms; } /* Chart cards entrance */ .rep-chart-card { animation: rep-fade-in-up 0.4s ease-out 0.2s both; } /* Table card entrance */ .rep-table-card { animation: rep-fade-in-up 0.4s ease-out 0.3s both; } /* Onboarding widget entrance */ #rep-onboarding-checklist { animation: rep-scale-in 0.5s ease-out both; } /* ═══════════════════════════════════════════════════════════════════════════ KPI CARD HOVER — PREMIUM LIFT EFFECT ═══════════════════════════════════════════════════════════════════════════ */ .rep-kpi-card { transition: border-color 0.3s ease, transform 0.25s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.25s cubic-bezier(0.33, 1, 0.68, 1); } .rep-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--rep-card-shadow, 0 1px 3px rgba(0,0,0,.1)), 0 8px 24px rgba(92, 92, 255, 0.08); } /* KPI value count-up visual — font feature */ .rep-kpi-card__value { font-variant-numeric: tabular-nums; letter-spacing: -0.025em; } /* ═══════════════════════════════════════════════════════════════════════════ BAR CHART — ENTRANCE ANIMATION ═══════════════════════════════════════════════════════════════════════════ */ @keyframes rep-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } .rep-bar-chart__bar { transform-origin: bottom center; animation: rep-bar-grow 0.6s cubic-bezier(0.33, 1, 0.68, 1) both; } .rep-bar-chart__col:nth-child(1) .rep-bar-chart__bar { animation-delay: 0.3s; } .rep-bar-chart__col:nth-child(2) .rep-bar-chart__bar { animation-delay: 0.36s; } .rep-bar-chart__col:nth-child(3) .rep-bar-chart__bar { animation-delay: 0.42s; } .rep-bar-chart__col:nth-child(4) .rep-bar-chart__bar { animation-delay: 0.48s; } .rep-bar-chart__col:nth-child(5) .rep-bar-chart__bar { animation-delay: 0.54s; } .rep-bar-chart__col:nth-child(6) .rep-bar-chart__bar { animation-delay: 0.6s; } .rep-bar-chart__col:nth-child(7) .rep-bar-chart__bar { animation-delay: 0.66s; } /* ═══════════════════════════════════════════════════════════════════════════ DONUT CHART — ENTRANCE ANIMATION ═══════════════════════════════════════════════════════════════════════════ */ @keyframes rep-donut-draw { from { stroke-dashoffset: 251.33; opacity: 0; } to { opacity: 1; } } .rep-donut-chart__svg circle { animation: rep-fade-in 0.8s ease-out 0.5s both; } .rep-donut-chart__value { animation: rep-scale-in 0.5s ease-out 0.7s both; } /* ═══════════════════════════════════════════════════════════════════════════ BUTTON LOADING STATE ═══════════════════════════════════════════════════════════════════════════ */ @keyframes rep-spin { to { transform: rotate(360deg); } } .rep-btn--loading { position: relative; pointer-events: none; color: transparent !important; } .rep-btn--loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 1.125rem; height: 1.125rem; margin: -0.5625rem 0 0 -0.5625rem; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: rep-spin 0.6s linear infinite; } /* Dark-on-light buttons */ .rep-btn--loading.rep-btn--outline::after { border-color: rgba(92,92,255,.2); border-top-color: var(--rep-color-primary-base, #5c5cff); } /* Generic button press effect */ .rep-sidebar__cta:active, .rep-table-card__btn:active, .rep-chart-card__action:active, .rep-topbar__btn:active { transform: scale(0.96); } /* ═══════════════════════════════════════════════════════════════════════════ TABLE ROW HOVER — PREMIUM ═══════════════════════════════════════════════════════════════════════════ */ .rep-table tbody tr { transition: background-color 0.2s ease, box-shadow 0.2s ease; } .rep-table tbody tr:hover { position: relative; z-index: 1; } .rep-table__action-btn { transition: color 0.2s ease, transform 0.2s ease; } .rep-table tbody tr:hover .rep-table__action-btn { color: var(--rep-color-primary-base, #5c5cff); } .rep-table__action-btn:hover { transform: scale(1.15); } /* ═══════════════════════════════════════════════════════════════════════════ EMPTY STATES ═══════════════════════════════════════════════════════════════════════════ */ .rep-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; text-align: center; animation: rep-fade-in 0.5s ease-out both; } .rep-empty-state__icon { width: 4rem; height: 4rem; border-radius: var(--rep-radius-full, 9999px); background: rgba(92, 92, 255, 0.08); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .rep-empty-state__icon .material-symbols-outlined { font-size: 2rem; color: var(--rep-text-secondary, #9ca3af); } .rep-empty-state__title { font-size: 1rem; font-weight: 600; color: var(--rep-text-primary); margin: 0 0 0.375rem; } .rep-empty-state__text { font-size: 0.8125rem; color: var(--rep-text-secondary, #9ca3af); margin: 0 0 1.25rem; max-width: 24rem; line-height: 1.5; } .rep-empty-state__cta { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; background-color: var(--rep-color-primary-base, #5c5cff); color: #fff; border-radius: var(--rep-radius-lg, 12px); font-size: 0.8125rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(92, 92, 255, 0.25); } .rep-empty-state__cta:hover { background-color: var(--rep-color-primary-hover, #4a4ae0); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(92, 92, 255, 0.35); } .rep-empty-state__cta:active { transform: scale(0.97); } .rep-empty-state__cta .material-symbols-outlined { font-size: 1rem; } /* ═══════════════════════════════════════════════════════════════════════════ SIDEBAR — ENHANCED HOVER & ACTIVE STATES ═══════════════════════════════════════════════════════════════════════════ */ /* Active link: left accent bar */ .rep-nav-link--active { position: relative; } .rep-nav-link--active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: var(--rep-color-primary-base, #5c5cff); border-radius: 0 3px 3px 0; } /* Nav link press feedback */ .rep-nav-link:active { transform: scale(0.98); } .rep-nav-link { position: relative; overflow: hidden; } /* Subtle ripple on hover */ .rep-nav-link::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--rep-ripple-x, 50%) var(--rep-ripple-y, 50%), rgba(92,92,255,.06) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .rep-nav-link:hover::after { opacity: 1; } /* CTA button glow pulse */ @keyframes rep-cta-glow { 0%, 100% { box-shadow: 0 4px 12px rgba(92, 92, 255, 0.25); } 50% { box-shadow: 0 4px 20px rgba(92, 92, 255, 0.4); } } .rep-sidebar__cta { animation: rep-cta-glow 3s ease-in-out infinite; } .rep-sidebar__cta:hover { animation: none; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(92, 92, 255, 0.35); } /* ═══════════════════════════════════════════════════════════════════════════ TOPBAR — BUTTON HOVER BACKGROUNDS ═══════════════════════════════════════════════════════════════════════════ */ .rep-topbar__btn { transition: color 0.2s ease, background-color 0.2s ease, transform 0.15s ease; } .rep-topbar__btn:hover { background-color: var(--rep-sidebar-hover-bg, rgba(255,255,255,.05)); } /* Search input focus enhancement */ .rep-search__input { transition: width 0.3s cubic-bezier(0.33, 1, 0.68, 1), border-color 0.2s ease, box-shadow 0.2s ease; } .rep-search__input:focus { width: 20rem; box-shadow: 0 0 0 3px rgba(92, 92, 255, 0.12); } /* ═══════════════════════════════════════════════════════════════════════════ NOTIFICATION BADGE — PULSE ═══════════════════════════════════════════════════════════════════════════ */ @keyframes rep-badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } .rep-notif-bell__badge { animation: rep-badge-pulse 2s ease-in-out infinite; } /* ═══════════════════════════════════════════════════════════════════════════ DROPDOWN / NOTIFICATION DROPDOWN — ENTRANCE ═══════════════════════════════════════════════════════════════════════════ */ .rep-notif-dropdown[aria-hidden="false"], .rep-support-dropdown--open { animation: rep-fade-in-up 0.2s ease-out both; } /* ═══════════════════════════════════════════════════════════════════════════ STATUS BADGE — SUBTLE GLOW FOR ACTIVE STATES ═══════════════════════════════════════════════════════════════════════════ */ .rep-status-badge { transition: transform 0.15s ease; } .rep-status-badge:hover { transform: scale(1.05); } /* ═══════════════════════════════════════════════════════════════════════════ CHART CARD HOVER ═══════════════════════════════════════════════════════════════════════════ */ .rep-chart-card { transition: border-color 0.3s ease, box-shadow 0.3s ease; } .rep-chart-card:hover { border-color: rgba(92, 92, 255, 0.15); box-shadow: var(--rep-card-shadow, 0 1px 3px rgba(0,0,0,.1)), 0 4px 16px rgba(92, 92, 255, 0.05); } /* ═══════════════════════════════════════════════════════════════════════════ TRIAL BADGE — SUBTLE ATTENTION ═══════════════════════════════════════════════════════════════════════════ */ @keyframes rep-trial-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .rep-sidebar__trial { animation: rep-trial-pulse 3s ease-in-out infinite; } /* Sidebar trial card — enhanced CTA */ .rep-sidebar__trial-card { margin: 0.75rem; padding: 0.75rem; border-radius: 0.75rem; background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.04)); border: 1px solid rgba(99, 102, 241, 0.2); display: flex; flex-direction: column; gap: 0.5rem; } .rep-sidebar__trial-card--urgent { background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05)); border-color: rgba(239, 68, 68, 0.3); animation: rep-trial-pulse 2s ease-in-out infinite; } .rep-sidebar__trial-timer { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; color: var(--rep-color-text-secondary, #94a3b8); } .rep-sidebar__trial-timer .material-symbols-outlined { font-size: 1rem; color: var(--rep-color-primary, #6366f1); } .rep-sidebar__trial-card--urgent .rep-sidebar__trial-timer .material-symbols-outlined { color: #ef4444; } .rep-sidebar__trial-cta { display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: var(--rep-color-primary, #6366f1); color: #fff; font-size: 0.75rem; font-weight: 700; text-decoration: none; transition: all 0.15s ease; } .rep-sidebar__trial-cta:hover { filter: brightness(1.1); transform: translateY(-1px); } .rep-sidebar__trial-cta .material-symbols-outlined { font-size: 0.875rem; } .rep-sidebar__trial-card--urgent .rep-sidebar__trial-cta { background: #ef4444; box-shadow: 0 0 12px rgba(239, 68, 68, 0.3); } /* ═══════════════════════════════════════════════════════════════════════════ CONTENT PAGE ENTRANCE ═══════════════════════════════════════════════════════════════════════════ */ .rep-content__inner { animation: rep-fade-in 0.3s ease-out both; } /* ═══════════════════════════════════════════════════════════════════════════ REDUCED MOTION — RESPECT USER PREFERENCE ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .rep-sidebar__cta { animation: none; } .rep-notif-bell__badge { animation: none; } .rep-sidebar__trial { animation: none; } } /* ================================================================ Trial Badge & Upgrade Modal — Stitch Design System ================================================================ */ /* ── Trial Badge Banner ── */ .rep-trial-badge { --rep-trial-accent: var(--rep-color-semantic-warning-base); position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.5rem; border-left: 4px solid var(--rep-trial-accent); background: linear-gradient( 90deg, color-mix(in srgb, var(--rep-trial-accent) 18%, transparent), color-mix(in srgb, var(--rep-trial-accent) 6%, transparent) ); border-bottom: 1px solid color-mix(in srgb, var(--rep-trial-accent) 30%, transparent); font-family: var(--rep-font-base); } .rep-trial-badge--expired { --rep-trial-accent: var(--rep-color-semantic-error-base); } /* Progressive urgency states */ .rep-trial-badge--warning { --rep-trial-accent: #f59e0b; /* amber-500 */ } .rep-trial-badge--urgent { --rep-trial-accent: #ef4444; /* red-500 */ animation: rep-trial-pulse 3s ease-in-out infinite; } .rep-trial-badge--critical { --rep-trial-accent: #dc2626; /* red-600 */ animation: rep-trial-pulse 1.5s ease-in-out infinite; } .rep-trial-badge--critical .rep-trial-badge__cta { background: var(--rep-trial-accent); color: #fff; box-shadow: 0 0 20px color-mix(in srgb, var(--rep-trial-accent) 40%, transparent); } @keyframes rep-trial-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } } .rep-trial-badge__info { display: flex; align-items: center; gap: 0.75rem; } .rep-trial-badge__icon { color: var(--rep-trial-accent); font-size: 1.375rem; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--rep-trial-accent) 40%, transparent)); } .rep-trial-badge__text { display: flex; flex-direction: column; gap: 0.125rem; } @media (min-width: 640px) { .rep-trial-badge__text { flex-direction: row; align-items: baseline; gap: 0.75rem; } } .rep-trial-badge__title { font-size: 0.875rem; font-weight: 600; color: var(--rep-color-text-primary); margin: 0; } .rep-trial-badge__sep { display: none; color: var(--rep-color-text-secondary); font-size: 0.75rem; } @media (min-width: 640px) { .rep-trial-badge__sep { display: inline; } } .rep-trial-badge__detail { font-size: 0.75rem; color: var(--rep-color-text-secondary); margin: 0; } @media (min-width: 640px) { .rep-trial-badge__detail { font-size: 0.875rem; } } .rep-trial-badge__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; border: none; border-radius: 0.375rem; background: var(--rep-color-primary-base); color: var(--rep-text-inverse); font-size: 0.8125rem; font-weight: 600; font-family: inherit; white-space: nowrap; cursor: pointer; transition: opacity 0.2s, box-shadow 0.2s; box-shadow: 0 2px 8px color-mix(in srgb, var(--rep-color-primary-base) 30%, transparent); text-decoration: none; } .rep-trial-badge__cta:hover { opacity: 0.9; } .rep-trial-badge__cta .material-symbols-outlined { font-size: 0.875rem; } /* ── Read-only Banner (replaces the old rep-banner--warning) ── */ .rep-readonly-banner { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1.5rem; background: color-mix(in srgb, var(--rep-color-semantic-error-base) 10%, transparent); border-left: 4px solid var(--rep-color-semantic-error-base); font-size: 0.8125rem; color: var(--rep-color-text-primary); font-family: var(--rep-font-base); } .rep-readonly-banner .material-symbols-outlined { color: var(--rep-color-semantic-error-base); font-size: 1.125rem; } .rep-readonly-banner__link { margin-left: auto; color: var(--rep-color-primary); font-weight: 600; text-decoration: none; font-size: 0.8125rem; white-space: nowrap; } .rep-readonly-banner__link:hover { text-decoration: underline; } /* ── Upgrade Modal ── */ .rep-upgrade-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 1rem; background: var(--rep-bg-overlay); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow-y: auto; font-family: var(--rep-font-base); } .rep-upgrade-overlay--open { display: flex; } .rep-upgrade-modal { position: relative; width: 100%; max-width: 56rem; display: flex; flex-direction: column; overflow: hidden; border-radius: 0.75rem; border: 1px solid var(--rep-border-subtle); background: var(--rep-color-surface); box-shadow: var(--rep-shadow-modal); } @media (min-width: 768px) { .rep-upgrade-modal { flex-direction: row; } } /* Left panel */ .rep-upgrade-modal__visual { width: 100%; display: flex; flex-direction: column; padding: 2rem; border-bottom: 1px solid var(--rep-border-subtle); background: var(--rep-color-bg); } @media (min-width: 768px) { .rep-upgrade-modal__visual { width: 41.666%; border-bottom: none; border-right: 1px solid var(--rep-border-subtle); } } .rep-upgrade-modal__badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 9999px; background: color-mix(in srgb, var(--rep-color-primary) 20%, transparent); color: var(--rep-color-primary); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.5rem; width: fit-content; } .rep-upgrade-modal__heading { font-size: 1.5rem; font-weight: 800; color: var(--rep-text-inverse); margin: 0 0 0.75rem; letter-spacing: -0.01em; } .rep-upgrade-modal__desc { color: var(--rep-color-text-secondary); font-size: 0.875rem; line-height: 1.6; margin: 0 0 2rem; } .rep-upgrade-modal__illustration { margin-top: auto; width: 100%; aspect-ratio: 4 / 3; border-radius: 0.5rem; background: linear-gradient(135deg, color-mix(in srgb, var(--rep-color-primary) 20%, transparent), transparent); border: 1px solid var(--rep-border-subtle); position: relative; overflow: hidden; } .rep-upgrade-modal__illustration-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8rem; height: 8rem; border-radius: 50%; background: color-mix(in srgb, var(--rep-color-primary) 30%, transparent); filter: blur(3rem); } .rep-upgrade-modal__illustration-card { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.375rem; border: 1px solid var(--rep-border-subtle); background: var(--rep-bg-overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .rep-upgrade-modal__illustration-icon { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.375rem; background: color-mix(in srgb, var(--rep-color-primary) 20%, transparent); color: var(--rep-color-primary); flex-shrink: 0; } .rep-upgrade-modal__illustration-icon .material-symbols-outlined { font-size: 1.25rem; } .rep-upgrade-modal__illustration-label { font-size: 0.6875rem; color: var(--rep-color-text-secondary); } .rep-upgrade-modal__illustration-value { font-size: 0.875rem; font-weight: 700; color: var(--rep-text-inverse); } /* Right panel */ .rep-upgrade-modal__content { width: 100%; padding: 2rem; display: flex; flex-direction: column; } @media (min-width: 768px) { .rep-upgrade-modal__content { width: 58.333%; } } .rep-upgrade-modal__features-title { font-size: 1.125rem; font-weight: 700; color: var(--rep-text-inverse); margin: 0 0 1.5rem; display: flex; align-items: center; gap: 0.5rem; } .rep-upgrade-modal__features-title .material-symbols-outlined { color: var(--rep-color-primary); } .rep-upgrade-modal__features { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .rep-upgrade-modal__feature { display: flex; align-items: flex-start; gap: 0.75rem; } .rep-upgrade-modal__feature-check { flex-shrink: 0; width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--rep-color-primary) 10%, transparent); color: var(--rep-color-primary); margin-top: 0.125rem; transition: background 0.2s, color 0.2s; } .rep-upgrade-modal__feature:hover .rep-upgrade-modal__feature-check { background: var(--rep-color-primary); color: var(--rep-text-inverse); } .rep-upgrade-modal__feature-check .material-symbols-outlined { font-size: 0.875rem; font-weight: 700; } .rep-upgrade-modal__feature-title { font-size: 0.875rem; font-weight: 500; color: var(--rep-text-secondary); margin: 0; } .rep-upgrade-modal__feature-desc { font-size: 0.75rem; color: var(--rep-text-muted); margin: 0.125rem 0 0; } /* Footer: price + actions */ .rep-upgrade-modal__footer { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--rep-border-subtle); } .rep-upgrade-modal__price-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.5rem; } .rep-upgrade-modal__price { font-size: 1.875rem; font-weight: 900; color: var(--rep-text-inverse); letter-spacing: -0.02em; } .rep-upgrade-modal__price-period { font-size: 1.125rem; font-weight: 700; color: var(--rep-color-text-secondary); margin-left: 0.25rem; } .rep-upgrade-modal__guarantee { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--rep-color-text-secondary); margin-top: 0.25rem; } .rep-upgrade-modal__guarantee .material-symbols-outlined { font-size: 0.875rem; color: var(--rep-color-status-ready); } .rep-upgrade-modal__actions { display: flex; flex-direction: column; gap: 0.75rem; } .rep-upgrade-modal__btn-primary { width: 100%; height: 3rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; border: none; border-radius: 0.5rem; background: var(--rep-color-primary); color: var(--rep-text-inverse); font-size: 0.875rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; box-shadow: 0 4px 14px color-mix(in srgb, var(--rep-color-primary) 39%, transparent); text-decoration: none; } .rep-upgrade-modal__btn-primary:hover { background: color-mix(in srgb, var(--rep-color-primary) 90%, #000); } .rep-upgrade-modal__btn-primary .material-symbols-outlined { font-size: 0.875rem; } .rep-upgrade-modal__btn-secondary { width: 100%; height: 2.5rem; display: flex; align-items: center; justify-content: center; border: none; border-radius: 0.5rem; background: transparent; color: var(--rep-color-text-secondary); font-size: 0.875rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.2s, color 0.2s; } .rep-upgrade-modal__btn-secondary:hover { background: var(--rep-bg-hover); color: var(--rep-text-inverse); } /* Close button */ .rep-upgrade-modal__close { position: absolute; top: 1rem; right: 1rem; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: none; border-radius: 50%; background: transparent; color: var(--rep-color-text-secondary); cursor: pointer; transition: background 0.2s, color 0.2s; z-index: 1; } .rep-upgrade-modal__close:hover { background: var(--rep-bg-hover); color: var(--rep-text-inverse); } /* ── Disabled action buttons (read-only mode) ── */ [data-trigger="upgrade-modal"][disabled], .rep-readonly-disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; } [data-trigger="upgrade-modal"]:not([disabled]) { cursor: pointer; } /* =================================================================== * Notification Bell Dropdown + Badge * Component: rep-notif-bell, rep-notif-dropdown * =================================================================== */ /* — Bell wrapper (relative anchor for dropdown) — */ .rep-notif-bell { position: relative; } /* — Badge — */ .rep-notif-bell__badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rep-color-danger-base, #ef4444); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; pointer-events: none; } /* — Dropdown Panel — */ .rep-notif-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-height: 480px; border-radius: var(--rep-radius-xl, 12px); border: 1px solid var(--rep-border-default, #1f2937); background: var(--rep-bg-surface, #111827); box-shadow: 0 12px 40px rgba(0, 0, 0, .4); overflow: hidden; z-index: 1000; flex-direction: column; } .rep-notif-dropdown[aria-hidden="false"] { display: flex; } /* — Dropdown Header — */ .rep-notif-dropdown__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--rep-border-default, #1f2937); } .rep-notif-dropdown__title { font-size: 15px; font-weight: 700; color: var(--rep-text-primary, #f9fafb); margin: 0; } .rep-notif-dropdown__mark-all { background: none; border: none; color: var(--rep-color-primary-base, #5c5cff); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; } .rep-notif-dropdown__mark-all:hover { text-decoration: underline; } /* — Dropdown List — */ .rep-notif-dropdown__list { flex: 1; overflow-y: auto; max-height: 360px; } /* — Notification Item — */ .rep-notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; cursor: pointer; transition: background-color .15s; text-decoration: none; color: inherit; border-bottom: 1px solid var(--rep-border-default, #1f2937); } .rep-notif-item:last-child { border-bottom: none; } .rep-notif-item:hover { background: color-mix(in srgb, var(--rep-bg-surface, #111827) 80%, #fff); } .rep-notif-item--unread { background: color-mix(in srgb, var(--rep-color-primary-base, #5c5cff) 8%, transparent); } /* — Icon Circle — */ .rep-notif-item__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .rep-notif-item__icon .material-symbols-outlined { font-size: 18px; } /* Color variants */ .rep-notif-item__icon--primary { background: color-mix(in srgb, var(--rep-color-primary-base, #5c5cff) 20%, transparent); color: var(--rep-color-primary-base, #5c5cff); } .rep-notif-item__icon--success { background: color-mix(in srgb, var(--rep-color-success-base, #10b981) 20%, transparent); color: var(--rep-color-success-base, #10b981); } .rep-notif-item__icon--warning { background: color-mix(in srgb, var(--rep-color-warning-base, #f59e0b) 20%, transparent); color: var(--rep-color-warning-base, #f59e0b); } .rep-notif-item__icon--danger { background: color-mix(in srgb, var(--rep-color-danger-base, #ef4444) 20%, transparent); color: var(--rep-color-danger-base, #ef4444); } .rep-notif-item__icon--info { background: color-mix(in srgb, var(--rep-color-info-base, #3b82f6) 20%, transparent); color: var(--rep-color-info-base, #3b82f6); } /* — Item Content — */ .rep-notif-item__body { flex: 1; min-width: 0; } .rep-notif-item__title { font-size: 13px; font-weight: 600; color: var(--rep-text-primary, #f9fafb); margin: 0 0 2px; display: flex; align-items: center; gap: 6px; } .rep-notif-item__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rep-color-primary-base, #5c5cff); flex-shrink: 0; } .rep-notif-item__message { font-size: 12px; color: var(--rep-text-secondary, #9ca3af); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rep-notif-item__time { font-size: 11px; color: var(--rep-text-muted, #6b7280); margin-top: 4px; } /* — Empty State — */ .rep-notif-dropdown__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: var(--rep-text-secondary, #9ca3af); } .rep-notif-dropdown__empty .material-symbols-outlined { font-size: 36px; margin-bottom: 8px; opacity: .5; } .rep-notif-dropdown__empty p { font-size: 13px; margin: 0; } /* — Footer Link — */ .rep-notif-dropdown__footer { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 12px; border-top: 1px solid var(--rep-border-default, #1f2937); font-size: 13px; font-weight: 600; color: var(--rep-color-primary-base, #5c5cff); text-decoration: none; transition: background-color .15s; } .rep-notif-dropdown__footer:hover { background: color-mix(in srgb, var(--rep-color-primary-base, #5c5cff) 8%, transparent); } .rep-notif-dropdown__footer .material-symbols-outlined { font-size: 16px; } /* — Priority indicators in dropdown — */ .rep-notif-item--important { border-left: 3px solid var(--rep-color-warning-base, #f59e0b); } .rep-notif-item--critical { border-left: 3px solid var(--rep-color-danger-base, #ef4444); background: color-mix(in srgb, var(--rep-color-danger-base, #ef4444) 6%, transparent); } /* =================================================================== * Toast Notifications (priority: important) * Container: rep-toast-container * =================================================================== */ .rep-toast-container { position: fixed; top: 72px; right: 20px; z-index: 9000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 400px; } .rep-toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--rep-radius-lg, 10px); background: var(--rep-bg-surface, #111827); border: 1px solid var(--rep-border-default, #1f2937); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); pointer-events: auto; opacity: 0; transform: translateX(40px); transition: opacity .3s ease, transform .3s ease; } .rep-toast--visible { opacity: 1; transform: translateX(0); } .rep-toast--exit { opacity: 0; transform: translateX(40px); } /* Toast color accents */ .rep-toast--primary { border-left: 3px solid var(--rep-color-primary-base, #5c5cff); } .rep-toast--success { border-left: 3px solid var(--rep-color-success-base, #10b981); } .rep-toast--warning { border-left: 3px solid var(--rep-color-warning-base, #f59e0b); } .rep-toast--danger { border-left: 3px solid var(--rep-color-danger-base, #ef4444); } .rep-toast--info { border-left: 3px solid var(--rep-color-info-base, #3b82f6); } .rep-toast__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--rep-color-primary-base, #5c5cff) 15%, transparent); color: var(--rep-color-primary-base, #5c5cff); } .rep-toast--warning .rep-toast__icon { background: color-mix(in srgb, var(--rep-color-warning-base, #f59e0b) 15%, transparent); color: var(--rep-color-warning-base, #f59e0b); } .rep-toast--danger .rep-toast__icon { background: color-mix(in srgb, var(--rep-color-danger-base, #ef4444) 15%, transparent); color: var(--rep-color-danger-base, #ef4444); } .rep-toast--success .rep-toast__icon { background: color-mix(in srgb, var(--rep-color-success-base, #10b981) 15%, transparent); color: var(--rep-color-success-base, #10b981); } .rep-toast--info .rep-toast__icon { background: color-mix(in srgb, var(--rep-color-info-base, #3b82f6) 15%, transparent); color: var(--rep-color-info-base, #3b82f6); } .rep-toast__icon .material-symbols-outlined { font-size: 18px; } .rep-toast__body { flex: 1; min-width: 0; } .rep-toast__title { font-size: 13px; font-weight: 600; color: var(--rep-text-primary, #f9fafb); margin: 0 0 2px; } .rep-toast__message { font-size: 12px; color: var(--rep-text-secondary, #9ca3af); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rep-toast__close { flex-shrink: 0; background: none; border: none; color: var(--rep-text-muted, #6b7280); cursor: pointer; padding: 2px; line-height: 1; } .rep-toast__close:hover { color: var(--rep-text-primary, #f9fafb); } .rep-toast__close .material-symbols-outlined { font-size: 18px; } /* =================================================================== * Critical Alert Overlay (priority: critical) * =================================================================== */ .rep-critical-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); } .rep-critical-overlay__card { width: 420px; max-width: calc(100vw - 40px); padding: 32px; border-radius: var(--rep-radius-xl, 12px); background: var(--rep-bg-surface, #111827); border: 1px solid var(--rep-color-danger-base, #ef4444); box-shadow: 0 0 40px rgba(239, 68, 68, .2); text-align: center; } .rep-critical-overlay__icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--rep-color-danger-base, #ef4444) 15%, transparent); color: var(--rep-color-danger-base, #ef4444); } .rep-critical-overlay__icon .material-symbols-outlined { font-size: 28px; } .rep-critical-overlay__title { font-size: 18px; font-weight: 700; color: var(--rep-text-primary, #f9fafb); margin: 0 0 8px; } .rep-critical-overlay__message { font-size: 14px; color: var(--rep-text-secondary, #9ca3af); line-height: 1.5; margin: 0 0 24px; } .rep-critical-overlay__actions { display: flex; gap: 12px; justify-content: center; } .rep-critical-overlay__btn { padding: 10px 20px; border-radius: var(--rep-radius-md, 8px); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; border: none; transition: opacity .15s; } .rep-critical-overlay__btn:hover { opacity: .85; } .rep-critical-overlay__btn--primary { background: var(--rep-color-danger-base, #ef4444); color: #fff; } .rep-critical-overlay__btn--dismiss { background: transparent; border: 1px solid var(--rep-border-default, #1f2937); color: var(--rep-text-secondary, #9ca3af); } /* =================================================================== * Contextual Inline Alerts (in-page notification banners) * Container: rep-ctx-alerts * =================================================================== */ .rep-ctx-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--rep-space-6, 24px); } .rep-ctx-alert { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--rep-radius-lg, 10px); border: 1px solid var(--rep-border-default, #1f2937); background: var(--rep-bg-surface, #111827); transition: opacity .3s ease; } /* Color variants — left border accent */ .rep-ctx-alert--primary { border-left: 3px solid var(--rep-color-primary-base, #5c5cff); } .rep-ctx-alert--success { border-left: 3px solid var(--rep-color-success-base, #10b981); } .rep-ctx-alert--warning { border-left: 3px solid var(--rep-color-warning-base, #f59e0b); background: color-mix(in srgb, var(--rep-color-warning-base, #f59e0b) 5%, var(--rep-bg-surface, #111827)); } .rep-ctx-alert--danger { border-left: 3px solid var(--rep-color-danger-base, #ef4444); background: color-mix(in srgb, var(--rep-color-danger-base, #ef4444) 5%, var(--rep-bg-surface, #111827)); } .rep-ctx-alert--info { border-left: 3px solid var(--rep-color-info-base, #3b82f6); } /* Critical pulse */ .rep-ctx-alert--critical { border-left-width: 4px; animation: rep-ctx-pulse 2s ease-in-out 2; } @keyframes rep-ctx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .85; } } /* Icon */ .rep-ctx-alert__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .rep-ctx-alert__icon .material-symbols-outlined { font-size: 18px; } .rep-ctx-alert--primary .rep-ctx-alert__icon { background: color-mix(in srgb, var(--rep-color-primary-base, #5c5cff) 15%, transparent); color: var(--rep-color-primary-base, #5c5cff); } .rep-ctx-alert--success .rep-ctx-alert__icon { background: color-mix(in srgb, var(--rep-color-success-base, #10b981) 15%, transparent); color: var(--rep-color-success-base, #10b981); } .rep-ctx-alert--warning .rep-ctx-alert__icon { background: color-mix(in srgb, var(--rep-color-warning-base, #f59e0b) 15%, transparent); color: var(--rep-color-warning-base, #f59e0b); } .rep-ctx-alert--danger .rep-ctx-alert__icon { background: color-mix(in srgb, var(--rep-color-danger-base, #ef4444) 15%, transparent); color: var(--rep-color-danger-base, #ef4444); } .rep-ctx-alert--info .rep-ctx-alert__icon { background: color-mix(in srgb, var(--rep-color-info-base, #3b82f6) 15%, transparent); color: var(--rep-color-info-base, #3b82f6); } /* Body */ .rep-ctx-alert__body { flex: 1; min-width: 0; } .rep-ctx-alert__title { font-size: 13px; font-weight: 600; color: var(--rep-text-primary, #f9fafb); margin: 0 0 2px; } .rep-ctx-alert__message { font-size: 12px; color: var(--rep-text-secondary, #9ca3af); margin: 0; line-height: 1.4; } /* Action link */ .rep-ctx-alert__action { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--rep-color-primary-base, #5c5cff); text-decoration: none; white-space: nowrap; align-self: center; } .rep-ctx-alert__action:hover { text-decoration: underline; } .rep-ctx-alert__action .material-symbols-outlined { font-size: 16px; } /* Dismiss */ .rep-ctx-alert__dismiss { flex-shrink: 0; background: none; border: none; color: var(--rep-text-muted, #6b7280); cursor: pointer; padding: 2px; line-height: 1; align-self: center; } .rep-ctx-alert__dismiss:hover { color: var(--rep-text-primary, #f9fafb); } .rep-ctx-alert__dismiss .material-symbols-outlined { font-size: 16px; } /* — Responsive — */ @media (max-width: 480px) { .rep-notif-dropdown { width: calc(100vw - 32px); right: -8px; } .rep-toast-container { right: 12px; left: 12px; max-width: none; } .rep-ctx-alert { flex-wrap: wrap; } .rep-ctx-alert__action { width: 100%; padding-left: 44px; } } /* ═══════════════════════════════════════════════════════════════════════════ Shared Admin Sidebar — single source of truth BEM: .rep-admin-sidebar__* Tokens: var(--rep-*) ═══════════════════════════════════════════════════════════════════════════ */ .rep-admin-sidebar { display: flex; flex-direction: column; width: 280px; min-width: 280px; border-right: 1px solid var(--rep-sidebar-border); background: var(--rep-sidebar-bg); backdrop-filter: blur(12px); } .rep-admin-sidebar__inner { display: flex; flex-direction: column; height: 100%; padding: 1rem; overflow-y: auto; } .rep-admin-sidebar__top { display: flex; flex-direction: column; gap: 1.5rem; } .rep-admin-sidebar__bottom { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rep-sidebar-border); display: flex; flex-direction: column; gap: 0.25rem; } /* ── Profile ── */ .rep-admin-sidebar__profile { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; } .rep-admin-sidebar__avatar { position: relative; flex-shrink: 0; } .rep-admin-sidebar__avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .rep-admin-sidebar__avatar-dot { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--rep-color-status-ready); border: 2px solid var(--rep-sidebar-bg); } .rep-admin-sidebar__profile-info { min-width: 0; } .rep-admin-sidebar__profile-name { font-size: 0.875rem; font-weight: 700; color: var(--rep-text-primary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rep-admin-sidebar__profile-role { font-size: 0.75rem; color: var(--rep-sidebar-text); margin: 0; } /* ── Nav items ── */ .rep-admin-sidebar__nav { display: flex; flex-direction: column; gap: 0.25rem; } .rep-admin-sidebar__nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--rep-sidebar-text); text-decoration: none; transition: background 0.15s, color 0.15s; } .rep-admin-sidebar__nav-item:hover { background: var(--rep-sidebar-hover-bg); color: var(--rep-sidebar-text-hover); } .rep-admin-sidebar__nav-item .material-symbols-outlined { font-size: 20px; transition: color 0.15s; } .rep-admin-sidebar__nav-item:hover .material-symbols-outlined { color: var(--rep-primary); } .rep-admin-sidebar__nav-item--active { background: var(--rep-sidebar-active-bg); color: var(--rep-sidebar-active-text); border: 1px solid color-mix(in srgb, var(--rep-color-primary-base) 20%, transparent); font-weight: 700; } .rep-admin-sidebar__nav-item--active .material-symbols-outlined { color: var(--rep-primary); } /* ── Responsive: slide-in sidebar for mobile ── */ @media (max-width: 768px) { .rep-admin-sidebar { position: fixed; top: 0; left: 0; z-index: 1000; height: 100vh; width: 280px; transform: translateX(-100%); transition: transform 0.3s ease; } .rep-admin-sidebar.rep-admin-sidebar--open { transform: translateX(0); } } /* ═══════════════════════════════════════════════════════════════════════════ Admin Topbar — mirrors staff topbar styling for /app/admin/* routes. Reuses .rep-topbar and .rep-topbar__btn classes (same visual contract). ═══════════════════════════════════════════════════════════════════════════ */ /* ── Column wrapper: sidebar peer, contains topbar + main ── */ .rep-admin-main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .rep-topbar--admin { height: 4rem; border-bottom: 1px solid var(--rep-border-default); background: var(--rep-topbar-bg); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; flex-shrink: 0; z-index: 10; } .rep-topbar--admin .rep-topbar__actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; } .rep-topbar--admin .rep-topbar__btn { padding: 0.5rem; color: var(--rep-text-secondary); background: none; border: none; cursor: pointer; transition: color 0.15s; position: relative; border-radius: 0.5rem; } .rep-topbar--admin .rep-topbar__btn:hover { color: var(--rep-text-primary); } /* ── Theme toggle icon states (generic — works for any [data-theme] wrapper) ── */ .rep-theme-toggle__light { display: inline-block; } .rep-theme-toggle__dark { display: none; } [data-theme="dark"] .rep-theme-toggle__light { display: none; } [data-theme="dark"] .rep-theme-toggle__dark { display: inline-block; }