/* ============================================ TRUBA — Premium UI Package Separate visual package (opt-in by body class) Disable by removing `ui-pack-wow` from ============================================ */ body.ui-pack-wow { --font-display: 'Sora', 'Manrope', system-ui, sans-serif; --font: 'Manrope', 'DM Sans', system-ui, sans-serif; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 30px; } body.ui-pack-wow[data-theme="light"] { background: var(--bg); } body.ui-pack-wow[data-theme="dark"] { background: radial-gradient(960px 540px at 100% -120px, rgba(122, 146, 255, 0.14), transparent 62%), radial-gradient(760px 420px at -120px 140px, rgba(212, 163, 90, 0.08), transparent 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0)), var(--bg); } body.ui-pack-wow h1, body.ui-pack-wow h2, body.ui-pack-wow h3 { letter-spacing: -0.025em; } body.ui-pack-wow #content { padding-top: 1.75rem; } body.ui-pack-wow .page-header h1 { font-size: clamp(1.45rem, 2vw, 1.95rem); font-weight: 800; color: var(--text); } body.ui-pack-wow #sidebar { border-right: 1px solid var(--border); box-shadow: none; } body.ui-pack-wow .sidebar-header { padding-top: 1.4rem; padding-bottom: 1rem; } body.ui-pack-wow .sidebar-logo { font-size: 1.35rem; letter-spacing: -0.04em; } body.ui-pack-wow .sidebar-logo-sub { letter-spacing: 0.13em; } body.ui-pack-wow .sidebar-nav li a, body.ui-pack-wow .sidebar-admin-link { margin: 2px 0.7rem; border-radius: 12px; padding: 0.58rem 0.95rem; transition: background var(--duration), color var(--duration), border-color var(--duration); } body.ui-pack-wow .sidebar-nav li a:hover, body.ui-pack-wow .sidebar-admin-link:hover { transform: none; } body.ui-pack-wow .sidebar-nav li a.active, body.ui-pack-wow .sidebar-admin-link.active { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(151, 170, 255, 0.14); } body.ui-pack-wow .sidebar-nav li a.active::before, body.ui-pack-wow .sidebar-admin-link.active::before { left: -0.7rem; width: 4px; height: 24px; background: var(--primary); } body.ui-pack-wow #header { height: 64px; border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent); box-shadow: none; background: var(--bg-header); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.ui-pack-wow .header-search { max-width: 520px; border-radius: 14px; border-color: color-mix(in srgb, var(--border) 92%, transparent); background: var(--bg-card); } body.ui-pack-wow .header-search:focus-within { border-color: var(--primary-300); box-shadow: 0 0 0 4px rgba(52, 80, 242, 0.12); } body.ui-pack-wow .theme-toggle { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } body.ui-pack-wow[data-theme="dark"] .theme-toggle { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } body.ui-pack-wow .card, body.ui-pack-wow .stat-card { border-radius: 18px; border-color: color-mix(in srgb, var(--border) 90%, transparent); box-shadow: var(--shadow-sm); } body.ui-pack-wow .card { position: relative; overflow: hidden; background: var(--bg-card); backdrop-filter: none; -webkit-backdrop-filter: none; } body.ui-pack-wow .card::before { content: none; } body.ui-pack-wow .card:hover, body.ui-pack-wow .stat-card:hover { transform: none; box-shadow: var(--shadow-sm); } body.ui-pack-wow .stat-card { padding: 1.1rem 1.2rem; } body.ui-pack-wow .stat-card .stat-value { font-size: var(--font-size-md); line-height: 1.25; letter-spacing: 0; } body.ui-pack-wow .page-filters { border-radius: 14px; border-color: color-mix(in srgb, var(--border) 92%, transparent); padding: 0.65rem 0.85rem; gap: 0.55rem; background: var(--bg-card); box-shadow: var(--shadow-xs); } body.ui-pack-wow .page-filters input, body.ui-pack-wow .page-filters select { min-height: 38px; border-radius: 12px; border-color: color-mix(in srgb, var(--border) 92%, transparent); background: color-mix(in srgb, var(--bg-card) 96%, transparent); } body.ui-pack-wow .btn { min-height: 38px; border-radius: 14px; font-weight: 700; letter-spacing: -0.01em; } body.ui-pack-wow .btn-primary { background: var(--primary); border-color: var(--primary); } body.ui-pack-wow .btn-primary:hover:not(:disabled) { background: var(--primary-hover); } body.ui-pack-wow .btn-success { background: var(--success); border-color: var(--success); } body.ui-pack-wow .btn-danger { background: var(--danger); } body.ui-pack-wow .btn-icon { border-radius: 10px; } body.ui-pack-wow .table-wrapper { border-radius: 18px; border-color: color-mix(in srgb, var(--border) 92%, transparent); box-shadow: none; } body.ui-pack-wow .data-table { font-size: 0.82rem; border: none; } body.ui-pack-wow .data-table thead { background: #fbfcfe; border-bottom: 1px solid color-mix(in srgb, var(--border) 92%, transparent); } body.ui-pack-wow .data-table th { padding: 0.62rem 0.82rem; font-size: 0.63rem; letter-spacing: 0.09em; } body.ui-pack-wow .data-table td { padding: 0.53rem 0.82rem; border-top-color: color-mix(in srgb, var(--border-light) 92%, transparent); } body.ui-pack-wow .data-table.compact th, body.ui-pack-wow .data-table.compact td { padding: 0.42rem 0.66rem; } body.ui-pack-wow .data-table tbody tr:nth-child(even) { background: rgba(17, 24, 39, 0.012); } body.ui-pack-wow .data-table tbody tr:hover { background: rgba(17, 24, 39, 0.035); } body.ui-pack-wow .badge { border-radius: 999px; font-weight: 700; } body.ui-pack-wow .pagination button { border-radius: 12px; border-color: color-mix(in srgb, var(--border) 92%, transparent); } body.ui-pack-wow .pagination button.active { background: var(--primary); border-color: var(--primary); } body.ui-pack-wow .tabs { border-bottom-color: color-mix(in srgb, var(--border) 92%, transparent); } body.ui-pack-wow .tab { border-radius: 10px 10px 0 0; padding: 0.68rem 1.1rem; } body.ui-pack-wow .tab.active { color: var(--text); background: var(--slate-100); } body.ui-pack-wow[data-theme="dark"] .tab.active { color: var(--text); background: var(--bg-card); border-color: var(--border-strong); border-bottom-color: var(--bg-card); } body.ui-pack-wow .tab.active::after { height: 3px; border-radius: 3px 3px 0 0; } body.ui-pack-wow .modal-overlay { background: rgba(2, 6, 23, 0.38); backdrop-filter: blur(8px) saturate(1.15); } body.ui-pack-wow .modal { border-radius: 20px; border-color: color-mix(in srgb, var(--border) 92%, transparent); box-shadow: 0 28px 56px rgba(2, 6, 23, 0.28); } body.ui-pack-wow .modal-header { padding-top: 1rem; padding-bottom: 1rem; } body.ui-pack-wow .modal-footer { background: color-mix(in srgb, var(--bg-elevated) 96%, transparent); } body.ui-pack-wow[data-theme="light"] #sidebar::after { display: none; } body.ui-pack-wow[data-theme="light"] #sidebar { color: rgba(255, 255, 255, 0.92); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04); } body.ui-pack-wow[data-theme="light"] .sidebar-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } body.ui-pack-wow[data-theme="light"] .sidebar-logo { color: #ffffff; } body.ui-pack-wow[data-theme="light"] .sidebar-logo-sub { color: rgba(255, 255, 255, 0.46); } body.ui-pack-wow[data-theme="light"] .sidebar-section { color: rgba(255, 255, 255, 0.34); } body.ui-pack-wow[data-theme="light"] .sidebar-nav li a, body.ui-pack-wow[data-theme="light"] .sidebar-admin-link { color: rgba(255, 255, 255, 0.72); margin: 2px 0.5rem; border: 1px solid transparent; } body.ui-pack-wow[data-theme="light"] .sidebar-nav li a:hover, body.ui-pack-wow[data-theme="light"] .sidebar-admin-link:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } body.ui-pack-wow[data-theme="light"] .sidebar-nav li a.active, body.ui-pack-wow[data-theme="light"] .sidebar-admin-link.active { background: rgba(255, 255, 255, 0.12); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } body.ui-pack-wow[data-theme="light"] .sidebar-nav li a.active::before, body.ui-pack-wow[data-theme="light"] .sidebar-admin-link.active::before { display: block; left: -0.5rem; width: 3px; height: 20px; background: #ffffff; } body.ui-pack-wow[data-theme="light"] .sidebar-nav li a svg, body.ui-pack-wow[data-theme="light"] .sidebar-admin-link svg { opacity: 0.82; } body.ui-pack-wow[data-theme="light"] .sidebar-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); } body.ui-pack-wow #content > * { animation: wow-page-in 0.42s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes wow-page-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } body.ui-pack-wow .status-bar { height: 12px; border-radius: 999px; } body.ui-pack-wow .status-bar-segment { border-radius: 2px; } body.ui-pack-wow .timeline-item { border-bottom-color: color-mix(in srgb, var(--border-light) 92%, transparent); } body.ui-pack-wow .empty-state { border: 1px dashed color-mix(in srgb, var(--border-strong) 82%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--surface-glass) 94%, transparent); } body.ui-pack-wow .loading { border: 1px dashed color-mix(in srgb, var(--border-strong) 82%, transparent); border-radius: 16px; } @media (max-width: 1280px) { body.ui-pack-wow #header { padding-left: 1.2rem; padding-right: 1.2rem; } } @media (max-width: 768px) { body.ui-pack-wow #content { padding-top: 1.15rem; } body.ui-pack-wow .page-header h1 { font-size: 1.45rem; } body.ui-pack-wow .table-wrapper { border-radius: 12px; } body.ui-pack-wow .page-filters { padding: 0.58rem 0.62rem; } body.ui-pack-wow .card, body.ui-pack-wow .stat-card { border-radius: 14px; } body.ui-pack-wow .card { overflow-x: auto; overflow-y: visible; } } @media (prefers-reduced-motion: reduce) { body.ui-pack-wow #content > * { animation: none !important; } }