/* ============================================================================ VOIPE CPanel - Design System v2.1 Linear + Stripe + Apple Liquid Glass Full RTL/LTR support via CSS Logical Properties This file provides the design system CSS variables, base styles, component classes, and utility classes for the VOIPE CPanel redesign. It is designed to coexist with the existing Bootstrap 4 / Falcon theme and can be adopted incrementally, page by page. RTL: Uses CSS logical properties throughout. Set dir="rtl" on for automatic right-to-left layout. No separate RTL stylesheet needed. ============================================================================ */ /* ============================================================================ 1. CSS CUSTOM PROPERTIES (Design Tokens) ============================================================================ */ :root { /* ---- Color Mode Toggle ---- */ color-scheme: light dark; /* ---- Brand ---- */ --v-brand-50: #f0f4ff; --v-brand-100: #dbe4ff; --v-brand-200: #bac8ff; --v-brand-300: #91a7ff; --v-brand-400: #748ffc; --v-brand-500: #5c7cfa; --v-brand-600: #4c6ef5; --v-brand-700: #4263eb; --v-brand-800: #3b5bdb; --v-brand-900: #364fc7; /* ---- Surfaces (default: light mode) ---- */ --v-bg-app: #f8f9fc; --v-bg-primary: #ffffff; --v-bg-secondary: #f1f3f9; --v-bg-tertiary: #eaedf5; --v-bg-elevated: #ffffff; --v-bg-sidebar: #ffffff; --v-bg-hover: rgba(0, 0, 0, 0.03); --v-bg-active: rgba(92, 124, 250, 0.08); /* ---- Text ---- */ --v-text-primary: #111827; --v-text-secondary: #6b7280; --v-text-tertiary: #9ca3af; --v-text-muted: #d1d5db; --v-text-inverse: #ffffff; --v-text-brand: #4c6ef5; --v-text-link: #4263eb; /* ---- Borders ---- */ --v-border-primary: rgba(0, 0, 0, 0.08); --v-border-secondary: rgba(0, 0, 0, 0.05); --v-border-focus: rgba(92, 124, 250, 0.5); --v-border-brand: #4c6ef5; /* ---- Semantic ---- */ --v-success: #10b981; --v-success-bg: #ecfdf5; --v-warning: #f59e0b; --v-warning-bg: #fffbeb; --v-danger: #ef4444; --v-danger-bg: #fef2f2; --v-info: #3b82f6; --v-info-bg: #eff6ff; /* ---- Shadows ---- */ --v-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --v-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --v-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --v-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.03); --v-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03); --v-shadow-glow: 0 0 20px rgba(92, 124, 250, 0.12); --v-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); --v-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.03); /* ---- Focus Ring ---- */ --v-focus-ring: 0 0 0 3px rgba(92, 124, 250, 0.15); /* ---- Glass (Liquid Glass tokens) ---- */ --v-glass-bg: rgba(255, 255, 255, 0.72); --v-glass-border: rgba(255, 255, 255, 0.5); --v-glass-blur: 20px; --v-glass-saturate: 1.8; --v-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6); --v-glass-highlight: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%); /* ---- Typography ---- */ --v-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --v-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; --v-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --v-text-2xs: 0.6875rem; /* 11px */ --v-text-xs: 0.75rem; /* 12px */ --v-text-sm: 0.8125rem; /* 13px */ --v-text-base: 0.875rem; /* 14px */ --v-text-md: 0.9375rem; /* 15px */ --v-text-lg: 1rem; /* 16px */ --v-text-xl: 1.125rem; /* 18px */ --v-text-2xl: 1.25rem; /* 20px */ --v-text-3xl: 1.5rem; /* 24px */ --v-text-4xl: 2rem; /* 32px */ --v-leading-tight: 1.25; --v-leading-normal: 1.5; --v-leading-relaxed: 1.625; --v-tracking-tight: -0.025em; --v-tracking-normal: 0; --v-tracking-wide: 0.025em; /* ---- Spacing ---- */ --v-space-1: 0.25rem; --v-space-2: 0.5rem; --v-space-3: 0.75rem; --v-space-4: 1rem; --v-space-5: 1.25rem; --v-space-6: 1.5rem; --v-space-8: 2rem; --v-space-10: 2.5rem; --v-space-12: 3rem; --v-space-16: 4rem; /* ---- Radius ---- */ --v-radius-sm: 6px; --v-radius-md: 8px; --v-radius-lg: 12px; --v-radius-xl: 16px; --v-radius-2xl: 20px; --v-radius-pill: 9999px; /* ---- Transitions ---- */ --v-duration-fast: 100ms; --v-duration-normal: 200ms; --v-duration-slow: 300ms; --v-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --v-ease-in: cubic-bezier(0.4, 0, 1, 1); --v-ease-out: cubic-bezier(0, 0, 0.2, 1); --v-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --v-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* ---- Sidebar ---- */ --v-sidebar-width: 260px; --v-sidebar-collapsed: 72px; --v-topbar-height: 56px; /* ---- Z-Index ---- */ --v-z-dropdown: 100; --v-z-sticky: 200; --v-z-fixed: 300; --v-z-overlay: 400; --v-z-modal: 500; --v-z-popover: 600; --v-z-tooltip: 700; /* ---- RTL-aware direction multiplier (1 for LTR, -1 for RTL) ---- */ --v-dir: 1; } /* ============================================================================ 1b. DARK MODE TOKENS ============================================================================ */ :root.v-dark, .v-dark { --v-bg-app: #0a0a0f; --v-bg-primary: #111118; --v-bg-secondary: #16161f; --v-bg-tertiary: #1c1c27; --v-bg-elevated: #1c1c27; --v-bg-sidebar: #0e0e14; --v-bg-hover: rgba(255, 255, 255, 0.04); --v-bg-active: rgba(92, 124, 250, 0.12); --v-text-primary: #f0f0f5; --v-text-secondary: #b0b7cc; --v-text-tertiary: #6b7394; --v-text-muted: #4a5075; --v-text-inverse: #111827; --v-text-brand: #748ffc; --v-text-link: #91a7ff; --v-border-primary: rgba(255, 255, 255, 0.08); --v-border-secondary: rgba(255, 255, 255, 0.04); --v-border-focus: rgba(92, 124, 250, 0.5); --v-success-bg: rgba(16, 185, 129, 0.1); --v-warning-bg: rgba(245, 158, 11, 0.1); --v-danger-bg: rgba(239, 68, 68, 0.1); --v-info-bg: rgba(59, 130, 246, 0.1); --v-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --v-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --v-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2); --v-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.2); --v-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2); --v-shadow-glow: 0 0 20px rgba(92, 124, 250, 0.2); --v-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.04); --v-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06); --v-focus-ring: 0 0 0 3px rgba(92, 124, 250, 0.25); --v-glass-bg: rgba(255, 255, 255, 0.04); --v-glass-border: rgba(255, 255, 255, 0.08); --v-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04); --v-glass-highlight: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%); } /* ============================================================================ 1c. RTL DIRECTION TOKEN ============================================================================ */ [dir="rtl"], :root[dir="rtl"] { --v-dir: -1; --v-glass-highlight: linear-gradient(225deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%); } [dir="rtl"].v-dark, :root[dir="rtl"].v-dark, [dir="rtl"] .v-dark { --v-glass-highlight: linear-gradient(225deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%); } /* ============================================================================ 2. BASE LAYER - Resets & Defaults ============================================================================ */ .v-app { font-family: var(--v-font-sans); font-size: var(--v-text-base); line-height: var(--v-leading-normal); color: var(--v-text-primary); background-color: var(--v-bg-app); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; } .v-app *, .v-app *::before, .v-app *::after { box-sizing: border-box; } /* ============================================================================ 3. COMPONENT CLASSES ============================================================================ */ /* ---- 3a. Cards (Linear-style clean cards) ---- */ .v-card { background: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-lg); box-shadow: var(--v-shadow-card); transition: box-shadow var(--v-duration-normal) var(--v-ease-default), transform var(--v-duration-normal) var(--v-ease-default); overflow: hidden; } .v-card:hover { box-shadow: var(--v-shadow-card-hover); } .v-card-interactive:hover { box-shadow: var(--v-shadow-card-hover); transform: translateY(-1px); } .v-card-header { padding: var(--v-space-4) var(--v-space-5); border-bottom: 1px solid var(--v-border-secondary); display: flex; align-items: center; justify-content: space-between; gap: var(--v-space-3); } .v-card-body { padding: var(--v-space-5); } .v-card-footer { padding: var(--v-space-3) var(--v-space-5); border-top: 1px solid var(--v-border-secondary); background: var(--v-bg-secondary); } /* ---- 3b. Glass Card (Liquid Glass) ---- */ .v-glass { background: var(--v-glass-bg); backdrop-filter: blur(var(--v-glass-blur)) saturate(var(--v-glass-saturate)); -webkit-backdrop-filter: blur(var(--v-glass-blur)) saturate(var(--v-glass-saturate)); border: 1px solid var(--v-glass-border); border-radius: var(--v-radius-xl); box-shadow: var(--v-glass-shadow); position: relative; overflow: hidden; } .v-glass::before { content: ''; position: absolute; inset: 0; background: var(--v-glass-highlight); pointer-events: none; border-radius: inherit; } .v-glass-subtle { background: var(--v-glass-bg); backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5); border: 1px solid var(--v-glass-border); border-radius: var(--v-radius-lg); } /* ---- 3c. Stat Cards (Dashboard KPI) ---- */ .v-stat-card { background: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-lg); padding: var(--v-space-5); box-shadow: var(--v-shadow-card); transition: all var(--v-duration-normal) var(--v-ease-default); position: relative; overflow: hidden; } .v-stat-card::after { content: ''; position: absolute; top: 0; inset-inline: 0; /* RTL: spans full width in both directions */ height: 3px; background: var(--v-brand-500); opacity: 0; transition: opacity var(--v-duration-normal) var(--v-ease-default); } .v-stat-card:hover::after { opacity: 1; } .v-stat-label { font-size: var(--v-text-xs); font-weight: 500; color: var(--v-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--v-space-1); } .v-stat-value { font-size: var(--v-text-3xl); font-weight: 700; color: var(--v-text-primary); letter-spacing: var(--v-tracking-tight); line-height: 1.2; } .v-stat-change { font-size: var(--v-text-xs); font-weight: 500; display: inline-flex; align-items: center; gap: 2px; margin-top: var(--v-space-1); padding: 2px 6px; border-radius: var(--v-radius-pill); } .v-stat-change--up { color: var(--v-success); background: var(--v-success-bg); } .v-stat-change--down { color: var(--v-danger); background: var(--v-danger-bg); } /* ---- 3d. Sidebar (Linear-style) — RTL: uses logical properties ---- */ .v-sidebar { width: var(--v-sidebar-width); height: 100vh; background: var(--v-bg-sidebar); border-inline-end: 1px solid var(--v-border-primary); /* RTL: right in LTR, left in RTL */ display: flex; flex-direction: column; position: fixed; top: 0; inset-inline-start: 0; /* RTL: left in LTR, right in RTL */ z-index: var(--v-z-fixed); transition: width var(--v-duration-slow) var(--v-ease-default); overflow: hidden; } .v-sidebar--collapsed { width: var(--v-sidebar-collapsed); } .v-sidebar-header { padding: var(--v-space-4) var(--v-space-4); display: flex; align-items: center; gap: var(--v-space-3); border-bottom: 1px solid var(--v-border-secondary); min-height: var(--v-topbar-height); } .v-sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--v-space-2) var(--v-space-2); } .v-sidebar-nav::-webkit-scrollbar { width: 4px; } .v-sidebar-nav::-webkit-scrollbar-track { background: transparent; } .v-sidebar-nav::-webkit-scrollbar-thumb { background: var(--v-border-primary); border-radius: var(--v-radius-pill); } .v-sidebar-section { margin-bottom: var(--v-space-2); } .v-sidebar-section-label { font-size: var(--v-text-2xs); font-weight: 600; color: var(--v-text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; padding: var(--v-space-2) var(--v-space-3); margin-bottom: var(--v-space-1); } .v-nav-item { display: flex; align-items: center; gap: var(--v-space-3); padding: var(--v-space-2) var(--v-space-3); border-radius: var(--v-radius-md); color: var(--v-text-secondary); font-size: var(--v-text-sm); font-weight: 450; text-decoration: none; cursor: pointer; transition: all var(--v-duration-fast) var(--v-ease-default); position: relative; user-select: none; } .v-nav-item:hover { background: var(--v-bg-hover); color: var(--v-text-primary); text-decoration: none; } .v-nav-item--active { background: var(--v-bg-active); color: var(--v-text-brand); font-weight: 500; } /* RTL: Active indicator bar — positioned at inline-start edge */ .v-nav-item--active::before { content: ''; position: absolute; inset-inline-start: 0; /* RTL: left in LTR, right in RTL */ top: 50%; transform: translateY(-50%); width: 3px; height: 16px; background: var(--v-brand-500); border-start-start-radius: 0; border-start-end-radius: var(--v-radius-pill); border-end-end-radius: var(--v-radius-pill); border-end-start-radius: 0; } .v-nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.65; } .v-nav-item--active .v-nav-icon { opacity: 1; } /* RTL: Nav chevron for groups with children — flips in RTL */ .v-nav-chevron { margin-inline-start: auto; /* RTL: pushes to end */ width: 16px; height: 16px; transition: transform var(--v-duration-fast) var(--v-ease-default); flex-shrink: 0; opacity: 0.5; } [dir="rtl"] .v-nav-chevron { transform: scaleX(-1); } .v-nav-chevron--open { transform: rotate(90deg); } [dir="rtl"] .v-nav-chevron--open { transform: scaleX(-1) rotate(90deg); } .v-nav-badge { margin-inline-start: auto; /* RTL: pushes to end in both LTR and RTL */ font-size: var(--v-text-2xs); font-weight: 600; padding: 1px 6px; border-radius: var(--v-radius-pill); background: var(--v-brand-500); color: white; min-width: 18px; text-align: center; } /* ---- Sidebar User Section ---- */ .v-sidebar-user { padding: var(--v-space-3) var(--v-space-4); border-top: 1px solid var(--v-border-secondary); display: flex; align-items: center; gap: var(--v-space-3); } .v-sidebar-user-info { flex: 1; min-width: 0; overflow: hidden; } /* ---- 3e. Topbar ---- */ .v-topbar { height: var(--v-topbar-height); background: var(--v-bg-primary); border-bottom: 1px solid var(--v-border-primary); display: flex; align-items: center; padding: 0 var(--v-space-5); gap: var(--v-space-4); position: sticky; top: 0; z-index: var(--v-z-sticky); } .v-topbar-glass { background: var(--v-glass-bg); backdrop-filter: blur(var(--v-glass-blur)) saturate(var(--v-glass-saturate)); -webkit-backdrop-filter: blur(var(--v-glass-blur)) saturate(var(--v-glass-saturate)); border-bottom: 1px solid var(--v-glass-border); } .v-topbar-spacer { flex: 1; } .v-topbar-actions { display: flex; align-items: center; gap: var(--v-space-2); } .v-topbar-divider { width: 1px; height: 24px; background: var(--v-border-primary); margin: 0 var(--v-space-1); } /* ---- 3e2. Breadcrumbs — RTL: separator direction auto-flips ---- */ .v-breadcrumb { display: flex; align-items: center; gap: var(--v-space-1); font-size: var(--v-text-xs); color: var(--v-text-tertiary); overflow: hidden; } .v-breadcrumb-item { white-space: nowrap; color: var(--v-text-tertiary); text-decoration: none; transition: color var(--v-duration-fast) var(--v-ease-default); } .v-breadcrumb-item:hover { color: var(--v-text-primary); } .v-breadcrumb-item--current { color: var(--v-text-primary); font-weight: 500; } /* RTL: Breadcrumb separator flips direction automatically */ .v-breadcrumb-sep { flex-shrink: 0; width: 16px; height: 16px; opacity: 0.4; } [dir="rtl"] .v-breadcrumb-sep { transform: scaleX(-1); } /* ---- 3f. Buttons (Stripe-style) ---- */ .v-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--v-space-2); padding: var(--v-space-2) var(--v-space-4); font-size: var(--v-text-sm); font-weight: 500; font-family: inherit; line-height: 1.5; border-radius: var(--v-radius-md); border: 1px solid transparent; cursor: pointer; transition: all var(--v-duration-fast) var(--v-ease-default); text-decoration: none; white-space: nowrap; user-select: none; outline: none; position: relative; } .v-btn:focus-visible { box-shadow: 0 0 0 2px var(--v-bg-app), 0 0 0 4px var(--v-border-focus); } .v-btn:active { transform: scale(0.98); } .v-btn:disabled, .v-btn--disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; } .v-btn-primary { background: var(--v-brand-600); color: white; border-color: var(--v-brand-700); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .v-btn-primary:hover { background: var(--v-brand-700); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .v-btn-secondary { background: var(--v-bg-primary); color: var(--v-text-primary); border-color: var(--v-border-primary); box-shadow: var(--v-shadow-xs); } .v-btn-secondary:hover { background: var(--v-bg-secondary); box-shadow: var(--v-shadow-sm); } .v-btn-ghost { background: transparent; color: var(--v-text-secondary); } .v-btn-ghost:hover { background: var(--v-bg-hover); color: var(--v-text-primary); } .v-btn-danger { background: var(--v-danger); color: white; border-color: var(--v-danger-700, #b91c1c); } .v-btn-danger:hover { background: var(--v-danger-600, #dc2626); } .v-btn-sm { padding: var(--v-space-1) var(--v-space-3); font-size: var(--v-text-xs); border-radius: var(--v-radius-sm); } .v-btn-lg { padding: var(--v-space-3) var(--v-space-6); font-size: var(--v-text-md); border-radius: var(--v-radius-lg); } .v-btn-icon { padding: var(--v-space-2); aspect-ratio: 1; } /* Button loading state */ .v-btn--loading { color: transparent !important; pointer-events: none; } .v-btn--loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: v-spin 0.6s linear infinite; } /* ---- 3g. Badges / Tags ---- */ .v-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: var(--v-text-2xs); font-weight: 600; border-radius: var(--v-radius-pill); white-space: nowrap; } .v-badge-success { background: var(--v-success-bg); color: var(--v-success); } .v-badge-warning { background: var(--v-warning-bg); color: var(--v-warning); } .v-badge-danger { background: var(--v-danger-bg); color: var(--v-danger); } .v-badge-info { background: var(--v-info-bg); color: var(--v-info); } .v-badge-neutral { background: var(--v-bg-tertiary); color: var(--v-text-secondary); } /* ---- 3h. Status Dots (agent statuses) ---- */ .v-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .v-status-dot--online { background: var(--v-success); box-shadow: 0 0 0 2px var(--v-success-bg); } .v-status-dot--busy { background: var(--v-danger); box-shadow: 0 0 0 2px var(--v-danger-bg); } .v-status-dot--away { background: var(--v-warning); box-shadow: 0 0 0 2px var(--v-warning-bg); } .v-status-dot--offline { background: var(--v-text-muted); } .v-status-dot--pulse { animation: v-pulse 2s infinite; } @keyframes v-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ---- 3i. Tables (Stripe-clean) — RTL: text-align uses logical value ---- */ .v-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--v-text-sm); } .v-table thead th { background: var(--v-bg-secondary); color: var(--v-text-secondary); font-size: var(--v-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: var(--v-space-3) var(--v-space-4); border-bottom: 1px solid var(--v-border-primary); text-align: start; /* RTL: inherits direction — right in RTL, left in LTR */ white-space: nowrap; position: sticky; top: 0; z-index: 1; } .v-table tbody td { padding: var(--v-space-3) var(--v-space-4); border-bottom: 1px solid var(--v-border-secondary); color: var(--v-text-primary); vertical-align: middle; text-align: start; } .v-table tbody tr { transition: background var(--v-duration-fast) var(--v-ease-default); } .v-table tbody tr:hover { background: var(--v-bg-hover); } .v-table tbody tr:last-child td { border-bottom: none; } /* Table wrapper for horizontal scroll on mobile */ .v-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--v-radius-lg); border: 1px solid var(--v-border-primary); } .v-table-wrapper .v-table { margin: 0; } /* ---- 3j. Form Inputs ---- */ .v-input { width: 100%; padding: var(--v-space-2) var(--v-space-3); font-size: var(--v-text-base); font-family: inherit; color: var(--v-text-primary); background: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-md); outline: none; transition: border-color var(--v-duration-fast) var(--v-ease-default), box-shadow var(--v-duration-fast) var(--v-ease-default); } .v-input:focus { border-color: var(--v-brand-500); box-shadow: 0 0 0 3px rgba(92, 124, 250, 0.15); } .v-input::placeholder { color: var(--v-text-tertiary); } .v-input-label, .v-label { display: block; font-size: var(--v-text-xs); font-weight: 600; color: var(--v-text-secondary); margin-bottom: var(--v-space-1); } .v-form-group { margin-bottom: var(--v-space-4); } .v-input-hint { display: block; font-size: var(--v-text-2xs); color: var(--v-text-tertiary); margin-top: var(--v-space-1); } .v-input-error { display: block; font-size: var(--v-text-2xs); color: var(--v-danger); margin-top: var(--v-space-1); } /* RTL: Select dropdown arrow positioned at inline-end */ .v-select { width: 100%; padding: var(--v-space-2) var(--v-space-3); padding-inline-end: var(--v-space-8); font-size: var(--v-text-base); font-family: inherit; color: var(--v-text-primary); background: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-md); outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px; background-position: calc(100% - 10px) center; transition: border-color var(--v-duration-fast) var(--v-ease-default), box-shadow var(--v-duration-fast) var(--v-ease-default); } [dir="rtl"] .v-select { background-position: 10px center; } .v-select:focus { border-color: var(--v-brand-500); box-shadow: 0 0 0 3px rgba(92, 124, 250, 0.15); } /* RTL: Toggle switch — track and thumb flip naturally via flexbox */ .v-toggle { display: inline-flex; align-items: center; gap: var(--v-space-2); cursor: pointer; user-select: none; } .v-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .v-toggle-track { width: 44px; height: 24px; border-radius: var(--v-radius-pill); background: var(--v-bg-tertiary); position: relative; transition: background var(--v-duration-normal) var(--v-ease-default); flex-shrink: 0; } .v-toggle-thumb { width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: var(--v-shadow-sm); position: absolute; top: 2px; inset-inline-start: 2px; /* RTL: auto-flips */ transition: inset-inline-start var(--v-duration-normal) var(--v-ease-default); } .v-toggle input:checked + .v-toggle-track { background: var(--v-brand-500); } .v-toggle input:checked + .v-toggle-track .v-toggle-thumb { inset-inline-start: 22px; /* RTL: auto-flips — moves to end */ } .v-toggle-label { font-size: var(--v-text-sm); color: var(--v-text-primary); } /* ---- Checkbox & Radio ---- */ .v-checkbox, .v-radio { display: inline-flex; align-items: center; gap: var(--v-space-2); cursor: pointer; font-size: var(--v-text-sm); color: var(--v-text-primary); user-select: none; } .v-checkbox input, .v-radio input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--v-brand-500); } /* ---- 3k. Tabs ---- */ .v-tabs { display: flex; gap: var(--v-space-1); border-bottom: 1px solid var(--v-border-primary); padding: 0 var(--v-space-1); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .v-tabs::-webkit-scrollbar { display: none; } .v-tab { padding: var(--v-space-3) var(--v-space-4); font-size: var(--v-text-sm); font-weight: 500; color: var(--v-text-secondary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all var(--v-duration-fast) var(--v-ease-default); white-space: nowrap; margin-bottom: -1px; } .v-tab:hover { color: var(--v-text-primary); } .v-tab--active { color: var(--v-text-brand); border-bottom-color: var(--v-brand-500); } /* ---- 3l. Tooltips ---- */ .v-tooltip { font-size: var(--v-text-2xs); font-weight: 500; padding: var(--v-space-1) var(--v-space-2); background: var(--v-bg-elevated); color: var(--v-text-primary); border-radius: var(--v-radius-sm); box-shadow: var(--v-shadow-lg); border: 1px solid var(--v-border-primary); z-index: var(--v-z-tooltip); } /* ---- 3m. Empty State ---- */ .v-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--v-space-16) var(--v-space-8); color: var(--v-text-tertiary); } .v-empty-state-icon { width: 48px; height: 48px; margin-bottom: var(--v-space-4); opacity: 0.4; } .v-empty-state-title { font-size: var(--v-text-md); font-weight: 600; color: var(--v-text-secondary); margin-bottom: var(--v-space-2); } /* ---- 3n. Modals — RTL: close button position auto-flips ---- */ .v-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: var(--v-z-modal); padding: var(--v-space-4); } .v-modal { background: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-xl); box-shadow: var(--v-shadow-xl); width: 100%; max-width: 560px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; } .v-modal-header { padding: var(--v-space-4) var(--v-space-5); border-bottom: 1px solid var(--v-border-secondary); display: flex; align-items: center; justify-content: space-between; gap: var(--v-space-3); } .v-modal-body { padding: var(--v-space-5); overflow-y: auto; flex: 1; } .v-modal-footer { padding: var(--v-space-3) var(--v-space-5); border-top: 1px solid var(--v-border-secondary); display: flex; align-items: center; justify-content: flex-end; gap: var(--v-space-3); } /* ---- 3o. Slide-Over Panel — RTL: slides from inline-end ---- */ .v-slide-over-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); z-index: var(--v-z-overlay); } .v-slide-over { position: fixed; top: 0; inset-inline-end: 0; /* RTL: right in LTR, left in RTL */ bottom: 0; width: 480px; max-width: 100vw; background: var(--v-bg-primary); border-inline-start: 1px solid var(--v-border-primary); /* RTL: auto-flips */ box-shadow: var(--v-shadow-xl); z-index: var(--v-z-overlay); display: flex; flex-direction: column; overflow: hidden; } .v-slide-over-header { padding: var(--v-space-4) var(--v-space-5); border-bottom: 1px solid var(--v-border-secondary); display: flex; align-items: center; justify-content: space-between; gap: var(--v-space-3); flex-shrink: 0; } .v-slide-over-body { flex: 1; padding: var(--v-space-5); overflow-y: auto; } .v-slide-over-footer { padding: var(--v-space-3) var(--v-space-5); border-top: 1px solid var(--v-border-secondary); display: flex; align-items: center; justify-content: flex-end; gap: var(--v-space-3); flex-shrink: 0; } /* ---- 3p. Dropdowns — RTL: positioned at inline-end ---- */ .v-dropdown { position: relative; display: inline-block; } .v-dropdown-menu { position: absolute; top: calc(100% + 4px); inset-inline-end: 0; /* RTL: right in LTR, left in RTL */ min-width: 180px; background: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-md); box-shadow: var(--v-shadow-lg); z-index: var(--v-z-dropdown); padding: var(--v-space-1) 0; overflow: hidden; } .v-dropdown-menu--start { inset-inline-end: auto; inset-inline-start: 0; } .v-dropdown-item { display: flex; align-items: center; gap: var(--v-space-2); padding: var(--v-space-2) var(--v-space-4); font-size: var(--v-text-sm); color: var(--v-text-primary); text-decoration: none; cursor: pointer; transition: background var(--v-duration-fast) var(--v-ease-default); white-space: nowrap; } .v-dropdown-item:hover { background: var(--v-bg-hover); } .v-dropdown-item--danger { color: var(--v-danger); } .v-dropdown-divider { height: 1px; background: var(--v-border-secondary); margin: var(--v-space-1) 0; } /* ---- 3q. Toast Notifications — RTL: positioned at inline-end ---- */ .v-toast-container { position: fixed; bottom: var(--v-space-5); inset-inline-end: var(--v-space-5); /* RTL: right in LTR, left in RTL */ z-index: var(--v-z-tooltip); display: flex; flex-direction: column-reverse; gap: var(--v-space-2); max-width: 420px; width: 100%; pointer-events: none; } .v-toast { display: flex; align-items: center; gap: var(--v-space-3); padding: var(--v-space-3) var(--v-space-4); background: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-md); box-shadow: var(--v-shadow-lg); font-size: var(--v-text-sm); pointer-events: auto; animation: v-toast-in 0.3s var(--v-ease-out) forwards; } .v-toast--success { border-inline-start: 3px solid var(--v-success); } .v-toast--warning { border-inline-start: 3px solid var(--v-warning); } .v-toast--error { border-inline-start: 3px solid var(--v-danger); } .v-toast--info { border-inline-start: 3px solid var(--v-info); } .v-toast-close { margin-inline-start: auto; background: none; border: none; color: var(--v-text-tertiary); cursor: pointer; padding: var(--v-space-1); border-radius: var(--v-radius-sm); transition: color var(--v-duration-fast) var(--v-ease-default); } .v-toast-close:hover { color: var(--v-text-primary); } /* ---- 3r. Command Palette ---- */ .v-command-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding-top: 20vh; z-index: var(--v-z-modal); } .v-command-palette { width: 100%; max-width: 560px; background: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-xl); box-shadow: var(--v-shadow-xl); overflow: hidden; } .v-command-input { width: 100%; padding: var(--v-space-4) var(--v-space-5); font-size: var(--v-text-md); font-family: inherit; color: var(--v-text-primary); background: transparent; border: none; border-bottom: 1px solid var(--v-border-secondary); outline: none; } .v-command-results { max-height: 360px; overflow-y: auto; padding: var(--v-space-2) 0; } .v-command-group { padding: var(--v-space-1) 0; } .v-command-label { font-size: var(--v-text-2xs); font-weight: 600; color: var(--v-text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; padding: var(--v-space-2) var(--v-space-5); } .v-command-item { display: flex; align-items: center; gap: var(--v-space-3); padding: var(--v-space-2) var(--v-space-5); color: var(--v-text-primary); text-decoration: none; cursor: pointer; font-size: var(--v-text-sm); transition: background var(--v-duration-fast) var(--v-ease-default); } .v-command-item:hover, .v-command-item--selected { background: var(--v-bg-hover); } .v-command-shortcut { margin-inline-start: auto; font-size: var(--v-text-2xs); color: var(--v-text-tertiary); font-family: var(--v-font-mono); } /* ---- 3s. Spinner ---- */ .v-spinner { width: 20px; height: 20px; border: 2px solid var(--v-border-primary); border-inline-end-color: var(--v-brand-500); border-radius: 50%; animation: v-spin 0.8s linear infinite; display: inline-block; } .v-spinner--sm { width: 14px; height: 14px; border-width: 1.5px; } .v-spinner--lg { width: 32px; height: 32px; border-width: 3px; } /* ============================================================================ 3t. MAIN LAYOUT — RTL: uses margin-inline-start for sidebar offset ============================================================================ */ .v-main { margin-inline-start: var(--v-sidebar-width); /* RTL: auto-flips */ padding-top: var(--v-topbar-height); transition: margin-inline-start var(--v-duration-normal) var(--v-ease-default); min-height: 100vh; } .v-main--sidebar-collapsed { margin-inline-start: var(--v-sidebar-collapsed); } .v-content { padding: var(--v-space-6); max-width: 1600px; margin: 0 auto; } /* ---- 3u. Footer ---- */ .v-footer { padding: var(--v-space-4) var(--v-space-6); font-size: var(--v-text-xs); color: var(--v-text-tertiary); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--v-border-secondary); } /* ============================================================================ 4. UTILITY CLASSES (for quick styling) ============================================================================ */ /* Text */ .v-text-primary { color: var(--v-text-primary) !important; } .v-text-secondary { color: var(--v-text-secondary) !important; } .v-text-tertiary { color: var(--v-text-tertiary) !important; } .v-text-brand { color: var(--v-text-brand) !important; } .v-text-success { color: var(--v-success) !important; } .v-text-warning { color: var(--v-warning) !important; } .v-text-danger { color: var(--v-danger) !important; } /* Font sizes */ .v-text-2xs { font-size: var(--v-text-2xs) !important; } .v-text-xs { font-size: var(--v-text-xs) !important; } .v-text-sm { font-size: var(--v-text-sm) !important; } .v-text-base { font-size: var(--v-text-base) !important; } .v-text-lg { font-size: var(--v-text-lg) !important; } .v-text-xl { font-size: var(--v-text-xl) !important; } .v-text-2xl { font-size: var(--v-text-2xl) !important; } .v-text-3xl { font-size: var(--v-text-3xl) !important; } /* Font weights */ .v-font-normal { font-weight: 400 !important; } .v-font-medium { font-weight: 500 !important; } .v-font-semibold { font-weight: 600 !important; } .v-font-bold { font-weight: 700 !important; } /* Text alignment — RTL-aware */ .v-text-start { text-align: start !important; } .v-text-end { text-align: end !important; } .v-text-center { text-align: center !important; } /* Backgrounds */ .v-bg-app { background-color: var(--v-bg-app) !important; } .v-bg-primary { background-color: var(--v-bg-primary) !important; } .v-bg-secondary { background-color: var(--v-bg-secondary) !important; } .v-bg-glass { background: var(--v-glass-bg) !important; backdrop-filter: blur(var(--v-glass-blur)) saturate(var(--v-glass-saturate)); -webkit-backdrop-filter: blur(var(--v-glass-blur)) saturate(var(--v-glass-saturate)); } /* Borders — RTL-aware */ .v-border { border: 1px solid var(--v-border-primary) !important; } .v-border-b { border-bottom: 1px solid var(--v-border-primary) !important; } .v-border-e { border-inline-end: 1px solid var(--v-border-primary) !important; } .v-border-s { border-inline-start: 1px solid var(--v-border-primary) !important; } .v-border-none { border: none !important; } /* Radius */ .v-rounded-sm { border-radius: var(--v-radius-sm) !important; } .v-rounded-md { border-radius: var(--v-radius-md) !important; } .v-rounded-lg { border-radius: var(--v-radius-lg) !important; } .v-rounded-xl { border-radius: var(--v-radius-xl) !important; } .v-rounded-pill { border-radius: var(--v-radius-pill) !important; } /* Shadows */ .v-shadow-sm { box-shadow: var(--v-shadow-sm) !important; } .v-shadow-md { box-shadow: var(--v-shadow-md) !important; } .v-shadow-lg { box-shadow: var(--v-shadow-lg) !important; } .v-shadow-glow { box-shadow: var(--v-shadow-glow) !important; } /* Transitions */ .v-transition-all { transition: all var(--v-duration-normal) var(--v-ease-default); } .v-transition-fast { transition: all var(--v-duration-fast) var(--v-ease-default); } /* RTL-aware spacing utilities */ .v-ms-auto { margin-inline-start: auto !important; } .v-me-auto { margin-inline-end: auto !important; } .v-ms-1 { margin-inline-start: var(--v-space-1) !important; } .v-ms-2 { margin-inline-start: var(--v-space-2) !important; } .v-ms-3 { margin-inline-start: var(--v-space-3) !important; } .v-ms-4 { margin-inline-start: var(--v-space-4) !important; } .v-me-1 { margin-inline-end: var(--v-space-1) !important; } .v-me-2 { margin-inline-end: var(--v-space-2) !important; } .v-me-3 { margin-inline-end: var(--v-space-3) !important; } .v-me-4 { margin-inline-end: var(--v-space-4) !important; } .v-ps-1 { padding-inline-start: var(--v-space-1) !important; } .v-ps-2 { padding-inline-start: var(--v-space-2) !important; } .v-ps-3 { padding-inline-start: var(--v-space-3) !important; } .v-ps-4 { padding-inline-start: var(--v-space-4) !important; } .v-pe-1 { padding-inline-end: var(--v-space-1) !important; } .v-pe-2 { padding-inline-end: var(--v-space-2) !important; } .v-pe-3 { padding-inline-end: var(--v-space-3) !important; } .v-pe-4 { padding-inline-end: var(--v-space-4) !important; } /* RTL-aware float */ .v-float-start { float: inline-start !important; } .v-float-end { float: inline-end !important; } /* Direction-specific number rendering */ .v-ltr-nums { direction: ltr; unicode-bidi: embed; } /* ============================================================================ 5. ANIMATIONS & MICRO-INTERACTIONS ============================================================================ */ @keyframes v-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* RTL: slide animations use calc with --v-dir to auto-flip direction */ @keyframes v-slide-in-start { from { opacity: 0; transform: translateX(calc(-8px * var(--v-dir))); } to { opacity: 1; transform: translateX(0); } } @keyframes v-slide-in-end { from { opacity: 0; transform: translateX(calc(8px * var(--v-dir))); } to { opacity: 1; transform: translateX(0); } } @keyframes v-slide-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes v-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes v-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes v-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* RTL: Toast slides in from inline-end */ @keyframes v-toast-in { from { opacity: 0; transform: translateX(calc(24px * var(--v-dir))); } to { opacity: 1; transform: translateX(0); } } /* RTL: Slide-over enter from inline-end */ @keyframes v-slide-over-in { from { transform: translateX(calc(100% * var(--v-dir))); } to { transform: translateX(0); } } .v-animate-fade-in { animation: v-fade-in 0.3s var(--v-ease-default) forwards; } .v-animate-slide-start { animation: v-slide-in-start 0.3s var(--v-ease-default) forwards; } .v-animate-slide-end { animation: v-slide-in-end 0.3s var(--v-ease-default) forwards; } .v-animate-slide-up { animation: v-slide-in-up 0.3s var(--v-ease-default) forwards; } .v-animate-scale-in { animation: v-scale-in 0.2s var(--v-ease-default) forwards; } /* Legacy alias for backward compatibility */ .v-animate-slide-left { animation: v-slide-in-start 0.3s var(--v-ease-default) forwards; } .v-skeleton { background: linear-gradient(90deg, var(--v-bg-secondary) 25%, var(--v-bg-tertiary) 50%, var(--v-bg-secondary) 75%); background-size: 200% 100%; animation: v-shimmer 1.5s infinite; border-radius: var(--v-radius-sm); } .v-skeleton--text { height: 14px; margin-bottom: var(--v-space-2); } .v-skeleton--circle { width: 40px; height: 40px; border-radius: 50%; } .v-skeleton--card { height: 120px; border-radius: var(--v-radius-lg); } /* ============================================================================ 6. RESPONSIVE BREAKPOINTS — RTL: uses logical properties throughout ============================================================================ */ /* Mobile sidebar overlay — RTL: slide direction auto-flips via translateX * dir */ @media (max-width: 768px) { .v-sidebar { transform: translateX(calc(-100% * var(--v-dir))); transition: transform var(--v-duration-slow) var(--v-ease-default); z-index: var(--v-z-overlay); } .v-sidebar--open { transform: translateX(0); } .v-sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: calc(var(--v-z-overlay) - 1); opacity: 0; visibility: hidden; transition: opacity var(--v-duration-slow) var(--v-ease-default), visibility var(--v-duration-slow); } .v-sidebar--open + .v-sidebar-overlay { opacity: 1; visibility: visible; } .v-main { margin-inline-start: 0 !important; } .v-stat-grid { grid-template-columns: 1fr !important; } .v-slide-over { width: 100vw; } .v-content { padding: var(--v-space-4); } .v-bento-span-2, .v-bento-span-3 { grid-column: span 1; } } @media (min-width: 769px) and (max-width: 1024px) { .v-stat-grid { grid-template-columns: repeat(2, 1fr) !important; } .v-bento-span-3 { grid-column: span 2; } .v-content { padding: var(--v-space-5); } } /* Touch-friendly tap targets on touch devices */ @media (pointer: coarse) { .v-nav-item { min-height: 44px; } .v-btn { min-height: 44px; } .v-tab { min-height: 44px; } .v-dropdown-item { min-height: 44px; } .v-toggle-track { min-width: 48px; min-height: 28px; } .v-checkbox input, .v-radio input { min-width: 22px; min-height: 22px; } .v-breadcrumb-item { min-height: 44px; display: inline-flex; align-items: center; } .v-modal-close, .v-slide-over-close, .v-toast-close { min-width: 44px; min-height: 44px; } } /* ============================================================================ 7. BENTO GRID LAYOUT (2026 trend) ============================================================================ */ .v-bento-grid { display: grid; gap: var(--v-space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .v-stat-grid { display: grid; gap: var(--v-space-4); grid-template-columns: repeat(4, 1fr); } .v-bento-span-2 { grid-column: span 2; } .v-bento-span-3 { grid-column: span 3; } .v-bento-row-2 { grid-row: span 2; } /* ============================================================================ 8. CHART CONTAINER ============================================================================ */ .v-chart-container { position: relative; width: 100%; min-height: 200px; } .v-chart-container .apexcharts-canvas { font-family: var(--v-font-sans) !important; } /* ============================================================================ 9. PRINT STYLES ============================================================================ */ @media print { .v-sidebar, .v-topbar, .v-btn, .v-tabs { display: none !important; } .v-main { margin: 0 !important; } .v-card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; } } /* ============================================================================ 10. RTL-SPECIFIC COMPONENT OVERRIDES These handle edge cases where CSS logical properties alone aren't enough. ============================================================================ */ /* RTL: DataTables integration — align content to start */ [dir="rtl"] .dataTables_wrapper .dataTables_filter { text-align: start; } [dir="rtl"] .dataTables_wrapper .dataTables_filter input { margin-inline-start: var(--v-space-2); margin-inline-end: 0; } [dir="rtl"] .dataTables_wrapper .dataTables_info { text-align: start; } [dir="rtl"] .dataTables_wrapper .dataTables_paginate { text-align: start; } /* RTL: Ensure monospace/numeric content stays LTR for readability */ [dir="rtl"] .v-ltr-content, [dir="rtl"] time, [dir="rtl"] .v-stat-value, [dir="rtl"] .v-mono { direction: ltr; unicode-bidi: embed; } /* RTL: Phone numbers, IPs, timestamps should remain LTR */ [dir="rtl"] [data-ltr], [dir="rtl"] .v-phone, [dir="rtl"] .v-ip, [dir="rtl"] .v-timestamp, [dir="rtl"] .v-duration { direction: ltr; unicode-bidi: isolate; } /* RTL: Icon mirroring — directional icons should flip in RTL */ [dir="rtl"] .v-icon-flip { transform: scaleX(-1); } /* RTL: Progress bars fill from inline-end in RTL */ .v-progress { display: flex; width: 100%; height: 6px; background: var(--v-bg-tertiary); border-radius: var(--v-radius-pill); overflow: hidden; } [dir="rtl"] .v-progress { flex-direction: row-reverse; } .v-progress-bar { height: 100%; background: var(--v-brand-500); border-radius: var(--v-radius-pill); transition: width var(--v-duration-normal) var(--v-ease-default); } /* ============================================================================ 11. ACCESSIBILITY — Reduced Motion ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .v-skeleton { animation: none; background: var(--v-bg-secondary); } } /* ============================================================================ 12. DATEPICKER RTL OVERRIDES ============================================================================ */ [dir="rtl"] .daterangepicker { direction: rtl; text-align: right; } [dir="rtl"] .daterangepicker .calendar-table th, [dir="rtl"] .daterangepicker .calendar-table td { text-align: center; } [dir="rtl"] .daterangepicker .drp-buttons { text-align: start; } [dir="rtl"] .daterangepicker .ranges li { text-align: start; }