/* ============================================ 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: rgba(255, 255, 255, 0.82); --bg-sidebar: linear-gradient(180deg, #0f172a 0%, #14223e 60%, #1e293b 100%); --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: radial-gradient(1200px 500px at 100% -100px, rgba(11, 99, 246, 0.13), transparent 62%), radial-gradient(900px 420px at -120px 120px, rgba(234, 88, 12, 0.08), transparent 58%), 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: #0f172a; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { body.ui-pack-wow .page-header h1 { background: linear-gradient(105deg, #0f172a 10%, #0b63f6 56%, #ea580c 120%); -webkit-background-clip: text; background-clip: text; color: transparent; } } body.ui-pack-wow #sidebar { border-right: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 8px 0 22px rgba(2, 6, 23, 0.26); } 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: linear-gradient(90deg, rgba(11, 99, 246, 0.32), rgba(11, 99, 246, 0.18)); box-shadow: inset 0 0 0 1px rgba(125, 175, 255, 0.24); } 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: linear-gradient(180deg, #60a5fa, #1d74ff); } body.ui-pack-wow #header { height: 64px; border-bottom: 1px solid rgba(159, 176, 200, 0.35); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.76)); backdrop-filter: blur(14px) saturate(1.2); } 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: 18px; border-color: #d6dfec; box-shadow: var(--shadow-sm); } body.ui-pack-wow .card { position: relative; overflow: hidden; } body.ui-pack-wow .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-400), var(--accent)); opacity: 0.75; } body.ui-pack-wow .card:hover, body.ui-pack-wow .stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); } body.ui-pack-wow .stat-card { padding: 1.1rem 1.2rem; } body.ui-pack-wow .stat-card .stat-value { font-size: clamp(1.35rem, 2vw, 1.9rem); letter-spacing: -0.03em; } body.ui-pack-wow .page-filters { border-radius: 14px; border-color: #d4e0ee; padding: 0.65rem 0.85rem; gap: 0.55rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.86)); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07); } body.ui-pack-wow .page-filters input, body.ui-pack-wow .page-filters select { min-height: 38px; border-radius: 10px; border-color: #cfdbea; background: #ffffff; } body.ui-pack-wow .btn { min-height: 38px; border-radius: 11px; font-weight: 700; letter-spacing: -0.01em; } body.ui-pack-wow .btn-primary { background: linear-gradient(135deg, #1d74ff 0%, #0b63f6 58%, #0051d1 100%); border-color: #0b63f6; } body.ui-pack-wow .btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #0b63f6 0%, #005ce4 100%); } body.ui-pack-wow .btn-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-color: #059669; } body.ui-pack-wow .btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } body.ui-pack-wow .btn-icon { border-radius: 10px; } body.ui-pack-wow .table-wrapper { border-radius: 16px; border-color: #d3deed; box-shadow: 0 10px 24px rgba(9, 23, 48, 0.08); } body.ui-pack-wow .data-table { font-size: 0.82rem; border: none; } body.ui-pack-wow .data-table thead { background: linear-gradient(180deg, #f8fbff 0%, #eef4fc 100%); border-bottom: 1px solid #d8e2f0; } 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: #e8eff8; } 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(237, 245, 255, 0.45); } body.ui-pack-wow .data-table tbody tr:hover { background: rgba(219, 234, 254, 0.6); } 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.38); backdrop-filter: blur(8px) saturate(1.15); } body.ui-pack-wow .modal { border-radius: 20px; border-color: #d5dfed; 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: #f5f9ff; } 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: rgba(7, 17, 31, 0.84); --bg-sidebar: linear-gradient(180deg, #020617 0%, #0b1527 55%, #132238 100%); --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: radial-gradient(1200px 520px at 100% -100px, rgba(37, 99, 235, 0.18), transparent 64%), radial-gradient(900px 420px at -120px 120px, rgba(249, 115, 22, 0.1), transparent 58%), var(--bg); } body.ui-pack-wow[data-theme="dark"] .page-header h1 { color: var(--text); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { body.ui-pack-wow[data-theme="dark"] .page-header h1 { background: linear-gradient(105deg, #f8fbff 10%, #60a5fa 60%, #fb923c 118%); -webkit-background-clip: text; background-clip: text; color: transparent; } } body.ui-pack-wow[data-theme="dark"] #sidebar { border-right-color: rgba(148, 163, 184, 0.12); box-shadow: 8px 0 24px rgba(2, 6, 23, 0.5); } body.ui-pack-wow[data-theme="dark"] #header { border-bottom-color: rgba(71, 96, 125, 0.4); box-shadow: 0 10px 28px rgba(2, 6, 23, 0.42); background: linear-gradient(180deg, rgba(12, 23, 39, 0.94), rgba(7, 17, 31, 0.82)); } 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: linear-gradient(180deg, rgba(13, 24, 41, 0.98), rgba(18, 32, 54, 0.96)); } body.ui-pack-wow[data-theme="dark"] .page-filters { border-color: #243852; background: linear-gradient(180deg, rgba(13, 24, 41, 0.96), rgba(18, 32, 54, 0.9)); box-shadow: 0 8px 18px rgba(2, 6, 23, 0.34); } 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 28px 56px rgba(2, 6, 23, 0.52); } body.ui-pack-wow[data-theme="dark"] .modal-footer { background: #122036; } 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.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; } } @media (prefers-reduced-motion: reduce) { body.ui-pack-wow #content > * { animation: none !important; } }