/* ═══════════════════════════════════════════════════════════════════ PLATFORM UI THEMES — full ERP coverage Independent of the 36 color palettes. A theme restyles the overall feel / geometry / depth of the ERP across every screen — page surfaces, cards & containers, buttons, inputs, tables, stat/KPI cards, graph containers and the auth / shop / portal shells — while the active palette still drives accent colours via --tenant-* tokens. Applied through (set server-side from PlatformLabel.ui_theme["ui_style"]) plus a JS hook (ui_themes.js) that recolours Chart.js graphs from the active palette tokens. ── default : no overrides, the classic Jalusi ERP look. ── vodabiz : clean minimal POC (light canvas, hairline white cards, solid accent topbar, flat buttons, circular icon chips). ── skeuomorph: tactile dimensional (layered shadows, raised buttons, pressed inputs, inset grooves, subtle gradients). ── clay : soft squishy 3D (blob shadows, rounded containers, bright tinted fills, chunky hover lift). ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ 0) THEME TOKENS ═══════════════════════════════════════════════════════════════════ */ body[data-ui-style="default"] { /* Classic Jalusi ERP look — intentionally a no-op. */ } body[data-ui-style="vodabiz"] { --t-card-radius: 10px; --t-pill-radius: 999px; --t-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.08); --t-hairline: var(--tenant-card-border, #e6e8eb); --t-chip-bg: #f4f5f7; --t-topbar-bg: var(--tenant-primary, #064e3b); --t-topbar-text: #ffffff; } body[data-ui-style="skeuomorph"] { --t-card-radius: 8px; --t-bump: 0 1px 0 rgba(255, 255, 255, 0.55); --t-well: inset 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6); --t-bevel: color-mix(in srgb, var(--tenant-card-border, #d1fae5) 60%, #94a3b8); } body[data-ui-style="clay"] { --t-card-radius: 20px; --t-soft: color-mix(in srgb, var(--tenant-accent, #10b981) 16%, transparent); --t-soft-2: color-mix(in srgb, var(--tenant-accent, #10b981) 26%, transparent); } /* ═══════════════════════════════════════════════════════════════════ SHARED COMPONENT SELECTORS (used by every theme below) ═══════════════════════════════════════════════════════════════════ */ /* Cards & containers */ .t-card-el, body[data-ui-style="vodabiz"] .page-content-surface .metric-card, body[data-ui-style="vodabiz"] .page-content-surface .tenant-card, body[data-ui-style="vodabiz"] .tenant-surface-card, body[data-ui-style="vodabiz"] .kpi-card, body[data-ui-style="vodabiz"] .detail-section { background-color: var(--tenant-card-bg, #ffffff) !important; border: 1px solid var(--t-hairline) !important; border-radius: var(--t-card-radius) !important; box-shadow: var(--t-card-shadow) !important; background-image: none !important; } body[data-ui-style="skeuomorph"] .page-content-surface .metric-card, body[data-ui-style="skeuomorph"] .page-content-surface .tenant-card, body[data-ui-style="skeuomorph"] .tenant-surface-card, body[data-ui-style="skeuomorph"] .kpi-card, body[data-ui-style="skeuomorph"] .detail-section { background-color: var(--tenant-card-bg, #ffffff) !important; border: 1px solid var(--t-bevel) !important; border-radius: var(--t-card-radius) !important; box-shadow: var(--t-bump), 0 3px 0 color-mix(in srgb, var(--tenant-card-border, #d1fae5) 55%, #64748b), 0 4px 8px rgba(15, 23, 42, 0.12) !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.02)) !important; } body[data-ui-style="clay"] .page-content-surface .metric-card, body[data-ui-style="clay"] .page-content-surface .tenant-card, body[data-ui-style="clay"] .tenant-surface-card, body[data-ui-style="clay"] .kpi-card, body[data-ui-style="clay"] .detail-section { background-color: var(--tenant-card-bg, #ffffff) !important; border: 1px solid var(--t-soft) !important; border-radius: var(--t-card-radius) !important; box-shadow: 0 24px 48px -16px color-mix(in srgb, var(--tenant-accent, #10b981) 34%, transparent), 0 10px 20px -8px rgba(15, 23, 42, 0.16) !important; } /* Primary buttons */ body[data-ui-style="vodabiz"] .tenant-btn-primary, body[data-ui-style="vodabiz"] .page-content-surface .jalusi-submit-btn, body[data-ui-style="vodabiz"] button.jalusi-submit-btn, body[data-ui-style="vodabiz"] a.jalusi-submit-btn, body[data-ui-style="vodabiz"] body .btn-primary, body[data-ui-style="vodabiz"] .primary-btn, body[data-ui-style="vodabiz"] .submit-btn, body[data-ui-style="vodabiz"] .shop-btn-primary { background-color: var(--tenant-button-bg, var(--tenant-primary, #064e3b)) !important; color: var(--tenant-button-text, #ffffff) !important; border-radius: 8px !important; background-image: none !important; box-shadow: none !important; border: 1px solid color-mix(in srgb, var(--tenant-button-bg, #064e3b) 82%, #000) !important; } body[data-ui-style="vodabiz"] .tenant-btn-primary:hover, body[data-ui-style="vodabiz"] .page-content-surface .jalusi-submit-btn:hover, body[data-ui-style="vodabiz"] button.jalusi-submit-btn:hover, body[data-ui-style="vodabiz"] .primary-btn:hover, body[data-ui-style="vodabiz"] .submit-btn:hover, body[data-ui-style="vodabiz"] .shop-btn-primary:hover { filter: brightness(1.06); } body[data-ui-style="skeuomorph"] .tenant-btn-primary, body[data-ui-style="skeuomorph"] .page-content-surface .jalusi-submit-btn, body[data-ui-style="skeuomorph"] button.jalusi-submit-btn, body[data-ui-style="skeuomorph"] a.jalusi-submit-btn, body[data-ui-style="skeuomorph"] .btn-primary, body[data-ui-style="skeuomorph"] .primary-btn, body[data-ui-style="skeuomorph"] .submit-btn, body[data-ui-style="skeuomorph"] .shop-btn-primary { background-image: linear-gradient(180deg, color-mix(in srgb, var(--tenant-button-bg, #064e3b) 88%, #ffffff), var(--tenant-button-bg, #064e3b)) !important; color: var(--tenant-button-text, #ffffff) !important; border: 1px solid color-mix(in srgb, var(--tenant-button-bg, #064e3b) 70%, #000) !important; border-radius: 6px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 color-mix(in srgb, var(--tenant-button-bg, #064e3b) 55%, #000), 0 4px 6px rgba(0, 0, 0, 0.25) !important; } body[data-ui-style="skeuomorph"] .tenant-btn-primary:hover, body[data-ui-style="skeuomorph"] .page-content-surface .jalusi-submit-btn:hover, body[data-ui-style="skeuomorph"] button.jalusi-submit-btn:hover, body[data-ui-style="skeuomorph"] .primary-btn:hover, body[data-ui-style="skeuomorph"] .submit-btn:hover, body[data-ui-style="skeuomorph"] .shop-btn-primary:hover { filter: brightness(1.04); } body[data-ui-style="skeuomorph"] .tenant-btn-primary:active, body[data-ui-style="skeuomorph"] .page-content-surface .jalusi-submit-btn:active, body[data-ui-style="skeuomorph"] button.jalusi-submit-btn:active, body[data-ui-style="skeuomorph"] .primary-btn:active, body[data-ui-style="skeuomorph"] .submit-btn:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 color-mix(in srgb, var(--tenant-button-bg, #064e3b) 55%, #000) !important; transform: translateY(2px); } body[data-ui-style="clay"] .tenant-btn-primary, body[data-ui-style="clay"] .page-content-surface .jalusi-submit-btn, body[data-ui-style="clay"] button.jalusi-submit-btn, body[data-ui-style="clay"] a.jalusi-submit-btn, body[data-ui-style="clay"] .btn-primary, body[data-ui-style="clay"] .primary-btn, body[data-ui-style="clay"] .submit-btn, body[data-ui-style="clay"] .shop-btn-primary { background-color: var(--tenant-button-bg, var(--tenant-primary, #064e3b)) !important; color: var(--tenant-button-text, #ffffff) !important; border-radius: 999px !important; background-image: none !important; box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--tenant-button-bg, #064e3b) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } body[data-ui-style="clay"] .tenant-btn-primary:hover, body[data-ui-style="clay"] .page-content-surface .jalusi-submit-btn:hover, body[data-ui-style="clay"] button.jalusi-submit-btn:hover, body[data-ui-style="clay"] .primary-btn:hover, body[data-ui-style="clay"] .submit-btn:hover, body[data-ui-style="clay"] .shop-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -8px color-mix(in srgb, var(--tenant-button-bg, #064e3b) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important; } body[data-ui-style="clay"] .tenant-btn-primary:active, body[data-ui-style="clay"] .page-content-surface .jalusi-submit-btn:active, body[data-ui-style="clay"] button.jalusi-submit-btn:active, body[data-ui-style="clay"] .primary-btn:active, body[data-ui-style="clay"] .submit-btn:active { transform: translateY(1px); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--tenant-button-bg, #064e3b) 55%, transparent), inset 0 2px 4px rgba(0, 0, 0, 0.18) !important; } /* Secondary / outline / cancel buttons */ body[data-ui-style="vodabiz"] .btn-secondary, body[data-ui-style="vodabiz"] .jalusi-cancel-btn, body[data-ui-style="vodabiz"] .btn-outline { background-color: #ffffff !important; color: var(--tenant-card-text, #111827) !important; border: 1px solid var(--t-hairline) !important; border-radius: 8px !important; box-shadow: none !important; background-image: none !important; } body[data-ui-style="skeuomorph"] .btn-secondary, body[data-ui-style="skeuomorph"] .jalusi-cancel-btn, body[data-ui-style="skeuomorph"] .btn-outline { background-image: linear-gradient(180deg, #ffffff, #f1f5f9) !important; color: var(--tenant-card-text, #111827) !important; border: 1px solid var(--t-bevel) !important; border-radius: 6px !important; box-shadow: var(--t-bump), 0 2px 0 color-mix(in srgb, var(--tenant-card-border, #d1fae5) 45%, #94a3b8) !important; } body[data-ui-style="skeuomorph"] .btn-secondary:active, body[data-ui-style="skeuomorph"] .jalusi-cancel-btn:active { box-shadow: var(--t-well) !important; transform: translateY(1px); } body[data-ui-style="clay"] .btn-secondary, body[data-ui-style="clay"] .jalusi-cancel-btn, body[data-ui-style="clay"] .btn-outline { background-color: var(--tenant-card-bg, #ffffff) !important; color: var(--tenant-primary, #064e3b) !important; border: 1px solid var(--t-soft) !important; border-radius: 999px !important; box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--tenant-accent, #10b981) 32%, transparent) !important; background-image: none !important; } /* Utility buttons — view / filter pills */ body[data-ui-style="vodabiz"] .view-btn, body[data-ui-style="vodabiz"] .filter-pill { background-color: var(--t-chip-bg) !important; color: #344054 !important; border: 1px solid transparent !important; border-radius: 8px !important; box-shadow: none !important; background-image: none !important; } body[data-ui-style="vodabiz"] .view-btn:hover, body[data-ui-style="vodabiz"] .filter-pill:hover { background-color: #e9eaec !important; color: #1a1c21 !important; } body[data-ui-style="skeuomorph"] .view-btn, body[data-ui-style="skeuomorph"] .filter-pill { background-image: linear-gradient(180deg, #ffffff, #e9eaec) !important; color: var(--tenant-card-text, #111827) !important; border: 1px solid var(--t-bevel) !important; border-radius: 6px !important; box-shadow: var(--t-bump), 0 2px 0 color-mix(in srgb, var(--tenant-card-border, #d1fae5) 40%, #94a3b8) !important; } body[data-ui-style="skeuomorph"] .view-btn:active, body[data-ui-style="skeuomorph"] .filter-pill:active { box-shadow: var(--t-well) !important; } body[data-ui-style="clay"] .view-btn, body[data-ui-style="clay"] .filter-pill { background-color: var(--t-soft) !important; color: var(--tenant-primary, #064e3b) !important; border: 1px solid transparent !important; border-radius: 999px !important; box-shadow: 0 6px 12px -6px color-mix(in srgb, var(--tenant-accent, #10b981) 35%, transparent) !important; background-image: none !important; } /* Inputs, selects, textareas */ body[data-ui-style="vodabiz"] .form-input, body[data-ui-style="vodabiz"] .page-content-surface select, body[data-ui-style="vodabiz"] .page-content-surface input:not([type="checkbox"]):not([type="radio"]), body[data-ui-style="vodabiz"] .page-content-surface textarea { border: 1px solid var(--t-hairline) !important; border-radius: 8px !important; background-color: #ffffff !important; box-shadow: none !important; background-image: none !important; } body[data-ui-style="vodabiz"] .form-input:focus { border-color: var(--tenant-accent, #10b981) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-accent, #10b981) 16%, transparent) !important; } body[data-ui-style="skeuomorph"] .form-input, body[data-ui-style="skeuomorph"] .page-content-surface select, body[data-ui-style="skeuomorph"] .page-content-surface input:not([type="checkbox"]):not([type="radio"]), body[data-ui-style="skeuomorph"] .page-content-surface textarea { box-shadow: var(--t-well), 0 1px 0 rgba(255, 255, 255, 0.6) !important; border: 1px solid var(--t-bevel) !important; border-radius: 6px !important; background-color: var(--tenant-card-bg, #ffffff) !important; background-image: none !important; } body[data-ui-style="clay"] .form-input, body[data-ui-style="clay"] .page-content-surface select, body[data-ui-style="clay"] .page-content-surface input:not([type="checkbox"]):not([type="radio"]), body[data-ui-style="clay"] .page-content-surface textarea { border-radius: 14px !important; border: 1px solid var(--t-soft) !important; background-color: var(--tenant-card-bg, #ffffff) !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04), 0 2px 0 rgba(255, 255, 255, 0.6) !important; background-image: none !important; } /* Tables */ body[data-ui-style="vodabiz"] .page-content-surface table thead, body[data-ui-style="vodabiz"] .finance-data-table thead th, body[data-ui-style="vodabiz"] .projects-table thead th, body[data-ui-style="vodabiz"] .table-wrap table thead th { background: #f8f9fa !important; color: #475467 !important; } body[data-ui-style="vodabiz"] html.dark .page-content-surface table thead, body[data-ui-style="vodabiz"] html.dark .finance-data-table thead th, body[data-ui-style="vodabiz"] html.dark .projects-table thead th { background: #14171a !important; color: #9aa4af !important; } body[data-ui-style="skeuomorph"] .page-content-surface table thead, body[data-ui-style="skeuomorph"] .finance-data-table thead th, body[data-ui-style="skeuomorph"] .projects-table thead th { background: linear-gradient(180deg, #ffffff, #f1f5f9) !important; color: var(--tenant-card-text, #111827) !important; border-bottom: 1px solid var(--t-bevel) !important; } body[data-ui-style="clay"] .page-content-surface table thead, body[data-ui-style="clay"] .finance-data-table thead th, body[data-ui-style="clay"] .projects-table thead th { background: var(--t-soft) !important; color: var(--tenant-primary, #064e3b) !important; } body[data-ui-style="clay"] .page-content-surface table tbody tr:hover, body[data-ui-style="clay"] .finance-data-table tbody tr:hover, body[data-ui-style="clay"] .projects-table tbody tr:hover { background: color-mix(in srgb, var(--tenant-accent, #10b981) 6%, transparent) !important; } /* Stat / KPI cards */ body[data-ui-style="vodabiz"] .stat-card-dark { background: var(--tenant-card-bg, #ffffff) !important; border: 1px solid var(--t-hairline) !important; border-radius: 10px !important; box-shadow: var(--t-card-shadow) !important; } body[data-ui-style="vodabiz"] .stat-card-dark .stat-card-value, body[data-ui-style="vodabiz"] .stat-card-dark .stat-card-title, body[data-ui-style="vodabiz"] .stat-card-dark .stat-card-value * { color: var(--tenant-card-text, #111827) !important; } body[data-ui-style="vodabiz"] .stat-accent-line { background: var(--tenant-accent, #10b981) !important; } body[data-ui-style="skeuomorph"] .stat-card-dark { background: linear-gradient(180deg, color-mix(in srgb, var(--tenant-primary, #064e3b) 80%, #ffffff), var(--tenant-primary, #064e3b)) !important; border: 1px solid color-mix(in srgb, var(--tenant-primary, #064e3b) 65%, #000) !important; border-radius: 8px !important; box-shadow: var(--t-bump), 0 3px 0 color-mix(in srgb, var(--tenant-primary, #064e3b) 50%, #000), 0 4px 8px rgba(15, 23, 42, 0.25) !important; } body[data-ui-style="skeuomorph"] .stat-card-dark .stat-card-value, body[data-ui-style="skeuomorph"] .stat-card-dark .stat-card-title, body[data-ui-style="skeuomorph"] .stat-card-dark .stat-card-value * { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); } body[data-ui-style="clay"] .stat-card-dark { background: linear-gradient(160deg, color-mix(in srgb, var(--tenant-primary, #064e3b) 88%, #ffffff), var(--tenant-primary, #064e3b)) !important; border: 1px solid var(--t-soft) !important; border-radius: 20px !important; box-shadow: 0 20px 40px -14px color-mix(in srgb, var(--tenant-primary, #064e3b) 55%, transparent) !important; } body[data-ui-style="vodabiz"] .kpi-card, body[data-ui-style="clay"] .kpi-card { border-radius: 10px !important; } body[data-ui-style="clay"] .kpi-card { border-radius: 20px !important; } /* Graph containers & progress */ body[data-ui-style="vodabiz"] .progress-bar, body[data-ui-style="vodabiz"] .page-content-surface [class*="progress"] { background: #e9eaec !important; } body[data-ui-style="skeuomorph"] .progress-bar { box-shadow: var(--t-well) !important; border: 1px solid var(--t-bevel) !important; } body[data-ui-style="skeuomorph"] .progress-fill, body[data-ui-style="skeuomorph"] .resource-bar-fill { background-image: linear-gradient(90deg, var(--tenant-primary, #064e3b), var(--tenant-accent, #10b981)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; } body[data-ui-style="clay"] .progress-bar { border-radius: 999px !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important; } body[data-ui-style="clay"] .progress-fill { border-radius: 999px !important; } body[data-ui-style="clay"] .page-content-surface canvas { filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--tenant-accent, #10b981) 25%, transparent)); } /* ═══════════════════════════════════════════════════════════════════ 1) VODABIZ — clean minimal POC ═══════════════════════════════════════════════════════════════════ */ /* Page canvas */ body[data-ui-style="vodabiz"] main.tenant-page-surface { background: var(--tenant-page-bg, #f4f5f7) !important; } html.dark body[data-ui-style="vodabiz"] main.tenant-page-surface { background: #0b0d0f !important; } /* Topbar — solid accent bar with white controls */ body[data-ui-style="vodabiz"] header#header.tenant-header-surface { background-color: var(--t-topbar-bg) !important; border-bottom: 1px solid color-mix(in srgb, var(--t-topbar-bg) 78%, #000) !important; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--t-topbar-text); } body[data-ui-style="vodabiz"] header#header.tenant-header-surface .topbar-action-btn { color: var(--t-topbar-text) !important; border-color: rgba(255, 255, 255, 0.22) !important; background: rgba(255, 255, 255, 0.08) !important; } body[data-ui-style="vodabiz"] header#header.tenant-header-surface .topbar-action-btn:hover { color: var(--t-topbar-text) !important; background: rgba(255, 255, 255, 0.18) !important; } body[data-ui-style="vodabiz"] header#header.tenant-header-surface .topbar-breadcrumb, body[data-ui-style="vodabiz"] header#header.tenant-header-surface .topbar-breadcrumb .crumb-inactive { color: rgba(255, 255, 255, 0.72) !important; } body[data-ui-style="vodabiz"] header#header.tenant-header-surface .topbar-breadcrumb .crumb-active, body[data-ui-style="vodabiz"] header#header.tenant-header-surface .topbar-breadcrumb .breadcrumb-crumb.crumb-active { color: #ffffff !important; } body[data-ui-style="vodabiz"] header#header.tenant-header-surface .topbar-breadcrumb i { color: rgba(255, 255, 255, 0.6) !important; } body[data-ui-style="vodabiz"] header#header.tenant-header-surface .topbar-search-wrap input { border-color: rgba(255, 255, 255, 0.28) !important; background: rgba(255, 255, 255, 0.14) !important; color: #ffffff !important; } body[data-ui-style="vodabiz"] header#header.tenant-header-surface .topbar-search-wrap input:focus { border-color: rgba(255, 255, 255, 0.55) !important; background: rgba(255, 255, 255, 0.22) !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14) !important; } body[data-ui-style="vodabiz"] header#header.tenant-header-surface .topbar-search-wrap input::placeholder { color: rgba(255, 255, 255, 0.72) !important; } body[data-ui-style="vodabiz"] header#header.tenant-header-surface .topbar-search-wrap .search-icon { color: rgba(255, 255, 255, 0.75) !important; } body[data-ui-style="vodabiz"] header#header.tenant-header-surface .topbar-green-line { display: none !important; } body[data-ui-style="vodabiz"] header#header.tenant-header-surface button[class*="rounded-full"] > span { color: #ffffff !important; } /* Sidebar — neutral charcoal rail */ body[data-ui-style="vodabiz"] aside.sidebar.tenant-nav-themed { background: #191c1f !important; } body[data-ui-style="vodabiz"] aside.sidebar.tenant-nav-themed a.menu-item, body[data-ui-style="vodabiz"] aside.sidebar.tenant-nav-themed .menu-item { color: rgba(255, 255, 255, 0.62) !important; } body[data-ui-style="vodabiz"] aside.sidebar.tenant-nav-themed a.menu-item:hover, body[data-ui-style="vodabiz"] aside.sidebar.tenant-nav-themed .menu-item:hover { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.06) !important; } body[data-ui-style="vodabiz"] aside.sidebar.tenant-nav-themed a.menu-item.sidebar-active-item, body[data-ui-style="vodabiz"] aside.sidebar.tenant-nav-themed .menu-item.sidebar-active-item { color: var(--tenant-nav-active-text, #ffffff) !important; background-color: var(--tenant-nav-active-bg, rgba(16, 185, 129, 0.18)) !important; } /* Auth screens — login / register */ body[data-ui-style="vodabiz"] .glass-card { background: rgba(255, 255, 255, 0.92) !important; border: 1px solid var(--t-hairline) !important; box-shadow: var(--t-card-shadow) !important; } body[data-ui-style="vodabiz"] .glass-card button[type="submit"], body[data-ui-style="vodabiz"] .register-wrapper button[type="submit"], body[data-ui-style="vodabiz"] .register-wrapper .btn-primary { background-image: none !important; background-color: var(--tenant-button-bg, var(--tenant-primary, #064e3b)) !important; color: var(--tenant-button-text, #ffffff) !important; border-radius: 8px !important; box-shadow: none !important; } body[data-ui-style="vodabiz"] .glass-card input, body[data-ui-style="vodabiz"] .register-wrapper input { border: 1px solid var(--t-hairline) !important; background-color: #ffffff !important; border-radius: 8px !important; box-shadow: none !important; } /* Portal shell */ body[data-ui-style="vodabiz"] .portal-nav { background: var(--tenant-primary, #064e3b) !important; border-bottom: 1px solid color-mix(in srgb, var(--tenant-primary, #064e3b) 78%, #000) !important; } body[data-ui-style="vodabiz"] .portal-main { background: var(--tenant-page-bg, #f4f5f7) !important; } /* ═══════════════════════════════════════════════════════════════════ 2) SKEUOMORPHISM — tactile dimensional ═══════════════════════════════════════════════════════════════════ */ body[data-ui-style="skeuomorph"] aside.sidebar.tenant-nav-themed { box-shadow: inset -6px 0 8px -8px rgba(0, 0, 0, 0.5); } body[data-ui-style="skeuomorph"] aside.sidebar.tenant-nav-themed a.menu-item, body[data-ui-style="skeuomorph"] aside.sidebar.tenant-nav-themed .menu-item { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } body[data-ui-style="skeuomorph"] .tenant-ui-stat-card .tenant-ui-stat-title, body[data-ui-style="skeuomorph"] .metric-card .metric-label, body[data-ui-style="skeuomorph"] .stat-card-title { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); letter-spacing: 0.02em; } body[data-ui-style="skeuomorph"] .tenant-ui-stat-card .tenant-ui-stat-value, body[data-ui-style="skeuomorph"] .metric-card .metric-value, body[data-ui-style="skeuomorph"] .stat-card-value { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(15, 23, 42, 0.15); } /* Auth screens */ body[data-ui-style="skeuomorph"] .glass-card { background: linear-gradient(180deg, #ffffff, #f4f7f6) !important; border: 1px solid var(--t-bevel) !important; box-shadow: var(--t-bump), 0 3px 0 color-mix(in srgb, var(--tenant-card-border, #d1fae5) 55%, #64748b), 0 6px 12px rgba(15, 23, 42, 0.18) !important; } body[data-ui-style="skeuomorph"] .glass-card button[type="submit"], body[data-ui-style="skeuomorph"] .register-wrapper button[type="submit"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 color-mix(in srgb, var(--tenant-button-bg, #064e3b) 55%, #000), 0 4px 6px rgba(0, 0, 0, 0.25) !important; } body[data-ui-style="skeuomorph"] .glass-card button[type="submit"]:active, body[data-ui-style="skeuomorph"] .register-wrapper button[type="submit"]:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25) !important; } body[data-ui-style="skeuomorph"] .glass-card input, body[data-ui-style="skeuomorph"] .register-wrapper input { box-shadow: var(--t-well) !important; border: 1px solid var(--t-bevel) !important; border-radius: 6px !important; } /* Portal shell */ body[data-ui-style="skeuomorph"] .portal-nav { box-shadow: 0 3px 0 color-mix(in srgb, var(--tenant-primary, #064e3b) 50%, #000), 0 6px 10px rgba(15, 23, 42, 0.2); } /* ═══════════════════════════════════════════════════════════════════ 3) CLAYMORPHISM — soft squishy 3D ═══════════════════════════════════════════════════════════════════ */ body[data-ui-style="clay"] header#header.tenant-header-surface { box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--tenant-accent, #10b981) 30%, transparent); } body[data-ui-style="clay"] header#header.tenant-header-surface .topbar-action-btn { border-radius: 999px !important; background: var(--t-soft) !important; border-color: transparent !important; box-shadow: 0 6px 12px -6px color-mix(in srgb, var(--tenant-accent, #10b981) 35%, transparent) !important; } body[data-ui-style="clay"] aside.sidebar.tenant-nav-themed a.menu-item, body[data-ui-style="clay"] aside.sidebar.tenant-nav-themed .menu-item { border-radius: 14px; } body[data-ui-style="clay"] aside.sidebar.tenant-nav-themed a.menu-item.sidebar-active-item, body[data-ui-style="clay"] aside.sidebar.tenant-nav-themed .menu-item.sidebar-active-item { box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--tenant-accent, #10b981) 45%, transparent); } /* Auth screens */ body[data-ui-style="clay"] .glass-card { background: var(--tenant-card-bg, #ffffff) !important; border: 1px solid var(--t-soft) !important; border-radius: 24px !important; box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--tenant-accent, #10b981) 40%, transparent), 0 12px 24px -12px rgba(15, 23, 42, 0.2) !important; } body[data-ui-style="clay"] .glass-card button[type="submit"], body[data-ui-style="clay"] .register-wrapper button[type="submit"] { border-radius: 999px !important; box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--tenant-button-bg, #064e3b) 55%, transparent) !important; } body[data-ui-style="clay"] .glass-card button[type="submit"]:active, body[data-ui-style="clay"] .register-wrapper button[type="submit"]:active { transform: translateY(2px); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--tenant-button-bg, #064e3b) 55%, transparent), inset 0 2px 4px rgba(0, 0, 0, 0.18) !important; } body[data-ui-style="clay"] .glass-card input, body[data-ui-style="clay"] .register-wrapper input { border-radius: 14px !important; border: 1px solid var(--t-soft) !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04) !important; } /* Portal shell */ body[data-ui-style="clay"] .portal-nav { border-radius: 0 0 22px 22px; box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--tenant-accent, #10b981) 30%, transparent); } /* ═══════════════════════════════════════════════════════════════════ 4) ICON TREATMENTS (Bootstrap Icons — per-theme shape & depth) ═══════════════════════════════════════════════════════════════════ */ /* ── Sidebar nav icons ──────────────────────────────────────────── */ /* vodabiz — circular light chips */ body[data-ui-style="vodabiz"] aside.sidebar.tenant-nav-themed .menu-item > i.bi { width: 26px; height: 26px; min-width: 26px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border-radius: 999px; font-size: 12px; text-align: center; transition: background 0.18s ease, color 0.18s ease; } body[data-ui-style="vodabiz"] aside.sidebar.tenant-nav-themed .menu-item:hover > i.bi { background: rgba(255, 255, 255, 0.16); } body[data-ui-style="vodabiz"] aside.sidebar.tenant-nav-themed .menu-item.sidebar-active-item > i.bi { background: var(--tenant-nav-active-bg, rgba(16, 185, 129, 0.2)); color: var(--tenant-nav-active-text, #ffffff); } /* skeuomorph — engraved / carved icons */ body[data-ui-style="skeuomorph"] aside.sidebar.tenant-nav-themed .menu-item > i.bi { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 -1px 0 rgba(255, 255, 255, 0.14); } body[data-ui-style="skeuomorph"] aside.sidebar.tenant-nav-themed .menu-item.sidebar-active-item > i.bi { padding: 4px 7px; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 3px rgba(0, 0, 0, 0.45); } /* clay — soft squishy tiles */ body[data-ui-style="clay"] aside.sidebar.tenant-nav-themed .menu-item > i.bi { width: 30px; height: 30px; min-width: 30px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); border-radius: 12px; box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12); font-size: 13px; text-align: center; transition: background 0.18s ease, color 0.18s ease; } body[data-ui-style="clay"] aside.sidebar.tenant-nav-themed .menu-item:hover > i.bi { background: rgba(255, 255, 255, 0.1); } body[data-ui-style="clay"] aside.sidebar.tenant-nav-themed .menu-item.sidebar-active-item > i.bi { background: var(--t-soft); color: var(--tenant-accent, #10b981); } /* ── Topbar action icons ────────────────────────────────────────── */ body[data-ui-style="skeuomorph"] header#header.tenant-header-surface .topbar-action-btn i.bi, body[data-ui-style="skeuomorph"] .page-content-surface i.bi { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 -1px 1px rgba(0, 0, 0, 0.12); } body[data-ui-style="clay"] header#header.tenant-header-surface i.bi, body[data-ui-style="clay"] .page-content-surface i.bi { filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.18)); } body[data-ui-style="clay"] .page-content-surface a[class*="btn"] i.bi, body[data-ui-style="clay"] .page-content-surface button i.bi { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); } /* ── Stat / metric icon chips (dashboard KPI cards) ──────────────── */ /* The stock KPI chips use inline emerald tints (#10b98118 etc.); restyle them per theme so the dashboard mirrors the selected style. */ body[data-ui-style="vodabiz"] a.metric-card div.rounded-xl[style*="background"] { background: var(--t-chip-bg) !important; border-radius: 999px !important; box-shadow: none !important; } body[data-ui-style="vodabiz"] a.metric-card div.rounded-xl[style*="background"] i { color: var(--tenant-primary, #064e3b) !important; } body[data-ui-style="skeuomorph"] a.metric-card div.rounded-xl[style*="background"] { background: linear-gradient(180deg, #ffffff, #e9eaec) !important; box-shadow: var(--t-well) !important; border-radius: 8px !important; } body[data-ui-style="skeuomorph"] a.metric-card div.rounded-xl[style*="background"] i { color: var(--tenant-primary, #064e3b) !important; } body[data-ui-style="clay"] a.metric-card div.rounded-xl[style*="background"] { background: var(--t-soft) !important; border-radius: 14px !important; box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--tenant-accent, #10b981) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; } body[data-ui-style="clay"] a.metric-card div.rounded-xl[style*="background"] i { color: var(--tenant-accent, #10b981) !important; } /* ── Quick-action icon chips (dashboard quick actions) ───────────── */ body[data-ui-style="vodabiz"] .quick-action-btn .qa-icon { background: var(--t-chip-bg) !important; color: var(--tenant-primary, #064e3b) !important; border-radius: 999px !important; box-shadow: none !important; } body[data-ui-style="skeuomorph"] .quick-action-btn .qa-icon { background: linear-gradient(180deg, #ffffff, #e9eaec) !important; box-shadow: var(--t-well) !important; border-radius: 6px !important; } body[data-ui-style="clay"] .quick-action-btn .qa-icon { background: var(--t-soft) !important; color: var(--tenant-accent, #10b981) !important; border-radius: 14px !important; box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--tenant-accent, #10b981) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; }