:root{color-scheme:light dark;--font-sans:'IBM Plex Arabic',sans-serif;--font-num:var(--font-sans);--primary:#1F75FE;--primary-dim:#1558c9;--primary-ghost:rgba(31,117,254,.10);--accent:#02AA94;--warn:#F59E0B;--danger:#EF4444;--success:#10B981;--bg:#F1F5F9;--surface:#FFFFFF;--surface2:#F8FAFC;--border:#E2E8F0;--border2:#CBD5E1;--text:#1E293B;--text2:#475569;--text3:#94A3B8;--sidebar-w:268px;--topbar-h:64px;--bottom-h:64px;--radius:0px;--shadow-xs:0 1px 2px rgba(15,23,42,.06);--shadow-sm:0 1px 3px rgba(15,23,42,.1),0 1px 2px rgba(15,23,42,.06);--shadow-md:0 4px 6px rgba(15,23,42,.07),0 2px 4px rgba(15,23,42,.06);--shadow-lg:0 10px 15px -3px rgba(15,23,42,.08),0 4px 6px -4px rgba(15,23,42,.06);--shadow-xl:0 20px 25px -5px rgba(15,23,42,.1),0 8px 10px -6px rgba(15,23,42,.06);--z-sticky:100;--z-overlay:999;--z-sidebar:1000;--z-modal:1100;--color-primary:var(--primary);--color-primary-hover:var(--primary-dim);--color-primary-subtle:var(--primary-ghost);--color-danger-hover:#a31f00;--color-success-hover:#059669;--color-warning-hover:#b45309;--chart-series-1:var(--primary);--chart-series-2:var(--accent);--chart-series-3:var(--success);--chart-series-4:#7C3AED;--chart-series-5:var(--warn);--color-bg:var(--bg);--color-surface:var(--surface);--color-surface-2:var(--surface2);--color-border:var(--border);--color-border-strong:var(--border2);--color-text:var(--text);--color-text-subtle:var(--text2);--color-text-muted:var(--text3);--text-secondary:var(--text2);--color-success:var(--success);--color-success-subtle:#D1FAE5;--color-warning:var(--warn);--color-warning-subtle:#FEF3C7;--color-danger:var(--danger);--color-danger-subtle:#FEE2E2;--color-success-border:#abf5d1;--color-warning-border:#f8d97e;--color-danger-border:#ffbdad;--color-primary-border:#adccff;--color-sidebar-bg:var(--surface);--color-sidebar-text:var(--text2);--color-sidebar-active:var(--primary);--color-sidebar-hover-bg:var(--primary-ghost);--radius-xs:0px;--radius-sm:0px;--radius-md:0px;--radius-lg:0px;--sidebar-width:var(--sidebar-w);--topbar-height:var(--topbar-h);font-family:var(--font-sans);font-size:var(--text-base);--text-xs:clamp(0.75rem,0.72rem+0.15vw,0.8125rem);--text-sm:clamp(0.8125rem,0.78rem+0.15vw,0.875rem);--text-base:clamp(0.875rem,0.85rem+0.18vw,1rem);--text-lg:clamp(1rem,0.95rem+0.25vw,1.125rem);--text-xl:clamp(1.125rem,1.08rem+0.3vw,1.25rem);--text-2xl:clamp(1.25rem,1.18rem+0.5vw,1.5rem);--text-3xl:clamp(1.5rem,1.35rem+1vw,2rem);--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.6;--leading-relaxed:1.75;--avatar-color-1:#1F75FE;--avatar-color-2:#02AA94;--avatar-color-3:#F59E0B;--avatar-color-4:#EF4444;--avatar-color-5:#8B5CF6;--avatar-color-6:#EC4899;--avatar-color-7:#0EA5E9;--avatar-color-8:#65A30D;--control-h-desktop:40px;--control-h-mobile:44px;--control-h:var(--control-h-desktop);--control-radius:var(--radius-sm,6px);--control-padding-x:14px;--control-font-size:var(--text-sm,14px);} @media(max-width:768px){:root{--control-h:var(--control-h-mobile);--control-padding-x:16px;}} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#0F172A;--surface:#1E293B;--surface2:#334155;--border:#334155;--border2:#475569;--text:#F8FAFC;--text2:#CBD5E1;--text3:#94A3B8;--color-bg:#0F172A;--color-surface:#1E293B;--color-surface-2:#334155;--color-border:#334155;--color-border-strong:#475569;--color-text:#F8FAFC;--color-text-subtle:#CBD5E1;--color-text-muted:#94A3B8;--text-secondary:#CBD5E1;--color-sidebar-bg:#1E293B;--color-sidebar-text:#CBD5E1;--color-sidebar-hover-bg:rgba(31,117,254,.18);--color-topbar-bg:#1E293B;--primary-ghost:rgba(31,117,254,.18);--color-success-subtle:rgba(16,185,129,.18);--color-warning-subtle:rgba(245,158,11,.18);--color-danger-subtle:rgba(239,68,68,.18);--color-success-border:rgba(16,185,129,.4);--color-warning-border:rgba(245,158,11,.4);--color-danger-border:rgba(239,68,68,.4);--color-primary-border:rgba(31,117,254,.4)}} [data-theme="dark"]{color-scheme:dark;--bg:#0F172A;--surface:#1E293B;--surface2:#334155;--border:#334155;--border2:#475569;--text:#F8FAFC;--text2:#CBD5E1;--text3:#94A3B8;--color-bg:#0F172A;--color-surface:#1E293B;--color-surface-2:#334155;--color-border:#334155;--color-border-strong:#475569;--color-text:#F8FAFC;--color-text-subtle:#CBD5E1;--color-text-muted:#94A3B8;--text-secondary:#CBD5E1;--color-sidebar-bg:#1E293B;--color-sidebar-text:#CBD5E1;--color-sidebar-hover-bg:rgba(31,117,254,.18);--color-topbar-bg:#1E293B;--primary-ghost:rgba(31,117,254,.18);--color-success-subtle:rgba(16,185,129,.18);--color-warning-subtle:rgba(245,158,11,.18);--color-danger-subtle:rgba(239,68,68,.18);--color-success-border:rgba(16,185,129,.4);--color-warning-border:rgba(245,158,11,.4);--color-danger-border:rgba(239,68,68,.4);--color-primary-border:rgba(31,117,254,.4)} /* Dark Theme Comprehensive Layout & Card Overrides */ html[data-theme="dark"], [data-theme="dark"] body, [data-theme="dark"] .admin-layout, [data-theme="dark"] .dashboard-shell, [data-theme="dark"] .shell, [data-theme="dark"] .main, [data-theme="dark"] .admin-main, [data-theme="dark"] .content, [data-theme="dark"] .admin-content { background-color: var(--bg, #0F172A) !important; color: var(--text, #F8FAFC) !important; } [data-theme="dark"] .sidebar, [data-theme="dark"] .topbar, [data-theme="dark"] .filter-drawer, [data-theme="dark"] .gw-card, [data-theme="dark"] .c-panel, [data-theme="dark"] .panel, [data-theme="dark"] .form-panel, [data-theme="dark"] .form-card, [data-theme="dark"] .settings-card, [data-theme="dark"] .hero-card, [data-theme="dark"] .kpi-card, [data-theme="dark"] .welcome, [data-theme="dark"] .table-wrap, [data-theme="dark"] .table-card, [data-theme="dark"] .modal-panel, [data-theme="dark"] .modal-confirm-box, [data-theme="dark"] .colors-group-card, [data-theme="dark"] .gw-secrets-section, [data-theme="dark"] .email-preview-panel { background-color: var(--surface, #1E293B) !important; border-color: var(--border, #334155) !important; color: var(--text, #F8FAFC) !important; } [data-theme="dark"] .sidebar__header, [data-theme="dark"] .sidebar .nav a, [data-theme="dark"] .sidebar .brand, [data-theme="dark"] .topbar-brand, [data-theme="dark"] .filter-drawer__header, [data-theme="dark"] .gw-title h2, [data-theme="dark"] .panel-head h2, [data-theme="dark"] .section-header h3, [data-theme="dark"] .section-header h2, [data-theme="dark"] label, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text, #F8FAFC) !important; } [data-theme="dark"] p, [data-theme="dark"] .hint, [data-theme="dark"] .field-hint, [data-theme="dark"] .text-body-secondary, [data-theme="dark"] .text-caption, [data-theme="dark"] .filter-drawer__close { color: var(--text2, #CBD5E1) !important; } [data-theme="dark"] .sidebar .nav a:hover, [data-theme="dark"] .sidebar .nav a.active { background-color: rgba(31, 117, 254, 0.18) !important; color: var(--primary, #3b82f6) !important; } [data-theme="dark"] .gw-stats, [data-theme="dark"] .gw-secrets-list .key-row, [data-theme="dark"] .gw-logo, [data-theme="dark"] .key-status-grid, [data-theme="dark"] .filter-pill, [data-theme="dark"] .topbar-search, [data-theme="dark"] .badge-id, [data-theme="dark"] .key-row { background-color: var(--surface2, #334155) !important; border-color: var(--border, #334155) !important; color: var(--text, #F8FAFC) !important; } /* Dark Theme Explicit Overrides for Components & Controls */ [data-theme="dark"] .table-action-btn--secondary, [data-theme="dark"] .media-card-actions .button-secondary { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border2) !important; } [data-theme="dark"] .table-action-btn--secondary:hover, [data-theme="dark"] .media-card-actions .button-secondary:hover { background: var(--border2) !important; color: #ffffff !important; border-color: var(--text3) !important; } [data-theme="dark"] .data-table th { background: var(--surface2) !important; color: var(--text2) !important; border-bottom-color: var(--border) !important; } [data-theme="dark"] .data-table td { color: var(--text); border-bottom-color: var(--border); } [data-theme="dark"] .data-table tr:hover td { background: rgba(255,255,255,0.03); } [data-theme="dark"] .table-wrap, [data-theme="dark"] .table-card { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .table-toolbar { background: var(--surface); border-bottom-color: var(--border); } [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .field-control, [data-theme="dark"] .form-control { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border2) !important; } [data-theme="dark"] select option { background: var(--surface) !important; color: var(--text) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text3) !important; } [data-theme="dark"] .badge.active, [data-theme="dark"] .badge--success { background: rgba(16,185,129,0.18) !important; color: #34d399 !important; border: 1px solid rgba(16,185,129,0.35) !important; } [data-theme="dark"] .badge.suspended, [data-theme="dark"] .badge.rejected, [data-theme="dark"] .badge--danger { background: rgba(239,68,68,0.18) !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,0.35) !important; } [data-theme="dark"] .badge.draft, [data-theme="dark"] .badge.pending, [data-theme="dark"] .badge--warning { background: rgba(245,158,11,0.18) !important; color: #fbbf24 !important; border: 1px solid rgba(245,158,11,0.35) !important; } [data-theme="dark"] .c-panel, [data-theme="dark"] .panel, [data-theme="dark"] .form-card, [data-theme="dark"] .settings-card, [data-theme="dark"] .hero-card, [data-theme="dark"] .kpi-card, [data-theme="dark"] .welcome { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } [data-theme="dark"] .suspended-page-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .suspended-page-card__title { color: var(--text) !important; } [data-theme="dark"] .suspended-page-card__desc { color: var(--text2) !important; } [data-theme="dark"] .badge-id { background: var(--surface2) !important; color: var(--text2) !important; border-color: var(--border) !important; } [data-theme="dark"] .details-link, [data-theme="dark"] p a:not(.button):not(.primary-button):not(.nav-link) { color: var(--primary, #3b82f6) !important; } [data-theme="dark"] .data-table th { background: var(--surface2) !important; color: var(--text2) !important; border-bottom-color: var(--border) !important; } [data-theme="dark"] .data-table td { border-bottom-color: var(--border) !important; color: var(--text) !important; } [data-theme="dark"] .data-table tr:hover td { background: var(--surface2) !important; } [data-theme="dark"] .settings-card__icon { background: var(--surface2) !important; border-color: var(--border2) !important; color: var(--text) !important; } [data-theme="dark"] .settings-card.active .settings-card__icon { background: var(--primary) !important; color: #ffffff !important; } [data-theme="dark"] .topbar-search { background: var(--surface2) !important; border-color: var(--border) !important; } [data-theme="dark"] .topbar-search__results { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.6) !important; } [data-theme="dark"] .topbar-search__item:hover, [data-theme="dark"] .topbar-search__item.is-active { background: var(--surface2) !important; } [data-theme="dark"] .action-toolbar { background: var(--surface) !important; border-top-color: var(--border) !important; } [data-theme="dark"] .pagination-wrapper { background: var(--surface) !important; border-color: var(--border) !important; } [data-theme="dark"] .pagination-buttons a.secondary { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border2) !important; } [data-theme="dark"] .pagination-buttons a.secondary:hover { background: var(--border2) !important; color: #ffffff !important; } /* ── Dark Mode Toggle & Topbar Icon Buttons (Shared across Auth, Landing & Control Panel) ── */ #theme-toggle-btn, .notif-bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none !important; box-shadow: none !important; background: transparent !important; color: var(--text2); cursor: pointer; border-radius: var(--radius-sm, 8px); transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; font-size: 20px; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } #theme-toggle-btn, #theme-toggle-btn:hover, #theme-toggle-btn:focus-visible, .notif-bell-btn, .notif-bell-btn:hover, .notif-bell-btn:focus-visible, [data-theme="dark"] #theme-toggle-btn, [data-theme="dark"] #theme-toggle-btn:hover, [data-theme="dark"] .notif-bell-btn, [data-theme="dark"] .notif-bell-btn:hover { border: none !important; box-shadow: none !important; } #theme-toggle-btn:hover, .notif-bell-btn:hover, .notif-bell-btn[aria-expanded="true"] { background: var(--primary-ghost, rgba(31,117,254,0.08)) !important; color: var(--primary, #1F75FE) !important; } #theme-toggle-btn:focus-visible, .notif-bell-btn:focus-visible { outline: 2px solid var(--primary, #1F75FE) !important; outline-offset: 2px !important; } #theme-toggle-btn i, .notif-bell-btn i { font-size: 20px; line-height: 1; } [data-theme="dark"] #theme-toggle-btn, [data-theme="dark"] .notif-bell-btn { background: transparent !important; color: var(--text); } [data-theme="dark"] #theme-toggle-btn:hover, [data-theme="dark"] .notif-bell-btn:hover { background: var(--primary-ghost, rgba(31,117,254,0.2)) !important; color: var(--primary, #1F75FE) !important; } /* Auth, Showcase, Landing & Consumer Account Dark Mode Overrides */ [data-theme="dark"] .auth-shell { background: var(--bg) !important; } [data-theme="dark"] .auth-panel { background: var(--surface) !important; color: var(--text) !important; } [data-theme="dark"] .auth-card h1, [data-theme="dark"] .auth-card h2 { color: var(--text) !important; } [data-theme="dark"] .auth-card > p { color: var(--text2) !important; } [data-theme="dark"] .auth-form .field-control, [data-theme="dark"] .auth-form input { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border2) !important; } [data-theme="dark"] .auth-form .field-control::placeholder { color: var(--text3) !important; } [data-theme="dark"] .auth-link { color: var(--text2) !important; } [data-theme="dark"] .auth-link a { color: var(--primary) !important; } [data-theme="dark"] .auth-brand.mobile-only { color: var(--text) !important; } [data-theme="dark"] .showcase-hero, [data-theme="dark"] .landing-section-white, [data-theme="dark"] .landing-section-gray { background: var(--bg) !important; color: var(--text) !important; } [data-theme="dark"] .showcase-card, [data-theme="dark"] .product-card, [data-theme="dark"] .landing-card, [data-theme="dark"] .landing-testimonial, [data-theme="dark"] .landing-faq-item { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } [data-theme="dark"] .showcase-card h3, [data-theme="dark"] .product-card__body h3, [data-theme="dark"] .landing-faq-q, [data-theme="dark"] .landing-testimonial-text { color: var(--text) !important; } [data-theme="dark"] .showcase-card p, [data-theme="dark"] .product-card__body p, [data-theme="dark"] .landing-faq-a { color: var(--text2) !important; } [data-theme="dark"] .account-shell, [data-theme="dark"] .account-panel, [data-theme="dark"] .account-card, [data-theme="dark"] .order-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } /* ── Unified Table Action Buttons (مرجع media-card-actions الرسمي) ── */ .table-actions, .media-card-actions { display: inline-flex; align-items: center; gap: 8px !important; flex-wrap: nowrap; } .media-card-actions { gap: 8px !important; padding: 10px 12px !important; } .media-card-actions > div, .media-card-actions .media-card-actions__group { display: flex !important; align-items: center !important; gap: 6px !important; } .table-action-btn, .media-card-actions .button { height: 30px !important; min-height: 30px !important; padding: 0 10px !important; font-size: var(--text-xs, 12px) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; border-radius: var(--radius-sm, 6px) !important; cursor: pointer !important; text-decoration: none !important; border: 1px solid transparent !important; font-weight: 500 !important; line-height: 1 !important; white-space: nowrap !important; box-sizing: border-box !important; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important; -webkit-tap-highlight-color: transparent; margin: 0 !important; } @media(max-width: 640px) { .table-actions, .media-card-actions { gap: 6px !important; } .media-card-actions { padding: 8px 10px !important; } .media-card-actions > div, .media-card-actions .media-card-actions__group { gap: 4px !important; } .table-action-btn, .media-card-actions .button { height: 28px !important; min-height: 28px !important; padding: 0 8px !important; gap: 4px !important; } } .table-action-btn i, .table-action-btn svg, .media-card-actions .button svg { font-size: 14px; flex-shrink: 0; line-height: 1; } .table-action-btn--secondary, .media-card-actions .button-secondary { background: var(--surface2, var(--color-surface-2, #f8fafc)); color: var(--text2, var(--color-text-subtle, #475569)); border-color: var(--border, var(--color-border, #e2e8f0)); } .table-action-btn--secondary:hover, .media-card-actions .button-secondary:hover { background: var(--border, var(--color-border, #cbd5e1)); color: var(--text, var(--color-text, #0f172a)); border-color: var(--border2, var(--color-border-strong, #94a3b8)); } .table-action-btn--primary { background: var(--primary, var(--color-primary, #1F75FE)) !important; color: #ffffff !important; border-color: var(--primary, var(--color-primary, #1F75FE)) !important; } .table-action-btn--primary:hover { background: var(--primary-dim, var(--color-primary-hover, #1558c9)) !important; border-color: var(--primary-dim, var(--color-primary-hover, #1558c9)) !important; } .table-action-btn--danger, .media-card-actions .button-danger { background: var(--danger, var(--color-danger, #ef4444)) !important; color: #ffffff !important; border-color: var(--danger, var(--color-danger, #ef4444)) !important; } .table-action-btn--danger:hover, .media-card-actions .button-danger:hover { background: var(--color-danger-hover, #dc2626) !important; border-color: var(--color-danger-hover, #dc2626) !important; } .table-action-btn--success, .media-card-actions .button-success { background: var(--success, var(--color-success, #10b981)) !important; color: #ffffff !important; border-color: var(--success, var(--color-success, #10b981)) !important; } .table-action-btn--success:hover, .media-card-actions .button-success:hover { background: var(--color-success-hover, #059669) !important; border-color: var(--color-success-hover, #059669) !important; } .table-action-btn--warning { background: var(--warn, var(--color-warning, #f59e0b)) !important; color: #ffffff !important; border-color: var(--warn, var(--color-warning, #f59e0b)) !important; } .table-action-btn--warning:hover { background: var(--color-warning-hover, #d97706) !important; border-color: var(--color-warning-hover, #d97706) !important; } .table-action-btn:focus-visible, .media-card-actions .button:focus-visible { outline: 2px solid var(--color-primary, #1F75FE) !important; outline-offset: 1px !important; } .table-action-btn:disabled, .table-action-btn[aria-disabled="true"], .media-card-actions .button:disabled { opacity: 0.55 !important; cursor: not-allowed !important; pointer-events: none !important; } .table-action-btn.is-loading i { animation: spin 1s infinite linear; } /* ── Typography System ───────────────────────────────────── */ .text-page-title { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); color: var(--color-text); } .text-section-title { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); color: var(--color-text); } .text-card-title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); line-height: var(--leading-snug); color: var(--color-text); } .text-body { font-size: var(--text-base); font-weight: var(--font-weight-regular); line-height: var(--leading-normal); color: var(--color-text); } .text-body-secondary { font-size: var(--text-sm); font-weight: var(--font-weight-regular); line-height: var(--leading-normal); color: var(--color-text-subtle); } .text-caption { font-size: var(--text-xs); font-weight: var(--font-weight-medium); line-height: var(--leading-normal); color: var(--color-text-muted); } .text-button { font-size: var(--text-sm); font-weight: var(--font-weight-medium); line-height: var(--leading-none); } *{box-sizing:border-box}[hidden]{display:none !important}body{margin:0;background:var(--color-bg);color:var(--color-text)}button,input,select,textarea,option,optgroup,a{font:inherit;font-family:inherit;touch-action:manipulation} @media(max-width:768px){input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px !important}} @keyframes spin { 100% { transform: rotate(360deg); } } /* ── OTP Component Styles ── */ .otp-container{display:flex;flex-direction:column;gap:12px;width:100%;align-items:center;margin:12px 0} .otp-slots-wrap{display:flex;gap:8px;justify-content:center;width:100%;max-width:380px;direction:ltr} .otp-slot{width:46px;height:54px;border:2px solid var(--border, var(--color-border, #cbd5e1));border-radius:var(--radius-md, 8px);background:var(--surface, var(--color-surface, #fff));color:var(--text, var(--color-text, #0f172a));font-size:24px;font-weight:700;text-align:center;line-height:50px;cursor:pointer;transition:all 0.15s ease;user-select:none} .otp-slot--active{border-color:var(--primary, var(--color-primary, #1F75FE));box-shadow:0 0 0 3px rgba(31,117,254,0.15);transform:translateY(-2px)} .otp-slot--filled{border-color:var(--primary, var(--color-primary, #1F75FE));background:var(--surface2, var(--color-surface-2, #f8fafc))} .otp-slot--error{border-color:var(--danger, var(--color-danger, #ef4444));background:var(--color-danger-subtle,#fff5f5);color:var(--danger, var(--color-danger, #ef4444))} .otp-input-hidden{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .otp-status-msg{font-size:var(--text-xs, 12px);color:var(--text-secondary, #64748b);text-align:center;margin-top:4px} .otp-status-msg--error{color:var(--danger, #ef4444);font-weight:600} .sidebar-edge-toggle{position:absolute;bottom:calc(var(--bottom-h,64px) - 12px);top:auto;transform:none;inset-inline-end:-12.5px;z-index:9999;flex-shrink:0;width:25px;height:25px;border:1px solid var(--border,var(--color-border,#e2e8f0));background:var(--primary,var(--color-primary,#1F75FE));color:#ffffff;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,0.1));font-size:16px;line-height:1;transition:background 0.15s,color 0.15s,border-color 0.15s,box-shadow 0.15s} .sidebar-edge-toggle:hover{background:var(--secondary,var(--color-secondary,var(--primary-dim,#1558c9)));color:#ffffff;border-color:var(--secondary,var(--color-secondary,var(--primary-dim,#1558c9)))} .sidebar-edge-toggle i,.sidebar-edge-toggle svg{transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);display:inline-block;line-height:1;pointer-events:none} .sidebar-collapsed .sidebar-edge-toggle i,.sidebar-collapsed .sidebar-edge-toggle svg{transform:rotate(180deg)} /* ── Collapsed filter drawer ─────────────────────────────── */ .filter-collapsed{--filter-drawer-w:56px} @media(min-width:1024px){.filter-collapsed .shell.has-filter-aside{grid-template-columns:var(--sidebar-w) 1fr 56px}.sidebar-collapsed.filter-collapsed .shell.has-filter-aside{grid-template-columns:56px 1fr 56px}} .filter-collapsed .filter-drawer__header span,.filter-collapsed .filter-drawer__body,.filter-collapsed .filter-drawer__bottom{display:none} .filter-collapsed .filter-drawer__header{justify-content:center;padding:0} .filter-collapsed .filter-drawer-edge-toggle i,.filter-collapsed .filter-drawer-edge-toggle svg{transform:rotate(180deg)} /* ── ContentPanel — مكوّن الحاوية الموحّد ────────────────── */ .c-panel,.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden} .form-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px} .c-panel--form,.form-panel{padding:20px;display:grid;align-content:start;gap:16px} .c-panel--form h2,.form-panel h2{margin:0 0 4px;font-size:var(--text-base);font-weight:600} .c-panel__head,.panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--color-border)} .c-panel__section,.section-header{border-bottom:1px solid var(--color-border);padding-bottom:14px;margin-bottom:6px} .c-panel__section h3,.section-header h3{margin:0;font-size:var(--text-lg);color:var(--primary);font-weight:600} .c-panel__section .hint,.section-header .hint{margin:4px 0 0;font-size:var(--text-xs);color:var(--text3)} .c-panel--form label:not(.button):not(.button-primary):not(.primary-button):not(.btn),.form-panel label:not(.button):not(.button-primary):not(.primary-button):not(.btn){display:grid;gap:6px;font-weight:500;font-size:var(--text-sm);color:var(--color-text-subtle)} .c-panel--form input,.c-panel--form select,.form-panel input,.form-panel select,.field-control,.form-control,.field input,.field select{width:100%;height:var(--control-h);padding:0 var(--control-padding-x);border:1px solid var(--color-border-strong);border-radius:var(--control-radius);background:var(--color-surface);color:var(--color-text);font-size:var(--control-font-size);font-family:inherit;line-height:1;box-sizing:border-box;outline:none} .c-panel--form textarea,.form-panel textarea,.field textarea,.field-control--textarea{width:100%;height:auto;min-height:calc(var(--control-h) * 2.5);padding:10px var(--control-padding-x);border:1px solid var(--color-border-strong);border-radius:var(--control-radius);background:var(--color-surface);color:var(--color-text);font-size:var(--control-font-size);font-family:inherit;line-height:1.5;box-sizing:border-box;outline:none;resize:vertical} .c-panel--form input:focus,.c-panel--form select:focus,.c-panel--form textarea:focus,.form-panel input:focus,.form-panel select:focus,.form-panel textarea:focus,.field-control:focus,.form-control:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-subtle)} .settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px} .c-panel--compact{padding:12px;gap:12px} .c-panel--full{max-width:none;width:100%} @media(max-width:899px){.c-panel--form,.form-panel{padding:16px}.c-panel--form input,.c-panel--form select,.c-panel--form textarea,.form-panel input,.form-panel select,.form-panel textarea{padding:11px 14px;min-height:44px}} /* ── User Menu ────────────────────────────────────────────── */ .user-menu{position:relative;flex-shrink:0} .user-menu__trigger{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:none;background:transparent;cursor:pointer;color:var(--text);font-size:var(--text-sm);font-weight:500;white-space:nowrap} .user-menu__trigger:hover{background:var(--surface2)} .user-avatar{display:grid;place-items:center;width:26px;height:26px;background:var(--primary);color:#fff;font-size:var(--text-xs);font-weight:700;flex-shrink:0} .user-menu__dropdown{position:absolute;top:calc(100% + 4px);inset-inline-end:0;min-width:200px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-md);z-index:calc(var(--z-overlay) + 10);padding:4px} .user-menu__info{padding:10px 12px} .user-menu__info strong{display:block;font-size:var(--text-sm);color:var(--text);margin-bottom:2px} .user-menu__info span{font-size:var(--text-xs);color:var(--text3)} .user-menu__divider{border:none;border-top:1px solid var(--border);margin:4px 0} .user-menu__item{display:flex;align-items:center;width:100%;padding:8px 12px;border:none;background:none;color:var(--text);font-size:var(--text-sm);text-decoration:none;cursor:pointer;text-align:right;font-family:inherit} .user-menu__item:hover{background:var(--surface2)} .user-menu__item--danger{color:var(--danger)} .user-menu__item--danger:hover{background:var(--color-danger-subtle)} .user-menu__form{margin:0} /* ── Settings Card Navigation (shared: admin + tenant + site-identity settings) ── */ .settings-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px} .settings-split-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start;width:100%;box-sizing:border-box} .settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start} .span-full{grid-column:1/-1} .settings-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;aspect-ratio:1/1;padding:20px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform 0.18s,box-shadow 0.18s,border-color 0.18s,background 0.18s;color:inherit;font-family:inherit} .settings-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-primary)} .settings-card:active{transform:translateY(0)} .settings-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .settings-card.active{border-color:var(--color-primary);background:var(--color-primary-subtle)} .settings-card__icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:var(--text-xl);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);flex-shrink:0;transition:background 0.18s,color 0.18s,border-color 0.18s} .settings-card.active .settings-card__icon{background:var(--color-primary);color:#fff;border-color:var(--color-primary)} .settings-card__title{font-weight:700;font-size:var(--text-sm);color:var(--color-text);line-height:1.3} .settings-card__desc{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.4} @media(max-width:980px){.settings-card-grid,.settings-split-grid{grid-template-columns:1fr !important;gap:16px !important}.settings-split-grid > *{grid-column:1/-1 !important;width:100% !important;min-width:0 !important}.settings-grid{grid-template-columns:1fr !important;gap:12px !important}} @media(max-width:560px){.settings-card-grid,.settings-split-grid{grid-template-columns:1fr !important}.settings-card{aspect-ratio:auto;flex-direction:row;text-align:start;padding:14px 16px}} .settings-toolbar-slot{display:contents} .settings-toolbar-slot.hidden{display:none} .settings-panel{display:none;animation:settingsFadeIn 0.12s ease} .settings-panel.active{display:block} @keyframes settingsFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} /* ── Auth Pages ───────────────────────────────────────────── */ .auth-shell{display:flex;flex-direction:row;min-height:100vh;background:var(--color-bg)} .auth-visual{flex:1.2;background:linear-gradient(135deg, var(--theme-primary, var(--color-primary, #1f75fe)) 0%, var(--theme-secondary, var(--color-secondary, #111827)) 50%, var(--theme-accent, var(--color-accent, #7c3aed)) 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(40px, 8vw, 80px);position:relative;overflow:hidden;text-align:center;} .auth-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18) 0%, transparent 45%), radial-gradient(circle at 80% 80%, var(--color-accent, rgba(124,58,237,0.3)) 0%, transparent 55%), linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.2) 100%);pointer-events:none;} .auth-visual::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:var(--color-accent, rgba(255,255,255,0.15));filter:blur(90px);top:10%;inset-inline-end:10%;pointer-events:none;opacity:0.5;} .auth-visual-header{display:flex;flex-direction:column;align-items:center;gap:16px;z-index:2} .auth-visual-header a{display:flex;flex-direction:column;align-items:center;gap:16px;text-decoration:none;color:inherit;transition:transform 0.2s ease;} .auth-visual-header a:hover{transform:scale(1.02);} .auth-visual-header .brand-logo{height:70px;width:auto;background:transparent;padding:0;flex-shrink:0;} .auth-visual-header .brand-mark{font-size:42px;width:70px;height:70px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);color:var(--theme-primary, var(--color-primary));border-radius:var(--radius-md);box-shadow:var(--shadow-md);font-weight:700;} .auth-visual-header h2{font-size:var(--text-3xl);margin:0;font-weight:700;letter-spacing:-0.02em} .auth-visual-footer{font-size:var(--text-sm);opacity:0.9;z-index:2;font-weight:500;position:absolute;bottom:40px;left:0;right:0;} .auth-panel{flex:1;display:flex;flex-direction:column;padding:clamp(28px,6vw,80px);background:var(--color-surface);z-index:10;position:relative;justify-content:center;align-items:center;} .auth-brand.mobile-only{display:none;} .auth-footer.mobile-only{display:none;} .auth-card{max-width:440px;width:100%;margin:auto;} .auth-card h1{font-size:var(--text-3xl);margin:0 0 8px;color:var(--color-text);font-weight:700;line-height:1.3} .auth-card>p{color:var(--color-text-subtle);line-height:1.7;margin:0 0 24px;font-size:var(--text-base)} .auth-form{display:grid;gap:12px;margin-bottom:24px} .auth-form .field-control::placeholder{color:var(--color-text-muted)} /* ── Avatar (مركزي) ───────────────────────────────────────── */ .avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background:var(--color-surface-2);color:#fff;font-weight:700;line-height:1;user-select:none;vertical-align:middle} .avatar--circle{border-radius:50%} .avatar--square{border-radius:var(--radius-sm)} .avatar--xs{width:20px;height:20px;font-size:9px} .avatar--sm{width:28px;height:28px;font-size:var(--text-xs)} .avatar--md{width:40px;height:40px;font-size:var(--text-sm)} .avatar--lg{width:56px;height:56px;font-size:var(--text-lg)} .avatar--xl{width:80px;height:80px;font-size:var(--text-2xl)} .avatar__img{width:100%;height:100%;object-fit:cover;display:block} .avatar__fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%} .avatar__fallback--icon svg{width:55%;height:55%} .avatar--c1{background:var(--avatar-color-1)} .avatar--c2{background:var(--avatar-color-2)} .avatar--c3{background:var(--avatar-color-3)} .avatar--c4{background:var(--avatar-color-4)} .avatar--c5{background:var(--avatar-color-5)} .avatar--c6{background:var(--avatar-color-6)} .avatar--c7{background:var(--avatar-color-7)} .avatar--c8{background:var(--avatar-color-8)} .avatar-row{display:inline-flex;align-items:center;gap:8px;min-width:0} .avatar-row>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis} /* ── KPI Cards ────────────────────────────────────────────── */ .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px} .kpi-card{background:var(--surface);border:1px solid var(--border);padding:20px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden} .kpi-card::after{content:'';position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--primary)} .kpi-card--accent::after{background:var(--accent)} .kpi-card--warn::after{background:var(--warn)} .kpi-card--danger::after{background:var(--danger)} .kpi-card--success::after{background:var(--success)} .kpi-icon{font-size:var(--text-2xl);margin-bottom:4px} .kpi-label{font-size:var(--text-xs);color:var(--text3);font-weight:500} .kpi-value{font-size:1.7rem;font-weight:700;color:var(--text);font-family:var(--font-num)} .kpi-delta{font-size:var(--text-xs);color:var(--text3)}.kpi-delta.up{color:var(--success)}.kpi-delta.down{color:var(--danger)} /* ── Amount display ───────────────────────────────────────── */ .amount{font-family:var(--font-num);font-weight:600;font-variant-numeric:tabular-nums} /* ── Account Restriction Read-Only Banner ───────────────── */ .account-restriction-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;margin-bottom:20px;border-radius:var(--radius-md,8px);background:var(--color-amber-subtle,#fffbe5);border:1px solid var(--color-amber,#f59e0b);color:var(--text);font-size:var(--text-sm)} .account-restriction-banner--suspended{background:var(--color-danger-subtle,rgba(239,68,68,0.1));border-color:var(--danger,#ef4444)} .account-restriction-banner__content{display:flex;align-items:center;gap:12px;flex:1;min-width:0} .account-restriction-banner__icon{font-size:22px;flex-shrink:0;color:var(--color-amber,#d97706)} .account-restriction-banner--suspended .account-restriction-banner__icon{color:var(--danger,#ef4444)} .account-restriction-banner strong{display:block;font-weight:600;margin-bottom:2px;font-size:var(--text-base)} .account-restriction-banner p{margin:0;color:var(--text2);font-size:var(--text-xs);line-height:1.4} .account-restriction-banner__btn{flex-shrink:0;white-space:nowrap;text-decoration:none!important} .is-disabled-readonly{opacity:0.6!important;cursor:not-allowed!important;pointer-events:auto!important} @media(max-width:640px){.account-restriction-banner{flex-direction:column;align-items:stretch}.account-restriction-banner__btn{width:100%;text-align:center}} /* ── Dashboard Shell ──────────────────────────────────────── */ @media(min-width:1024px){.dashboard-shell,.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:1fr;min-height:100vh}.dashboard-shell.has-filter-aside,.shell.has-filter-aside{grid-template-columns:var(--sidebar-w) 1fr var(--filter-drawer-w,288px)}}@media(min-width:769px) and (max-width:1023px){.dashboard-shell,.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:1fr;min-height:100vh}}@media(max-width:768px){.dashboard-shell,.shell{min-height:100vh}} .sidebar{position:fixed;inset-inline-start:0;top:0;bottom:0;width:var(--sidebar-w);background:var(--surface);border-inline-end:1px solid var(--border);display:flex;flex-direction:column;overflow:visible;z-index:var(--z-sidebar)} .nav{overflow-y:auto} .sidebar__header{height:64px;padding:0 8px;border-bottom:1px solid var(--border,var(--color-border,#e2e8f0));display:flex;align-items:center;flex-shrink:0;box-sizing:border-box} .brand{display:flex;align-items:center;gap:10px;width:100%;padding:6px !important;box-sizing:border-box} .brand-mark{display:grid;width:28px;height:28px;place-items:center;background:var(--primary,var(--color-primary,#1F75FE));color:#fff;font-weight:700;font-size:var(--text-xs,12px);border-radius:var(--radius-sm,4px);flex-shrink:0;box-sizing:border-box} .brand-logo{width:28px;height:28px;object-fit:contain;border-radius:var(--radius-sm,4px);flex-shrink:0;display:block} .brand-name{color:var(--text);font-weight:600;font-size:var(--text-base);transition:opacity 0.15s} .nav{padding:8px;display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto} .nav--pinned{flex-shrink:0;margin-top:auto;display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--border);padding:8px;position:relative;background:var(--surface);z-index:2} .nav a{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 12px;color:var(--text2);text-decoration:none;font-size:var(--text-sm);border-radius:var(--radius-sm,6px);transition:background 0.15s,color 0.15s;position:relative} .nav a:hover{background:var(--primary-ghost);color:var(--primary)} .nav a[aria-current="page"]{background:var(--primary-ghost);color:var(--primary);font-weight:600} .nav-label{flex:1} .nav-icon{font-size:16px;flex-shrink:0;opacity:.85;transition:opacity .15s;display:inline-flex;align-items:center;vertical-align:middle;} .nav a:hover .nav-icon,.nav a[aria-current="page"] .nav-icon{opacity:1} .nav--pinned a{width:100%;margin-bottom:0} .nav a.nav-item--trash,.nav--trash a{color:var(--danger,var(--color-danger));} .nav a.nav-item--trash:hover,.nav a.nav-item--trash:focus,.nav--trash a:hover,.nav--trash a:focus{background:var(--color-danger-subtle,rgba(239,68,68,.12))!important;color:var(--danger,var(--color-danger))} .nav a.nav-item--trash[aria-current="page"],.nav--trash a[aria-current="page"]{background:var(--color-danger-subtle,rgba(239,68,68,.12))!important;color:var(--danger,var(--color-danger));font-weight:600} @media(min-width:769px){.main{margin-inline-start:0;grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;min-height:100vh;transition:none}}@media(max-width:768px){.main{margin-inline-start:0;min-width:0;display:flex;flex-direction:column;min-height:100vh}} /* ── Topbar ───────────────────────────────────────────────── */ .topbar{position:sticky;top:0;z-index:calc(var(--z-sidebar) - 1);height:var(--topbar-h);display:flex;align-items:center;gap:12px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--border)} .topbar__end{margin-inline-start:auto;display:flex;align-items:center;gap:8px} .topbar-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--color-text)} .topbar-brand .brand-name{font-weight:600;font-size:var(--text-base)} .topbar-brand .brand-mark{width:24px;height:24px;font-size:var(--text-xs)} .topbar-brand img.brand-logo{height:26px} .topbar-brand--mobile{display:none} .topbar-search{position:relative;flex:1;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;height:36px;max-width:480px} .topbar-search__icon{color:var(--text3);flex-shrink:0} .topbar-search__input{flex:1;background:none;border:none;outline:none;font-size:var(--text-base);color:var(--text);min-width:0} .topbar-search__input::placeholder{color:var(--text3)} /* Toggle دورة الفوترة — مركزي فوق شبكة الخطط، بطاقة واحدة لكل خطة */ .billing-cycle-toggle{display:inline-flex;gap:4px;padding:4px;margin:0 auto 24px;background:var(--surface2,var(--color-surface-2,#f8fafc));border:1px solid var(--border);border-radius:var(--radius-lg,10px)} .billing-cycle-toggle__btn{min-width:104px;height:38px;padding:0 18px;border:0;border-radius:var(--radius-md,8px);background:transparent;color:var(--text2);font:inherit;font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:background .18s,color .18s} .billing-cycle-toggle__btn:hover{color:var(--text)} .billing-cycle-toggle__btn.is-active{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm)} .billing-cycle-toggle__btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px} /* نتائج البحث الفوري */ .topbar-search__results{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:600;max-height:min(70vh,460px);overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 12px 32px rgba(0,0,0,.16)} .topbar-search__results[hidden]{display:none} .topbar-search__group+.topbar-search__group{border-top:1px solid var(--border)} .topbar-search__group-head{padding:8px 12px 4px;font-size:var(--text-xs);font-weight:600;color:var(--text3)} .topbar-search__item{display:flex;align-items:baseline;gap:8px;padding:8px 12px;text-decoration:none;color:var(--text);font-size:var(--text-sm)} .topbar-search__item strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar-search__item small{color:var(--text3);min-width:0;overflow:hidden;text-overflow:ellipsis} .topbar-search__item:hover,.topbar-search__item.is-active{background:var(--bg)} .topbar-search__meta{margin-inline-start:auto;color:var(--text2);font-size:var(--text-xs);white-space:nowrap} .topbar-search__all{display:block;padding:10px 12px;border-top:1px solid var(--border);text-align:center;font-size:var(--text-xs);color:var(--primary);text-decoration:none} .topbar-search__state{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 12px;color:var(--text3);font-size:var(--text-sm)} .topbar-search__state.is-error{color:var(--danger,#dc2626)} .topbar-search__spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:topbar-search-spin .7s linear infinite} @keyframes topbar-search-spin{to{transform:rotate(360deg)}} /* ── Filter Drawer ─────────────────────────────────────── */ @media(min-width:1024px){.filter-drawer{position:sticky;top:0;height:100vh;bottom:auto;left:auto;right:auto;z-index:999;transform:none;width:var(--filter-drawer-w,288px);overflow:visible;background:var(--surface);border-inline-start:1px solid var(--border);grid-column:3;grid-row:1;flex-shrink:0;display:flex;flex-direction:column;transition:width 0.28s cubic-bezier(0.4,0,0.2,1)}.filter-drawer__close{display:none}.filter-drawer-backdrop{display:none!important}}@media(min-width:769px) and (max-width:1023px){.filter-drawer{position:fixed;top:0;bottom:0;left:auto;right:0;z-index:499;width:288px;min-width:0;overflow:visible;background:var(--surface);border-inline-start:1px solid var(--border);transform:translateX(100%);transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);flex-shrink:0;display:flex;flex-direction:column}.filter-drawer.is-open{transform:translateX(0)}}@media(max-width:768px){.filter-drawer{position:fixed;top:0;bottom:0;left:auto;right:0;z-index:499;width:288px;min-width:0;overflow:visible;background:var(--surface);border-inline-start:1px solid var(--border);transform:translateX(100%);transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);flex-shrink:0;display:flex;flex-direction:column}.filter-drawer.is-open{transform:translateX(0)}} .filter-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:64px;border-bottom:1px solid var(--border);font-weight:600;font-size:var(--text-sm);color:var(--text);flex-shrink:0;white-space:nowrap} .filter-drawer__close{border:none;background:none;cursor:pointer;color:var(--text2);padding:6px;border-radius:var(--radius-sm);line-height:1;font-size:16px;transition:background 0.15s,color 0.15s;display:flex;align-items:center;justify-content:center} .filter-drawer__close:hover{background:var(--surface2);color:var(--text)} /* الجسم يتمرر وحده؛ التذييل يبقى ملتصقاً بحافة الصفحة السفلى */ .filter-drawer__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px} @media(min-width:900px){.filter-drawer,.filter-drawer__body,.topbar-filters-wrapper,.topbar-filters{scrollbar-width:none!important;-ms-overflow-style:none!important}.filter-drawer::-webkit-scrollbar,.filter-drawer__body::-webkit-scrollbar,.topbar-filters-wrapper::-webkit-scrollbar,.topbar-filters::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}} /* التذييل السفلي الأيسر — نفس هندسة .sidebar-account (أسفل اليمين) تماماً: 64px، حد علوي، flex-shrink:0، ملتصق بأسفل عمود الدرج. */ .filter-drawer__bottom{position:relative;margin-top:auto;flex-shrink:0;border-top:1px solid var(--border,var(--color-border,#e2e8f0));height:var(--bottom-h,64px);padding:0 8px;display:flex;align-items:center;gap:8px;box-sizing:border-box;padding-bottom:env(safe-area-inset-bottom,0)} .filter-drawer__bottom>*{flex:1 1 50%;height:38px;display:inline-flex;align-items:center;justify-content:center;text-align:center;margin:0;font-size:var(--text-sm);font-weight:500;white-space:nowrap;box-sizing:border-box} /* Filter pill base styles */ .topbar-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0} .filter-pill{display:flex;align-items:center;gap:6px;background:var(--color-surface-2);border:1px solid var(--color-border);padding:0 12px;border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-text);transition:0.2s;white-space:nowrap;margin:0;height:32px;box-sizing:border-box} .filter-pill:hover,.filter-pill:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary);background:var(--color-surface)} .filter-pill select,.filter-pill input{border:none;background:transparent;outline:none;font-size:inherit;font-family:inherit!important;color:inherit;cursor:pointer;padding:0;height:100%;min-width:60px;max-width:120px} .filter-pill select option, select option{font-family:inherit!important;background:var(--surface);color:var(--text)} .filter-pill input[type="search"],.filter-pill input[type="text"],.filter-pill input[type="date"]{min-width:130px} .filter-pill span.label{color:var(--color-text-muted);font-weight:500;user-select:none} .filter-drawer__body .topbar-filters{display:flex;flex-direction:column;align-items:stretch;gap:14px;width:100%;box-sizing:border-box} .filter-drawer__body .filter-pill{width:100%;flex-direction:column;align-items:stretch;height:auto;padding:12px;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);white-space:normal;box-sizing:border-box;min-width:0} .filter-drawer__body .filter-pill span.label{font-size:var(--text-xs);font-weight:600;color:var(--text2);display:block;margin-bottom:2px} .filter-drawer__body .filter-pill select, .filter-drawer__body .filter-pill input{border:1px solid var(--border2, var(--color-border-strong, #cbd5e1))!important;background:var(--surface2, var(--color-surface-2, #f8fafc))!important;color:var(--text, var(--color-text, #0f172a))!important;outline:none!important;font-size:var(--text-sm)!important;padding:0 10px!important;height:36px!important;min-width:0!important;max-width:100%!important;width:100%!important;border-radius:var(--radius-sm, 6px)!important;box-sizing:border-box!important} .filter-drawer__body .filter-pill:has(input[type="search"]){grid-column:1 / -1} .filter-drawer-backdrop{display:none;position:fixed;inset:0;background:transparent;z-index:498;pointer-events:none;transition:background 0.3s} .filter-drawer-backdrop.is-visible{pointer-events:auto} /* Filter toggle button */ .topbar-filter-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:auto;height:36px;padding:0 12px;border:1px solid var(--border);background:var(--bg);border-radius:var(--radius-sm);color:var(--text2);cursor:pointer;flex-shrink:0;white-space:nowrap;font-size:var(--text-sm);transition:background 0.15s,color 0.15s,border-color 0.15s} .topbar-filter-toggle:hover{background:var(--surface2);color:var(--text)} .topbar-filter-toggle.is-active{background:var(--primary);color:#fff;border-color:var(--primary)} @media(min-width:1024px){.topbar-filter-toggle{display:none!important}} /* Mobile: Sidebar Style (Left) */ @media(max-width:768px){ .filter-drawer{position:fixed;top:0;bottom:0;inset-inline-start:auto;inset-inline-end:0;width:min(86vw,320px)!important;height:100vh;max-height:100vh;border:none;border-inline-end:1px solid var(--border);border-radius:0;transform:translateX(-100%);transition:transform 0.3s ease;z-index:499;box-shadow:none} .filter-drawer.is-open{width:min(86vw,320px)!important;transform:translateX(0);box-shadow:var(--shadow-xl,0 20px 25px -5px rgba(0,0,0,0.1))} .filter-drawer__header::before{display:none} .filter-drawer__header{position:relative;display:flex} .filter-drawer-backdrop{display:block;position:fixed;inset:0;background:transparent;z-index:498;transition:background 0.3s;pointer-events:none} .filter-drawer-backdrop.is-visible{background:rgba(0,0,0,0.45);pointer-events:auto} .topbar-filter-toggle span{display:none} .topbar-filter-toggle{width:36px;padding:0} } /* الزر الآن متموضع داخل الشريط الجانبي (sidebar) عند الأسفل تماماً على الحافة الفاصلة، ومتوسط عمودياً مع ارتفاع الشريط السفلي (64px) */ .logout-form{margin:0} /* ── Page Header Bar ──────────────────────────────────────── */ .page-header-bar{padding:16px 24px 0;border-bottom:1px solid var(--color-border);background:var(--color-surface)} .page-header-title{margin:0 0 16px;font-size:var(--text-xl);font-weight:600;color:var(--color-text)} /* ── Content ──────────────────────────────────────────────── */ .content{padding:24px;flex:1;background:var(--color-bg)} /* ── Verification Banner ──────────────────────────────────── */ .verification-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;padding:10px 14px;border:1px solid var(--color-warning-border,#f8d97e);border-radius:var(--radius-md);background:var(--color-warning-subtle);color:var(--color-warning)} .verification-banner form{margin:0} .verification-banner button{border:0;background:none;color:var(--color-warning);text-decoration:underline;cursor:pointer;font-size:var(--text-sm)} /* ── Hero Card ────────────────────────────────────────────── */ .hero-card{padding:18px 20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);border-inline-start:3px solid var(--color-primary)} .hero-card h1{margin:4px 0 8px;font-size:var(--text-lg);font-weight:600} .hero-card p{color:var(--color-text-subtle);line-height:1.7;margin:0} .eyebrow{margin:0;color:var(--color-primary);font-weight:700} /* ── Stats & Settings Cards ───────────────────────────────── */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:20px} .settings-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px} .stat{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:16px 20px;display:flex;flex-direction:column;gap:4px} .stat span{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500} .stat strong{font-size:var(--text-2xl);font-weight:700;color:var(--text);font-family:var(--font-num)} /* Settings cards vary in field count (password vs. profile vs. avatar), which left their submit buttons at different heights once the grid stretched the cards to equal height. Making the form itself a column flexbox lets the button anchor to the bottom of every card at the same line. */ .settings-cards .auth-form{display:flex;flex-direction:column;gap:12px} .settings-cards .auth-form .primary-button{margin-top:auto} /* ── Fields ───────────────────────────────────────────────── */ .field{display:grid;gap:6px} .field span,.field label{font-size:var(--text-sm);font-weight:500;color:var(--color-text-subtle)} .field input,.field select,.field textarea,.field-control{width:100%;padding:8px 12px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-size:var(--text-sm);font-family:inherit;transition:border-color 0.2s ease,box-shadow 0.2s ease,transform 0.1s;outline:none} .field input:focus,.field select:focus,.field textarea:focus,.field-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-subtle)} .field-control--textarea{resize:vertical} .field-control--locked-affix{width:auto;flex:0 0 auto;display:flex;align-items:center;background:var(--color-surface-2);color:var(--color-text-subtle);font-weight:600;white-space:nowrap;user-select:none;-webkit-user-select:none;cursor:not-allowed;caret-color:transparent} /* ── Upload zones (auto-upload, no confirm button) ─────────── */ .media-preview{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);margin-top:10px;min-height:72px;z-index:3} .media-preview img{max-width:160px;max-height:96px;object-fit:contain;border-radius:var(--radius-sm);display:block} .media-preview.empty{color:var(--color-text-muted);font-size:var(--text-sm)} .media-preview-item{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:72px;min-height:72px;padding:6px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-2)} .media-preview-item img{max-width:150px;max-height:96px} .media-preview-file{font-size:var(--text-xs);font-weight:700;color:var(--color-text-subtle);padding:14px} .media-preview-remove{position:absolute;top:4px;inset-inline-end:4px;z-index:4;width:24px;height:24px;border:0;border-radius:50%;background:rgba(15,23,42,.78);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;line-height:1;padding:0} .media-preview-remove:hover{background:var(--color-danger)} .upload-zone{position:relative;border:2px dashed var(--color-border-strong);background:var(--color-surface-2);padding:18px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;margin-top:12px;display:grid;gap:12px} .upload-zone:hover,.upload-zone.drag-over{border-color:var(--color-primary);background:var(--color-primary-subtle);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 12%,transparent)} .upload-zone__input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2} .upload-zone__label{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;pointer-events:none} .upload-zone__icon{font-size:var(--text-3xl);margin-bottom:4px} .upload-zone__label strong{font-size:var(--text-base);color:var(--color-text)} .upload-zone__label span{font-size:var(--text-xs);color:var(--color-text-muted)} .upload-zone__actions{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap} .upload-zone__actions .button{margin:0;min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:6px} .upload-zone__separator{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:700} .upload-zone__clear{color:var(--color-danger)!important;border-color:var(--color-danger)!important;background:var(--color-surface)!important} .upload-zone__clear:hover{background:var(--color-danger-subtle)!important} .upload-zone__status{margin-top:10px;padding:8px 12px;font-size:var(--text-sm);border-radius:var(--radius-sm);display:flex;align-items:center;gap:8px} .upload-zone__status.uploading{background:var(--color-primary-subtle);color:var(--color-primary)} .upload-zone__status.success{background:var(--color-success-subtle);color:var(--color-success)} .upload-zone__status.error{background:var(--color-danger-subtle);color:var(--color-danger)} .upload-zone__progress-bar{width:100%;height:4px;background:var(--color-border);border-radius:2px;overflow:hidden;margin-top:8px;display:none} .upload-zone__progress-bar-fill{width:0%;height:100%;background:var(--color-primary);transition:width .2s} .avatar-upload-zone{border:none;background:transparent;padding:0;width:100px;height:100px;margin:0 auto 24px;position:relative;overflow:visible;display:block} .avatar-upload-zone .avatar,.avatar-upload-zone .avatar-preview{width:100%;height:100%;margin:0;border:none;border-radius:50%;overflow:hidden} .avatar-upload-zone .avatar-overlay{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:rgba(0,0,0,0.5);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;transition:opacity 0.2s;pointer-events:none;gap:4px} .avatar-upload-zone .avatar-overlay svg{color:#fff} .avatar-upload-zone .avatar-overlay span{color:#fff;font-size:var(--text-xs);font-weight:500} .avatar-upload-zone:hover .avatar-overlay{opacity:1} .avatar-upload-zone .upload-zone__status{position:absolute;bottom:-18px;left:0;right:0;margin:0;padding:2px;font-size:var(--text-xs);text-align:center;border-radius:var(--radius-xs,4px)} .avatar-upload-zone__clear{position:absolute;top:-4px;inset-inline-end:-4px;z-index:10;width:28px;height:28px;min-height:0;border:2px solid var(--surface,#ffffff)!important;border-radius:50%!important;background:var(--surface,#ffffff)!important;color:var(--danger,#ef4444)!important;padding:0;font-size:16px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.18)!important;cursor:pointer;transition:transform 0.18s ease,background 0.18s ease,color 0.18s ease,box-shadow 0.18s ease} .avatar-upload-zone__clear:hover{background:var(--danger,#ef4444)!important;color:#ffffff!important;transform:scale(1.12);box-shadow:0 4px 12px rgba(239,68,68,0.35)!important} [data-theme="dark"] .avatar-upload-zone__clear{background:var(--surface,#1e293b)!important;border-color:var(--border,#334155)!important;color:#f87171!important} [data-theme="dark"] .avatar-upload-zone__clear:hover{background:var(--danger,#ef4444)!important;color:#ffffff!important} /* Compact variant: same upload-zone (drag&drop + click-to-browse) styled as a toolbar button */ .upload-zone--toolbar{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--primary,var(--color-primary,#1F75FE));border-radius:var(--control-radius,6px);background:var(--primary,var(--color-primary,#1F75FE));color:#fff!important;padding:0 16px;height:var(--control-h,40px);font-weight:500;font-size:var(--text-sm);margin:0;min-width:100px;text-align:center;white-space:nowrap;box-sizing:border-box} .upload-zone--toolbar:hover,.upload-zone--toolbar.drag-over{background:var(--primary-dim,var(--color-primary-hover,#1558c9));border-color:var(--primary-dim,var(--color-primary-hover,#1558c9))} .upload-zone--toolbar .upload-zone__label{flex-direction:row;gap:6px;color:#fff;pointer-events:none} .upload-zone--toolbar .upload-zone__icon{font-size:var(--text-base);margin-bottom:0} .upload-zone--toolbar .upload-zone__label strong{color:#fff;font-size:var(--text-sm);font-weight:500} .upload-zone--toolbar .upload-zone__label>span:last-child{display:none} .upload-zone--toolbar .upload-zone__actions{display:none} .upload-zone--toolbar .upload-zone__status{position:absolute;bottom:calc(100% + 8px);inset-inline-end:0;margin:0;min-width:240px;box-shadow:var(--shadow-md);z-index:20} .avatar-preview{display:flex;align-items:center;justify-content:center;width:80px;height:80px;border:1px solid var(--color-border-strong);border-radius:50%;overflow:hidden;background:var(--color-surface-2);margin:0 auto 12px} .avatar-preview img{width:100%;height:100%;object-fit:cover} .avatar-preview.empty{background:var(--primary,var(--color-primary,#1F75FE));color:#fff;font-size:var(--text-2xl);font-weight:700} /* ── Unified Buttons Architecture ───────────────────────────── */ .button, .button-primary, .primary-button, .button.primary, .button.secondary, .button-secondary, .btn, .btn-primary, .btn-secondary, .secondary-button, .upload-zone--toolbar { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: var(--control-radius, 6px); padding: 0 var(--control-padding-x, 14px); height: var(--control-h, 40px); font-weight: 500; font-size: var(--text-sm, 13px); font-family: inherit; line-height: 1; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease; text-decoration: none; white-space: nowrap; outline: none; box-sizing: border-box; } .button:not(.secondary):not(.button-secondary):not(.btn-secondary):not(.secondary-button):not(.button--secondary):not(.danger):not(.button-danger), .button-primary, .primary-button, .button.primary, .btn-primary, label.button.primary, label.primary-button, .upload-zone--toolbar { background: var(--primary,var(--color-primary,#1F75FE)); border-color: var(--primary,var(--color-primary,#1F75FE)); color: #ffffff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .button:not(.secondary):not(.button-secondary):not(.btn-secondary):not(.secondary-button):not(.button--secondary):not(.danger):not(.button-danger):hover:not(:disabled), .button.primary:hover:not(:disabled), .button-primary:hover:not(:disabled), .primary-button:hover:not(:disabled), .btn-primary:hover:not(:disabled), label.button.primary:hover, label.primary-button:hover, .upload-zone--toolbar:hover, .upload-zone--toolbar.drag-over { background: var(--primary-dim,var(--color-primary-hover,#1558c9)); border-color: var(--primary-dim,var(--color-primary-hover,#1558c9)); color: #ffffff !important; box-shadow: 0 2px 6px var(--primary-ghost, rgba(31, 117, 254, 0.25)); } .button:active:not(:disabled), .button.primary:active:not(:disabled), .button-primary:active:not(:disabled), .primary-button:active:not(:disabled), .btn:active:not(:disabled), .btn-primary:active:not(:disabled) { transform: scale(0.98); } .button:disabled, .button.primary:disabled, .button-primary:disabled, .primary-button:disabled, .btn:disabled, .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .button.secondary, .button-secondary, .btn-secondary, .secondary-button, .button--secondary, a.button.secondary, a.button-secondary, button.button.secondary { background: var(--secondary, var(--color-secondary, var(--primary-dim, #1558c9))) !important; color: #ffffff !important; border: 1px solid var(--secondary, var(--color-secondary, var(--primary-dim, #1558c9))) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; } .button.secondary:hover:not(:disabled), .button-secondary:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .secondary-button:hover:not(:disabled), .button--secondary:hover:not(:disabled), a.button.secondary:hover:not(:disabled), a.button-secondary:hover:not(:disabled) { filter: brightness(0.9); color: #ffffff !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important; } .button.danger, .button-danger, .btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; } .button.danger:hover:not(:disabled), .button-danger:hover:not(:disabled), .btn-danger:hover:not(:disabled) { background: var(--color-danger-hover); border-color: var(--color-danger-hover); color: #fff; box-shadow: 0 2px 4px var(--color-danger-subtle); } .button.success, .button-success, .btn-success { background: var(--color-success); border-color: var(--color-success); color: #fff; } .button.success:hover:not(:disabled), .button-success:hover:not(:disabled), .btn-success:hover:not(:disabled) { background: var(--color-success-hover); border-color: var(--color-success-hover); color: #fff; box-shadow: 0 2px 4px var(--color-success-subtle); } .button.warning, .button-warning, .btn-warning { background: var(--color-warning); border-color: var(--color-warning); color: #fff; } .button.warning:hover:not(:disabled), .button-warning:hover:not(:disabled), .btn-warning:hover:not(:disabled) { background: var(--color-warning-hover); border-color: var(--color-warning-hover); color: #fff; box-shadow: 0 2px 4px var(--color-warning-subtle); } .button.ghost, .button-ghost, .btn-ghost { background: transparent; border-color: transparent; color: var(--color-text-subtle); box-shadow: none; } .button.ghost:hover:not(:disabled), .button-ghost:hover:not(:disabled), .btn-ghost:hover:not(:disabled) { background: var(--color-surface-2); color: var(--color-text); } .button-link{text-decoration:none}.button-block{width:100%}.button-compact{padding:5px 10px;font-size:var(--text-xs)}.button-grow{flex:1}.button-center{text-align:center} /* Icon Button — same 36px hit-target and hover/active/disabled states as the text buttons above, for icon-only actions (view/copy/download/archive). */ .btn-icon,.button-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-subtle);cursor:pointer;transition:background 0.2s ease,border-color 0.2s ease,color 0.2s ease,transform 0.1s ease;text-decoration:none;flex-shrink:0} .btn-icon:hover:not(:disabled),.button-icon:hover:not(:disabled){background:var(--color-surface-2);color:var(--color-text);box-shadow:var(--shadow-sm)} .btn-icon:active:not(:disabled),.button-icon:active:not(:disabled){transform:scale(0.96)} .btn-icon:disabled,.button-icon:disabled{opacity:0.5;cursor:not-allowed} .btn-icon svg,.button-icon svg{width:16px;height:16px} .btn-icon-sm{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid var(--border);background:var(--surface2);color:var(--text2)} /* ── Auth links / errors ──────────────────────────────────── */ .auth-link{margin-top:28px;text-align:center;font-size:var(--text-sm)} .auth-link + .auth-link{margin-top:12px} .auth-link a{color:var(--color-primary);font-weight:500;text-decoration:none} .auth-link a:hover{text-decoration:underline} .form-error,.success-message{padding:10px 14px;border-radius:var(--radius-sm);font-size:var(--text-sm);border:1px solid;margin-bottom:16px} .form-error{background:var(--color-danger-subtle);color:var(--color-danger);border-color:var(--color-danger-border,#ffbdad)} .success-message{background:var(--color-success-subtle);color:var(--color-success);border-color:var(--color-success-border,#abf5d1)} /* ── Error Page ───────────────────────────────────────────── */ .error-page{display:grid;min-height:100vh;place-content:center;text-align:center;padding:24px} /* ── Badges ───────────────────────────────────────────────── */ .badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-xs);font-size:var(--text-xs);font-weight:600;border:1px solid transparent} .badge-success{background:var(--color-success-subtle);color:var(--color-success);border-color:var(--color-success-border,#abf5d1)} .badge-warning,.badge-warn{background:var(--color-warning-subtle);color:var(--color-warning);border-color:var(--color-warning-border,#f8d97e)} .badge-danger{background:var(--color-danger-subtle);color:var(--color-danger);border-color:var(--color-danger-border,#ffbdad)} .badge-info{background:var(--primary-ghost);color:var(--primary);border-color:var(--color-primary-border,#adccff)} .badge-muted{background:var(--surface2);color:var(--text3);border-color:var(--border)} /* Prefix ID badge shown in table rows (e.g. CUS-12345678) */ .badge-id{display:inline-block;font-family:inherit;font-size:11px;font-weight:600;color:var(--text3);background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:1px 6px;letter-spacing:.02em;user-select:all;direction:ltr;unicode-bidi:isolate} /* ── خيط محادثة تذاكر الدعم الفني (مشترك بين الأدمن والتينانت) ── */ .ticket-thread{display:flex;flex-direction:column;gap:14px;margin-bottom:20px} .ticket-message{max-width:min(78%,560px);padding:12px 16px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface)} .ticket-message__meta{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:var(--text-xs);color:var(--text3)} .ticket-message__body{font-size:var(--text-sm);color:var(--text);line-height:1.6;white-space:pre-wrap;word-break:break-word;margin:0} .ticket-message--tenant{align-self:flex-start;background:var(--surface)} .ticket-message--admin{align-self:flex-end;background:var(--primary-ghost);border-color:var(--primary-border,var(--border))} @media(max-width:600px){.ticket-message{max-width:92%}} /* ── Tables (مركزي — توحيد أحجام خطوط خلايا وأعمدة الجداول وفق نمط جدول التدقيق Audit) ── */ .table-container{width:100%;overflow-x:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);-webkit-overflow-scrolling:touch} .table-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden} .table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--color-border);flex-wrap:wrap} .table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .data-table, table, .table-wrap table, .table-responsive table, .table-container table{width:100%;border-collapse:collapse;text-align:right;min-width:600px;font-size:var(--text-sm, 0.875rem)} .data-table th, table th, .table-wrap th, .table-responsive th, .table-container th{padding:10px 16px;background:var(--color-surface-2);color:var(--color-text-muted);font-weight:600;font-size:var(--text-xs, 0.75rem) !important;text-transform:uppercase;letter-spacing:0.04em;border-bottom:1px solid var(--color-border);white-space:nowrap !important} .data-table td, table td, .table-wrap td, .table-responsive td, .table-container td{padding:12px 16px;border-bottom:1px solid var(--color-border);color:var(--color-text);vertical-align:middle;font-size:var(--text-sm, 0.875rem) !important;white-space:nowrap !important;max-width:320px;overflow:hidden;text-overflow:ellipsis} .data-table td *, table td *, .table-wrap td *{white-space:nowrap !important} .data-table td strong, table td strong, .data-table td a, table td a, .data-table td span, table td span, .data-table td div:not(.table-actions):not(.media-card-actions){white-space:nowrap !important;max-width:280px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle;font-size:var(--text-sm, 0.875rem)} .data-table td small, table td small, .table-wrap td small{font-size:var(--text-xs, 0.75rem) !important;color:var(--color-text-muted)} .data-table td code, table td code, .table-wrap td code{direction:ltr;font-size:var(--text-sm, 0.875rem) !important;background:var(--color-surface-2);padding:2px 5px;border-radius:var(--radius-xs);border:1px solid var(--color-border)} .data-table tr:last-child td, table tr:last-child td{border-bottom:0} .data-table tbody tr:hover td, table tbody tr:hover td{background:var(--color-surface-2)} .data-table [data-copy], table [data-copy]{cursor:pointer;transition:color 0.15s ease} .data-table [data-copy]:hover, table [data-copy]:hover{color:var(--primary, #1F75FE) !important} /* ── Actions Bar ──────────────────────────────────────────── */ .actions-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap} .actions-bar form{display:flex;gap:8px;flex:1;max-width:400px} .actions-bar input{padding:7px 12px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);outline:none;width:100%;font-size:var(--text-sm);background:var(--color-surface)} .actions-bar input:focus{border-color:var(--color-primary)} .text-danger{color:var(--color-danger)} .btn-link{background:none;border:none;color:var(--color-primary);cursor:pointer;padding:0;font-weight:500;text-decoration:underline;font-size:var(--text-sm)} .btn-link-danger{color:var(--color-danger)} /* ── Brand Logo ───────────────────────────────────────────── */ .brand-logo{height:36px;width:auto;object-fit:contain;flex-shrink:0}.brand-logo--compact{height:28px;flex-shrink:0} /* ── Page Header (content-level) ─────────────────────────── */ .page-head,.page-header,.page-header-bar,.actions-bar,.actions-bar--offset,.page-heading,.page-subtitle{display:none!important} .page-narrow{max-width:600px;margin:0 auto}.page-narrow--center{text-align:center}.back-link{color:var(--color-text-subtle);text-decoration:none;font-size:var(--text-sm)} .back-link:hover{color:var(--color-primary)} /* ── Form Card ────────────────────────────────────────────── */ .form-actions{display:flex;gap:12px;margin-top:16px} .settings-layout{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:768px){.settings-layout{grid-template-columns:200px 1fr}} .settings-nav,.settings-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)} .settings-nav{display:grid;align-content:start;padding:8px} .settings-panel{padding:20px} .form-row{display:grid;grid-template-columns:1fr;gap:12px} @media(min-width:600px){.form-row{grid-template-columns:repeat(2,minmax(0,1fr))}} .form-control{width:100%;padding:8px 12px;border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:inherit} .toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px} .toggle{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer} /* ── Bottom Bar (Action Toolbar) ──────────────────────────── */ .action-toolbar,.bottom-bar{position:sticky;bottom:0;z-index:var(--z-sticky);height:var(--bottom-h);background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px;flex-shrink:0} .action-toolbar__inner{display:flex;gap:8px;align-items:center;flex:1} .action-toolbar__end{display:flex;gap:8px;align-items:center} .action-toolbar__spacer{flex:1} .action-toolbar__label{color:var(--text3);font-size:var(--text-sm)} .toolbar-btn{min-width:100px;text-align:center} /* ── Pagination inside bottom bar ─────────────────────────── */ .bottom-pagination{display:flex;gap:4px;align-items:center} .bottom-pagination-info{font-size:var(--text-xs);color:var(--text3);font-weight:600;font-family:var(--font-num);white-space:nowrap} .pg-btn{width:30px;height:30px;border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-size:var(--text-xs);font-weight:700;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-family:var(--font-num);cursor:pointer;transition:background .15s,border-color .15s,color .15s} .pg-btn:hover{border-color:var(--primary);color:var(--primary)} .pg-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)} .pg-btn:disabled,.pg-btn.disabled{opacity:.35;cursor:not-allowed;pointer-events:none} /* ── Empty & Danger Cards ─────────────────────────────────── */ .empty-state{text-align:center;padding:48px 24px;margin-top:16px}.empty-state__icon{font-size:var(--text-3xl);margin:0 0 12px} .danger-card{border-color:var(--color-danger)!important;border-inline-start-color:var(--color-danger)!important;padding:40px 24px}.danger-card__icon{font-size:var(--text-3xl);margin:0}.danger-card__title{color:var(--color-danger);margin-top:12px}.danger-card__note{color:var(--color-text-subtle);font-size:var(--text-sm)}.danger-card__actions{margin-top:24px;display:flex;gap:12px;justify-content:center} /* ── Utilities ────────────────────────────────────────────── */ .actions-bar--offset{margin-top:12px}.filter-form--wide{max-width:700px!important;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.filter-form--wide>*{min-width:0}.filter-input--grow{flex:2}.muted{color:var(--color-text-muted)} .topbar-title,.topbar>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .otp-input{text-align:center;letter-spacing:0;font-size:var(--text-xl);font-weight:700} .account-action-footer{display:flex;flex-direction:column;gap:10px;margin-top:20px} .text-action-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 16px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:transparent;color:var(--color-primary);font-size:var(--text-sm);font-weight:500;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s;text-decoration:none;white-space:nowrap} .text-action-button:hover:not(:disabled){background:var(--color-primary-subtle);border-color:var(--color-primary)} .text-action-button:disabled{opacity:.5;cursor:not-allowed} .text-action-button--muted{color:var(--color-text-subtle);border-color:transparent;background:transparent} .text-action-button--muted:hover:not(:disabled){background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-text)} .text-action-button--danger{color:var(--color-danger,#ef4444);border-color:transparent;background:transparent} .text-action-button--danger:hover:not(:disabled){background:rgba(239,68,68,.08);border-color:var(--color-danger,#ef4444);color:var(--color-danger,#ef4444)} /* ── Landing Page ─────────────────────────────────────────── */ .landing-primary-link{text-decoration:none;padding:7px 16px}.landing-hero-link{text-decoration:none;padding:10px 24px;font-size:var(--text-base)}.landing-pricing-link{text-decoration:none;display:block;text-align:center;padding:10px}.landing-footer__links{margin-bottom:12px}.landing-footer__separator{margin:0 8px} .landing-nav{display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,80px);height:60px;background:var(--color-surface);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100} .landing-nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--color-text)} .landing-nav-links{display:flex;align-items:center;gap:12px} .landing-hero{padding:clamp(60px,10vw,120px) clamp(20px,5vw,80px);text-align:center;background:var(--color-surface)} .landing-hero h1{font-size:var(--text-3xl);margin:0 0 16px;line-height:1.2;color:var(--color-text)} .landing-hero p{font-size:var(--text-3xl);color:var(--color-text-subtle);max-width:640px;margin:0 auto 32px;line-height:1.8} .landing-cta-group{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .btn-outline{border:1px solid var(--color-primary);border-radius:var(--radius-sm);color:var(--color-primary);padding:0 var(--control-padding-x, 14px);height:var(--control-h, 40px);box-sizing:border-box;justify-content:center;line-height:1;font-weight:500;text-decoration:none;background:transparent;cursor:pointer;font-size:var(--text-sm);display:inline-flex;align-items:center} .btn-outline:hover{background:var(--color-primary-subtle)} .landing-features{padding:clamp(40px,8vw,80px) clamp(20px,5vw,80px);background:var(--color-bg)} .landing-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:1100px;margin:0 auto} .landing-section-label{text-align:center;margin-bottom:40px} .landing-section-label h2{font-size:var(--text-3xl);margin:0 0 10px;color:var(--color-text)} .landing-section-label p{color:var(--color-text-subtle);max-width:540px;margin:0 auto;line-height:1.8;font-size:var(--text-base)} .feature-card{padding:24px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)} .feature-card:hover{box-shadow:var(--shadow-sm)} .feature-card-icon{font-size:var(--text-2xl);margin-bottom:12px} .feature-card h3{margin:0 0 8px;font-size:var(--text-base);font-weight:600} .feature-card p{color:var(--color-text-subtle);margin:0;line-height:1.6;font-size:var(--text-sm)} .landing-pricing{padding:clamp(40px,8vw,80px) clamp(20px,5vw,80px);background:var(--color-surface)} .pricing-card{max-width:420px;margin:0 auto;padding:32px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);border-inline-start:3px solid var(--color-primary);text-align:center;display:flex;flex-direction:column;height:100%} .pricing-card .price{font-size:2.4rem;font-weight:700;color:var(--color-primary);margin:12px 0 4px} .pricing-card .price-sub{color:var(--color-text-muted);margin:0 0 24px;font-size:var(--text-sm)} .pricing-features{list-style:none;padding:0;margin:0 0 24px;text-align:right;display:grid;gap:10px;flex:1 1 auto} .pricing-card .landing-pricing-link,.pricing-card .button,.pricing-card-actions{margin-top:auto} /* ── Flat Billing & Pricing System (V2) ───────────────────────── */ .pricing-plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;align-items:stretch;margin-top:24px} .pricing-card-v2{display:flex;flex-direction:column;background:var(--surface,var(--color-surface,#fff));border:1px solid var(--border,var(--color-border,#e2e8f0));border-radius:var(--radius-lg,12px);padding:24px;position:relative;transition:transform 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,0.05))} .pricing-card-v2:hover{border-color:var(--primary,var(--color-primary,#1F75FE));box-shadow:var(--shadow-md,0 4px 12px rgba(0,0,0,0.08))} .pricing-card-v2--active{border:2px solid var(--primary,var(--color-primary,#1F75FE));background:var(--surface2,var(--color-surface-2,#f8fafc))} .pricing-card-v2--popular{border:2px solid var(--primary,var(--color-primary,#1F75FE))} .pricing-card-v2__badge{position:absolute;top:-12px;inset-inline-end:20px;background:var(--primary,var(--color-primary,#1F75FE));color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:12px;text-transform:uppercase;letter-spacing:0.05em} .pricing-card-v2__name{font-size:var(--text-lg,16px);font-weight:700;color:var(--text,var(--color-text,#0f172a));margin:0 0 6px} .pricing-card-v2__desc{font-size:var(--text-xs,12px);color:var(--text-secondary,var(--color-text-subtle,#475569));margin:0 0 16px;line-height:1.5;min-height:36px} .pricing-card-v2__price-box{display:flex;align-items:baseline;gap:4px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border,var(--color-border,#e2e8f0))} .pricing-card-v2__amount{font-size:32px;font-weight:800;color:var(--text,var(--color-text,#0f172a));line-height:1} .pricing-card-v2__period{font-size:var(--text-xs,12px);color:var(--text-secondary,var(--color-text-subtle,#475569));font-weight:500} .pricing-card-v2__features{flex:1;margin-bottom:24px} .pricing-card-v2__features ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px} .pricing-card-v2__features li{display:flex;align-items:center;gap:10px;font-size:var(--text-sm,13px);color:var(--text,var(--color-text,#0f172a))} .pricing-card-v2__features .check-icon{width:18px;height:18px;color:var(--primary,var(--color-primary,#1F75FE));flex-shrink:0} .pricing-card-v2__actions{margin-top:auto;display:flex;flex-direction:column;gap:8px} .pricing-card-v2__actions form{width:100%} .pricing-card-v2__actions .button,.pricing-card-v2__actions .primary-button,.pricing-card-v2__actions .secondary-button{width:100%;text-align:center;justify-content:center} .showcase-hero{padding:clamp(40px,8vw,72px) clamp(20px,5vw,80px) clamp(24px,5vw,40px);text-align:center;background:var(--color-surface)} .showcase-hero h1{font-size:var(--text-3xl);margin:0 0 8px;line-height:1.2;color:var(--color-text)} .showcase-hero p{color:var(--color-text-subtle);margin:0;font-size:var(--text-base)} .showcase-empty{padding:clamp(60px,10vw,100px) 20px;text-align:center;color:var(--color-text-muted);font-size:var(--text-base)} .showcase-section{padding:0 clamp(20px,5vw,80px) clamp(32px,6vw,56px);max-width:1200px;margin:0 auto} .showcase-section h2{font-size:var(--text-xl);margin:0 0 4px;color:var(--color-text)} .showcase-section__desc{color:var(--color-text-subtle);margin:0 0 20px;font-size:var(--text-sm)} .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px} .product-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:box-shadow 0.15s} .product-card:hover{box-shadow:var(--shadow-md)} .product-card__image{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--color-bg)} .product-card__image--placeholder{display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--color-text-muted)} .product-card__body{padding:14px} .product-card__body h3{margin:0 0 6px;font-size:var(--text-base);font-weight:600;color:var(--color-text)} .product-card__body p{margin:0 0 10px;font-size:var(--text-sm);color:var(--color-text-subtle);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .product-card__price{font-weight:700;color:var(--color-primary);font-size:var(--text-base)} .pricing-features li{display:flex;align-items:center;gap:8px;color:var(--color-text);font-size:var(--text-sm)} .pricing-features li::before{content:"✓";color:var(--color-success);font-weight:700;flex-shrink:0} .landing-section-white{background:var(--color-surface);padding:clamp(40px,8vw,80px) clamp(20px,5vw,80px)} .landing-section-gray{background:var(--color-bg);padding:clamp(40px,8vw,80px) clamp(20px,5vw,80px)} .landing-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px;max-width:1100px;margin:0 auto;align-items:center} .landing-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;max-width:1100px;margin:0 auto} .landing-card{background:var(--color-surface);border:1px solid var(--color-border);padding:32px;border-radius:var(--radius-md,8px);box-shadow:var(--shadow-sm);transition:transform 0.2s,box-shadow 0.2s} .landing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-primary)} .landing-icon-box{width:56px;height:56px;background:var(--color-primary-subtle);color:var(--color-primary);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);margin-bottom:24px;font-size:24px} .landing-step-num{font-size:3rem;font-weight:800;color:var(--color-primary-subtle);margin-bottom:16px;line-height:1} .landing-video-wrapper{max-width:900px;margin:0 auto;position:relative;aspect-ratio:16/9;background:var(--color-border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md)} .landing-video-wrapper img{width:100%;height:100%;object-fit:cover;display:block} .landing-video-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.4);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:background 0.3s;text-align:center} .landing-video-wrapper:hover .landing-video-overlay{background:rgba(0,0,0,0.5)} .landing-play-btn{width:64px;height:64px;background:var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:24px;box-shadow:0 4px 12px rgba(0,0,0,0.2)} .landing-badge{display:inline-block;padding:6px 12px;background:var(--color-primary-subtle);color:var(--color-primary);font-weight:600;font-size:var(--text-sm);border-radius:20px;margin-bottom:16px} .landing-stat{font-size:2.5rem;font-weight:800;color:var(--color-primary);line-height:1;margin-bottom:8px} .landing-value-box{background:var(--color-primary);color:#fff;padding:clamp(40px,8vw,80px) clamp(20px,5vw,80px);border-radius:var(--radius-md);margin:0 auto;max-width:1100px;text-align:center} .landing-value-card{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);padding:24px;border-radius:var(--radius-sm)} .landing-testimonial{background:var(--color-surface);border:1px solid var(--color-border);padding:32px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)} .landing-testimonial-text{font-size:var(--text-lg);line-height:1.8;color:var(--color-text);font-style:italic;margin-bottom:24px} .landing-testimonial-author{display:flex;align-items:center;gap:16px} .landing-testimonial-author img{width:48px;height:48px;border-radius:50%;object-fit:cover} .landing-faq-list{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:16px} .landing-faq-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:20px} .landing-faq-q{font-weight:600;font-size:var(--text-lg);margin:0;color:var(--color-text)} .landing-faq-a{margin:12px 0 0;color:var(--color-text-subtle);line-height:1.6} .landing-footer{padding:28px clamp(20px,5vw,80px);background:#1d2125;color:#b6c2cf;text-align:center;font-size:var(--text-sm)} .landing-footer a{color:#b6c2cf;text-decoration:none} .landing-footer a:hover{color:#fff} /* ── Hide scrollbar on desktop dashboards ─────────────────── */ @media(min-width:900px){html:has(.dashboard-shell){scrollbar-width:none}html:has(.dashboard-shell)::-webkit-scrollbar{display:none}} /* ── Collapsed sidebar ────────────────────────────────────── */ .sidebar-collapsed{--sidebar-w:56px} /* Removed .sidebar-collapsed .main margin to fix layout gap */ @media(min-width:1024px){.sidebar-collapsed .dashboard-shell,.sidebar-collapsed .shell{grid-template-columns:56px 1fr}.sidebar-collapsed .dashboard-shell.has-filter-aside,.sidebar-collapsed .shell.has-filter-aside{grid-template-columns:56px 1fr var(--filter-drawer-w,288px)}}@media(min-width:769px) and (max-width:1023px){.sidebar-collapsed .dashboard-shell,.sidebar-collapsed .shell{grid-template-columns:56px 1fr}} .sidebar-collapsed .brand-name,.sidebar-collapsed .nav-label{display:none} .sidebar-collapsed .nav a{justify-content:center;padding:10px} .sidebar-collapsed .sidebar__header{padding:12px 8px} /* ── Mobile / Responsive ──────────────────────────────────── */ @media(max-width:899px){ .auth-shell{flex-direction:column;} .auth-visual{display:none} .auth-panel{padding:32px 24px;justify-content:flex-start} .auth-brand.mobile-only{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 32px;font-size:var(--text-xl);gap:12px;text-align:center;} .auth-brand.mobile-only .brand-logo{max-height:60px;width:auto;} .auth-brand.mobile-only .brand-mark{font-size:32px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--theme-primary, var(--color-primary));color:#fff;border-radius:var(--radius-md);font-weight:700;} .auth-footer.mobile-only{display:block;margin-top:40px;text-align:center;font-size:var(--text-sm);color:var(--color-text-subtle);} .dashboard-shell{display:block;position:relative} .dashboard-shell::after{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(9,30,66,0.5);z-index:998;opacity:0;pointer-events:none;transition:opacity 0.2s} .sidebar{position:fixed;top:0;right:0;bottom:0;width:260px;z-index:1000;transform:translateX(100%);box-shadow:-4px 0 20px rgba(9,30,66,0.2);transition:transform 0.2s} .dashboard-shell.sidebar-open .sidebar{transform:translateX(0)} .dashboard-shell.sidebar-open::after{opacity:1;pointer-events:auto} .brand-name,.nav-label{display:inline!important} .main{width:100%;min-height:100vh;margin-inline-start:0} .topbar{padding:0 16px} .sidebar-edge-toggle{display:none} .topbar-brand--mobile{display:flex} .topbar-search{display:none} .content{padding:16px} .page-header-bar{padding:12px 16px 0} .stats,.kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))} .action-toolbar{padding:8px 16px} .action-toolbar__spacer{display:none} .action-toolbar__label{display:none} .action-toolbar__inner{justify-content:stretch} .toolbar-btn{flex:1;min-width:0} input,select,textarea{font-size:var(--text-base)!important} .field input,.field select,.field textarea,.primary-button{padding:11px 14px;min-height:44px} } @media(max-width:640px){ .stats,.kpi-row,.analytics-kpis,.metrics-grid,.stats-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} .kpi-card,.analytics-kpi{padding:10px 12px!important;min-height:auto!important;gap:4px!important} .kpi-value,.analytics-kpi strong{font-size:1.35rem!important;line-height:1.2!important} .kpi-label,.analytics-kpi span{font-size:0.75rem!important;line-height:1.2!important} } @media(max-width:480px){ .settings-layout,.form-row{grid-template-columns:1fr} .content{padding:12px 10px} } /* ── Runtime template styles ──────────────────────────────── */ .plan-card-checkout{display:flex;flex-direction:column}.plan-card-checkout--active{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)} .payment-popup{display:flex;align-items:center;justify-content:center;height:100vh;margin:0;background:var(--color-bg);color:var(--color-text-muted);text-align:center;direction:rtl}.payment-popup__message{font-size:var(--text-base)} .payment-status--processing{background:var(--primary-ghost);color:var(--primary);border-color:var(--primary)} .platform-ui__style-01{margin:6px 0 12px;} .platform-ui__style-02{display:flex;gap:12px;margin-top:16px;} .platform-ui__style-03{text-decoration:none;} .platform-ui__style-04{text-decoration:none;background:var(--color-text-subtle);} .platform-ui__style-05{color:var(--color-success);} .platform-ui__style-06{color:var(--color-warning);} .platform-ui__style-17{text-align:center;padding:12px;background:var(--color-primary-subtle);border:1px solid var(--color-primary);border-radius:var(--radius-sm);color:var(--color-primary);font-weight:600;} .platform-ui__style-18{flex-grow:1;margin-bottom:16px;} .platform-ui__style-19{font-size:var(--text-base);} /* ── Pagination ───────────────────────────────────────────── */ .pagination-wrapper{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:10px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);gap:16px;flex-wrap:wrap} .pagination-info{font-size:var(--text-xs);color:var(--color-text-muted)} .pagination-buttons{display:flex;gap:4px;align-items:center;flex-wrap:wrap} .pagination-buttons a,.pagination-buttons span{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 10px;font-size:var(--text-xs);font-weight:500;border-radius:var(--radius-sm);text-decoration:none} .pagination-buttons a.secondary{border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text)} .pagination-buttons a.secondary:hover{background:var(--color-surface-2)} .pagination-buttons a.active{background:var(--color-primary)!important;color:#fff!important;border:1px solid var(--color-primary)!important} .pagination-buttons span.disabled{color:var(--color-text-muted);border:1px solid var(--color-border);background:var(--color-surface-2);cursor:not-allowed} .filter-form--wide select{padding:7px 10px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);font-family:inherit;font-size:var(--text-sm);color:var(--color-text)} /* ── Modal System ─────────────────────────────────────────── */ #modal-root{position:fixed;inset:0;z-index:var(--z-modal);display:flex;flex-direction:column} #modal-root[hidden],#modal-root [hidden]{display:none!important} .modal-panel{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:var(--bg);overflow:hidden} .modal-header{height:var(--topbar-h);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--border);z-index:1} .modal-header__start{display:flex;align-items:center;gap:10px;min-width:0;flex:1;overflow:hidden} .modal-header__end{display:flex;align-items:center;gap:8px;flex-shrink:0} .modal-title{margin:0;font-size:var(--text-base);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .modal-subtitle{margin:2px 0 0;font-size:var(--text-xs);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .modal-nav-btn,.modal-close-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;color:var(--text2);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s} .modal-nav-btn:hover,.modal-close-btn:hover{background:var(--surface2);color:var(--text)} .modal-body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative;display:flex;flex-direction:column;scrollbar-width:none} .modal-body::-webkit-scrollbar{display:none} .modal-alert{padding:10px 14px;font-size:var(--text-sm);border-bottom:1px solid;flex-shrink:0} .modal-alert--error{background:var(--color-danger-subtle);color:var(--danger);border-color:var(--color-danger-border,#ffbdad)} .modal-alert--success{background:var(--color-success-subtle);color:var(--success);border-color:var(--color-success-border,#abf5d1)} .modal-content{padding:24px;max-width:1200px;width:100%;margin:0 auto;flex:1} .modal-footer{height:var(--topbar-h);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;padding-bottom:max(0px,env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border)} .modal-footer__start{display:flex;gap:8px;align-items:center} .modal-footer__end{display:flex;gap:8px;align-items:center} .modal-steps{display:flex;align-items:center;gap:4px} .modal-step{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--border2);transition:background .2s,width .2s,border-radius .2s} .modal-step.active{background:var(--primary);width:20px;border-radius:4px} .modal-step.done{background:var(--success)} .modal-loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.85);z-index:10} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .modal-loading-overlay{background:rgba(15,23,42,.85)}} [data-theme="dark"] .modal-loading-overlay{background:rgba(15,23,42,.85)} .modal-spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:_mspin .7s linear infinite} @keyframes _mspin{to{transform:rotate(360deg)}} #modal-root[data-confirm-only="true"]{position:fixed!important;inset:0!important;background:transparent!important;z-index:999998!important;pointer-events:none!important} #modal-root[data-confirm-only="true"] .modal-panel{background:transparent!important;box-shadow:none!important;pointer-events:none!important} #modal-root[data-confirm-only="true"] .modal-header, #modal-root[data-confirm-only="true"] .modal-body > *:not(.modal-confirm-wrap), #modal-root[data-confirm-only="true"] .modal-footer{display:none!important} .modal-confirm-wrap{position:fixed!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;pointer-events:none!important;z-index:999998!important} .modal-confirm-box{position:relative!important;pointer-events:auto!important;background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:var(--radius-lg, 12px)!important;padding:24px!important;width:min(420px,92vw)!important;box-shadow:0 20px 40px -10px rgba(0,0,0,0.25), 0 8px 16px -4px rgba(0,0,0,0.12)!important;backdrop-filter:blur(8px)!important;transform:scale(1)!important;animation:modalConfirmPop 0.2s cubic-bezier(0.16, 1, 0.3, 1)!important} @keyframes modalConfirmPop{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}} .modal-confirm-box p{margin:0 0 20px;font-size:var(--text-base);color:var(--text);line-height:1.6;font-weight:500} .modal-confirm-actions{display:flex;gap:10px;justify-content:flex-end} .modal-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;background:var(--primary);color:#fff;padding:7px 16px;font-weight:500;font-size:var(--text-sm);cursor:pointer;transition:background .15s;font-family:inherit;white-space:nowrap} .modal-btn:hover:not(:disabled){background:var(--primary-dim)} .modal-btn:disabled{opacity:.6;cursor:not-allowed} .modal-btn--secondary{background:var(--surface);color:var(--text);border-color:var(--border2)} .modal-btn--secondary:hover:not(:disabled){background:var(--surface2)} .modal-btn--danger{background:var(--danger);border-color:var(--danger)} .modal-btn--danger:hover:not(:disabled){background:var(--color-danger-hover)} @media(max-width:768px){ .modal-header,.modal-footer{padding:0 16px;padding-bottom:max(0px,env(safe-area-inset-bottom))} .modal-header{padding-bottom:0} .modal-content{padding:16px} .modal-title{font-size:var(--text-base)} .modal-footer{height:auto;min-height:var(--topbar-h);flex-wrap:wrap;padding-top:8px;row-gap:6px} .modal-footer__end{flex:1;flex-wrap:wrap} .modal-footer__end .modal-btn{flex:1;min-width:80px;justify-content:center} } /* ── Toast System (موحَّد: أسفل-منتصف الشاشة، ارتفاع 64px مطابق للفوتر) ── */ .toast-root{position:fixed!important;top:auto!important;bottom:calc(var(--bottom-h,64px) + 12px)!important;inset-inline-start:50%!important;inset-inline-end:auto!important;transform:translateX(-50%)!important;z-index:999999!important;display:flex!important;flex-direction:column!important;gap:8px!important;pointer-events:none!important;width:max-content!important;max-width:min(420px,calc(100vw - 48px))!important;align-items:center!important} @media (max-width: 600px) { .toast-root{bottom:calc(var(--bottom-h,64px) + 8px)!important;inset-inline-start:12px!important;inset-inline-end:12px!important;transform:none!important;width:auto!important;max-width:calc(100vw - 24px)!important;align-items:stretch!important} } .toast{position:relative!important;display:flex!important;align-items:center!important;gap:12px!important;min-height:64px!important;padding:12px 18px!important;background:var(--surface)!important;color:var(--text)!important;border-radius:var(--radius-md)!important;box-shadow:0 10px 25px -5px rgba(0,0,0,0.18),0 4px 10px -2px rgba(0,0,0,0.08)!important;border:1px solid var(--border)!important;pointer-events:auto!important;transform:translateY(16px)!important;opacity:0!important;transition:transform 0.25s cubic-bezier(0.16,1,0.3,1),opacity 0.25s cubic-bezier(0.16,1,0.3,1)!important;overflow:hidden!important} .toast.toast--show{transform:translateY(0)!important;opacity:1!important} .toast.toast--hide{transform:translateY(16px)!important;opacity:0!important} .toast__icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center} .toast__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .toast__title{font-weight:600;font-size:var(--text-sm);margin:0;color:inherit} .toast__desc{font-size:var(--text-xs);margin:0;line-height:1.4;word-break:break-word;color:inherit;opacity:.92} .toast__close{flex-shrink:0;background:none;border:none;color:inherit;opacity:.85;cursor:pointer;padding:4px;margin:-4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:opacity 0.2s, background 0.2s} .toast__close:hover{opacity:1;background:rgba(0,0,0,0.08)} /* الحالات الأربع: خلفية معبَّأة كاملة + نص أبيض بدل شريط جانبي رفيع */ .toast--success{background:var(--success,#10b981)!important;border-color:var(--success,#10b981)!important;color:#fff!important} .toast--error{background:var(--danger,#ef4444)!important;border-color:var(--danger,#ef4444)!important;color:#fff!important} .toast--warning{background:var(--warn,#f59e0b)!important;border-color:var(--warn,#f59e0b)!important;color:#fff!important} .toast--info{background:var(--primary,#6366f1)!important;border-color:var(--primary,#6366f1)!important;color:#fff!important} .toast--success .toast__close:hover,.toast--error .toast__close:hover,.toast--warning .toast__close:hover,.toast--info .toast__close:hover{background:rgba(255,255,255,0.2)!important} .toast--loading .toast__icon{animation:_mspin .7s linear infinite;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:20px;height:20px;margin:2px} /* ── Support Ticket Thread Styles ── */ .support-thread{display:flex;flex-direction:column;gap:16px;margin-bottom:24px} .support-msg{display:flex;flex-direction:column;max-width:80%;padding:14px 18px;border-radius:var(--radius-lg,12px);font-size:var(--text-sm,14px);line-height:1.6} .support-msg--tenant{align-self:flex-start;background:var(--surface2,#f1f5f9);color:var(--text,#0f172a);border:1px solid var(--border,#e2e8f0);border-top-right-radius:2px} .support-msg--admin{align-self:flex-end;background:var(--primary-ghost,rgba(31,117,254,0.08));color:var(--text,#0f172a);border:1px solid var(--primary-dim,#93c5fd);border-top-left-radius:2px} .support-msg__meta{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--text-secondary,#64748b);margin-bottom:6px;font-weight:600} .support-msg__body{white-space:pre-wrap;word-break:break-word} /* ── SaaS Pricing Redesign ─────────────────────────────────────────── */ .pricing-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 2rem; align-items: stretch; } .pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px 24px; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); } .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .pricing-card--active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); } .pricing-card--active::before { content: 'الخطة الحالية'; position: absolute; top: 12px; right: 12px; background: var(--primary); color: #fff; font-size:var(--text-xs); font-weight: 600; padding: 4px 10px; border-radius: 20px; } .pricing-card__header { text-align: center; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .pricing-card__name { font-size:var(--text-xl); font-weight: 600; color: var(--text); margin: 0 0 12px 0; } .pricing-card__price { display: flex; align-items: baseline; justify-content: center; gap: 4px; color: var(--text); } .pricing-card__price .currency { font-size:var(--text-xl); font-weight: 600; color: var(--text2); } .pricing-card__price .amount { font-size: 2.75rem; font-weight: 700; line-height: 1; } .pricing-card__price .period { font-size:var(--text-sm); color: var(--text2); } .pricing-card__desc { font-size:var(--text-sm); color: var(--text2); margin: 12px 0 0 0; line-height: 1.5; } .pricing-card__features { flex: 1; margin-bottom: 32px; } .pricing-card__features ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .pricing-card__features li { display: flex; align-items: flex-start; gap: 12px; font-size:var(--text-base); color: var(--text); line-height: 1.4; } .pricing-card__features .check-icon { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; margin-top: 2px; } .pricing-card__actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; } .pricing-card__actions form { width: 100%; display: flex; flex-direction: column; gap: 8px; margin: 0; } .pricing-card__actions button { width: 100%; justify-content: center; padding: 12px; font-size:var(--text-base); border-radius: 8px; font-weight: 600; } /* ── SaaS 2026 Status Card ────────────────────────────── */ .saas-status-card { --card-bg: var(--color-surface); --card-border: var(--color-border); --card-tint: var(--color-primary); background: linear-gradient(145deg, var(--card-bg) 0%, var(--color-surface-2) 100%); border: 1px solid var(--card-border); border-radius: 0; padding: 24px; margin-bottom: 24px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s; } .saas-status-card::before { content: ''; position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0; height: 4px; background: var(--card-tint); } .saas-status-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .saas-status-green { --card-tint: var(--color-success); --card-bg: var(--color-success-subtle); } .saas-status-blue { --card-tint: var(--color-primary); --card-bg: var(--color-primary-subtle); } .saas-status-orange { --card-tint: var(--color-warning); --card-bg: var(--color-warning-subtle); } .saas-status-red { --card-tint: var(--color-danger); --card-bg: var(--color-danger-subtle); } .saas-status-gray { --card-tint: var(--color-text-subtle); --card-bg: var(--color-surface-2); } .saas-card-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } .saas-card-title { display: flex; align-items: center; gap: 16px; } .saas-card-icon { width: 48px; height: 48px; border-radius: 0; background: var(--color-surface); display: flex; align-items: center; justify-content: center; font-size:var(--text-2xl); color: var(--card-tint); box-shadow: var(--shadow-sm); } .saas-card-eyebrow { font-size:var(--text-xs); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; } .saas-card-title h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--color-text); } .saas-badge { padding: 6px 12px; border-radius: 0; font-size:var(--text-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; background: var(--color-surface); color: var(--card-tint); border: 1px solid currentColor; } .saas-card-body { margin-bottom: 24px; } .saas-progress-wrapper { margin-bottom: 20px; } .saas-progress-track { height: 8px; background: rgba(0,0,0,0.05); border-radius: 0; overflow: hidden; direction: ltr; } [data-theme="dark"] .saas-progress-track { background: rgba(255,255,255,0.1); } .saas-progress-fill { height: 100%; background: var(--card-tint); border-radius: 0; transition: width 0.5s ease-out; } .saas-card-meta { display: flex; flex-wrap: wrap; gap: 24px; } .saas-card-meta > div { display: flex; flex-direction: column; gap: 4px; } .saas-card-meta span { font-size:var(--text-xs); color: var(--color-text-subtle); } .saas-card-meta strong { font-size: 15px; color: var(--color-text); font-weight: 600; } .saas-warning-banner { margin-top: 16px; padding: 12px; background: var(--color-warning-subtle); color: var(--color-warning); border-radius: 0; font-size:var(--text-sm); font-weight: 500; display: flex; align-items: center; gap: 8px; } .saas-card-footer { display: flex; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.05); } [data-theme="dark"] .saas-card-footer { border-color: rgba(255,255,255,0.05); } .saas-card-footer .primary-button, .saas-card-footer .secondary-button { margin: 0; } /* Deletion & Bulk Actions styles */ .bulk-actions-bar { display: flex; align-items: center; direction: rtl; } .bulk-actions-bar[hidden] { display: none !important; } .bulk-actions-bar__info { font-size: var(--text-sm); } .bulk-actions-bar__actions { display: flex; gap: 8px; } .sidebar-trash-badge { background: var(--danger); color: #fff; border-radius: 10px; padding: 2px 8px; font-size: 11px; font-weight: 700; min-width: 18px; text-align: center; } .sidebar-trash-badge[hidden], .sidebar-trash-badge:empty { display: none !important; } th input[type="checkbox"], td input[type="checkbox"] { cursor: pointer; margin: 0; width: 16px; height: 16px; accent-color: var(--primary); } .trash-panel{min-height:280px} .trash-table-wrap{overflow:auto} .trash-table{min-width:920px} .trash-table th,.trash-table td{vertical-align:middle} .trash-table__select{width:44px;text-align:center} .trash-table__name{min-width:180px;max-width:320px} .trash-table__name strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .trash-item__reason{display:block;color:var(--text3,var(--color-text-muted));font-size:var(--text-xs,.8rem);margin-top:3px} .trash-table__actor,.trash-table__date{color:var(--text2,var(--color-text-muted));font-size:var(--text-sm,.875rem)} .trash-table__actions{display:flex;gap:6px;flex-wrap:wrap;min-width:180px} .trash-type-badge{background:var(--surface2,var(--color-surface-2));color:var(--text2,var(--color-text))} .trash-retention{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:12px;background:var(--surface2,var(--color-surface-2));font-size:var(--text-xs,.8rem);font-weight:700;color:var(--text2,var(--color-text))} .trash-retention--warn{background:var(--color-warning-subtle,#fff7ed);color:var(--color-warning,#b45309)} .trash-retention--danger{background:var(--color-danger-subtle,#fee2e2);color:var(--danger,var(--color-danger,#b91c1c))} tr[data-trash-row]{transition:opacity .25s} tr[data-trash-row].selected{background:var(--color-primary-subtle,rgba(31,117,254,.08))} .trash-toolbar{display:flex;align-items:center;gap:8px;flex:1;min-width:0} .trash-toolbar .action-toolbar__spacer{flex:1} .trash-toolbar__count{color:var(--text3,var(--color-text-muted));font-size:var(--text-sm,.875rem);white-space:nowrap} .trash-toolbar button:disabled{opacity:.45;cursor:not-allowed} @media(max-width:760px){.trash-toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.trash-toolbar::-webkit-scrollbar{display:none}.trash-toolbar button{flex:0 0 auto;white-space:nowrap}.trash-toolbar__count{flex:0 0 auto}}