/* Importer v3 — tokeny motywu (jasny / ciemny), data-theme na */ :root { color-scheme: light; --v3-bg-page: #f6f7fb; --v3-text: #1f2937; --v3-text-heading: #0f172a; --v3-muted: #6b7280; --v3-muted-2: #94a3b8; --v3-label: #334155; --v3-label-2: #475569; --v3-sidebar-border: #ddd6fe; --v3-sidebar-grad-1: rgba(243, 238, 255, 0.98); --v3-sidebar-grad-2: rgba(236, 231, 255, 0.96); --v3-menu: #312e81; --v3-menu-hover: rgba(255, 255, 255, 0.68); --v3-menu-active-1: #efe7ff; --v3-menu-active-2: #e3ddff; --v3-menu-active-ring: #c4b5fd; --v3-glass-92: rgba(255, 255, 255, 0.92); --v3-glass-86: rgba(255, 255, 255, 0.86); --v3-glass-82: rgba(255, 255, 255, 0.82); --v3-glass-80: rgba(255, 255, 255, 0.8); --v3-glass-68: rgba(255, 255, 255, 0.68); --v3-operator-border: #e9ddff; --v3-border: #e7eaf1; --v3-border-2: #edf2f7; --v3-border-3: #eef2ff; --v3-border-input: #d9dfeb; --v3-border-d7: #d7dce8; --v3-border-e5: #e5e7eb; --v3-border-e7: #e7edf5; --v3-surface: #ffffff; --v3-surface-soft: #fafcff; --v3-surface-soft-2: #f8fafc; --v3-surface-f3: #f3f4f6; --v3-table-head: #f9fafb; --v3-focus: #93c5fd; --v3-focus-ring: rgba(59, 130, 246, 0.1); --v3-btn-text: #111827; --v3-flash-s-bg: #ecfdf3; --v3-flash-s-fg: #027a48; --v3-flash-s-bd: #abefc6; --v3-flash-e-bg: #fff1f2; --v3-flash-e-fg: #be123c; --v3-flash-e-bd: #fecdd3; --v3-switch-off: #e5e7eb; --v3-switch-knob: #ffffff; --v3-switch-on: #8b5cf6; --v3-dot-off: #d1d5db; --v3-link: #2563eb; --v3-pastel-blue-bg: #e8f1ff; --v3-pastel-blue-fg: #285ea8; --v3-pastel-green-bg: #ebfaef; --v3-pastel-green-fg: #237a3d; --v3-status-yellow-bg: #fff7ed; --v3-status-yellow-fg: #c2410c; --v3-status-yellow-bd: #fed7aa; --v3-status-blue-bg: #eff6ff; --v3-status-blue-fg: #1d4ed8; --v3-status-blue-bd: #bfdbfe; --v3-status-gray-bg: #f3f4f6; --v3-status-gray-fg: #4b5563; --v3-status-gray-bd: #d1d5db; --v3-progress-track: #edf2f7; --v3-danger-zone: linear-gradient(180deg, rgba(255, 241, 242, 0.75), rgba(255, 255, 255, 0.94)); --v3-code-bg: #eef2ff; --v3-counter-1: #f8fbff; --v3-counter-2: #eef4ff; --v3-counter-bd: #d9e6ff; --v3-counter-icon: #ffffff; --v3-counter-icon-ring: #dbeafe; --v3-img-del-bg: #fff5f5; --v3-img-del-bd: #fecaca; --v3-img-del-fg: #dc2626; --v3-settings-local-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, rgba(255, 255, 255, 0.92) 100%); --v3-settings-shopify-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, rgba(255, 255, 255, 0.92) 100%); --v3-settings-local-bd: rgba(96, 165, 250, 0.2); --v3-settings-shopify-bd: rgba(74, 222, 128, 0.2); --v3-row-hover: rgba(99, 102, 241, 0.03); --v3-row-sel-1: rgba(129, 140, 248, 0.1); --v3-row-sel-2: rgba(129, 140, 248, 0.06); --v3-row-sel-ring: rgba(129, 140, 248, 0.22); --v3-counter-strong: #1d4ed8; --v3-card-shadow: 0 14px 40px rgba(15, 23, 42, 0.05); --v3-card-shadow-hover: 0 18px 42px rgba(15, 23, 42, 0.08); --v3-card-shadow-2: 0 14px 34px rgba(15, 23, 42, 0.08); --v3-sidebar-logout-border: rgba(148, 163, 184, 0.14); --v3-image-preview-bg: #ffffff; --v3-loader-card: rgba(255, 255, 255, 0.9); --v3-loader-card-bd: rgba(148, 163, 184, 0.18); --v3-loader-text: #334155; --v3-on-dark: #ffffff; } html[data-theme="dark"] { color-scheme: dark; --v3-bg-page: #0a0f1c; --v3-text: #e2e8f0; --v3-text-heading: #f8fafc; --v3-muted: #94a3b8; --v3-muted-2: #64748b; --v3-label: #cbd5e1; --v3-label-2: #94a3b8; --v3-sidebar-border: #334155; --v3-sidebar-grad-1: #111827; --v3-sidebar-grad-2: #0f172a; --v3-menu: #c4b5fd; --v3-menu-hover: rgba(30, 41, 59, 0.75); --v3-menu-active-1: #1e293b; --v3-menu-active-2: #312e81; --v3-menu-active-ring: #6366f1; --v3-glass-92: rgba(15, 23, 42, 0.92); --v3-glass-86: rgba(17, 24, 39, 0.9); --v3-glass-82: rgba(17, 24, 39, 0.88); --v3-glass-80: rgba(30, 41, 59, 0.88); --v3-glass-68: rgba(30, 41, 59, 0.72); --v3-operator-border: #475569; --v3-border: #334155; --v3-border-2: #1e293b; --v3-border-3: #334155; --v3-border-input: #475569; --v3-border-d7: #475569; --v3-border-e5: #475569; --v3-border-e7: #334155; --v3-surface: #1e293b; --v3-surface-soft: #1e293b; --v3-surface-soft-2: #0f172a; --v3-surface-f3: #334155; --v3-table-head: #0f172a; --v3-focus: #818cf8; --v3-focus-ring: rgba(99, 102, 241, 0.22); --v3-btn-text: #f1f5f9; --v3-flash-s-bg: #052e16; --v3-flash-s-fg: #6ee7b7; --v3-flash-s-bd: #166534; --v3-flash-e-bg: #450a0a; --v3-flash-e-fg: #fca5a5; --v3-flash-e-bd: #991b1b; --v3-switch-off: #334155; --v3-switch-knob: #e2e8f0; --v3-switch-on: #7c3aed; --v3-dot-off: #475569; --v3-link: #93c5fd; --v3-pastel-blue-bg: #172554; --v3-pastel-blue-fg: #bfdbfe; --v3-pastel-green-bg: #14532d; --v3-pastel-green-fg: #bbf7d0; --v3-status-yellow-bg: #422006; --v3-status-yellow-fg: #fdba74; --v3-status-yellow-bd: #9a3412; --v3-status-blue-bg: #172554; --v3-status-blue-fg: #93c5fd; --v3-status-blue-bd: #1e40af; --v3-status-gray-bg: #1e293b; --v3-status-gray-fg: #cbd5e1; --v3-status-gray-bd: #475569; --v3-progress-track: #334155; --v3-danger-zone: linear-gradient(180deg, rgba(127, 29, 29, 0.35), rgba(15, 23, 42, 0.96)); --v3-code-bg: #312e81; --v3-counter-1: #172554; --v3-counter-2: #1e3a5f; --v3-counter-bd: #1e40af; --v3-counter-icon: #1e293b; --v3-counter-icon-ring: #334155; --v3-img-del-bg: #450a0a; --v3-img-del-bd: #7f1d1d; --v3-img-del-fg: #fecaca; --v3-settings-local-bg: linear-gradient(180deg, rgba(59, 130, 246, 0.12) 0%, rgba(15, 23, 42, 0.94) 100%); --v3-settings-shopify-bg: linear-gradient(180deg, rgba(34, 197, 94, 0.1) 0%, rgba(15, 23, 42, 0.94) 100%); --v3-settings-local-bd: rgba(59, 130, 246, 0.4); --v3-settings-shopify-bd: rgba(34, 197, 94, 0.4); --v3-row-hover: rgba(129, 140, 248, 0.1); --v3-row-sel-1: rgba(129, 140, 248, 0.18); --v3-row-sel-2: rgba(129, 140, 248, 0.1); --v3-row-sel-ring: rgba(165, 180, 252, 0.35); --v3-counter-strong: #93c5fd; --v3-card-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); --v3-card-shadow-hover: 0 18px 42px rgba(0, 0, 0, 0.45); --v3-card-shadow-2: 0 14px 34px rgba(0, 0, 0, 0.4); --v3-sidebar-logout-border: rgba(71, 85, 105, 0.5); --v3-image-preview-bg: #1e293b; --v3-loader-card: rgba(15, 23, 42, 0.94); --v3-loader-card-bd: rgba(71, 85, 105, 0.5); --v3-loader-text: #cbd5e1; --v3-on-dark: #f8fafc; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: Inter, Arial, sans-serif; background: var(--v3-bg-page); color: var(--v3-text); } .topbar h1, .card-head h2, .subcard-head h3 { color: var(--v3-text-heading); } a { color: inherit; text-decoration: none; } .app-shell { display: flex; min-height: 100vh; } .mobile-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.34); opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 45; } .mobile-backdrop.open { opacity: 1; pointer-events: auto; } .mobile-menu-open { position: fixed; top: 14px; left: 14px; width: 48px; height: 48px; border-radius: 16px; border: 1px solid var(--v3-sidebar-border); background: var(--v3-glass-92); box-shadow: 0 14px 30px rgba(15,23,42,.12); display: none; align-items: center; justify-content: center; z-index: 60; cursor: pointer; color: var(--v3-menu); font-size: 22px; } .mobile-menu-open:hover { transform: translateY(-1px); } .sidebar { width: 272px; background: linear-gradient(180deg, var(--v3-sidebar-grad-1), var(--v3-sidebar-grad-2)); border-right: 1px solid var(--v3-sidebar-border); padding: 16px; position: sticky; top: 0; height: 100vh; overflow: auto; transition: transform .25s ease, width .25s ease, box-shadow .25s ease; } .sidebar.collapsed { width: 92px; } .sidebar-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .sidebar-toggle { border: 1px solid var(--v3-sidebar-border); width: 44px; height: 44px; border-radius: 14px; background: var(--v3-glass-80); cursor: pointer; } .operator-card { background: var(--v3-glass-82); border: 1px solid var(--v3-operator-border); border-radius: 24px; padding: 14px 12px; min-height: 88px; display: flex; justify-content: center; align-items: center; margin-bottom: 18px; box-shadow: 0 12px 30px rgba(109,80,190,.08); } .operator-logo { max-width: 100%; max-height: 64px; object-fit: contain; } .menu { display: flex; flex-direction: column; gap: 8px; } .menu-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 18px; color: var(--v3-menu); font-weight: 600; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .menu-item:hover { background: var(--v3-menu-hover); transform: translateY(-1px); } .menu-item.active { background: linear-gradient(135deg, var(--v3-menu-active-1), var(--v3-menu-active-2)); box-shadow: inset 0 0 0 1px var(--v3-menu-active-ring), 0 8px 24px rgba(139,92,246,.12); } .menu-icon { min-width: 40px; width: 40px; text-align: center; font-size: 32px !important; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .menu-item .menu-icon, .menu-item .menu-icon i, .menu-item .menu-icon svg { font-size: 32px !important; width: 32px; height: 32px; } .sidebar.collapsed .menu-label, .sidebar.collapsed .operator-card { display: none; } .sidebar.collapsed .menu-item { justify-content: center; } .content { flex: 1; padding: 28px; min-width: 0; } .topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .topbar h1 { margin: 0; font-size: 32px; font-weight: 800; } .topbar-sub { margin: 6px 0 0; color: var(--v3-muted); max-width: 760px; } .dashboard-top-gif { height: 39px; width: auto; object-fit: contain; align-self: flex-start; } .flash-wrap { margin-bottom: 18px; } .flash { padding: 14px 16px; border-radius: 16px; margin-bottom: 10px; font-weight: 600; } .flash.success { background: var(--v3-flash-s-bg); color: var(--v3-flash-s-fg); border: 1px solid var(--v3-flash-s-bd); } .flash.error { background: var(--v3-flash-e-bg); color: var(--v3-flash-e-fg); border: 1px solid var(--v3-flash-e-bd); } .flash.info { background: rgba(59, 130, 246, 0.12); color: var(--v3-text-heading); border: 1px solid rgba(59, 130, 246, 0.28); } html[data-theme="dark"] .flash.info { background: rgba(59, 130, 246, 0.18); color: #e2e8f0; border-color: rgba(96, 165, 250, 0.35); } .card { background: var(--v3-glass-86); backdrop-filter: blur(12px); border: 1px solid var(--v3-border); border-radius: 26px; padding: 22px; box-shadow: var(--v3-card-shadow); margin-bottom: 20px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover { transform: translateY(-2px); box-shadow: var(--v3-card-shadow-hover); } .compact-card { padding: 16px 18px; } .sticky-actions { position: sticky; top: 12px; z-index: 10; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; margin-bottom: 20px; } .hero-card { min-height: 100%; } /* Pulpit: nie rozciągaj lewej karty do wysokości „Lampki” (usuwa puste białe pole) */ .dashboard-page .hero-grid { align-items: start; } .dashboard-page .hero-grid > .hero-card { min-height: 0 !important; height: auto; } .hero-title { font-size: 18px; font-weight: 800; margin-bottom: 14px; } .hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .hero-stat, .summary-pill { background: var(--v3-surface-soft); border: 1px solid var(--v3-border-2); border-radius: 16px; padding: 14px; } .hero-stat span, .summary-pill span { display: block; font-size: 12px; color: var(--v3-muted); margin-bottom: 6px; } .hero-stat strong, .summary-pill strong { font-size: 19px; } .summary-pills { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; } .card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; } .card-head h2 { margin: 0; font-size: 21px; } .section-help { margin: 8px 0 0; color: var(--v3-muted); font-size: 14px; line-height: 1.45; } .badge, .status-badge { display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; } .pastel-blue { background: var(--v3-pastel-blue-bg); color: var(--v3-pastel-blue-fg); } .pastel-green { background: var(--v3-pastel-green-bg); color: var(--v3-pastel-green-fg); } .status-green { background: var(--v3-flash-s-bg); color: var(--v3-flash-s-fg); border: 1px solid var(--v3-flash-s-bd); } .status-red { background: var(--v3-flash-e-bg); color: var(--v3-flash-e-fg); border: 1px solid var(--v3-flash-e-bd); } .status-yellow { background: var(--v3-status-yellow-bg); color: var(--v3-status-yellow-fg); border: 1px solid var(--v3-status-yellow-bd); } .status-blue { background: var(--v3-status-blue-bg); color: var(--v3-status-blue-fg); border: 1px solid var(--v3-status-blue-bd); } .status-gray { background: var(--v3-status-gray-bg); color: var(--v3-status-gray-fg); border: 1px solid var(--v3-status-gray-bd); } .status-grid { display: grid; gap: 10px; } .status-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; border: 1px solid var(--v3-border-2); border-radius: 14px; background: var(--v3-surface-soft); } .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--v3-dot-off); box-shadow: 0 0 0 5px rgba(209,213,219,.15); } .dot.ok { background: #4ade80; box-shadow: 0 0 0 5px rgba(74,222,128,.18); animation: lampPulse 1.9s ease-in-out infinite; } @keyframes lampPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74,222,128,.28); } 50% { transform: scale(1.16); box-shadow: 0 0 0 7px rgba(74,222,128,.08); } } /* Pulpit — wolniejszy puls lampek (wyższa specyficzność niż .dot.ok w tym pliku) */ .dashboard-page .status-row .dot.ok { animation: lampPulseDashboard 4.6s ease-in-out infinite !important; } .dashboard-page .status-row .dot:not(.ok) { animation: lampDotIdleDashboard 9.2s ease-in-out infinite !important; } @keyframes lampPulseDashboard { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.42); } 50% { transform: scale(1.2); box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } } @keyframes lampDotIdleDashboard { 0%, 100% { opacity: 0.48; } 50% { opacity: 1; } } .progress-block { margin-bottom: 18px; } .progress-label { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; gap: 10px; color: var(--v3-text); } .progress-label span { color: var(--v3-text); } .progress-bar { height: 14px; background: var(--v3-progress-track); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(15,23,42,.08); } .progress-fill { height: 100%; border-radius: 999px; transition: width .35s ease; } .progress-fill-blue { background: linear-gradient(90deg, #9bc3ff, #3b82f6); } .progress-fill-green { background: linear-gradient(90deg, #9fe5b5, #4bb96f); } .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; } .stats-grid-3 { grid-template-columns: repeat(4,1fr); } .stat { background: var(--v3-surface-soft); border: 1px solid var(--v3-border-2); border-radius: 16px; padding: 14px; } .stat span { display: block; font-size: 12px; color: var(--v3-muted); margin-bottom: 6px; } .stat strong { font-size: 18px; } .form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; } .field label, .days-title { display: block; font-size: 13px; margin-bottom: 8px; color: var(--v3-label); font-weight: 700; } .field input[type=text], .field input[type=number], .field input[type=time], .field textarea, .field select, .filters-grid input, .filters-grid select, .manual-form input, .manual-form select, select, textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--v3-border-input); border-radius: 16px; background: var(--v3-surface); color: var(--v3-text); font-size: 14px; outline: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .field input[type=text]:focus, .field input[type=number]:focus, .field input[type=time]:focus, .field textarea:focus, .field select:focus, .filters-grid input:focus, .filters-grid select:focus, .manual-form input:focus, .manual-form select:focus, select:focus, textarea:focus { border-color: var(--v3-focus); box-shadow: 0 0 0 4px var(--v3-focus-ring); } textarea { resize: vertical; min-height: 120px; } .subcard { border: 1px solid var(--v3-border-3); background: var(--v3-surface-soft); border-radius: 20px; padding: 18px; margin-top: 16px; } .subcard-head h3 { margin: 0 0 14px; font-size: 17px; } .days-wrap { margin-top: 16px; } .days-grid { display: flex; flex-wrap: wrap; gap: 10px; } .day-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--v3-surface); border: 1px solid var(--v3-border-e5); border-radius: 999px; padding: 8px 12px; } .switch { position: relative; display: inline-flex; width: 56px; height: 32px; } .switch input { display: none; } .slider { position: absolute; inset: 0; background: var(--v3-switch-off); border-radius: 999px; transition: .2s ease; } .slider:before { content: ""; position: absolute; width: 24px; height: 24px; left: 4px; top: 4px; background: var(--v3-switch-knob); border-radius: 50%; transition: .2s ease; } .switch input:checked + .slider { background: var(--v3-switch-on); } .switch input:checked + .slider:before { transform: translateX(24px); } .button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .button-row form { margin: 0; } .import-actions-under { margin-top: 18px; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 16px; border-radius: 14px; border: 1px solid var(--v3-border-d7); background: var(--v3-surface); color: var(--v3-btn-text); font-weight: 700; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(15,23,42,.08); } .btn.primary { background: linear-gradient(135deg, #111827, #374151); color: var(--v3-on-dark); border-color: #111827; } .btn.danger { background: linear-gradient(135deg, #991b1b, #dc2626); color: var(--v3-on-dark); border-color: #991b1b; } .btn-small { padding: 8px 12px; font-size: 12px; border-radius: 12px; } .btn-soft, .btn-danger-soft, .btn-icon { padding: 9px 12px; } .btn-danger-soft { background: var(--v3-flash-e-bg); border-color: var(--v3-flash-e-bd); color: var(--v3-flash-e-fg); } .products-toolbar { display: grid; gap: 14px; margin-bottom: 18px; } .filters-grid { display: grid; gap: 12px; } .filters-grid-products { grid-template-columns: repeat(4,1fr); } .products-actions { display: flex; justify-content: space-between; gap: 10px; align-items: center; } .table-wrap { width: 100%; overflow: auto; } .products-table, .basic-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1200px; } .products-table th, .products-table td, .basic-table th, .basic-table td { padding: 12px 10px; border-bottom: 1px solid var(--v3-border-2); font-size: 14px; text-align: left; vertical-align: middle; } .products-table th, .basic-table th { position: sticky; top: 0; background: var(--v3-table-head); z-index: 1; } .empty-row { text-align: center; color: var(--v3-muted); padding: 24px; } .wrap-any { word-break: break-all; } .thumb-wrap { display: flex; align-items: center; justify-content: center; } .thumb-56, .detail-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 14px; border: 1px solid var(--v3-border-e5); cursor: zoom-in; } .thumb-placeholder { width: 56px; height: 56px; border-radius: 14px; background: var(--v3-surface-f3); border: 1px dashed var(--v3-dot-off); display: flex; align-items: center; justify-content: center; color: var(--v3-muted); font-size: 12px; } .thumb-placeholder-large { width: 100%; height: 360px; border-radius: 24px; } .color-dot { display: inline-block; width: 14px; height: 14px; border-radius: 999px; border: 1px solid rgba(15,23,42,.12); vertical-align: middle; margin-right: 8px; } .color-text-inline { vertical-align: middle; } .pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; } .pagination-pages { display: flex; gap: 8px; align-items: center; } .page-chip { min-width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--v3-border-e5); background: var(--v3-surface); color: var(--v3-btn-text); font-weight: 700; } .page-chip.active { background: var(--v3-text-heading); color: var(--v3-on-dark); border-color: var(--v3-text-heading); } .detail-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; } .detail-main-image img { width: 100%; height: 360px; object-fit: contain; background: var(--v3-surface); border: 1px solid var(--v3-border-2); border-radius: 24px; cursor: zoom-in; } .detail-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .meta-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 18px; } .meta-list > div, .info-box { background: var(--v3-surface-soft); border: 1px solid var(--v3-border-2); border-radius: 16px; padding: 14px; } .meta-list span { display: block; color: var(--v3-muted); font-size: 12px; margin-bottom: 4px; } .meta-list strong { font-size: 14px; } .description-box { background: var(--v3-surface); border: 1px solid var(--v3-border-2); border-radius: 16px; padding: 16px; line-height: 1.6; color: var(--v3-text); } .info-box code { background: var(--v3-code-bg); border-radius: 8px; padding: 2px 6px; color: var(--v3-text); } .margin-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 120px; gap: 12px; align-items: center; margin-bottom: 10px; } .producer-grid { grid-template-columns: 1.2fr 1fr 120px; } .margin-grid-head { font-weight: 800; color: var(--v3-label-2); margin-bottom: 12px; } .row-actions { display: flex; gap: 8px; } .danger-zone { margin-top: 18px; padding: 18px; border-radius: 22px; border: 1px solid var(--v3-flash-e-bd); background: var(--v3-danger-zone); } .danger-zone h3 { margin: 0; font-size: 17px; color: var(--v3-text-heading); } .danger-form { display: grid; gap: 12px; margin-top: 14px; } .confirm-check { display: flex; align-items: center; gap: 10px; font-size: 14px; } .confirm-check input { width: 18px; height: 18px; } .image-preview-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.82); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 26px; } .image-preview-overlay.open { display: flex; } .image-preview-overlay img { max-width: 94vw; max-height: 92vh; border-radius: 20px; background: var(--v3-image-preview-bg); } .image-preview-close { position: absolute; top: 18px; right: 22px; width: 48px; height: 48px; border: 0; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 30px; cursor: pointer; } @media (max-width: 1200px) { .grid-2, .hero-grid, .detail-grid { grid-template-columns: 1fr; } .summary-pills, .hero-stats, .stats-grid, .filters-grid-products, .form-grid, .meta-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 800px) { .mobile-menu-open { display: inline-flex; } .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-105%); z-index: 50; box-shadow: 0 18px 42px rgba(15,23,42,.18); } .sidebar.open { transform: translateX(0); width: 292px; } .sidebar.collapsed { width: 292px; } .sidebar.collapsed .menu-label, .sidebar.collapsed .operator-card { display: block; } .sidebar.collapsed .menu-item { justify-content: flex-start; } .content { padding: 74px 18px 18px; } .topbar { align-items: flex-start; } .topbar-dashboard { flex-direction: row; } .dashboard-top-gif { height: 26px; } .summary-pills, .hero-stats, .stats-grid, .filters-grid-products, .form-grid, .meta-list { grid-template-columns: 1fr; } .products-actions, .button-row, .card-head, .topbar { flex-direction: column; align-items: stretch; } .pagination-bar { flex-direction: column; } } .table-check{width:22px;height:22px;border-radius:7px;accent-color:#3b82f6;cursor:pointer} .product-name-link{font-weight:700;color:var(--v3-text-heading);transition:color .18s ease, transform .18s ease;display:inline-block} .product-name-link:hover{color:var(--v3-link);transform:translateX(1px)} .table-end-arrow{font-size:22px;color:var(--v3-muted-2);text-align:center} .filters-panel{background:var(--v3-surface-soft-2);border:1px solid var(--v3-border-e7);border-radius:24px;padding:16px;display:grid;gap:14px} .filters-grid-products-wide{grid-template-columns:repeat(4,minmax(0,1fr))} .color-cell-wrap{position:relative;display:inline-flex;align-items:center} /* Kółko = cały przycisk wypełniony kolorem (inline style). Stary układ: przycisk + .color-dot w środku — tylko wtedy flex. */ .color-dot-button{ width:34px;height:34px;border-radius:999px;border:1px solid var(--v3-border-d7); padding:0;margin:0;box-sizing:border-box;background:var(--v3-surface); display:block;cursor:pointer;box-shadow:0 6px 16px rgba(15,23,42,.06); } .color-dot-button:has(> .color-dot){ display:inline-flex;align-items:center;justify-content:center; } .color-dot{width:18px;height:18px;border-radius:999px;border:1px solid rgba(15,23,42,.12);display:block;position:relative;flex-shrink:0} .color-dot.is-empty,.color-option-dot.is-empty{background:linear-gradient(135deg,var(--v3-surface),var(--v3-border-e5))!important;position:relative} .color-dot.is-empty::after,.color-option-dot.is-empty::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:2px;background:var(--v3-muted-2);transform:rotate(-35deg)} .color-popover{position:absolute;left:42px;top:50%;transform:translateY(-50%);background:var(--v3-surface);border:1px solid var(--v3-border-e5);border-radius:18px;padding:12px;display:none;grid-template-columns:repeat(5,1fr);gap:10px;box-shadow:0 20px 50px rgba(15,23,42,.16);z-index:10} .color-cell-wrap.open .color-popover, .color-cell-wrap.is-open .color-popover{display:grid} .color-option{width:30px;height:30px;border-radius:999px;border:0;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer} .color-option-dot{width:22px;height:22px;border-radius:999px;border:1px solid rgba(15,23,42,.14);display:block;position:relative} .filter-color-picker{position:relative} .filter-color-trigger{height:48px;width:100%;border:1px solid var(--v3-border-d7);border-radius:16px;background:var(--v3-surface);padding:0 16px;text-align:left;font-size:15px;color:var(--v3-btn-text);display:flex;align-items:center} .filter-color-popover{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--v3-surface);border:1px solid var(--v3-border-e5);border-radius:18px;padding:10px;display:none;z-index:12;box-shadow:0 18px 40px rgba(15,23,42,.14);max-height:280px;overflow:auto} .filter-color-picker.open .filter-color-popover, .filter-color-picker.is-open .filter-color-popover{display:grid;gap:6px} .filter-color-choice{display:flex;align-items:center;gap:10px;border:0;background:var(--v3-surface);padding:10px 12px;border-radius:12px;cursor:pointer;text-align:left;color:var(--v3-text)} .filter-color-choice:hover{background:var(--v3-surface-soft-2)} .color-inline{display:inline-flex;align-items:center;gap:10px} .filter-color-trigger-text{color:var(--v3-muted)} .bulk-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:0 0 14px} .bulk-panel{display:none;background:var(--v3-surface-soft-2);border:1px solid var(--v3-border-e7);border-radius:20px;padding:14px;min-width:min(760px,100%)} .bulk-panel.open{display:block} .bulk-panel-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .bulk-dynamic-field{display:none;min-width:180px} .bulk-dynamic-field.show{display:block} .margin-grid input,.margin-grid select,.notes-block textarea{border-radius:16px!important;border:1px solid var(--v3-border-d7)!important;background:var(--v3-surface)!important;color:var(--v3-text)!important;box-shadow:0 8px 22px rgba(15,23,42,.04)!important;padding:12px 14px!important} @media (max-width:800px){.bulk-panel{min-width:100%}} .local-counter-pill { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--v3-counter-1), var(--v3-counter-2)); border: 1px solid var(--v3-counter-bd); border-radius: 999px; padding: 10px 14px; box-shadow: 0 10px 24px rgba(37,99,235,.08); } .local-counter-icon { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--v3-counter-icon); box-shadow: inset 0 0 0 1px var(--v3-counter-icon-ring); font-size: 16px; } .local-counter-text { color: var(--v3-label-2); font-weight: 600; } .local-counter-pill strong { font-size: 20px; color: var(--v3-counter-strong); } @media (max-width: 800px) { .local-counter-pill { width: 100%; justify-content: space-between; border-radius: 18px; } .local-counter-text { flex: 1; font-size: 14px; } } .topbar { align-items: flex-start; } .dashboard-top-gif { flex-shrink: 0; } .image-tile { position: relative; } .image-delete-form { position: static; } .image-delete-btn { display:none; } .image-delete-btn:hover { display:none; } .detail-thumb-wrap { position: relative; display: inline-flex; } .image-tile-vertical{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .detail-main-image-tag{display:block;width:100%;height:100%;object-fit:contain;background:var(--v3-surface);border-radius:22px} .image-delete-row{display:flex;justify-content:flex-start;width:100%} .image-delete-row-small{width:auto} .image-delete-link{border:1px solid var(--v3-img-del-bd);background:var(--v3-img-del-bg);color:var(--v3-img-del-fg);border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer} .image-delete-link-small{padding:6px 12px;font-size:13px} .description-edit-form{margin-top:18px;max-width:none} .description-textarea{width:100%;min-height:220px;border:1px solid var(--v3-border-d7);border-radius:18px;background:var(--v3-surface);color:var(--v3-text);padding:14px 16px;font-size:15px;line-height:1.65;box-shadow:0 8px 22px rgba(15,23,42,.04);resize:vertical;display:block} /* batch27 targeted fixes */ .sidebar{ scrollbar-width:none; -ms-overflow-style:none; } .sidebar::-webkit-scrollbar{ width:0; height:0; } .filters-panel{ gap:12px; } .filters-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .filters-panel-head h3{ margin:0; font-size:18px; font-weight:800; color: var(--v3-text-heading); } .filters-panel-body{ display:grid; gap:14px; } .filters-panel.is-collapsed .filters-panel-body{ display:none; } .products-actions{ display:flex; justify-content:flex-end; align-items:center; } .products-actions-row{ justify-content:flex-end; align-items:center; flex-wrap:nowrap; width:auto; } .products-actions-row select{ width:auto; min-width:170px; } .color-popover{ left:auto !important; right:42px !important; top:50%; transform:translateY(-50%); } @media (max-width:800px){ .filters-panel-head{ flex-direction:column; align-items:stretch; } .products-actions-row{ flex-wrap:wrap; justify-content:flex-end; } } /* patch 14: safe UI polish */ .card, .apple-card, .compact-card, .btn, .status-badge, .place-pill, .variant-role-badge, .variant-type-pill, .sidebar-logo-box { transition: transform .18s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease, opacity .22s ease; } .card:hover, .apple-card:hover, .compact-card:hover { box-shadow: var(--v3-card-shadow-2); } .btn:hover { transform: translateY(-1px); } .products-table tbody tr { transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; } .products-table tbody tr:hover { background: var(--v3-row-hover); } .products-table tbody tr.is-selected { background: linear-gradient(180deg, var(--v3-row-sel-1), var(--v3-row-sel-2)); box-shadow: inset 0 0 0 1px var(--v3-row-sel-ring); } .products-table tbody tr.is-selected td:first-child { border-top-left-radius: 14px; border-bottom-left-radius: 14px; } .products-table tbody tr.is-selected td:last-child { border-top-right-radius: 14px; border-bottom-right-radius: 14px; } .sidebar-logo-box { max-width: 250px; margin-inline: auto; } .margins-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr); gap: 26px; align-items: start; } .producer-grid { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 1fr) 110px; gap: 12px; align-items: center; } .producer-head { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 1fr) 110px; gap: 12px; align-items: center; } .producer-row select, .producer-row input[type="text"] { width: 100%; min-width: 0; } .row-actions { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: nowrap; } /* patch 17 thumbnail override: product list thumbnails +30% */ .products-table .thumb-56, .products-table .thumb-wrap .thumb-56, .products-table img.thumb-56, .products-table .thumb-placeholder { width: 73px !important; height: 73px !important; } .products-table .thumb-56, .products-table .thumb-wrap .thumb-56, .products-table img.thumb-56 { border-radius: 16px !important; object-fit: cover !important; } .products-table .thumb-placeholder { border-radius: 16px !important; } .sidebar-logo{ width:100%; max-width:180px; max-height:72px; height:auto; object-fit:contain; display:block; margin:0 auto; } /* settings safety v2 */ .settings-group-card.settings-group-local { border: 1px solid var(--v3-settings-local-bd); background: var(--v3-settings-local-bg); box-shadow: 0 16px 40px rgba(15,23,42,.05), inset 4px 0 0 rgba(59,130,246,.55); } .settings-group-card.settings-group-shopify { border: 1px solid var(--v3-settings-shopify-bd); background: var(--v3-settings-shopify-bg); box-shadow: 0 16px 40px rgba(15,23,42,.05), inset 4px 0 0 rgba(34,197,94,.55); } .settings-group-local .card-head h2, .settings-group-shopify .card-head h2 { position: relative; padding-left: 14px; } .settings-group-local .card-head h2::before, .settings-group-shopify .card-head h2::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:6px; border-radius:999px; } .settings-group-local .card-head h2::before { background: linear-gradient(180deg,#111827,#3b82f6); } .settings-group-shopify .card-head h2::before { background: linear-gradient(180deg,#111827,#22c55e); } .settings-subcard { position: relative; overflow:hidden; } .settings-subcard.settings-subcard-local::before, .settings-subcard.settings-subcard-shopify::before { content:""; position:absolute; inset:0 0 auto 0; height:2px; } .settings-subcard.settings-subcard-local::before { background: linear-gradient(90deg,#111827,#60a5fa); } .settings-subcard.settings-subcard-shopify::before { background: linear-gradient(90deg,#111827,#4ade80); } /* Kompaktowy wiersz listy produktów */ .products-table th, .products-table td{ padding: 8px 8px; } .products-table td{ font-size: 13px; line-height: 1.2; } .products-table thead th{ padding-top: 10px; padding-bottom: 10px; } .thumb-56{ width: 44px; height: 44px; border-radius: 12px; } .thumb-placeholder{ width: 44px; height: 44px; border-radius: 12px; font-size: 11px; } .product-name-link{ line-height: 1.1; margin-bottom: 4px; } .product-name-stack{ display:flex; flex-direction:column; gap:4px; } .product-name-meta{ gap:6px; } .row-queue-badge, .shopify-inline-badge, .variant-mini-badge, .pipeline-main-badge, .pipeline-mini-badge{ transform: scale(.94); transform-origin: left center; } .pipeline-mini-badges{ gap:4px; } .status-cell-stack{ gap:5px; } .price-stack{ gap:8px; } .price-stack small{ font-size: 10px; } .price-stack strong{ font-size: 13px; line-height: 1.05; } .proposal-stack{ gap:2px; min-width: 130px; } .proposal-main{ font-size: .73rem; line-height: 1.1; } .proposal-score{ font-size: .66rem; } .products-table .color-dot-button:has(> .color-dot){ width: 30px; height: 30px; } .products-table .color-dot-button:has(> .color-dot) > .color-dot{ width: 15px; height: 15px; } .products-table tbody tr td{ vertical-align: middle; } /* Przełącznik motywu (sidebar) */ .theme-toggle { display: inline-flex; border-radius: 14px; border: 1px solid var(--v3-sidebar-border); background: var(--v3-glass-80); overflow: hidden; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .theme-mode-btn { border: 0; background: transparent; color: var(--v3-menu); font-weight: 700; font-size: 0.72rem; padding: 8px 10px; min-width: 40px; min-height: 36px; cursor: pointer; line-height: 0; display: inline-flex; align-items: center; justify-content: center; } .theme-mode-btn-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .theme-mode-btn-icon svg { display: block; } .theme-mode-btn:hover { background: var(--v3-menu-hover); } .theme-mode-btn.active { background: var(--v3-menu-active-1); color: var(--v3-text-heading); box-shadow: inset 0 0 0 1px var(--v3-menu-active-ring); } html[data-theme="dark"] .theme-mode-btn.active { color: var(--v3-text); } /* Global loader + podgląd zdjęcia (kolory z tokenów) */ .global-loader-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 10000; } .global-loader-overlay.is-visible { display: flex; } .global-loader-card { background: var(--v3-loader-card); border: 1px solid var(--v3-loader-card-bd); box-shadow: 0 18px 48px rgba(15, 23, 42, 0.2); border-radius: 24px; padding: 26px 28px; min-width: 240px; text-align: center; } .global-loader-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; } .global-loader-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--v3-muted-2); animation: globalLoaderPulse 1s infinite ease-in-out; } .global-loader-dots span:nth-child(2) { animation-delay: 0.15s; } .global-loader-dots span:nth-child(3) { animation-delay: 0.3s; } .global-loader-text { font-size: 0.82rem; color: var(--v3-loader-text); font-weight: 600; } @keyframes globalLoaderPulse { 0%, 80%, 100% { transform: scale(0.65); opacity: 0.45; } 40% { transform: scale(1); opacity: 1; } } /* Logowanie (osobna strona) */ body.login-page { margin: 0; min-height: 100vh; font-family: Inter, Arial, sans-serif; background: linear-gradient(135deg, #eef2ff, #dbeafe 45%, #e0e7ff); color: var(--v3-text); } html[data-theme="dark"] body.login-page { background: linear-gradient(135deg, #0c1222, #1e293b 45%, #172554); color: var(--v3-text); } .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-box { width: 100%; max-width: 430px; background: var(--v3-glass-86); border-radius: 24px; padding: 34px 30px; box-shadow: var(--v3-card-shadow-hover); border: 1px solid var(--v3-border); color: var(--v3-text); } .login-logo-wrap { display: flex; justify-content: center; margin-bottom: 18px; } .login-logo { width: 220px; height: auto; display: block; } .login-intro { margin: 0 0 22px 0; color: var(--v3-muted); text-align: center; font-size: 15px; } .login-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--v3-label); } .login-field input[type="text"], .login-field input[type="password"] { width: 100%; border: 1px solid var(--v3-border-input); border-radius: 14px; padding: 12px 14px; font-size: 15px; background: var(--v3-surface); color: var(--v3-text); margin-bottom: 14px; outline: none; } .login-field input:focus { border-color: var(--v3-focus); box-shadow: 0 0 0 3px var(--v3-focus-ring); } .login-submit { width: 100%; border: 0; border-radius: 14px; padding: 13px 14px; font-size: 15px; font-weight: 700; cursor: pointer; background: linear-gradient(135deg, #111827, #374151); color: var(--v3-on-dark); } .login-submit:hover { opacity: 0.96; } .login-error { background: var(--v3-flash-e-bg); color: var(--v3-flash-e-fg); border: 1px solid var(--v3-flash-e-bd); padding: 12px 14px; border-radius: 14px; margin-bottom: 14px; font-size: 14px; font-weight: 600; } .login-theme-bar { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; } /* Warianty — nadpisania trybu ciemnego (szablon ma zwarte inline