/* ============================================ SKLAD-BUMAGA — UI WOW Package Separate visual package (opt-in by body class) Disable by removing `ui-pack-wow` from ============================================ */ body.ui-pack-wow { --font-display: 'Lexend', 'Manrope', system-ui, sans-serif; --font: 'Source Sans 3', 'DM Sans', system-ui, sans-serif; --primary-50: #edf3ff; --primary-100: #dce8ff; --primary-200: #bdd5ff; --primary-300: #8bb8ff; --primary-400: #4a93ff; --primary-500: #1d74ff; --primary-600: #0b63f6; --primary-700: #0051d1; --primary-800: #0643a6; --primary-900: #083885; --primary: #0b63f6; --primary-hover: #0051d1; --primary-ghost: rgba(11, 99, 246, 0.1); --accent: #ea580c; --accent-hover: #c2410c; --accent-light: #ffedd5; --bg: #f3f7fd; --bg-card: #ffffff; --bg-elevated: #f8fbff; --bg-header: #ffffff; --bg-sidebar: #0f172a; --text: #0b1220; --text-secondary: #334155; --text-muted: #64748b; --border: #d8e1ee; --border-light: #eaf0f8; --border-strong: #9fb0c8; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-xl: 22px; --shadow-xs: 0 1px 3px rgba(9, 23, 48, 0.05); --shadow-sm: 0 4px 12px rgba(9, 23, 48, 0.08); --shadow: 0 8px 20px rgba(9, 23, 48, 0.1); --shadow-md: 0 14px 30px rgba(9, 23, 48, 0.12); --shadow-lg: 0 18px 42px rgba(9, 23, 48, 0.15); --shadow-xl: 0 28px 56px rgba(9, 23, 48, 0.2); --shadow-primary: 0 10px 24px rgba(11, 99, 246, 0.34); --shadow-danger: 0 10px 24px rgba(220, 38, 38, 0.22); } body.ui-pack-wow { background: 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: 1.35rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } body.ui-pack-wow #sidebar { border-right: 1px solid rgba(148, 163, 184, 0.18); 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: transform var(--duration-fast), background var(--duration), color var(--duration); } body.ui-pack-wow .sidebar-nav li a:hover, body.ui-pack-wow .sidebar-admin-link:hover { transform: translateX(2px); } 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: none; } 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-400); } body.ui-pack-wow #header { height: 64px; border-bottom: 1px solid rgba(159, 176, 200, 0.35); box-shadow: none; background: var(--bg-header); } body.ui-pack-wow .header-search { max-width: 520px; border-radius: 12px; border-color: #cfdaea; background: rgba(248, 251, 255, 0.96); } body.ui-pack-wow .header-search:focus-within { border-color: var(--primary-300); box-shadow: 0 0 0 4px rgba(11, 99, 246, 0.14); } body.ui-pack-wow .card, body.ui-pack-wow .stat-card { border-radius: 10px; border-color: #dce4ef; box-shadow: var(--shadow-xs); } body.ui-pack-wow .card { position: relative; overflow: hidden; } body.ui-pack-wow .card::before { display: none; } body.ui-pack-wow .card::before, body.ui-pack-wow .stat-card::before { display: 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 .card-header { margin-bottom: 0.85rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border-light); } body.ui-pack-wow .card-title { font-size: 0.9rem; font-weight: 600; letter-spacing: 0; } body.ui-pack-wow .stat-card { padding: 0.9rem 1rem; } body.ui-pack-wow .stat-card .stat-icon { width: 34px; height: 34px; margin-bottom: 0.55rem; } body.ui-pack-wow .stat-card .stat-label { font-size: 0.68rem; letter-spacing: 0.04em; } body.ui-pack-wow .stat-card .stat-value { font-size: 1.05rem; font-weight: 700; letter-spacing: 0; line-height: 1.25; } body.ui-pack-wow .stat-card .stat-sub { margin-top: 0.3rem; } body.ui-pack-wow .page-filters { border-radius: 8px; border-color: var(--border); padding: 0.55rem 0.7rem; gap: 0.5rem; background: var(--bg-card); box-shadow: none; } body.ui-pack-wow input[type="text"], body.ui-pack-wow input[type="email"], body.ui-pack-wow input[type="password"], body.ui-pack-wow input[type="number"], body.ui-pack-wow input[type="date"], body.ui-pack-wow input[type="search"], body.ui-pack-wow input[type="tel"], body.ui-pack-wow input[type="url"], body.ui-pack-wow textarea, body.ui-pack-wow select { min-height: 34px; padding: 0.45rem 0.7rem; border-width: 1px; border-radius: 8px; border-color: var(--border); background: var(--bg-card); box-shadow: none; } body.ui-pack-wow input:focus, body.ui-pack-wow textarea:focus, body.ui-pack-wow select:focus { border-color: var(--primary-400); box-shadow: 0 0 0 2px var(--primary-ghost); } body.ui-pack-wow .page-filters input, body.ui-pack-wow .page-filters select { min-height: 34px; } body.ui-pack-wow .btn { min-height: 34px; border-width: 1px; border-radius: 8px; font-weight: 600; letter-spacing: 0; box-shadow: none; } body.ui-pack-wow .btn-primary { background: var(--primary); border-color: var(--primary); box-shadow: none; } body.ui-pack-wow .btn-primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: none; } body.ui-pack-wow .btn-success { background: var(--success); border-color: var(--success); } body.ui-pack-wow .btn-success:hover:not(:disabled) { background: #047857; border-color: #047857; } body.ui-pack-wow .btn-danger { background: var(--danger); border-color: var(--danger); box-shadow: none; } body.ui-pack-wow .btn-danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; box-shadow: none; } body.ui-pack-wow .btn-warning { background: var(--warning); border-color: var(--warning); } body.ui-pack-wow .btn-icon { border-radius: 8px; } body.ui-pack-wow .table-wrapper { border-radius: 8px; border-color: var(--border); box-shadow: none; } body.ui-pack-wow .data-table { font-size: 0.82rem; border: none; } body.ui-pack-wow .data-table thead { background: var(--slate-50); border-bottom: 1px solid var(--border); } body.ui-pack-wow .data-table th { padding: 0.58rem 0.75rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); } body.ui-pack-wow .data-table td { padding: 0.5rem 0.75rem; border-top-color: var(--border-light); } body.ui-pack-wow .data-table.compact th, body.ui-pack-wow .data-table.compact td { padding: 0.4rem 0.6rem; } body.ui-pack-wow .data-table tbody tr:nth-child(even) { background: var(--slate-25); } body.ui-pack-wow .data-table tbody tr:hover { background: var(--slate-50); } body.ui-pack-wow .badge { border-radius: 999px; font-weight: 700; } body.ui-pack-wow .pagination button { border-radius: 10px; border-color: #d0dceb; } body.ui-pack-wow .pagination button.active { background: linear-gradient(135deg, #1d74ff 0%, #0b63f6 100%); border-color: #0b63f6; } body.ui-pack-wow .tabs { border-bottom-color: #d8e2ee; } body.ui-pack-wow .tab { border-radius: 10px 10px 0 0; padding: 0.68rem 1.1rem; } body.ui-pack-wow .tab.active { color: var(--primary-700); background: rgba(219, 234, 254, 0.65); } 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.42); } body.ui-pack-wow .modal { border-radius: 10px; border-color: var(--border); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18); } body.ui-pack-wow .modal-header { background: var(--bg-card); } body.ui-pack-wow .modal-footer { background: var(--bg-card); } body.ui-pack-wow .modal .table-wrapper { border-radius: 8px; box-shadow: none; } 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: #e5edf8; } body.ui-pack-wow .empty-state { border: 1px dashed #cdd9ea; border-radius: 16px; background: rgba(255, 255, 255, 0.72); } body.ui-pack-wow .loading { border: 1px dashed #d3dfef; border-radius: 14px; } body.ui-pack-wow[data-theme="dark"] { --font-display: 'Lexend', 'Manrope', system-ui, sans-serif; --font: 'Source Sans 3', 'DM Sans', system-ui, sans-serif; --primary-50: #091324; --primary-100: #0d1a2f; --primary-200: #173056; --primary-300: #24518a; --primary-400: #4e8fd7; --primary-500: #60a5fa; --primary-600: #3b82f6; --primary-700: #93c5fd; --primary-800: #bfdbfe; --primary-900: #dbeafe; --primary: #60a5fa; --primary-hover: #93c5fd; --primary-ghost: rgba(96, 165, 250, 0.16); --accent: #fb923c; --accent-hover: #fdba74; --accent-light: rgba(251, 146, 60, 0.18); --bg: #07111f; --bg-card: #0d1829; --bg-elevated: #122036; --bg-header: #07111f; --bg-sidebar: #020617; --text: #e5eefb; --text-secondary: #c6d4e6; --text-muted: #8fa3bb; --border: #20324b; --border-light: #172437; --border-strong: #47607d; --shadow-xs: 0 1px 3px rgba(2, 6, 23, 0.42); --shadow-sm: 0 6px 16px rgba(2, 6, 23, 0.42); --shadow: 0 10px 24px rgba(2, 6, 23, 0.5); --shadow-md: 0 16px 34px rgba(2, 6, 23, 0.56); --shadow-lg: 0 22px 46px rgba(2, 6, 23, 0.62); --shadow-xl: 0 30px 60px rgba(2, 6, 23, 0.7); --shadow-primary: 0 10px 24px rgba(96, 165, 250, 0.22); --shadow-danger: 0 10px 24px rgba(248, 113, 113, 0.22); } body.ui-pack-wow[data-theme="dark"] { background: var(--bg); } body.ui-pack-wow[data-theme="dark"] .page-header h1 { color: var(--text); } body.ui-pack-wow[data-theme="dark"] #sidebar { border-right-color: rgba(148, 163, 184, 0.12); box-shadow: none; } body.ui-pack-wow[data-theme="dark"] #header { border-bottom-color: rgba(71, 96, 125, 0.4); box-shadow: none; background: var(--bg-header); } body.ui-pack-wow[data-theme="dark"] .header-search { border-color: #233550; background: rgba(18, 32, 54, 0.92); } body.ui-pack-wow[data-theme="dark"] .header-search:focus-within { box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16); } body.ui-pack-wow[data-theme="dark"] .card, body.ui-pack-wow[data-theme="dark"] .stat-card { border-color: #20324b; background: var(--bg-card); } body.ui-pack-wow[data-theme="dark"] .page-filters { border-color: #243852; background: var(--bg-card); box-shadow: none; } body.ui-pack-wow[data-theme="dark"] .page-filters input, body.ui-pack-wow[data-theme="dark"] .page-filters select { border-color: #2a405c; background: #122036; color: var(--text); } body.ui-pack-wow[data-theme="dark"] .table-wrapper { border-color: #21344d; background: rgba(13, 24, 41, 0.94); box-shadow: 0 12px 28px rgba(2, 6, 23, 0.34); } body.ui-pack-wow[data-theme="dark"] .data-table thead { background: linear-gradient(180deg, #122036 0%, #17273f 100%); border-bottom-color: #243852; } body.ui-pack-wow[data-theme="dark"] .data-table td { border-top-color: #1c2d44; } body.ui-pack-wow[data-theme="dark"] .data-table tbody tr:nth-child(even) { background: rgba(19, 34, 56, 0.58); } body.ui-pack-wow[data-theme="dark"] .data-table tbody tr:hover { background: rgba(37, 99, 235, 0.18); } body.ui-pack-wow[data-theme="dark"] .pagination button { border-color: #29405b; background: #122036; } body.ui-pack-wow[data-theme="dark"] .tabs { border-bottom-color: #22354f; } body.ui-pack-wow[data-theme="dark"] .tab.active { color: var(--primary-800); background: rgba(96, 165, 250, 0.16); } body.ui-pack-wow[data-theme="dark"] .modal { border-color: #21354f; background: #0d1829; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42); } body.ui-pack-wow[data-theme="dark"] .modal-footer { background: #0d1829; } body.ui-pack-wow[data-theme="dark"] .empty-state { border-color: #29405b; background: rgba(18, 32, 54, 0.72); } body.ui-pack-wow[data-theme="dark"] .loading { border-color: #29405b; } @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.25rem; } 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: 10px; } } @media (prefers-reduced-motion: reduce) { body.ui-pack-wow #content > * { animation: none !important; } }