:root{--primary:#4F46E5;--primary-dark:#4338CA;--primary-soft:#EEF2FF;--cyan:#06B6D4;--cyan-soft:#ECFEFF;--emerald:#10B981;--emerald-soft:#ECFDF5;--amber:#F59E0B;--amber-soft:#FFFBEB;--rose:#F43F5E;--rose-soft:#FFF1F2;--violet:#8B5CF6;--violet-soft:#F5F3FF;--bg:#F8FAFC;--surface:#FFFFFF;--surface-2:#FAFBFC;--border:var(--border);--border-strong:#D1D5DB;--text:#0F172A;--text-soft:#475569;--text-muted:#94A3B8;--c-green-text:#047857;--c-red-text:#B91C1C;--c-amber-text:#B45309;--c-violet-text:#6D28D9;--c-blue-text:#2563EB;--c-cyan-text:#0E7490;--radius-sm:6px;--radius:10px;--radius-lg:14px;--shadow-sm:0 1px 2px rgba(15,23,42,0.05);--shadow:0 1px 3px rgba(15,23,42,0.06),0 1px 2px rgba(15,23,42,0.04);--shadow-lg:0 10px 30px rgba(15,23,42,0.10),0 4px 8px rgba(15,23,42,0.05);--shadow-xl:0 25px 50px rgba(15,23,42,0.18);} /* ============================================================================ DARK THEME · activated by Re-maps the design tokens; the app is variable-driven so most of the UI adapts automatically. Soft/tint colors become translucent so chips and badges read correctly on dark surfaces. ============================================================================ */ html[data-theme="dark"]{ --primary:#818CF8; --primary-dark:#A5B4FC; --primary-soft:rgba(129,140,248,0.16); --cyan:#22D3EE; --cyan-soft:rgba(34,211,238,0.15); --emerald:#34D399; --emerald-soft:rgba(52,211,153,0.15); --amber:#FBBF24; --amber-soft:rgba(251,191,36,0.15); --rose:#FB7185; --rose-soft:rgba(251,113,133,0.15); --violet:#A78BFA; --violet-soft:rgba(167,139,250,0.16); --bg:#0B1120; --surface:#151C2C; --surface-2:#1B2335; --border:#27314A; --border-strong:#3B4763; --text:#E8EDF5; --text-soft:#A6B2C8; --text-muted:#6C7A93; --c-green-text:#6EE7B7; --c-red-text:#FCA5A5; --c-amber-text:#FCD34D; --c-violet-text:#C4B5FD; --c-blue-text:#93C5FD; --c-cyan-text:#67E8F9; --shadow-sm:0 1px 2px rgba(0,0,0,0.45); --shadow:0 1px 3px rgba(0,0,0,0.5),0 1px 2px rgba(0,0,0,0.4); --shadow-lg:0 10px 30px rgba(0,0,0,0.55),0 4px 10px rgba(0,0,0,0.4); --shadow-xl:0 25px 50px rgba(0,0,0,0.65); color-scheme: dark; } /* LP preview iframes & uploaded media are real content — keep them on white so creatives render truthfully even in dark mode. */ html[data-theme="dark"] .cmp-iframe-wrap, html[data-theme="dark"] .preview-frame, html[data-theme="dark"] iframe{ background:#fff; } /* Logo swap: light wordmark in dark mode (red shield preserved in both). `img.` prefix raises specificity above the base .brand-logo{display:block}. */ img.brand-logo-dark{ display:none; } html[data-theme="dark"] img.brand-logo-light{ display:none; } html[data-theme="dark"] img.brand-logo-dark{ display:block; } /* Theme toggle button */ .theme-toggle{ display:flex; align-items:center; justify-content:center; } .theme-toggle .moon{ display:block; } .theme-toggle .sun{ display:none; } html[data-theme="dark"] .theme-toggle .moon{ display:none; } html[data-theme="dark"] .theme-toggle .sun{ display:block; } *{box-sizing:border-box;margin:0;padding:0;} html,body{height:100%;} body{font-family:'Inter',-apple-system,system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;} a{color:inherit;text-decoration:none;} input,select{font-family:inherit;font-size:inherit;} /* TOP NAV */ .topnav{height:60px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:24px;position:sticky;top:0;z-index:50;} .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:-0.01em;cursor:pointer;border-radius:8px;transition:opacity 0.15s;} .brand:hover{opacity:0.8;} .brand:focus-visible{outline:2px solid var(--primary);outline-offset:3px;} .brand-logo{height:26px;width:auto;display:block;} .brand-sub{color:var(--text-muted);font-weight:500;font-size:12px;margin-left:4px;padding-left:12px;border-left:1px solid var(--border);} .topnav-links{display:flex;gap:4px;margin-left:16px;} .topnav-link{padding:7px 12px;border-radius:7px;color:var(--text-soft);font-weight:500;font-size:13px;transition:all 0.15s;cursor:pointer;} .topnav-link:hover{background:var(--bg);color:var(--text);} .topnav-link.active{background:var(--primary-soft);color:var(--primary);} .topnav-spacer{flex:1;} .topnav-actions{display:flex;align-items:center;gap:12px;} .icon-btn{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-soft);transition:all 0.15s;position:relative;} .icon-btn:hover{background:var(--bg);color:var(--text);} .icon-btn .dot{position:absolute;top:6px;right:6px;width:8px;height:8px;background:#E71E25;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px rgba(231,30,37,0.25);} .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#f43f5e,#8b5cf6);display:flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:12px;} /* PAGE HEADER */ .page-header{background:var(--surface);border-bottom:1px solid var(--border);} .page-header-inner{max-width:1400px;margin:0 auto;padding:32px 24px 24px;} .page-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px;} .breadcrumb{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);font-weight:500;margin-bottom:8px;} .breadcrumb .current{color:var(--text);} .page-title{font-size:26px;font-weight:700;letter-spacing:-0.025em;color:var(--text);line-height:1.15;margin-bottom:6px;} .page-title-sub-inline{font-size:15px;font-weight:500;color:var(--text-soft);letter-spacing:-0.01em;margin-left:2px;} .page-subtitle{font-size:13.5px;color:var(--text-soft);max-width:560px;line-height:1.5;} .page-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;padding-top:4px;} .sync-chip{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--text-soft);background:var(--bg);border:1px solid var(--border);padding:7px 12px;border-radius:999px;margin-right:4px;} .sync-chip .pulse{width:6px;height:6px;background:var(--emerald);border-radius:50%;box-shadow:0 0 0 3px rgba(16,185,129,0.2);animation:pulse 2s infinite;} @keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,0.2);}50%{box-shadow:0 0 0 5px rgba(16,185,129,0);}} /* Live sync-chip health states (set by refreshSyncChip in main.js) */ .sync-chip.sync-stale .pulse{background:#F59E0B;box-shadow:0 0 0 3px rgba(245,158,11,0.2);animation:none;} .sync-chip.sync-down .pulse{background:#EF4444;box-shadow:0 0 0 3px rgba(239,68,68,0.2);animation:none;} .sync-chip.sync-down{color:#EF4444;} .btn-ghost,.btn-solid,.btn-red{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:600;border-radius:8px;transition:all 0.15s;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;} .btn-ghost:hover{background:var(--bg);} .btn-solid{background:var(--text);color:white;border-color:var(--text);} .btn-solid:hover{background:#000;} .btn-red{background:#E71E25;color:white;border-color:#E71E25;box-shadow:0 2px 8px rgba(231,30,37,0.25);} .btn-red:hover{background:#9E181C;border-color:var(--c-red-text);} .stats-strip{display:flex;gap:48px;flex-wrap:wrap;} .stat-num{font-size:24px;font-weight:700;letter-spacing:-0.02em;color:var(--text);line-height:1.1;display:flex;align-items:center;gap:8px;} .stat-label{font-size:12px;color:var(--text-muted);font-weight:500;margin-top:4px;letter-spacing:0.01em;} .stat-trend{font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;letter-spacing:0.02em;} .stat-trend.up{background:var(--emerald-soft);color:var(--c-green-text);} /* VIEW TABS */ .view-tabs{background:var(--surface);border-bottom:1px solid var(--border);} .view-tabs-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;padding:0 24px;gap:4px;} .view-tab{display:inline-flex;align-items:center;gap:8px;padding:14px 18px;border:none;background:transparent;font-size:14px;font-weight:600;color:var(--text-muted);cursor:pointer;position:relative;transition:color 0.15s;border-bottom:2px solid transparent;margin-bottom:-1px;} .view-tab:hover{color:var(--text);} .view-tab.active{color:var(--primary);border-bottom-color:var(--primary);} .view-tab-count{font-size:11px;font-weight:700;padding:1px 7px;background:var(--bg);color:var(--text-soft);border-radius:10px;line-height:1.5;} .view-tab.active .view-tab-count{background:var(--primary-soft);color:var(--primary);} .view-tabs-spacer{flex:1;} .view-tabs-hint{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);font-weight:500;} /* GRID SECTION HEADERS */ .grid-section-header{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;padding:4px 0 2px;border-bottom:1px solid var(--border);margin-bottom:8px;} .grid-section-header:not(:first-child){margin-top:24px;} .grid-section-header h3{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-0.01em;display:inline-flex;align-items:center;gap:8px;} .grid-section-header h3 .section-icon{width:24px;height:24px;background:var(--bg);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-soft);} .grid-section-header .section-count{background:var(--bg);color:var(--text-soft);font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;} .grid-section-header .section-sub{color:var(--text-muted);font-size:12px;font-weight:500;margin-left:auto;} /* CARD LINK CHIP */ .card-link-chip{margin:0 14px;padding:8px 10px;background:var(--bg);border-radius:6px;font-size:11.5px;color:var(--text-soft);display:flex;align-items:center;gap:6px;cursor:pointer;transition:all 0.15s;border:1px solid transparent;line-height:1.3;} .card-link-chip:hover{background:var(--surface);border-color:var(--border-strong);color:var(--text);} .card-link-chip.linked{background:var(--emerald-soft);color:var(--c-green-text);} .card-link-chip.linked:hover{background:var(--emerald-soft);} .card-link-chip.unlinked{background:var(--amber-soft);color:var(--c-amber-text);} .card-link-chip.unlinked:hover{background:var(--amber-soft);} /* Standalone: no LP for this campaign — intentional, passive marker. */ .card-link-chip.standalone{ background: rgba(100,116,139,0.08); color:var(--text-soft); cursor: default; border-color: rgba(100,116,139,0.18); } .card-link-chip.standalone:hover{ background: rgba(100,116,139,0.08); border-color: rgba(100,116,139,0.18); color:var(--text-soft); } .card-link-chip b{font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .card-link-chip .link-edit{font-weight:600;opacity:0.75;margin-left:auto;font-size:11px;text-decoration:underline;flex-shrink:0;} .card-link-chip .link-edit-soft{font-weight:500;opacity:0.6;margin-left:auto;font-size:10.5px;flex-shrink:0;font-style:italic;} /* QUICK PILLS */ .quick-pills{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:60px;z-index:40;} .quick-pills-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:6px;padding:12px 24px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;} .quick-pills-inner::-webkit-scrollbar{display:none;} .pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--text-soft);background:var(--bg);border:1px solid transparent;transition:all 0.15s;white-space:nowrap;cursor:pointer;} .pill:hover{background:var(--surface-2);color:var(--text);} .pill.active{background:var(--text);color:var(--surface);} .pill-count{font-size:11px;font-weight:600;padding:1px 7px;background:var(--surface);color:var(--text-soft);border-radius:10px;} .pill.active .pill-count{background:rgba(127,127,127,0.3);color:var(--surface);} .pills-divider{width:1px;height:20px;background:var(--border);margin:0 8px;flex-shrink:0;} /* APP */ .app{max-width:1400px;margin:0 auto;padding:20px 24px 60px;} /* TOOLBAR */ .catalog-toolbar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px;margin-bottom:16px;} .toolbar-row{display:flex;gap:10px;align-items:center;} .search{flex:1;position:relative;} .search input{width:100%;padding:9px 12px 9px 36px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--bg);transition:all 0.15s;} .search input:focus{outline:none;background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);} .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;} .search-shortcut{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:2px 6px;font-size:11px;color:var(--text-muted);font-weight:500;} .sort-select{padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--surface);color:var(--text);cursor:pointer;font-weight:500;} .view-toggle{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:2px;} .view-toggle button{padding:6px 10px;border-radius:6px;color:var(--text-muted);transition:all 0.15s;} .view-toggle button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);} .filter-dropdowns{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);flex-wrap:wrap;} .filter-bar-label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;padding-right:4px;} .filter-dd{position:relative;} .filter-trigger{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:12.5px;font-weight:500;color:var(--text);cursor:pointer;transition:all 0.15s;white-space:nowrap;} .filter-trigger:hover{background:var(--bg);border-color:var(--border-strong);} .filter-trigger.has-selection{background:var(--primary-soft);border-color:#C7D2FE;color:var(--primary);} .filter-trigger.has-selection .caret{color:var(--primary);} .filter-trigger .badge{background:var(--primary);color:white;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px;line-height:1.4;} .filter-trigger .caret{color:var(--text-muted);transition:transform 0.15s;flex-shrink:0;} .filter-trigger.open .caret{transform:rotate(180deg);} .filter-trigger.open{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);} .filter-popover{position:absolute;top:calc(100% + 6px);left:0;min-width:240px;max-width:300px;max-height:340px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;z-index:70;display:none;overflow-y:auto;} .filter-popover.open{display:block;animation:popIn 0.12s ease-out;} @keyframes popIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}} .reset-link{margin-left:8px;font-size:12px;font-weight:600;color:var(--text-soft);padding:6px 10px;border-radius:6px;transition:all 0.15s;border:0;background:transparent;cursor:pointer;font-family:inherit;} .reset-link:hover{background:var(--bg);color:var(--text);} /* Divider between the filter dropdowns group and the action group (Advanced + Export + Clear). Pushes actions to the right edge. */ .filter-bar-divider{flex:1;min-width:8px;} /* The Advanced and Export buttons use the same shell as .filter-trigger but live in the action group on the right. */ .filter-adv-trigger, .filter-export-trigger{margin-left:0;} .filter-export-trigger{color:var(--primary);border-color:color-mix(in srgb, var(--violet) 25%, transparent);background:var(--violet-soft);} .filter-export-trigger:hover{background:var(--violet-soft);border-color:color-mix(in srgb, var(--violet) 40%, transparent);color:var(--c-violet-text);} .filter-export-trigger svg{stroke-width:2.5;} /* Chip variant for advanced-search criteria — slightly distinct accent so you can tell at a glance what came from a dropdown vs the advanced panel. */ .chip.chip-adv{ background:var(--violet-soft); color:var(--c-violet-text); border:1px solid color-mix(in srgb, var(--violet) 25%, transparent); } .chip.chip-adv button{color:var(--c-violet-text);opacity:0.75;} .chip.chip-adv button:hover{opacity:1;} /* ============================================================ ADVANCED SEARCH PANEL Collapsible region under the filter toolbar. A power-user form combining text inputs, multi-tag with mode selector, date range, and linkage / files toggles. ============================================================ */ .adv-search-panel{ display:none; margin-top:12px; padding:0; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,0.04); animation:advSlideDown 0.18s ease-out; } .adv-search-panel.open{display:block;} @keyframes advSlideDown{ from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:translateY(0);} } .adv-head{ display:flex;align-items:center;justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--surface-2),var(--surface)); } .adv-head-title{ display:inline-flex;align-items:center;gap:8px; font-size:13px;font-weight:700;color:var(--text); } .adv-head-title svg{color:var(--primary);} .adv-close{ display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:6px; border:0;background:transparent;color:var(--text-muted); cursor:pointer;transition:all 0.15s; } .adv-close:hover{background:var(--bg);color:var(--text);} .adv-body{padding:14px 16px;} .adv-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 16px; } .adv-field{display:flex;flex-direction:column;gap:5px;min-width:0;} .adv-field-wide{grid-column:span 3;} .adv-label{ display:flex;align-items:center;justify-content:space-between;gap:8px; font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:0.04em; color:var(--text-muted); } .adv-hint{ font-size:10.5px;font-weight:500; color:var(--text-muted);text-transform:none;letter-spacing:0; display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap; } .adv-input{ width:100%; padding:8px 11px; border:1px solid var(--border); border-radius:7px; background:var(--surface); font-size:12.5px; font-family:inherit; color:var(--text); transition:border-color 0.15s, box-shadow 0.15s; } .adv-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(124,58,237,0.12); } .adv-input[type="date"]{cursor:pointer;} /* Tag chip-picker reused from upload form, scoped under .adv- */ .adv-tag-chips{ display:flex;flex-wrap:wrap;gap:6px; min-height:30px; padding:5px 0; } .adv-tag-empty{ display:inline-flex;align-items:center; font-size:11.5px;color:var(--text-muted);font-style:italic; } .adv-tag-chip{ display:inline-flex;align-items:center;gap:5px; padding:3px 4px 3px 8px; background:var(--surface); border:1px solid; border-radius:14px; font-size:11.5px;font-weight:600;line-height:1; } .adv-tag-chip-dot{ display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0; } .adv-tag-chip-x{ display:inline-flex;align-items:center;justify-content:center; width:16px;height:16px;border-radius:50%; border:0;background:transparent;color:inherit; opacity:0.55;cursor:pointer; font-size:14px;font-weight:700;line-height:1; padding:0;font-family:inherit; transition:opacity 0.15s, background 0.15s; } .adv-tag-chip-x:hover{opacity:1;background:rgba(0,0,0,0.06);} .adv-tag-add{ width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:var(--surface); font-size:12px; font-family:inherit; color:var(--text); cursor:pointer; } .adv-tag-add:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(124,58,237,0.12); } /* Mode pill row — used for tag mode (any/all/none) and linkage. */ .adv-mode-row{display:inline-flex;flex-wrap:wrap;gap:0;border:1px solid var(--border);border-radius:7px;background:var(--surface);padding:2px;} .adv-mode-pill{ padding:5px 11px; border:0;background:transparent; font-size:11.5px;font-weight:600;color:var(--text-soft); border-radius:5px;cursor:pointer; font-family:inherit; transition:all 0.15s; } .adv-mode-pill:hover{color:var(--text);} .adv-mode-pill.active{background:var(--primary);color:#fff;} .adv-mode-pill.active:hover{color:#fff;} /* Compact inline mode pills inside the Tags label */ .adv-hint .adv-mode-pill{ font-size:10px;padding:3px 8px;border-radius:4px; border:1px solid var(--border);background:var(--surface); } .adv-hint .adv-mode-pill.active{ background:var(--primary);color:#fff;border-color:var(--primary); } .adv-foot{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 16px; border-top:1px solid var(--border); background:var(--surface-2); } .adv-foot-info{ display:inline-flex;align-items:center;gap:8px; font-size:11.5px;color:var(--text-soft); } .adv-foot-info svg{color:var(--text-muted);} .adv-foot-info b{color:var(--text);font-weight:700;} .adv-foot-actions{display:inline-flex;gap:8px;} .adv-btn-clear, .adv-btn-apply{ padding:7px 14px; border-radius:7px; font-size:12px;font-weight:600; font-family:inherit;cursor:pointer; transition:all 0.15s; } .adv-btn-clear{background:var(--surface);color:var(--text-soft);border:1px solid var(--border);} .adv-btn-clear:hover:not(:disabled){background:var(--bg);color:var(--text);} .adv-btn-clear:disabled{opacity:0.45;cursor:not-allowed;} .adv-btn-apply{background:var(--primary);color:#fff;border:1px solid var(--primary);} .adv-btn-apply:hover{background:#5B21B6;border-color:var(--c-violet-text);} @media (max-width:900px){ .adv-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .adv-field-wide{grid-column:span 2;} } @media (max-width:640px){ .adv-grid{grid-template-columns:1fr;} .adv-field-wide{grid-column:span 1;} .filter-bar-divider{display:none;} .adv-foot{flex-direction:column;align-items:stretch;} .adv-foot-actions{justify-content:flex-end;} } .filter-options{display:flex;flex-direction:column;gap:4px;} .filter-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:12.5px;transition:all 0.1s;user-select:none;} .filter-opt:hover{background:var(--bg);} .filter-opt input[type="checkbox"]{appearance:none;width:14px;height:14px;border:1.5px solid var(--border-strong);border-radius:4px;cursor:pointer;flex-shrink:0;position:relative;transition:all 0.15s;} .filter-opt input[type="checkbox"]:checked{background:var(--primary);border-color:var(--primary);} .filter-opt input[type="checkbox"]:checked::after{content:'';position:absolute;top:1px;left:4px;width:4px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);} .filter-opt .opt-count{margin-left:auto;color:var(--text-muted);font-size:11px;} .catalog-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:0 4px;} .catalog-meta .count{font-size:13px;color:var(--text-soft);} .catalog-meta .count b{color:var(--text);font-weight:600;} .active-filters{display:flex;gap:6px;flex-wrap:wrap;} .chip{background:var(--primary-soft);color:var(--primary);font-size:11.5px;padding:3px 8px;border-radius:12px;font-weight:600;display:inline-flex;align-items:center;gap:4px;} .chip button{color:var(--primary);font-size:13px;line-height:1;} /* GRID & CARD */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;} .card-preview{background:linear-gradient(135deg,#F8FAFC 0%,#EEF2F7 100%);} .thumb-placeholder{color:#CBD5E1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;} .thumb-placeholder.big{color:var(--text-muted);} /* Live thumbnail awaiting its signed URL — neutral shimmer until SBUrl.hydrate fills it */ .thumb-loading{background-color:#EEF2F7;background-image:linear-gradient(100deg,#EEF2F7 30%,#F8FAFC 50%,#EEF2F7 70%);background-size:200% 100%;animation:thumbShimmer 1.2s ease-in-out infinite;} @keyframes thumbShimmer{from{background-position:200% 0;}to{background-position:-200% 0;}} .grid.list{display:flex;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;} .list-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto 110px 70px auto;gap:14px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.12s;background:var(--surface);} .list-row:last-child{border-bottom:none;} .list-row:hover{background:var(--surface-2);} .list-body{min-width:0;} /* List-row brand badge — compact WL → Brand pair (mirrors the card cover) */ .list-icon-cell{ display:flex;align-items:center;gap:4px; flex-shrink:0; min-width:28px; } .list-icon-cell.list-icon-single{ min-width:28px; } .list-icon-cell.list-icon-empty{ width:28px; height:28px; } .list-favicon{ width:28px;height:28px; object-fit:contain; background:var(--surface); padding:3px; border-radius:6px; border:1px solid var(--border); flex-shrink:0; overflow:hidden; } .list-favicon-unknown{ display:flex;align-items:center;justify-content:center; color:var(--text-muted); border:1px dashed #CBD5E1; font-size:14px;font-weight:700; padding:0; } .list-icon-sep{ color:var(--text-muted); flex-shrink:0; opacity:0.7; } .list-name{font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .list-meta{font-size:11.5px;color:var(--text-muted);display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden;} .list-meta code{font-family:'SF Mono',Menlo,monospace;color:var(--text-soft);font-size:11px;} .list-dot{color:var(--border-strong);} .list-link-mini{background:var(--emerald-soft);color:var(--c-green-text);padding:1px 6px;border-radius:4px;font-size:10.5px;font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;} .list-link-mini.unlinked{background:var(--amber-soft);color:var(--c-amber-text);} .list-link-mini.standalone{background:rgba(100,116,139,0.10);color:var(--text-soft);cursor:default;} /* Detail-modal "LP for campaign" row — click jumps to the LP, or shows a passive standalone tag when no LP exists at this Creative ID. */ .detail-lp-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 6px; background: var(--emerald-soft); color:var(--c-green-text); border: 1px solid rgba(5,150,105,0.25); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.12s; } .detail-lp-link:hover { background: var(--emerald-soft); border-color: rgba(5,150,105,0.5); } .detail-lp-link-arrow { font-size: 11px; opacity: 0.7; margin-left: 2px; } .detail-standalone { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; background: rgba(100,116,139,0.10); color:var(--text-soft); border: 1px solid rgba(100,116,139,0.18); font-size: 11.5px; font-weight: 600; font-style: italic; } .list-link-mini:hover{filter:brightness(0.95);} .list-tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;} .list-tags .tag{font-size:10.5px;padding:2px 7px;white-space:nowrap;} .list-col{font-size:12px;color:var(--text-soft);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .list-col-type{text-transform:uppercase;letter-spacing:0.04em;font-size:10.5px;font-weight:700;color:var(--text-muted);} .list-flag{font-size:13px;} .list-actions{display:flex;gap:6px;align-items:center;} .list-act{display:inline-flex;align-items:center;gap:4px;padding:6px 9px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text-soft);font-size:11.5px;font-weight:600;cursor:pointer;transition:all 0.15s;} .list-act:hover{background:var(--bg);color:var(--text);} .list-act.primary { background: #7C3AED; color: white; border-color:var(--c-violet-text); } .list-act.primary:hover { background: #6D28D9; } .grid.list .grid-section-header{grid-column:unset;margin-bottom:0;padding:14px 16px 10px;border-bottom:1px solid var(--border);} .grid.list .grid-section-header:not(:first-child){margin-top:0;border-top:1px solid var(--border);padding-top:14px;} @media (max-width:900px){.list-row{grid-template-columns:auto minmax(0,1fr) auto;}.list-col,.list-tags{display:none;}} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all 0.2s;cursor:pointer;position:relative;display:flex;flex-direction:column;} .card:hover{border-color:#C7D2FE;box-shadow:var(--shadow-lg);transform:translateY(-2px);} .card-preview{height:160px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;} .play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;} .play-overlay svg{background:rgba(255,255,255,0.95);border-radius:50%;padding:12px;width:44px;height:44px;box-shadow:0 4px 12px rgba(0,0,0,0.2);} .card-body{padding:12px 14px;display:flex;flex-direction:column;gap:8px;flex:1;} .card-name{font-weight:600;font-size:13.5px;line-height:1.35;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .card-id{font-size:11px;color:var(--text-muted);font-family:'SF Mono',Menlo,monospace;display:inline-flex;align-items:center;gap:6px;} .card-id-label{font-family:'Inter',-apple-system,system-ui,sans-serif;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);background:var(--bg);padding:2px 6px;border-radius:3px;line-height:1.2;} .list-id-label{font-family:'Inter',-apple-system,system-ui,sans-serif;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);background:var(--bg);padding:2px 6px;border-radius:3px;line-height:1.2;flex-shrink:0;} .copy-id{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:1px solid transparent;background:transparent;color:var(--text-muted);border-radius:4px;cursor:pointer;position:relative;transition:all 0.15s;flex-shrink:0;} .copy-id:hover{background:var(--surface-2);color:var(--text);border-color:var(--border);} .copy-id:active{transform:scale(0.9);} .copy-id.copied{background:var(--emerald-soft);color:var(--c-green-text);border-color:#A7F3D0;} .copy-id::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:#0F172A;color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.15s;z-index:5;} .copy-id:hover::after,.copy-id.copied::after{opacity:1;} .card-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px;} .tag{font-size:10.5px;padding:2px 7px;border-radius:4px;font-weight:600;background:var(--bg);color:var(--text-soft);white-space:nowrap;} .tag.special{background:var(--amber-soft);color:var(--c-amber-text);} .tag.wl{background:var(--violet-soft);color:var(--violet);} .card-actions{display:flex;gap:6px;border-top:1px solid var(--border);padding:10px 14px;background:var(--surface-2);} .card-action{flex:1;padding:6px 8px;border-radius:6px;font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:4px;transition:all 0.15s;color:var(--text-soft);border:1px solid transparent;} .card-action:hover{background:var(--surface);color:var(--text);border-color:var(--border);} .card-action.primary{background:var(--text);color:white;} .card-action.primary:hover{background:#0F172A;border-color:transparent;color:white;} .card-action.icon-only{flex:0 0 auto;width:32px;padding:6px;display:inline-flex;align-items:center;justify-content:center;} .empty{text-align:center;padding:60px 20px;color:var(--text-muted);} .empty h3{font-size:16px;color:var(--text);margin-bottom:6px;} /* MODALS */ .modal-bg{position:fixed;inset:0;background:rgba(15,23,42,0.55);backdrop-filter:blur(4px);z-index:100;display:none;align-items:center;justify-content:center;padding:24px;overflow-y:auto;} .modal-bg.open{display:flex;} .modal{background:var(--surface);border-radius:16px;width:100%;max-width:920px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-xl);animation:slideUp 0.25s cubic-bezier(0.2,0.8,0.2,1);} .analytics-modal{max-width:1100px!important;} .link-modal{max-width:600px!important;} @keyframes slideUp{from{opacity:0;transform:translateY(20px) scale(0.98);}to{opacity:1;transform:translateY(0) scale(1);}} .modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px;} .modal-head h2{font-size:16px;font-weight:600;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;} /* Creative ID chip at the top of the detail modal — copy-to-clipboard. */ .modal-id-chip{ display:inline-flex;align-items:center;gap:6px; padding:3px 4px 3px 9px; background:var(--surface-2);border:1px solid var(--border);border-radius:7px; font-family:'SF Mono',Menlo,monospace;font-size:11.5px;font-weight:600; color:var(--text-soft);line-height:1; transition:border-color 0.15s, background 0.15s; } .modal-id-chip:hover{border-color:var(--border-strong);background:var(--surface-2);} .modal-id-chip-label{ font-family:'Inter',system-ui,sans-serif; font-size:10px;font-weight:700;letter-spacing:0.04em; text-transform:uppercase;color:var(--text-muted); } .modal-id-chip-val{color:var(--text-soft);} .modal-id-chip-copy{ display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;border-radius:5px; background:transparent;border:0;cursor:pointer; color:var(--text-muted);padding:0;margin-left:2px; transition:background 0.15s, color 0.15s, transform 0.1s; position:relative; } .modal-id-chip-copy:hover{background:var(--surface);color:var(--primary);box-shadow:0 0 0 1px var(--border);} .modal-id-chip-copy:active{transform:scale(0.92);} .modal-id-chip-copy .ic-check{display:none;} .modal-id-chip-copy.copied{background:var(--emerald-soft);color:var(--c-green-text);box-shadow:0 0 0 1px #BBE4C6;} .modal-id-chip-copy.copied .ic-copy{display:none;} .modal-id-chip-copy.copied .ic-check{display:inline-block;} .modal-close{width:30px;height:30px;border-radius:6px;color:var(--text-soft);display:flex;align-items:center;justify-content:center;} .modal-close:hover{background:var(--bg);color:var(--text);} .modal-body{display:flex;flex-direction:column;overflow-y:auto;} .modal-body-grid{display:grid;grid-template-columns:1.1fr 1fr;} .modal-preview{padding:20px;background:var(--bg);display:flex;flex-direction:column;gap:14px;} .modal-preview-img{ border-radius:var(--radius); height:480px; position:relative; overflow:hidden; /* Override the cover-style inline background that the grid uses — in the modal we want the WHOLE banner visible, regardless of aspect ratio (square, portrait, landscape). The checkered fade behind it makes the letterboxing read as intentional. */ background-color:rgba(15,23,42,0.04) !important; background-image:linear-gradient(135deg,#F8FAFC 0%,#EEF2F7 100%); background-size:contain !important; background-repeat:no-repeat !important; background-position:center !important; } [data-theme="dark"] .modal-preview-img{ background-color:rgba(255,255,255,0.04) !important; background-image:none; } .preview-spec{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;font-size:12.5px;color:var(--text-soft);} .preview-spec b{color:var(--text);} .modal-details{padding:22px;overflow-y:auto;} .detail-row{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;align-items:start;} .detail-row:last-of-type{border-bottom:none;} .detail-label{color:var(--text-muted);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.03em;padding-top:2px;} .detail-val{color:var(--text);font-weight:500;word-break:break-word;} .detail-val a{color:var(--primary);font-weight:500;} .detail-val a:hover{text-decoration:underline;} .detail-tags{display:flex;gap:4px;flex-wrap:wrap;} .url-cell{display:flex;align-items:flex-start;gap:6px;min-width:0;} .url-cell .url-link{flex:1;min-width:0;word-break:break-all;} .copy-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);border-radius:6px;cursor:pointer;position:relative;transition:all 0.15s;margin-top:1px;} .copy-btn:hover{background:var(--bg);color:var(--text);border-color:#CBD5E1;} .copy-btn:active{transform:scale(0.92);} .copy-btn.copied{background:var(--emerald-soft);color:var(--c-green-text);border-color:#A7F3D0;} .copy-btn::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:#0F172A;color:#fff;font-size:10.5px;font-weight:600;padding:3px 7px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.15s;} .copy-btn:hover::after,.copy-btn.copied::after{opacity:1;} .modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--surface-2);} .modal-foot-left{display:flex;gap:8px;} .btn{padding:9px 14px;border-radius:8px;font-size:13px;font-weight:600;transition:all 0.15s;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);} .btn:hover{background:var(--bg);} .btn.primary { background: #7C3AED; color: white; border-color:var(--c-violet-text); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3); } .btn.primary:hover { background: #6D28D9; border-color:var(--c-violet-text); } /* RELATED */ .modal-related{border-top:1px solid var(--border);padding:22px;background:var(--surface);} .related-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;} .related-title{font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;color:var(--text);margin-bottom:6px;} .related-title svg{color:var(--primary);} .related-title .related-count{background:var(--primary-soft);color:var(--primary);font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:10px;line-height:1.4;} .related-summary{font-size:12px;color:var(--text-soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .rel-sum-item{display:inline-flex;align-items:center;gap:4px;} .rel-sum-item b{color:var(--text);font-weight:700;margin:0 1px;} .rel-sum-item svg{color:var(--text-soft);} .rel-sum-sep{color:var(--text-muted);} .related-add-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer;transition:all 0.15s;white-space:nowrap;flex-shrink:0;} .related-add-btn:hover{background:var(--primary);color:white;border-color:var(--primary);} .related-sections{display:flex;flex-direction:column;gap:16px;} .related-section{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px;} .related-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 2px;} .related-section-title{font-size:12px;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:0.05em;display:inline-flex;align-items:center;gap:6px;} .related-section-title svg{color:var(--text-soft);} .related-section-count{font-size:11px;font-weight:700;color:var(--text-soft);background:var(--surface);padding:2px 8px;border-radius:10px;border:1px solid var(--border);} .related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;} .related-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:all 0.15s;display:flex;flex-direction:column;} .related-card:hover{border-color:#C7D2FE;box-shadow:var(--shadow);transform:translateY(-1px);} .related-preview{height:80px;position:relative;background:linear-gradient(135deg,#F8FAFC,#EEF2F7);display:flex;align-items:center;justify-content:center;} .related-preview-placeholder{color:#CBD5E1;} .related-spec-chip{position:absolute;bottom:5px;right:5px;background:rgba(255,255,255,0.92);backdrop-filter:blur(4px);color:var(--text);font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;z-index:1;font-family:'SF Mono',Menlo,monospace;} .related-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,0.95);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;z-index:1;} /* File-count chip in related-card meta row (e.g. "2 files") */ .related-files-count{ display:inline-block; padding:0 5px; margin-left:1px; background:rgba(79,70,229,0.08); color:var(--primary); border-radius:3px; font-size:10px; font-weight:700; } /* Section-header CTA cluster — currently just the Upload button. The old Download buttons (per-tile + "Download all") were removed in favor of one download surface per creative (its own Files section). */ .related-head-actions{ display:inline-flex; align-items:center; gap:8px; flex-shrink:0; } /* Upload button on Related Creatives — primary indigo since uploading is the main way to populate this list (no more "link existing creatives" picker). */ .related-upload-btn{ background:var(--primary) !important; color:#fff !important; border-color:var(--primary) !important; } .related-upload-btn:hover{ background:#4338CA !important; border-color:var(--c-blue-text) !important; } /* Related-creative card body — stacked layout: name → ID → full-width CTA */ .related-info{ padding:10px 12px 12px; flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; } .related-name{ font-size:13px; font-weight:700; color:var(--text); line-height:1.25; letter-spacing:-0.01em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:normal; overflow-wrap:anywhere; } .related-meta-row{ font-size:11px; color:var(--text-muted); } .related-id{ font-family:'SF Mono',Menlo,monospace; } /* Full-width "View creative →" CTA at the bottom of each tile */ .related-open-btn{ margin-top:4px; display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:7px 10px; border-radius:6px; background:var(--primary); border:1px solid var(--primary); color:#fff; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all 0.12s; font-family:inherit; } .related-open-btn:hover{background:#4338CA;border-color:var(--c-blue-text);} .related-open-btn svg{flex-shrink:0;} .related-foot{margin-top:14px;padding:10px 12px;background:var(--primary-soft);border-radius:8px;font-size:11.5px;color:var(--text-soft);display:flex;align-items:center;gap:8px;} .related-foot svg{color:var(--primary);flex-shrink:0;} .related-foot code{font-family:'SF Mono',Menlo,monospace;background:var(--surface);padding:1px 5px;border-radius:4px;font-size:11px;color:var(--text);} .related-empty-state{text-align:center;padding:32px 20px;background:var(--bg);border:1px dashed var(--border-strong);border-radius:10px;} .related-empty-icon{color:#CBD5E1;margin-bottom:8px;} .related-empty-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;} .related-empty-sub{font-size:12px;color:var(--text-soft);max-width:480px;margin:0 auto;line-height:1.5;} .related-empty-sub code{font-family:'SF Mono',Menlo,monospace;background:var(--surface);border:1px solid var(--border);padding:1px 5px;border-radius:4px;font-size:11px;color:var(--text);} /* ANALYTICS */ .an-ctx{display:flex;gap:14px;align-items:center;padding:14px 22px;background:var(--bg);border-bottom:1px solid var(--border);} .an-ctx-preview{width:56px;height:56px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:white;font-size:10px;font-weight:700;text-align:center;padding:4px;overflow:hidden;background:linear-gradient(135deg,#F8FAFC,#EEF2F7);} .an-ctx-name{font-size:14px;font-weight:600;color:var(--text);margin-bottom:3px;} .an-ctx-meta{font-size:12px;color:var(--text-soft);display:flex;gap:8px;flex-wrap:wrap;align-items:center;} .an-ctx-meta code{background:var(--surface);border:1px solid var(--border);padding:1px 6px;border-radius:4px;font-family:'SF Mono',Menlo,monospace;font-size:11px;color:var(--text);} .an-controls{display:flex;align-items:center;gap:10px;padding:14px 22px;border-bottom:1px solid var(--border);flex-wrap:wrap;} .an-control{display:flex;flex-direction:column;gap:3px;} .an-control label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);font-weight:600;} .an-control select{padding:7px 10px;border:1px solid var(--border);border-radius:7px;background:var(--surface);font-size:12.5px;font-weight:500;color:var(--text);cursor:pointer;} .an-controls-spacer{flex:1;} .an-warning{background:var(--amber-soft);border:1px solid #FDE68A;color:var(--c-amber-text);padding:10px 14px;margin:14px 22px 0;border-radius:8px;font-size:12.5px;display:flex;align-items:center;gap:8px;} .an-body{padding:20px 22px;overflow-y:auto;} .kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px;margin-bottom:24px;} .kpi{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;} .kpi-label{font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px;display:flex;align-items:center;gap:5px;} .kpi-value{font-size:22px;font-weight:700;letter-spacing:-0.02em;color:var(--text);line-height:1.1;margin-bottom:4px;} .kpi-trend{font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:3px;} .kpi-trend.up{color:var(--emerald);} .kpi-trend.down{color:var(--rose);} .kpi-trend.flat{color:var(--text-muted);} .kpi-trend .prev{color:var(--text-muted);font-weight:500;margin-left:4px;} .an-section{margin-bottom:26px;} .an-section h3{font-size:13px;font-weight:600;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:8px;} .an-section h3 .pill-tag{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:10px;background:var(--bg);color:var(--text-soft);letter-spacing:0;} .funnel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;} .funnel-stage{display:grid;grid-template-columns:110px 1fr 110px;gap:14px;align-items:center;padding:8px 0;} .funnel-stage + .funnel-stage{border-top:1px solid var(--border);} .funnel-stage-label{font-size:12.5px;font-weight:600;color:var(--text);} .funnel-bar-wrap{height:22px;background:var(--bg);border-radius:6px;overflow:hidden;position:relative;} .funnel-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--cyan));border-radius:6px;transition:width 0.5s cubic-bezier(0.2,0.8,0.2,1);} .funnel-bar-label{position:absolute;inset:0;display:flex;align-items:center;padding:0 8px;font-size:11.5px;font-weight:600;color:var(--text);z-index:1;} .funnel-stage-value{font-size:14px;font-weight:700;color:var(--text);text-align:right;font-variant-numeric:tabular-nums;} .trend-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;} .trend-legend{display:flex;gap:16px;margin-bottom:10px;font-size:11.5px;} .legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle;} .legend-prev{background:transparent;border:2px dashed var(--text-muted);border-radius:0;height:2px;width:12px;vertical-align:middle;} .trend-chart-svg{width:100%;height:160px;display:block;} .trend-chart-grid line{stroke:var(--border);stroke-width:1;} .trend-chart-axis{font-size:9px;fill:var(--text-muted);} .an-breakdowns{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .breakdown-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;} .breakdown-table{width:100%;border-collapse:collapse;font-size:12px;} .breakdown-table th{text-align:left;padding:10px 12px;font-size:10.5px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;background:var(--bg);border-bottom:1px solid var(--border);} .breakdown-table th.num,.breakdown-table td.num{text-align:right;font-variant-numeric:tabular-nums;} .breakdown-table td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text);font-weight:500;} .breakdown-table tr:last-child td{border-bottom:none;} /* DASHBOARD */ .dash-controls{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:60px;z-index:30;} .dash-controls-inner{max-width:1400px;margin:0 auto;display:flex;align-items:flex-end;gap:10px;padding:12px 24px;flex-wrap:wrap;} .dash-divider{width:1px;align-self:stretch;background:var(--border);margin:0 4px;} .dash-controls-spacer{flex:1;} .dash-body{max-width:1400px;margin:0 auto;padding:20px 24px 60px;} .dash-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;margin-bottom:16px;} .dash-section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;gap:12px;} .dash-section-head h2{font-size:14px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:8px;} .dash-section-head .section-sub{font-size:11.5px;color:var(--text-muted);font-weight:500;} .dash-kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px;margin-bottom:16px;} .dash-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;} @media (max-width:900px){.dash-two-col{grid-template-columns:1fr;}} .perf-table{width:100%;border-collapse:collapse;font-size:12.5px;} .perf-table th{text-align:left;padding:9px 10px;font-size:10.5px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;background:var(--bg);border-bottom:1px solid var(--border);} .perf-table th.num,.perf-table td.num{text-align:right;font-variant-numeric:tabular-nums;} .perf-table td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--text);font-weight:500;vertical-align:middle;} .perf-table tr:last-child td{border-bottom:none;} .perf-table tr.clickable{cursor:pointer;transition:background 0.12s;} .perf-table tr.clickable:hover td{background:var(--surface-2);} .perf-name{display:flex;align-items:center;gap:8px;min-width:0;} .perf-thumb{width:32px;height:22px;border-radius:4px;background:linear-gradient(135deg,#F8FAFC,#EEF2F7);flex-shrink:0;background-size:cover;background-position:center;} .perf-name-text{font-size:12.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .perf-rank{display:inline-block;width:18px;height:18px;background:var(--bg);border-radius:50%;text-align:center;line-height:18px;font-size:10px;font-weight:700;color:var(--text-soft);margin-right:4px;} .perf-table tr:nth-child(1) .perf-rank{background:var(--amber-soft);color:var(--c-amber-text);} .perf-table tr:nth-child(2) .perf-rank{background:var(--border);color:var(--text-soft);} .perf-table tr:nth-child(3) .perf-rank{background:var(--amber-soft);color:var(--c-amber-text);} .dash-empty{text-align:center;padding:40px 20px;color:var(--text-muted);font-size:13px;} /* LINK MODAL */ .link-modal-ctx{padding:14px 22px;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;} .link-modal-ctx-preview{width:44px;height:44px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:white;font-size:9px;font-weight:700;text-align:center;padding:3px;overflow:hidden;background:linear-gradient(135deg,#F8FAFC,#EEF2F7);} .link-modal-ctx-name{font-size:13px;font-weight:600;color:var(--text);} .link-modal-ctx-meta{font-size:11.5px;color:var(--text-soft);margin-top:2px;} .link-search{padding:12px 22px;border-bottom:1px solid var(--border);} .link-search input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:var(--bg);} .link-search input:focus{outline:none;background-color:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);} .link-list{max-height:380px;overflow-y:auto;padding:6px;} .link-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:all 0.15s;} .link-row:hover{background:var(--bg);} .link-row.current{background:var(--emerald-soft);} .link-row-preview{width:48px;height:36px;border-radius:6px;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,#F8FAFC,#EEF2F7);} .link-row-info{flex:1;min-width:0;} .link-row-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .link-row-meta{font-size:11.5px;color:var(--text-soft);margin-top:2px;font-family:'SF Mono',Menlo,monospace;} .link-row-cta{background:var(--text);color:white;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:6px;flex-shrink:0;} .link-row.current .link-row-cta{background:var(--emerald);} /* DEV NOTES */ .footnote{max-width:1400px;margin:0 auto;padding:0 24px 40px;text-align:center;font-size:12px;color:var(--text-muted);} /* Phase 1 additions */ .card-preview { background: linear-gradient(135deg, #F8FAFC 0%, #EEF2F7 100%); } .thumb-placeholder{color:#CBD5E1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;} .thumb-placeholder.big{color:var(--text-muted);} .card-hover-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transform:translateY(-4px);transition:all 0.15s;z-index:3;} .card:hover .card-hover-actions{opacity:1;transform:translateY(0);} .hover-act{width:30px;height:30px;background:rgba(255,255,255,0.96);backdrop-filter:blur(6px);border-radius:7px;border:1px solid rgba(0,0,0,0.06);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.12s;box-shadow:0 2px 4px rgba(0,0,0,0.08);} .hover-act:hover{transform:scale(1.05);background:white;} .hover-act.primary { background: #7C3AED; color: white; border-color:var(--c-violet-text); box-shadow: 0 2px 6px rgba(124, 58, 237, 0.35); } .hover-act.primary:hover { background: #6D28D9; border-color:var(--c-violet-text); } .filter-popover-search{width:100%;padding:6px 9px;border:1px solid var(--border);border-radius:6px;font-size:12.5px;background:var(--bg);margin-bottom:6px;} .filter-popover-search:focus{outline:none;background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft);} .link-section-head{padding:8px 10px 4px;font-size:10.5px;font-weight:700;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.05em;display:flex;align-items:center;gap:6px;} .link-section-head.muted{color:var(--text-muted);margin-top:6px;border-top:1px solid var(--border);padding-top:12px;} .link-section-count{background:var(--bg);color:var(--text-soft);font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px;letter-spacing:0;} .link-row.disabled{opacity:0.55;} .link-row.disabled .link-row-name{color:var(--text-muted);} .link-rule{margin:10px 22px;padding:9px 12px;background:var(--primary-soft);border-radius:8px;font-size:11.5px;color:var(--text-soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.45;} .link-rule b{color:var(--text);font-weight:600;} .link-rule em{font-style:normal;color:var(--text);font-weight:700;padding:0 4px;background:rgba(6,182,212,0.12);border-radius:3px;} /* Cross-brand white-label allowance badge in link picker rows */ .link-basis-badge{ display:inline-flex;align-items:center; margin-left:8px;padding:1px 7px; font-size:10px;font-weight:700; background:linear-gradient(90deg, rgba(6,182,212,0.16), rgba(124,58,237,0.16)); color:var(--c-cyan-text); border:1px solid rgba(6,182,212,0.35); border-radius:999px; letter-spacing:0.02em; white-space:nowrap; vertical-align:middle; } .modal-comments{border-top:1px solid var(--border);padding:22px;background:var(--surface);} .comments-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;} .comments-title{font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;color:var(--text);} .comments-title svg{color:var(--text-soft);} .comments-count{background:var(--bg);color:var(--text-soft);font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px;} .comments-link{font-size:12px;color:var(--primary);font-weight:600;text-decoration:none;} .comments-link:hover{text-decoration:underline;} .comments-list{display:flex;flex-direction:column;gap:12px;} .comment{display:flex;gap:10px;align-items:flex-start;background:var(--bg);padding:10px 12px;border-radius:8px;} .comment-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--violet));color:white;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;} .comment-body{flex:1;min-width:0;} .comment-head{font-size:12px;color:var(--text);} .comment-head b{font-weight:600;} .comment-date{color:var(--text-muted);font-weight:400;margin-left:6px;} .comment-text{font-size:12.5px;color:var(--text-soft);margin-top:4px;line-height:1.5;word-break:break-word;} .comment-text a{color:var(--primary);text-decoration:underline;word-break:break-all;} .card.kb-cursor,.list-row.kb-cursor{outline:2px solid var(--primary);outline-offset:2px;box-shadow:0 0 0 4px var(--primary-soft);} kbd{display:inline-block;padding:2px 7px;font-size:11px;font-family:'SF Mono',Menlo,monospace;background:var(--bg);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:4px;color:var(--text);margin-right:4px;} /* Subtle brand-color wash + bottom vignette, applied uniformly to every card preview */ .card-preview::before { content: ''; position: absolute; inset: 0; background: var(--brand-color, #94A3B8); opacity: 0.08; mix-blend-mode: multiply; pointer-events: none; z-index: 2; } .card-preview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.28) 100%); pointer-events: none; z-index: 2; } .card-preview iframe { filter: saturate(0.85) contrast(0.95) brightness(0.98); transition: filter 0.2s; } .card:hover .card-preview iframe { filter: saturate(1) contrast(1) brightness(1); } .card:hover .card-preview::before { opacity: 0; transition: opacity 0.2s; } .card:hover .card-preview::after { background: linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,0.15) 100%); transition: background 0.2s; } .card-hover-actions { z-index: 4; } /* keep hover buttons above the tint overlays */ .play-overlay { z-index: 3; } /* Card cover — SOFT BRAND-TINTED. Light wash derived from the brand color (Zenstox→mint, BrainTrade→rose, WBS→peach, 200 Invest→sky, etc.). Resting state shows brand-flavored card with the creative's name + meta. On hover, the cover fades away to reveal the underlying thumbnail/iframe. */ .card-preview { position: relative; } .card-cover { position: absolute; inset: 0; /* Two-layer wash: a soft brand tint + a top diagonal highlight for depth. color-mix gives us a brand-flavored pastel without needing per-brand CSS. */ background: linear-gradient(155deg, color-mix(in srgb, var(--brand-color, #94A3B8) 18%, #FFFFFF) 0%, color-mix(in srgb, var(--brand-color, #94A3B8) 8%, #FFFFFF) 60%, color-mix(in srgb, var(--brand-color, #94A3B8) 14%, #FFFFFF) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px; gap: 10px; color: var(--text, #0F172A); z-index: 2; opacity: 1; transition: opacity 0.25s ease; pointer-events: none; } /* Subtle inner highlight ring for depth on the light cards */ .card-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 color-mix(in srgb, var(--brand-color, #94A3B8) 22%, transparent); border-radius: inherit; } .card:hover .card-cover { opacity: 0; } .cover-name { font-size: 14px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: -0.01em; max-width: 100%; margin-top: 4px; color: color-mix(in srgb, var(--brand-color, #0F172A) 75%, #0F172A); text-shadow: 0 1px 0 rgba(255,255,255,0.4); } /* Hard-clamp long campaign names to 2 lines. Higher specificity forces the -webkit-box display (something resolves .cover-name's display to flow-root, which silently disables -webkit-line-clamp); max-height is a clean fallback. */ .card .card-cover .cover-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-height: 2.6em; /* 2 × line-height(1.3) */ overflow: hidden; text-overflow: ellipsis; } .cover-meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; line-height: 1; } .cover-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--brand-color, #0F172A) 65%, #0F172A); background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 999px; backdrop-filter: blur(4px); box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-color, #94A3B8) 12%, transparent); } /* The hover actions and play-overlay need to stay above the cover */ .card-hover-actions { z-index: 4 !important; } .play-overlay { z-index: 3 !important; } /* Cover icon — brand favicon with type-emoji fallback */ .cover-icon { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; line-height: 1; margin-top: 4px; } .cover-favicon { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; flex-shrink: 0; } .cover-fallback { font-size: 24px; opacity: 0.55; } /* Brand accent bar — subtle 3px brand-color stripe at the top of every cover */ .card-cover::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-color, #94A3B8); } /* DARK MODE · tone down the bright brand-pastel card covers so they belong to the dark theme instead of glowing like light mode. Mix the brand color into a dark base (not white) and flip cover text + chips to light. */ html[data-theme="dark"] .card-cover{ background: linear-gradient(155deg, color-mix(in srgb, var(--brand-color, #94A3B8) 30%, #0E1626) 0%, color-mix(in srgb, var(--brand-color, #94A3B8) 15%, #0E1626) 60%, color-mix(in srgb, var(--brand-color, #94A3B8) 24%, #0E1626) 100%); } html[data-theme="dark"] .card-cover::after{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 color-mix(in srgb, var(--brand-color, #94A3B8) 28%, transparent); } html[data-theme="dark"] .cover-name{ color: color-mix(in srgb, var(--brand-color, #E8EDF5) 28%, #E8EDF5); text-shadow: 0 1px 3px rgba(0,0,0,0.55); } html[data-theme="dark"] .cover-chip, html[data-theme="dark"] .cover-flag-row{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); box-shadow: none; } html[data-theme="dark"] .cover-chip{ color: var(--text); } html[data-theme="dark"] .cover-icon-sep, html[data-theme="dark"] .cover-fallback{ color: color-mix(in srgb, var(--brand-color, #A6B2C8) 40%, #A6B2C8); } .cover-icon-sep { display: inline-flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--brand-color, #94A3B8) 55%, #475569); flex-shrink: 0; opacity: 0.7; } .cover-fallback { color: color-mix(in srgb, var(--brand-color, #94A3B8) 60%, #0F172A); opacity: 0.7; } /* Card cover — language flags row. Just emoji flags of every language in the campaign family. No language names, no market codes — keeps the card bottom clean and scannable. */ .cover-flag-row { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 999px; backdrop-filter: blur(4px); box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-color, #94A3B8) 12%, transparent); } .cover-flag { font-size: 15px; line-height: 1; opacity: 1; transition: transform 0.15s; } /* Active flag (current asset's language) — slightly larger so you can tell which one this card represents, but no dimming on the others. */ .cover-flag.cover-flag-active { transform: scale(1.12); } /* Brand favicons sit on a solid white plate so every logo — colored, dark, or with transparency — reads consistently against the soft brand tint. */ .cover-favicon { background:var(--surface); padding: 4px; box-shadow: 0 1px 3px color-mix(in srgb, var(--brand-color, #94A3B8) 18%, transparent); overflow: hidden; } /* "Unknown" placeholder — appears in place of the brand icon when the target brand isn't known yet (white-label only). Stays the same 42×42 plate shape, just shows a "?" to make the gap visible. */ .cover-favicon-unknown { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background:var(--surface); color:var(--text-muted); border: 1px dashed #CBD5E1; font-size: 22px; font-weight: 700; flex-shrink: 0; padding: 0; box-shadow: 0 1px 3px color-mix(in srgb, var(--brand-color, #94A3B8) 18%, transparent); } /* ========================================================= REQUEST CREATIVE FORM ========================================================= */ .rf-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px); z-index: 1000; display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; } .rf-backdrop.open { display: flex; } .rf-modal { background:var(--surface); border-radius: 14px; width: 100%; max-width: 720px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 80px); } .rf-head { padding: 22px 26px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%); } .rf-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 4px; display: inline-flex; align-items: center; gap: 8px; } .rf-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; max-width: 520px; } .rf-close { background: transparent; border: 1px solid var(--border); width: 32px; height: 32px; border-radius: 8px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .rf-close:hover { background:var(--surface-2); color: var(--text); } .rf-body { padding: 20px 26px; overflow-y: auto; flex: 1; } .rf-section { margin-bottom: 18px; } .rf-section:last-child { margin-bottom: 0; } .rf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .rf-label { display: block; font-size: 12px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 7px; } .rf-req { color:var(--c-red-text); margin-left: 2px; } .rf-hint { color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; } .rf-input, .rf-select, .rf-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; font-family: inherit; color: var(--text); background:var(--surface); transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; } .rf-textarea { resize: vertical; min-height: 64px; line-height: 1.5; } .rf-input:focus, .rf-select:focus, .rf-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12); } .rf-summary { font-family: 'SF Mono', Menlo, monospace; font-size: 12.5px; background:var(--bg); } .rf-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .rf-type-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; border: 1.5px solid var(--border); background:var(--surface); border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all 0.15s; } .rf-type-chip:hover { border-color: #CBD5E1; color: var(--text); } .rf-type-chip.active { background: rgba(124, 58, 237, 0.06); border-color:var(--c-violet-text); color:var(--c-violet-text); } .rf-type-chip svg { color: inherit; } .rf-prio-row { display: flex; gap: 8px; } .rf-prio-chip { padding: 10px 18px; border: 1.5px solid var(--border); background:var(--surface); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all 0.15s; flex: 1; } .rf-prio-chip:hover { border-color: #CBD5E1; color: var(--text); } .rf-prio-chip.active { background:var(--surface-2); border-color:var(--text-soft); color: var(--text); } .rf-prio-chip.urgent.active { background: rgba(220, 38, 38, 0.08); border-color:var(--c-red-text); color:var(--c-red-text); } .rf-foot { padding: 16px 26px; border-top: 1px solid var(--border); background:var(--surface-2); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .rf-foot-info { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; } .rf-foot-info a { color: var(--primary); font-weight: 600; } .rf-foot-info a:hover { text-decoration: underline; } .rf-foot-actions { display: flex; gap: 8px; flex-wrap: wrap; } .rf-error { margin: 0 26px 8px; padding: 10px 12px; background: rgba(220, 38, 38, 0.07); border: 1px solid rgba(220, 38, 38, 0.25); border-radius: 8px; color:var(--c-red-text); font-size: 12.5px; display: flex; align-items: center; gap: 8px; } .rf-steps { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .rf-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background:var(--bg); border-radius: 8px; font-size: 13px; color: var(--text); } .rf-step-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 640px) { .rf-row { grid-template-columns: 1fr; } .rf-type-grid { grid-template-columns: repeat(2, 1fr); } .rf-modal { max-height: calc(100vh - 40px); } } /* Request form — iframe mode */ .rf-modal { max-width: 980px; height: calc(100vh - 80px); max-height: calc(100vh - 80px); } .rf-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .rf-iframe-wrap { flex: 1; position: relative; background:var(--surface); overflow: hidden; } .rf-iframe-wrap iframe { width: 100%; height: 100%; border: 0; display: block; } .rf-iframe-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background:var(--surface-2); z-index: 1; } .rf-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: rf-spin 0.9s linear infinite; } @keyframes rf-spin { to { transform: rotate(360deg); } } .rf-loading-text { font-size: 13px; font-weight: 600; color: var(--text); } .rf-loading-fallback { font-size: 12px; color: var(--text-muted); text-align: center; max-width: 360px; line-height: 1.5; } @media (max-width: 640px) { .rf-modal { height: calc(100vh - 32px); max-height: calc(100vh - 32px); } } /* Request form — CTA card mode (override iframe height) */ .rf-modal { max-width: 500px; height: auto; max-height: calc(100vh - 80px); } .rf-cta-card { position: relative; padding: 40px 36px 28px; text-align: center; } .rf-close-floating { position: absolute; top: 14px; right: 14px; } .rf-cta-icon { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, var(--rose-soft) 0%, #FECACA 100%); color:var(--c-red-text); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; } .rf-cta-title { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin-bottom: 8px; } .rf-cta-sub { font-size: 13.5px; color: var(--text-soft); line-height: 1.55; max-width: 380px; margin: 0 auto 24px; } .rf-cta-meta { background:var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 24px; text-align: left; } .rf-cta-meta-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-soft); padding: 5px 0; } .rf-cta-meta-row svg { color: var(--text-muted); flex-shrink: 0; } .rf-cta-meta-row b { color: var(--text); font-weight: 600; } .rf-cta-actions { display: flex; gap: 10px; justify-content: center; } .rf-cta-primary { padding: 11px 20px; font-size: 13.5px; } .rf-cta-url { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; justify-content: center; word-break: break-all; } .rf-cta-url a { color: var(--text-muted); text-decoration: none; } .rf-cta-url a:hover { color: var(--primary); text-decoration: underline; } /* ========================================================= BULK SELECT ========================================================= */ .bulk-checkbox { position: absolute; width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); border: 1.5px solid rgba(15, 23, 42, 0.18); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; opacity: 0; transition: opacity 0.15s, background 0.15s, border-color 0.15s, transform 0.1s; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1); } .bulk-checkbox .bulk-check-icon { opacity: 0; transition: opacity 0.1s; } .bulk-checkbox.checked .bulk-check-icon { opacity: 1; } .bulk-checkbox:hover { transform: scale(1.08); border-color: var(--primary); } .bulk-checkbox:active { transform: scale(0.95); } .bulk-checkbox.checked { background: var(--primary); border-color: var(--primary); } /* Card variant: top-left of preview */ .bulk-checkbox.card { top: 10px; left: 10px; } /* List variant: left of row, vertically centered */ .bulk-checkbox.list { position: static; flex-shrink: 0; margin-right: 4px; opacity: 1; background:var(--surface); } /* Reveal checkbox on card hover OR when any selection is active */ .card:hover .bulk-checkbox.card, .bulk-checkbox.card.checked { opacity: 1; } /* When grid has any selected items, force-show all checkboxes */ .grid.bulk-active .bulk-checkbox { opacity: 1; } /* Selected card visual */ .card.bulk-selected { outline: 2px solid var(--primary); outline-offset: -2px; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12), var(--shadow); } .list-row.bulk-selected { background: rgba(79, 70, 229, 0.05); border-left: 3px solid var(--primary); padding-left: 13px; } /* The sticky bar */ .bulk-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120%); background: #0F172A; color: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.35), 0 4px 12px rgba(15, 23, 42, 0.2); z-index: 200; min-width: 560px; max-width: calc(100vw - 32px); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s; opacity: 0; pointer-events: none; } .bulk-bar.open { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .bulk-bar-inner { display: flex; align-items: center; gap: 14px; padding: 12px 14px; flex-wrap: wrap; } .bulk-bar-left, .bulk-bar-right { display: flex; align-items: center; gap: 8px; } .bulk-bar-left { flex: 1 1 auto; min-width: 0; } .bulk-count { font-size: 13px; color: #fff; font-weight: 500; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; } .bulk-count b { font-size: 15px; font-weight: 700; } .bulk-comp { font-size: 11px; color: rgba(255, 255, 255, 0.55); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .bulk-link-btn { background: transparent; color: rgba(255, 255, 255, 0.65); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 8px; border-radius: 5px; border: none; cursor: pointer; transition: color 0.15s, background 0.15s; } .bulk-link-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .bulk-act { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 7px 11px; border-radius: 7px; background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; transition: background 0.15s, border-color 0.15s; white-space: nowrap; } .bulk-act:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.18); } .bulk-act.primary { background: #7C3AED; border-color:var(--c-violet-text); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4); } .bulk-act.primary:hover { background: #6D28D9; border-color:var(--c-violet-text); } .bulk-bar-hint { padding: 8px 14px 10px; font-size: 11px; color: rgba(255, 255, 255, 0.55); display: flex; align-items: center; gap: 6px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .bulk-toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%) translateY(20px); background:var(--emerald-soft); color:var(--c-green-text); border: 1px solid #A7F3D0; padding: 10px 16px; border-radius: 8px; font-size: 12.5px; font-weight: 600; z-index: 250; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12); opacity: 0; pointer-events: none; transition: transform 0.25s, opacity 0.2s; } .bulk-toast.open { transform: translateX(-50%) translateY(0); opacity: 1; } @media (max-width: 720px) { .bulk-bar { min-width: auto; left: 12px; right: 12px; transform: translateY(120%); } .bulk-bar.open { transform: translateY(0); } .bulk-bar-inner { flex-direction: column; align-items: stretch; } .bulk-bar-right { flex-wrap: wrap; justify-content: flex-end; } } /* ========================================================= SAVED VIEWS ========================================================= */ .saved-views-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 0 12px; border-bottom: 1px dashed var(--border); margin-bottom: 12px; } .sv-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-right: 4px; flex-shrink: 0; } .sv-empty { font-size: 12px; color: var(--text-muted); font-style: italic; } .sv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 10px; background:var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; transition: all 0.15s; } .sv-chip:hover { background: var(--bg); border-color: var(--border-strong); } .sv-chip.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); } .sv-chip .sv-icon { font-size: 13px; line-height: 1; } .sv-chip .sv-name { white-space: nowrap; } .sv-chip .sv-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 2px; border-radius: 50%; color: var(--text-muted); font-size: 14px; line-height: 1; font-weight: 400; transition: all 0.15s; opacity: 0; } .sv-chip:hover .sv-x { opacity: 1; } .sv-chip .sv-x:hover { background: rgba(220, 38, 38, 0.15); color:var(--c-red-text); } .sv-chip.builtin .sv-x { opacity: 0.4; } .sv-chip.builtin:hover .sv-x { opacity: 0.8; } .sv-save { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: transparent; border: 1px dashed var(--border-strong); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-soft); cursor: pointer; margin-left: 4px; transition: all 0.15s; } .sv-save:hover { background: var(--primary-soft); border-color: var(--primary); border-style: solid; color: var(--primary); } /* ========================================================= AI SUGGESTIONS PANEL ========================================================= */ .ai-suggestions { margin: 16px 22px 22px; padding: 18px 18px 16px; background: linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, rgba(6, 182, 212, 0.04) 100%); border: 1px solid rgba(124, 58, 237, 0.18); border-radius: 12px; position: relative; } .ai-suggestions::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: linear-gradient(90deg, #7C3AED 0%, #06B6D4 100%); border-radius: 12px 12px 0 0; } .ai-sug-head { margin-bottom: 12px; } .ai-sug-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .ai-sug-icon { width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%); color: white; display: inline-flex; align-items: center; justify-content: center; } .ai-sug-count { background: rgba(124, 58, 237, 0.12); color:var(--c-violet-text); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; } .ai-sug-subtitle { font-size: 11.5px; color: var(--text-soft); line-height: 1.45; margin-top: 4px; max-width: 580px; } .ai-sug-grid { display: grid; grid-template-columns: 1fr; gap: 8px; } .ai-sug-card { display: flex; align-items: center; gap: 12px; padding: 10px; background: white; border: 1px solid var(--border); border-radius: 10px; transition: border-color 0.15s, box-shadow 0.15s; } .ai-sug-card:hover { border-color: rgba(124, 58, 237, 0.4); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08); } .ai-sug-thumb { flex-shrink: 0; width: 56px; height: 56px; border-radius: 8px; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .ai-sug-body { flex: 1; min-width: 0; } .ai-sug-head-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 2px; } .ai-sug-name { font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .ai-sug-name:hover { color: var(--primary); text-decoration: underline; } .ai-sug-confidence { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; } .ai-sug-confidence-strong { background: rgba(5, 150, 105, 0.12); color:var(--c-green-text); } .ai-sug-confidence-good { background: rgba(124, 58, 237, 0.12); color:var(--c-violet-text); } .ai-sug-confidence-maybe { background: rgba(245, 158, 11, 0.12); color:var(--c-amber-text); } .ai-sug-confidence-weak { background: rgba(100, 116, 139, 0.12); color:var(--text-soft); } .ai-sug-meta { font-size: 11px; color: var(--text-muted); font-family: 'SF Mono', Menlo, monospace; margin-bottom: 6px; } .ai-sug-reasons { display: flex; gap: 4px; flex-wrap: wrap; } .ai-sug-reason { font-size: 10.5px; font-weight: 500; padding: 2px 7px; border-radius: 4px; background: var(--bg); color: var(--text-soft); } .ai-sug-reason-tag { background: rgba(124, 58, 237, 0.1); color:var(--c-violet-text); } .ai-sug-reason-orphan { background: rgba(245, 158, 11, 0.1); color:var(--c-amber-text); } .ai-sug-reason-wl { background: rgba(6, 182, 212, 0.1); color:var(--c-cyan-text); } .ai-sug-reason-recent { background: rgba(5, 150, 105, 0.1); color:var(--c-green-text); } /* White-label cross-brand — the headline reason this match is even allowed. Stronger visual weight than other chips. */ .ai-sug-reason-wl-cross { background: linear-gradient(90deg, rgba(6,182,212,0.18), rgba(124,58,237,0.18)); color:var(--c-cyan-text); font-weight: 700; border: 1px solid rgba(6,182,212,0.35); } .ai-sug-link-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%); color: white; border: 0; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; transition: filter 0.15s; box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3); } .ai-sug-link-btn:hover { filter: brightness(1.08); } /* ========================================================= STATUS LED — minimal corner light, no pill chrome ========================================================= */ .status-led { position: absolute; bottom: 12px; right: 12px; width: 9px; height: 9px; border-radius: 50%; z-index: 5; cursor: default; } .status-led::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); right: -4px; background: #0F172A; color: #fff; font-size: 10.5px; font-weight: 600; padding: 5px 9px; border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; } .status-led:hover::after { opacity: 1; } /* LED colors with soft outer glow */ .status-led.status-live { background: #22C55E; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25), 0 0 10px 1px rgba(34, 197, 94, 0.6); } .status-led.status-stopped { background: #FACC15; box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.25), 0 0 10px 1px rgba(250, 204, 21, 0.55); } .status-led.status-archived { background: #EF4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25), 0 0 10px 1px rgba(239, 68, 68, 0.5); } .status-led.status-idle { background: #3B82F6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25), 0 0 10px 1px rgba(59, 130, 246, 0.5); } /* Live blink/pulse ring (slow, gentle, not distracting) */ .status-led.status-live::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(34, 197, 94, 0.55); animation: led-pulse 2s ease-out infinite; pointer-events: none; } @keyframes led-pulse { 0% { transform: scale(0.85); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } } /* ========================================================= ROLE BADGE + ROLE MENU ========================================================= */ .role-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px 5px 7px; border: 1px solid var(--border); border-radius: 999px; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: filter 0.15s; background: var(--bg); color: var(--text); } .role-badge:hover { filter: brightness(0.95); } .role-badge-icon { font-size: 13px; line-height: 1; } .role-badge-label { font-weight: 700; } .role-menu { position: fixed; background:var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08); z-index: 500; width: 300px; overflow: hidden; animation: rm-in 0.15s ease-out; } @keyframes rm-in { from { transform: translateY(-4px); opacity:0; } to { transform: none; opacity:1; } } .role-menu-head { padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border); background:var(--surface-2); } .role-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; width: 100%; background: transparent; border: 0; text-align: left; cursor: pointer; transition: background 0.12s; } .role-menu-item:hover { background: var(--bg); } .role-menu-item.active { background: rgba(124, 58, 237, 0.05); } .role-menu-icon { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .role-menu-body { flex: 1; min-width: 0; } .role-menu-label { font-size: 13px; font-weight: 700; color: var(--text); } .role-menu-check { color:var(--c-green-text); margin-left: 4px; } .role-menu-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; } .role-menu-foot { padding: 8px 14px; font-size: 10.5px; color: var(--text-muted); background:var(--surface-2); border-top: 1px solid var(--border); } /* ========================================================= ROLE-BASED VISIBILITY GATES ========================================================= */ /* Viewer: hide every action that requires user+ */ body[data-role="viewer"] .hover-act.primary, body[data-role="viewer"] .list-act.primary, body[data-role="viewer"] .btn-red, body[data-role="viewer"] .bulk-checkbox, body[data-role="viewer"] .ai-sug-link-btn, body[data-role="viewer"] .related-add-btn, body[data-role="viewer"] .files-upload-more-btn, body[data-role="user"] .files-upload-more-btn, body[data-role="viewer"] .related-upload-btn, body[data-role="user"] .related-upload-btn, body[data-role="viewer"] .sv-save, body[data-role="viewer"] .sv-x, body[data-role="viewer"] .modal-foot .btn.primary { display: none !important; } body[data-role="viewer"] .card-link-chip, body[data-role="viewer"] .list-link-mini { pointer-events: none; opacity: 0.65; } body[data-role="viewer"] .card-link-chip .link-edit, body[data-role="viewer"] .list-link-mini .link-edit { display: none; } /* User: still hide admin-only things (none yet visible in catalog) */ body[data-role="user"] .perm-admin-only, body[data-role="viewer"] .perm-admin-only { display: none !important; } /* ========================================================= ADMIN PAGE ========================================================= */ #admin-page { background: var(--bg); min-height: calc(100vh - 60px); display: none; } .admin-bar { height: 3px; background: linear-gradient(90deg, #DC2626 0%, #F59E0B 100%); } .admin-shell { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 240px 1fr; gap: 0; min-height: calc(100vh - 60px - 3px); } .admin-side { background: var(--surface); border-right: 1px solid var(--border); padding: 24px 12px; } .admin-side-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 0 12px 12px; } .admin-side-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: transparent; border: 0; border-radius: 8px; color: var(--text-soft); font-size: 13px; font-weight: 500; cursor: pointer; margin-bottom: 2px; text-align: left; transition: background 0.12s, color 0.12s; } .admin-side-link:hover { background: var(--bg); color: var(--text); } .admin-side-link.active { background: rgba(220, 38, 38, 0.08); color:var(--c-red-text); font-weight: 700; } .admin-side-link.disabled { opacity: 0.45; cursor: not-allowed; } .admin-side-link.disabled:hover { background: transparent; color: var(--text-soft); } .admin-soon { margin-left: auto; font-size: 9.5px; font-weight: 700; background: var(--bg); color: var(--text-muted); padding: 1px 6px; border-radius: 4px; text-transform: uppercase; } .admin-main { padding: 32px 32px 60px; } .admin-head { margin-bottom: 24px; } .admin-head h1 { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin-bottom: 4px; } .admin-head p { font-size: 13px; color: var(--text-soft); max-width: 600px; } .admin-section { margin-bottom: 32px; } .admin-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .admin-section-head h2 { font-size: 15px; font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: 8px; } .admin-count { background: var(--bg); color: var(--text-muted); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; } .admin-table { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .admin-table-head, .admin-table-row { display: grid; grid-template-columns: 72px 1fr 160px 80px 200px; gap: 12px; align-items: center; padding: 10px 16px; } .admin-table-head { background:var(--surface-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border); } .admin-table-row { border-bottom: 1px solid var(--border); font-size: 13px; transition: background 0.1s; } .admin-table-row:last-child { border-bottom: 0; } .admin-table-row:hover { background:var(--surface-2); } .admin-col-num { font-family: 'SF Mono', Menlo, monospace; color: var(--text-soft); text-align: right; } /* Admin panel brand-icon cell — solid white plate matching the catalog card favicons so logos render consistently in both surfaces. */ .admin-icon-cell { width: 52px; height: 52px; border-radius: 10px; background:var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer; transition: all 0.15s; box-shadow: 0 1px 2px rgba(15,23,42,0.04); } .admin-icon-cell:hover { border-color: var(--border-strong); box-shadow: 0 2px 6px rgba(15,23,42,0.08); } .admin-icon-img { width: 42px; height: 42px; object-fit: contain; } .admin-icon-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: opacity 0.15s; pointer-events: none; backdrop-filter: blur(2px); } .admin-icon-cell:hover .admin-icon-overlay { opacity: 1; } /* Fallback shown when no icon exists — first letter of the brand on its brand-color background. Stays vibrant against the white card. */ .admin-icon-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 18px; border-radius: inherit; } .admin-name-cell b { font-weight: 600; color: var(--text); display: block; } .admin-slug { font-size: 11px; color: var(--text-muted); font-family: 'SF Mono', Menlo, monospace; } .admin-color-swatch { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 11.5px; color: var(--text); } .admin-color-swatch:hover { background: var(--bg); border-color: var(--border-strong); } .admin-color-dot { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(15,23,42,0.08); display: inline-block; } .admin-color-hex { font-family: 'SF Mono', Menlo, monospace; color: var(--text-soft); } .admin-row-actions { display: flex; gap: 4px; justify-content: flex-end; } .admin-row-btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; color: var(--text-muted); transition: all 0.12s; } .admin-row-btn:hover { background: var(--bg); color: var(--text); border-color: var(--border); } .admin-row-btn-danger:hover { background: rgba(220,38,38,0.08); color:var(--c-red-text); border-color: rgba(220,38,38,0.3); } .admin-empty { padding: 32px; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; color: var(--text-muted); font-size: 13px; } .admin-note { margin-top: 16px; padding: 10px 12px; background: rgba(124, 58, 237, 0.05); border: 1px solid rgba(124, 58, 237, 0.15); border-radius: 8px; display: flex; align-items: center; gap: 8px; font-size: 12px; color:var(--c-violet-text); } /* ========================================================= ADMIN — USERS / INTEGRATIONS / AUDIT ========================================================= */ /* Stats strip */ .admin-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; } .admin-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .admin-stat-num { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } .admin-stat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; } /* Users table */ .admin-table-users .admin-table-head, .admin-table-users .admin-table-row { grid-template-columns: 2fr 1fr 120px 120px 120px 80px; } .admin-table-row.inactive { opacity: 0.55; } .admin-table-row.inactive .admin-user-avatar { filter: grayscale(1); } .admin-user-cell { display: flex; align-items: center; gap: 10px; } .admin-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; } .admin-user-cell b { display: block; font-weight: 600; color: var(--text); } .admin-user-email { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; } .admin-user-lastseen { font-size: 11.5px; color: var(--text-soft); font-family: 'SF Mono', Menlo, monospace; } .admin-role-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; } .admin-status-active { color:var(--c-green-text); font-weight: 600; font-size: 11.5px; } .admin-status-inactive { color: var(--text-muted); font-weight: 600; font-size: 11.5px; } /* Integrations */ .admin-integrations { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; } .admin-int-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; } .admin-int-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); } .admin-int-card.disconnected { background:var(--surface-2); } .admin-int-head { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); } .admin-int-logo { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700; flex-shrink: 0; } .admin-int-name { flex: 1; min-width: 0; } .admin-int-name h3 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .admin-int-status { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-soft); } .admin-int-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; } .admin-int-dot.connected { background: #10B981; box-shadow: 0 0 0 2px rgba(16,185,129,0.2); } .admin-int-action { padding: 7px 14px; border-radius: 7px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: all 0.15s; flex-shrink: 0; } .admin-int-action:hover { background: var(--bg); } .admin-int-action.primary { background: #7C3AED; color: #fff; border-color:var(--c-violet-text); box-shadow: 0 2px 6px rgba(124,58,237,0.3); } .admin-int-action.primary:hover { background: #6D28D9; border-color:var(--c-violet-text); } .admin-int-body { padding: 14px 16px; } .admin-int-detail { font-size: 12.5px; color: var(--text-soft); line-height: 1.5; margin-bottom: 10px; } .admin-int-scopes { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .admin-int-scopes-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-right: 2px; } .admin-int-scope { font-family: 'SF Mono', Menlo, monospace; font-size: 10.5px; padding: 2px 6px; background: var(--bg); color: var(--text-soft); border-radius: 4px; } .admin-int-foot { display: flex; gap: 14px; padding: 10px 16px; background:var(--surface-2); border-top: 1px solid var(--border); } .admin-int-link { background: transparent; border: 0; font-size: 12px; font-weight: 600; color: var(--primary); cursor: pointer; padding: 0; } .admin-int-link:hover { text-decoration: underline; } /* Audit log */ .admin-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .admin-filter-input, .admin-filter-select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; font-family: inherit; background: var(--surface); color: var(--text); } .admin-filter-input { flex: 1; min-width: 200px; max-width: 360px; } .admin-filter-input:focus, .admin-filter-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12); } .admin-filter-reset { background: transparent; color: var(--text-muted); border: 0; font-size: 12px; font-weight: 600; cursor: pointer; } .admin-filter-reset:hover { color: var(--text); } .admin-filter-count { font-size: 11.5px; color: var(--text-muted); margin-left: auto; } .admin-filter-export { font-size: 12px; padding: 7px 12px; } .admin-audit-list { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .admin-audit-row { display: grid; grid-template-columns: 40px 1fr 140px; gap: 12px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; } .admin-audit-row:last-child { border-bottom: 0; } .admin-audit-row:hover { background:var(--surface-2); } .admin-audit-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; } .admin-audit-body { min-width: 0; } .admin-audit-head { font-size: 12.5px; color: var(--text); } .admin-audit-head b { font-weight: 700; } .admin-audit-action { font-size: 11.5px; color: var(--text-soft); font-weight: 500; } .admin-audit-target { font-size: 12px; color: var(--text-soft); font-family: 'SF Mono', Menlo, monospace; margin-top: 2px; } .admin-audit-detail { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; font-style: italic; } .admin-audit-ts { font-size: 11px; color: var(--text-muted); font-family: 'SF Mono', Menlo, monospace; text-align: right; white-space: nowrap; } @media (max-width: 900px) { .admin-stats { grid-template-columns: repeat(2, 1fr); } .admin-integrations { grid-template-columns: 1fr; } } /* ========================================================= PAGER ========================================================= */ .pager { margin: 24px 0 16px; display: none; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .pager.open { display: flex; } .pager-summary { font-size: 12.5px; color: var(--text-soft); } .pager-summary b { color: var(--text); font-weight: 700; } .pager-controls { display: inline-flex; align-items: center; gap: 6px; } .pager-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; transition: all 0.15s; } .pager-btn:hover:not(.disabled) { background: var(--bg); border-color: var(--border-strong); } .pager-btn.disabled { opacity: 0.4; cursor: not-allowed; } .pager-nums { display: inline-flex; align-items: center; gap: 4px; margin: 0 6px; } .pager-num { min-width: 30px; height: 30px; padding: 0 7px; background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-soft); cursor: pointer; transition: all 0.12s; } .pager-num:hover { background: var(--bg); color: var(--text); } .pager-num.active { background: var(--primary); color: #fff; border-color: var(--primary); } .pager-ellipsis { font-size: 13px; color: var(--text-muted); padding: 0 4px; user-select: none; } /* Upload icon button — explicit primary action on each brand row */ .admin-upload-btn { width: auto !important; height: 26px; padding: 0 10px !important; display: inline-flex; align-items: center; gap: 5px; background: var(--primary-soft) !important; color: var(--primary) !important; border: 1px solid rgba(79, 70, 229, 0.2) !important; font-size: 11.5px; font-weight: 600; } .admin-upload-btn:hover { background: rgba(79, 70, 229, 0.16) !important; border-color: var(--primary) !important; } .admin-upload-btn span { line-height: 1; } /* ========================================================= ADMIN — TAXONOMY (Languages, Markets, Tags) ========================================================= */ .admin-flag-cell { font-size: 22px; line-height: 1; } .admin-code { font-family: 'SF Mono', Menlo, monospace; font-size: 11.5px; padding: 2px 7px; background: var(--bg); color: var(--text-soft); border-radius: 4px; } .admin-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .admin-pill.yes { background: rgba(124, 58, 237, 0.12); color:var(--c-violet-text); } .admin-pill.no { background: var(--bg); color: var(--text-muted); } .admin-region-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: rgba(6, 182, 212, 0.12); color:var(--c-cyan-text); letter-spacing: 0.04em; } /* Languages table grid */ .admin-table-lang .admin-table-head, .admin-table-lang .admin-table-row { grid-template-columns: 50px 1fr 80px 80px 80px 100px; } /* Markets table grid */ .admin-table-market .admin-table-head, .admin-table-market .admin-table-row { grid-template-columns: 50px 1fr 80px 100px 80px 100px; } /* Tags table grid */ .admin-table-tags .admin-table-head, .admin-table-tags .admin-table-row { grid-template-columns: 1fr 160px 1.5fr 80px 100px; } .admin-tag-category { margin-bottom: 18px; } .admin-tag-cat-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; padding-left: 4px; } .admin-tag-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; } .admin-section-sub { font-size: 12px; color: var(--text-muted); } .admin-count.warning { background: rgba(231, 30, 37, 0.14); color:var(--c-red-text); } /* Unmanaged tags chips */ .admin-unmanaged-section { background: rgba(245, 158, 11, 0.04); border: 1px dashed rgba(245, 158, 11, 0.35); border-radius: 12px; padding: 16px; } .admin-unmanaged-grid { display: flex; flex-wrap: wrap; gap: 8px; } .admin-unmanaged-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; background: var(--surface); border: 1px solid rgba(245, 158, 11, 0.4); border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text); transition: all 0.15s; } .admin-unmanaged-chip:hover { background: rgba(245, 158, 11, 0.1); border-color: #F59E0B; } .admin-unmanaged-count { background: rgba(245, 158, 11, 0.2); color:var(--c-amber-text); font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; } .admin-unmanaged-action { font-size: 11px; color:var(--c-amber-text); font-weight: 700; } /* ========================================================= ADMIN — MONDAY USER SYNC BANNER ========================================================= */ .admin-monday-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: linear-gradient(135deg, rgba(255, 61, 87, 0.06) 0%, rgba(124, 58, 237, 0.04) 100%); border: 1px solid rgba(255, 61, 87, 0.2); border-radius: 12px; margin-bottom: 20px; } .admin-monday-banner-icon { width: 40px; height: 40px; border-radius: 10px; background: #FF3D57; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .admin-monday-banner-body { flex: 1; min-width: 0; } .admin-monday-banner-title { font-size: 13px; font-weight: 700; color: var(--text); } .admin-monday-banner-sub { font-size: 12px; color: var(--text-soft); margin-top: 2px; line-height: 1.5; } .admin-monday-sync-btn { flex-shrink: 0; background: #FF3D57 !important; color: #fff !important; border-color: #FF3D57 !important; font-weight: 600; box-shadow: 0 2px 6px rgba(255, 61, 87, 0.3); } .admin-monday-sync-btn:hover { background: #E11D48 !important; } .admin-monday-source { font-size: 9px; color: var(--text-muted); margin-left: 2px; cursor: help; } .admin-role-edit-btn { width: auto !important; padding: 0 10px !important; height: 26px; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; } .admin-role-edit-btn span { line-height: 1; } .admin-row-locked { font-size: 14px; color: var(--text-muted); padding: 4px; } /* ========================================================= ACCOUNT MENU (avatar dropdown) ========================================================= */ .avatar { cursor: pointer; border: none; } .avatar:hover { filter: brightness(1.08); } .account-menu { position: fixed; background:var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08); z-index: 500; width: 280px; overflow: hidden; animation: rm-in 0.15s ease-out; } .acc-head { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%); } .acc-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #f43f5e, #8b5cf6); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .acc-id { min-width: 0; flex: 1; } .acc-name { font-size: 13.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc-email { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } .acc-meta { padding: 6px 14px 10px; } .acc-meta-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 12px; color: var(--text); } .acc-meta-label { color: var(--text-muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .acc-role-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; } .acc-source { display: flex; align-items: center; gap: 6px; padding: 9px 14px; background:var(--surface-2); border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); } .acc-source a { color: var(--primary); font-weight: 600; } .acc-source a:hover { text-decoration: underline; } .acc-divider { display: none; } .acc-menu-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: transparent; border: 0; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; transition: background 0.12s; } .acc-menu-item:hover { background: var(--bg); } .acc-menu-item svg { color: var(--text-muted); } /* ========================================================= APPROVAL WORKFLOW ========================================================= */ .wf-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; } .wf-badge.wf-md { font-size: 11px; padding: 4px 10px; } .wf-badge.wf-lg { font-size: 12px; padding: 5px 12px; } .wf-badge .wf-icon { font-size: 12px; line-height: 1; } .wf-draft { background: rgba(100,116,139,0.12); color:var(--text-soft); } .wf-in_review { background: rgba(245,158,11,0.13); color:var(--c-amber-text); } .wf-approved { background: rgba(5,150,105,0.13); color:var(--c-green-text); } .wf-rejected { background: rgba(220,38,38,0.12); color:var(--c-red-text); } .wf-archived { background: rgba(124,45,18,0.12); color:var(--c-amber-text); } .card-id-spacer { flex: 1; } .card-id { gap: 4px; } /* Creative modal — shows a single info line instead of the full workflow panel, since creatives have no workflow_state of their own (they inherit from the parent LP). Keeps the modal layout consistent. */ .wf-panel-inherit { display: flex; align-items: center; gap: 10px; margin: 16px 22px 0; padding: 10px 14px; background: var(--violet-soft); border: 1px solid color-mix(in srgb, var(--violet) 25%, transparent); border-radius: 10px; font-size: 12.5px; color: var(--text); } .wf-inherit-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background:var(--surface); color: var(--primary); flex-shrink: 0; } .wf-inherit-text { line-height: 1.4; } .wf-inherit-text b { font-weight: 700; color: var(--primary); } /* Workflow panel in modal */ .wf-panel { margin: 16px 22px 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; } .wf-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .wf-panel-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text); } .wf-panel-body { margin-bottom: 12px; } .wf-meta-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text); } .wf-meta-label { color: var(--text-muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .wf-actions { display: flex; gap: 8px; flex-wrap: wrap; } .wf-action { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 7px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: all 0.15s; } .wf-action:hover { background: var(--bg); border-color: var(--border-strong); } .wf-action-primary { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3); } .wf-action-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); } .wf-action-approve { background:var(--surface); color:var(--text-muted); border-color: var(--border); cursor: not-allowed; } .wf-action-approve.ready { background: #059669; color: #fff; border-color:var(--c-green-text); box-shadow: 0 2px 6px rgba(5,150,105,0.3); cursor: pointer; } .wf-action-approve.ready:hover { background: #047857; border-color:var(--c-green-text); } .wf-action-approve.gated { position: relative; animation: aprGateGlow 1.4s ease-out 1; } @keyframes aprGateGlow { from { box-shadow: 0 0 0 0 rgba(5,150,105,0.5), 0 2px 6px rgba(5,150,105,0.3); } to { box-shadow: 0 0 0 8px rgba(5,150,105,0), 0 2px 6px rgba(5,150,105,0.3); } } /* Verify gate — purple intermediate state, attention-grabbing without being scary */ .wf-action-verify { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 2px 6px rgba(124,58,237,0.3); cursor: pointer; position: relative; } .wf-action-verify:hover { background: #5B21B6; border-color:var(--c-violet-text); } .wf-action-verify::after { content: ''; position: absolute; inset: -3px; border-radius: 9px; border: 2px solid rgba(124,58,237,0.4); animation: aprVerifyPulse 1.8s ease-in-out infinite; pointer-events: none; } @keyframes aprVerifyPulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.15; transform: scale(1.06); } } .wf-action-changes { background: #F59E0B; color: #fff; border-color: #F59E0B; } .wf-action-changes:hover { background: #D97706; border-color:var(--c-amber-text); } .wf-action-reject { background: var(--surface); color:var(--c-red-text); border-color: rgba(220,38,38,0.3); } .wf-action-reject:hover { background: rgba(220,38,38,0.08); } .wf-await { font-size: 12px; color: var(--text-muted); font-style: italic; } .wf-done { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color:var(--c-green-text); } .wf-history { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .wf-history-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; } .wf-history-row { padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 12px; } .wf-history-row:last-child { border-bottom: 0; } .wf-history-action { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; } .wf-history-submitted { color:var(--c-amber-text); } .wf-history-approved { color:var(--c-green-text); } .wf-history-rejected { color:var(--c-red-text); } .wf-history-changes_requested{ color:var(--c-amber-text); } .wf-history-meta { color: var(--text-soft); font-size: 11.5px; } .wf-history-comment { font-size: 12px; color: var(--text); font-style: italic; margin-top: 3px; padding: 4px 8px; background: var(--bg); border-radius: 5px; } /* Admin nav badge for pending count — Internovus brand red */ .wf-reject-callout{ display:flex;gap:10px;align-items:flex-start; margin:10px 12px 0;padding:10px 12px; background:rgba(220,38,38,0.08);border:1px solid rgba(220,38,38,0.28); border-left:3px solid #DC2626;border-radius:8px; } .wf-reject-callout-icon{flex:0 0 auto;color:#DC2626;display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:#fff;border-radius:6px;border:1px solid rgba(220,38,38,0.25);} .wf-reject-callout-body{flex:1 1 auto;min-width:0;} .wf-reject-callout-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:#DC2626;margin-bottom:2px;} .wf-reject-callout-text{font-size:13px;line-height:1.45;color:var(--text);word-wrap:break-word;} .admin-nav-badge { display: inline-block; background: #E71E25; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 6px; line-height: 1.3; box-shadow: 0 1px 3px rgba(231, 30, 37, 0.35); } .admin-side-badge { display: inline-block; background: #E71E25; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; line-height: 1.3; box-shadow: 0 1px 3px rgba(231, 30, 37, 0.35); } /* ============================================================ APPROVAL QUEUE TOOLBAR — filter bar, state pills, search ============================================================ */ .apr-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; } .apr-state-pills { display: flex; flex-wrap: wrap; gap: 6px; } .apr-state-explain { font-size: 11.5px; color: var(--text-soft); line-height: 1.55; padding: 6px 10px; background:var(--surface-2); border: 1px solid var(--border); border-radius: 6px; margin-top: -2px; } .apr-state-explain b { color: var(--text); font-weight: 700; margin-right: 2px; } .apr-state-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; border: 1px solid var(--border); background:var(--surface); font-size: 12px; font-weight: 600; color: var(--text-soft); cursor: pointer; font-family: inherit; transition: all 0.15s; } .apr-state-pill:hover { border-color: var(--border-strong); color: var(--text); } .apr-state-pill-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 5px; background: var(--bg); color: var(--text-muted); border-radius: 8px; font-size: 10.5px; font-weight: 700; } .apr-state-pill.active { background: var(--text); border-color: var(--text); color: var(--surface); } .apr-state-pill.active .apr-state-pill-count { background: rgba(127,127,127,0.3); color: var(--surface); } /* Saturated colored states keep white text/count in both themes */ .apr-state-pill.apr-state-in_review.active, .apr-state-pill.apr-state-draft.active, .apr-state-pill.apr-state-rejected.active, .apr-state-pill.apr-state-approved.active, .apr-state-pill.apr-state-archived.active { color: #fff; } .apr-state-pill.apr-state-in_review.active .apr-state-pill-count, .apr-state-pill.apr-state-draft.active .apr-state-pill-count, .apr-state-pill.apr-state-rejected.active .apr-state-pill-count, .apr-state-pill.apr-state-approved.active .apr-state-pill-count, .apr-state-pill.apr-state-archived.active .apr-state-pill-count { background: rgba(255,255,255,0.2); color: #fff; } .apr-state-pill.apr-state-in_review.active { background: #F59E0B; border-color: #F59E0B; } .apr-state-pill.apr-state-draft.active { background: #64748B; border-color:var(--text-muted); } .apr-state-pill.apr-state-rejected.active { background: #DC2626; border-color:var(--c-red-text); } .apr-state-pill.apr-state-approved.active { background: #059669; border-color:var(--c-green-text); } .apr-state-pill.apr-state-archived.active { background: #7C2D12; border-color:var(--c-amber-text); } /* "All" pseudo-state pill — neutral, set apart from the colored state pills by a thin divider (a dashed left border looked broken on the rounded pill). */ .apr-state-pill.apr-state-all { margin-left: 13px; position: relative; } .apr-state-pill.apr-state-all::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: var(--border); } .apr-state-pill.apr-state-all.active { background: var(--text); border-color: var(--text); } .apr-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .apr-search { position: relative; flex: 1 1 220px; min-width: 220px; } .apr-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .apr-search input { width: 100%; padding: 8px 11px 8px 32px; border: 1px solid var(--border); border-radius: 7px; background:var(--surface); font-size: 12.5px; font-family: inherit; color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; } .apr-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); } .apr-select { padding: 8px 26px 8px 11px; border: 1px solid var(--border); border-radius: 7px; background:var(--surface); font-size: 12px; font-family: inherit; color: var(--text); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; } .apr-adv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px; background:var(--surface); font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit; position: relative; transition: all 0.15s; } .apr-adv-btn:hover { background: var(--bg); } .apr-adv-btn.open { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); } .apr-adv-btn.has-criteria { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); } .apr-adv-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); margin-left: 2px; } .apr-reset-btn { margin-left: auto; padding: 8px 12px; border: 0; background: transparent; font-size: 12px; font-weight: 600; color: var(--text-soft); cursor: pointer; font-family: inherit; border-radius: 6px; } .apr-reset-btn:hover { background: var(--bg); color: var(--text); } .apr-adv-panel { padding: 12px 14px; background:var(--surface-2); border: 1px solid var(--border); border-radius: 8px; } .apr-adv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; } .apr-adv-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .apr-adv-field label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .apr-adv-field input { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background:var(--surface); font-size: 12px; font-family: inherit; color: var(--text); width: 100%; } .apr-adv-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); } .apr-adv-field-wide { grid-column: 1 / -1; } /* Multi-select chip pickers inside the advanced panel (tags, WL, lang, market). Same visual language as the dashboard's advanced search. */ .apr-adv-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 26px; margin-bottom: 5px; padding: 2px 0; } .apr-adv-chips-empty { font-size: 11px; color: var(--text-muted); font-style: italic; padding: 4px 0; } .apr-adv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 8px; background:var(--surface); border: 1px solid; border-radius: 14px; font-size: 11.5px; font-weight: 600; line-height: 1; } .apr-adv-chip-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .apr-adv-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 0; background: transparent; color: inherit; opacity: 0.55; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1; padding: 0; font-family: inherit; transition: opacity 0.15s, background 0.15s; } .apr-adv-chip-x:hover { opacity: 1; background: rgba(0,0,0,0.06); } .apr-adv-multi-add { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background:var(--surface); font-size: 11.5px; font-family: inherit; color: var(--text); cursor: pointer; } .apr-adv-multi-add:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(124,58,237,0.12); } /* Tag mode pills (Any / All / None) — render inline in the label row */ .apr-adv-mode-row { display: inline-flex; gap: 3px; margin-left: 6px; } .apr-adv-mode-pill { padding: 2px 7px; border: 1px solid var(--border); background:var(--surface); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); border-radius: 4px; cursor: pointer; font-family: inherit; transition: all 0.12s; } .apr-adv-mode-pill:hover { color: var(--text); } .apr-adv-mode-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); } @media (max-width: 900px){ .apr-adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .apr-adv-field-wide { grid-column: 1 / -1; } } @media (max-width: 640px){ .apr-adv-grid { grid-template-columns: 1fr; } .apr-reset-btn { margin-left: 0; } } .apr-result-bar { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; font-size: 12px; color: var(--text-soft); } .apr-result-bar b { color: var(--text); font-weight: 700; } .apr-result-spacer { flex: 1; } .apr-sort { padding: 5px 24px 5px 9px; border: 1px solid var(--border); border-radius: 6px; background:var(--surface); font-size: 11.5px; font-family: inherit; color: var(--text); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } .apr-export-all { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 6px; background: var(--primary-soft); color: var(--primary); font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; } .apr-export-all:hover { background: var(--primary); border-color: var(--primary); color: #fff; } /* Approval row v2 — expanded layout with history + Monday sections */ .apr-row-v2 .approval-row-meta-right { gap: 8px; } /* Approved rows collapse to a single-line summary by default. Click the chevron (or the row head) to expand the full body. Pending / Draft / Rejected rows are always fully expanded. */ .apr-row-collapsed { padding: 10px 16px; } .apr-row-collapsed .approval-row-head { margin-bottom: 0; } .apr-row-head-collapsible { cursor: pointer; user-select: none; transition: background 0.12s; margin: -4px -8px; padding: 4px 8px; border-radius: 6px; } .apr-row-head-collapsible:hover { background: var(--bg); } /* Chevron button (rightmost in the head, after the type chip) */ .apr-row-chevron { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 4px; border: 1px solid var(--border); background:var(--surface); color: var(--text-muted); border-radius: 6px; cursor: pointer; font-family: inherit; transition: all 0.15s; } .apr-row-chevron:hover { background: var(--bg); color: var(--text); border-color: var(--border-strong); } .apr-row-chevron svg { transition: transform 0.18s; } .apr-row-chevron.open svg { transform: rotate(180deg); } /* Collapsed-only meta strip: brand · lang · last-activity timestamp */ .apr-row-collapsed-meta { display: inline-flex; align-items: center; gap: 10px; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--border); font-size: 11.5px; color: var(--text-soft); flex-shrink: 0; } .apr-row-collapsed-meta-item b { color: var(--text); font-weight: 700; } .apr-row-collapsed-meta-ts { font-family: 'SF Mono', Menlo, monospace; font-size: 10.5px; color: var(--text-muted); } @media (max-width: 700px){ .apr-row-collapsed-meta { display: none; } /* keep the line clean on phones */ } /* APPROVAL QUEUE PAGER — reuses the dashboard's .pager / .pager-btn / etc. classes for visual consistency. The only extra piece is the page-size selector that sits inside .pager-summary on the left. The .apr-pager namespace is kept on the wrapper purely so JS can find the element by selector (.apr-pager) when doing surgical updates. */ .apr-pager .pager-summary { display: inline-flex; align-items: center; gap: 12px; } .apr-pager-size { padding: 4px 24px 4px 9px; border: 1px solid var(--border); border-radius: 6px; background:var(--surface); font-size: 11.5px; font-family: inherit; color: var(--text); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } /* (state left-border colors moved next to the base .approval-row rule below so the cascade resolves correctly) */ .approval-row-checkbox-spacer { width: 0; flex-shrink: 0; } .approval-row-subhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 8px; font-size: 11.5px; color: var(--text-soft); } .apr-monday-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background:var(--amber-soft); border: 1px solid #FCD592; border-radius: 10px; font-size: 10.5px; font-weight: 600; color:var(--c-amber-text); cursor: help; } .apr-monday-pill svg { color:var(--c-amber-text); } .apr-monday-pill b { color:var(--c-amber-text); font-weight: 700; } /* Send back / Resubmit action button — neutral gray */ .wf-action-changes { background:var(--surface); border: 1px solid var(--border); color: var(--text-soft); } .wf-action-changes:hover { background: var(--bg); color: var(--text); border-color: var(--border-strong); } /* Archive action button — dark-red tinted, terminal-action vibe */ .wf-action-archive { background:var(--surface); border: 1px solid #FCD0CC; color:var(--c-red-text); } .wf-action-archive:hover { background: var(--rose-soft); border-color: #FCA5A5; color:var(--c-amber-text); } /* Expand row (history + monday + export) */ .apr-expand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); } .apr-expand-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid transparent; background: transparent; color: var(--text-soft); font-size: 11.5px; font-weight: 600; border-radius: 6px; cursor: pointer; font-family: inherit; transition: all 0.15s; } .apr-expand-btn:hover { background: var(--bg); color: var(--text); } .apr-expand-btn.open { background: var(--primary-soft); color: var(--primary); } .apr-expand-caret { transition: transform 0.15s; flex-shrink: 0; } .apr-expand-btn.open .apr-expand-caret { transform: rotate(180deg); } .apr-expand-count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 16px; padding: 0 5px; background: var(--bg); color: var(--text-muted); border-radius: 8px; font-size: 10px; font-weight: 700; } .apr-expand-btn.open .apr-expand-count { background:var(--surface); color: var(--primary); } .apr-expand-sync { display: inline-flex; align-items: center; font-size: 10px; color:var(--c-amber-text); font-weight: 700; margin-left: 3px; } .apr-expand-export { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 5px 10px; border: 1px solid var(--border); background:var(--surface); font-size: 11.5px; font-weight: 600; color: var(--text-soft); border-radius: 6px; cursor: pointer; font-family: inherit; transition: all 0.15s; } .apr-expand-export:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); } /* Approval history timeline */ .apr-history { margin-top: 10px; padding: 12px 14px; background:var(--surface-2); border-radius: 8px; border: 1px solid var(--border); } .apr-history-ev { display: flex; gap: 10px; padding: 6px 0; position: relative; } .apr-history-ev:not(:last-child)::before { content: ''; position: absolute; left: 9px; top: 22px; bottom: -2px; width: 1px; background: var(--border); } .apr-history-dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); color: var(--text-muted); flex-shrink: 0; margin-top: 1px; z-index: 1; } .apr-history-approved .apr-history-dot { background: var(--emerald-soft); color:var(--c-green-text); } .apr-history-rejected .apr-history-dot { background: var(--rose-soft); color:var(--c-red-text); } .apr-history-sent_back .apr-history-dot { background: var(--amber-soft); color:var(--c-amber-text); } .apr-history-changes_requested .apr-history-dot { background: var(--amber-soft); color:var(--c-amber-text); } .apr-history-submitted .apr-history-dot { background: var(--primary-soft); color:var(--c-blue-text); } .apr-history-latest .apr-history-dot { box-shadow: 0 0 0 3px rgba(124,58,237,0.18); } .apr-history-body { flex: 1; min-width: 0; } .apr-history-meta { font-size: 12px; color: var(--text); } .apr-history-meta b { font-weight: 700; } .apr-history-ts { color: var(--text-muted); font-family: 'SF Mono', Menlo, monospace; font-size: 11px; } .apr-history-comment { margin-top: 2px; font-size: 11.5px; color: var(--text-soft); font-style: italic; background:var(--surface); padding: 5px 9px; border-radius: 5px; border: 1px solid var(--border); display: inline-block; max-width: 100%; word-break: break-word; } /* Monday comments section */ .apr-monday-comments { margin-top: 8px; padding: 12px 14px; background:var(--amber-soft); border-radius: 8px; border: 1px solid #FCE4B0; display: flex; flex-direction: column; gap: 8px; } .apr-mc-row { display: flex; gap: 10px; padding: 8px; background:var(--surface); border-radius: 6px; border: 1px solid #FCE4B0; } .apr-mc-row.apr-mc-sync { background: var(--violet-soft); border-color: color-mix(in srgb, var(--violet) 25%, transparent); } .apr-mc-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; color:var(--c-amber-text); padding: 3px 6px; background:var(--amber-soft); border-radius: 4px; height: fit-content; white-space: nowrap; flex-shrink: 0; } .apr-mc-row.apr-mc-sync .apr-mc-tag { color:var(--c-violet-text); background: var(--violet-soft); } .apr-mc-body { flex: 1; min-width: 0; } .apr-mc-meta { font-size: 11.5px; color: var(--text); } .apr-mc-meta b { font-weight: 700; } .apr-mc-ts { color: var(--text-muted); font-family: 'SF Mono', Menlo, monospace; font-size: 11px; } .apr-mc-text { margin-top: 3px; font-size: 12.5px; color: var(--text); line-height: 1.5; } .apr-mc-empty { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 4px 0; } /* Approval queue in admin */ .approval-list { display: flex; flex-direction: column; gap: 10px; } .approval-row { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid #F59E0B; /* default: amber (in-review) */ border-radius: 8px; padding: 14px 16px; transition: box-shadow 0.15s; } .approval-row:hover { box-shadow: var(--shadow); } /* State-specific left-border colors — must come AFTER the base rule above or they lose the cascade and every row stays amber. Specificity is the same (single class) so later rule wins. */ .apr-state-row-in_review { border-left-color: #F59E0B; } /* amber */ .apr-state-row-draft { border-left-color:var(--text-muted); } /* gray */ .apr-state-row-rejected { border-left-color:var(--c-red-text); } /* red */ .apr-state-row-approved { border-left-color:var(--c-green-text); } /* green */ .apr-state-row-archived { border-left-color:var(--c-amber-text); } /* dark red */ /* Archived rows render slightly muted overall so the eye understands they're terminal — the bright row is visually "active", the archived row is "done". */ .apr-state-row-archived { background: var(--surface-2); } .apr-state-row-archived .approval-row-name { color:var(--c-amber-text); } .approval-row-decided { border-left-color: var(--border); opacity: 0.85; } .approval-row-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .approval-row-name { flex: 1 1 auto; min-width: 0; text-align: left; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .approval-row-name:hover { color: var(--primary); text-decoration: underline; } .approval-row-meta-right { flex-shrink: 0; } .approval-row-id { font-family: 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--text-muted); } .approval-row-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-soft); margin-bottom: 8px; } .approval-meta-chip { padding: 2px 7px; background: var(--bg); border-radius: 4px; font-weight: 600; font-size: 11px; } .approval-meta-divider { color: var(--text-muted); margin: 0 2px; } .approval-meta-owner { color: var(--text-soft); } .approval-row-comment { font-size: 12px; color: var(--text); font-style: italic; margin: 8px 0; padding: 6px 10px; background: var(--bg); border-radius: 6px; } .approval-row-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .wf-action-link { background: transparent; border: 0; font-size: 12px; font-weight: 600; color: var(--primary); cursor: pointer; padding: 7px 10px; margin-left: auto; } .wf-action-link:hover { text-decoration: underline; } .approval-list-decided .approval-row { padding: 10px 14px; } /* ========================================================= APPROVAL CHECKLIST (editable) ========================================================= */ .approval-checklist { background:var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 12px 0; } .approval-checklist-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .approval-checklist-actions { display: flex; align-items: center; gap: 8px; } .approval-checklist-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); } .approval-checklist-count { font-size: 11px; font-weight: 700; color: var(--text-soft); background: var(--surface); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); } .approval-checklist-count.done { background: rgba(5,150,105,0.12); color:var(--c-green-text); border-color: rgba(5,150,105,0.3); } .approval-checklist-note { font-size: 11.5px; color: var(--text-muted); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--border); line-height: 1.45; } .approval-checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; } .approval-check-row { display: grid; grid-template-columns: 22px 150px 1fr; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; transition: background 0.15s; min-width: 0; } .approval-check-row:hover { background: var(--surface); } .approval-check-row.verified { background: rgba(5,150,105,0.06); } /* Tags + Family rows span both grid columns since their content is wider */ /* Tags row spans both grid columns since its content (chip picker) is wider. Campaign family used to live here too, but moved out of the checklist into its own section below the action buttons (see .apr-family-section). */ .apr-check-tags { grid-column: 1 / -1; align-items: start; padding-top: 8px; padding-bottom: 8px; } .apr-check-tags .approval-check-label { padding-top: 4px; } /* Tags chip picker inside the checklist row */ .apr-tag-control { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .apr-tag-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 24px; } .apr-tag-empty { font-size: 11.5px; color: var(--text-muted); font-style: italic; padding: 3px 0; } .apr-tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 8px; background:var(--surface); border: 1px solid; border-radius: 14px; font-size: 11.5px; font-weight: 600; line-height: 1; } .apr-tag-chip-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .apr-tag-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 0; background: transparent; color: inherit; opacity: 0.55; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1; padding: 0; font-family: inherit; transition: opacity 0.15s, background 0.15s; } .apr-tag-chip-x:hover { opacity: 1; background: rgba(0,0,0,0.06); } .apr-tag-add-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 6px; } .apr-tag-add, .apr-tag-custom { width: 100%; padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background:var(--surface); font-size: 11.5px; font-family: inherit; color: var(--text); } .apr-tag-add:focus, .apr-tag-custom:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(124,58,237,0.12); } .apr-tag-add { cursor: pointer; } .apr-tag-warn { font-size: 11px; font-weight: 500; color:var(--c-amber-text); background: var(--amber-soft); border: 1px solid #FDE68A; border-radius: 5px; padding: 5px 8px; } /* Campaign-family display inside the checklist row */ .apr-family-control { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .apr-family-group { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .apr-family-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); width: 100%; margin-bottom: 2px; } .apr-family-empty { font-size: 11.5px; color: var(--text-muted); font-style: italic; } .apr-family-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background:var(--surface); border: 1px solid var(--border); border-radius: 14px; font-size: 11px; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit; transition: all 0.15s; } .apr-family-chip:hover { background: var(--bg); border-color: var(--border-strong); } .apr-family-approved { border-color: rgba(5,150,105,0.4); } .apr-family-in_review { border-color: rgba(245,158,11,0.5); background:var(--amber-soft); } .apr-family-rejected { border-color: rgba(220,38,38,0.4); background: var(--rose-soft); } .apr-family-draft { border-color: rgba(100,116,139,0.4); background:var(--bg); } .apr-family-state { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 9px; font-weight: 700; border-radius: 50%; flex-shrink: 0; } .apr-family-state-approved { background: var(--emerald-soft); color:var(--c-green-text); } .apr-family-state-in_review { background: var(--amber-soft); color:var(--c-amber-text); } .apr-family-state-rejected { background: var(--rose-soft); color:var(--c-red-text); } .apr-family-state-draft { background:var(--surface-2); color:var(--text-muted); } .apr-family-type { font-weight: 700; } .apr-family-lang { font-size: 10px; color: var(--text-soft); padding: 0 5px; background: var(--bg); border-radius: 4px; } .apr-family-id { font-family: 'SF Mono', Menlo, monospace; font-size: 10px; color: var(--text-muted); } .apr-family-warn { font-size: 11px; font-weight: 500; color:var(--c-amber-text); background: var(--amber-soft); border: 1px solid #FDE68A; border-radius: 5px; padding: 5px 8px; margin-top: 2px; } /* LP localization chips — stronger affordance since clicking ACTS (jumps to row + scrolls). Approved children get a softer style since clicking just opens the detail modal (no action needed). */ .apr-family-child { border-width: 1px; font-weight: 600; } .apr-family-child.apr-family-in_review, .apr-family-child.apr-family-draft, .apr-family-child.apr-family-rejected { cursor: pointer; transition: all 0.15s; } .apr-family-child.apr-family-in_review:hover, .apr-family-child.apr-family-draft:hover, .apr-family-child.apr-family-rejected:hover { background: var(--primary-soft) !important; border-color: var(--primary) !important; color: var(--primary); transform: translateX(2px); } .apr-family-action { margin-left: 4px; padding: 1px 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 4px; background: rgba(124,58,237,0.12); color: var(--primary); } .apr-family-child.apr-family-approved .apr-family-action { background: var(--bg); color: var(--text-muted); } /* Flash animation when scrolled-to from a Campaign Family chip click — pulses purple to draw the eye to the now-focused row. */ @keyframes aprRowFlash { 0% { background: rgba(124,58,237,0.16); box-shadow: 0 0 0 3px rgba(124,58,237,0.35); } 100% { background: transparent; box-shadow: 0 0 0 0 rgba(124,58,237,0); } } .apr-row-flash { animation: aprRowFlash 2.4s ease-out 1; } /* ========================================================= CAMPAIGN FAMILY SECTION (read-only, info-only) Standalone section below the action buttons — full width, left-aligned, no verification checkbox. Replaces the old placement inside the verification checklist. ========================================================= */ .apr-family-section { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); } .apr-family-section-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .apr-family-section-head svg { opacity: 0.8; } .apr-family-section-title { color: var(--text); } .apr-family-section-sub { margin-left: 4px; font-size: 10.5px; font-weight: 500; text-transform: none; letter-spacing: 0; font-style: italic; color: var(--text-muted); } /* ========================================================= CAMPAIGN FAMILY STATUS PANEL (read-only) Replaces the old clickable chip groups. Pure information — each related item is approved in its own row in the queue. ========================================================= */ .apr-fs { display: flex; flex-direction: column; gap: 0; background:var(--surface-2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; width: 100%; min-width: 0; } .apr-fs-head { padding: 7px 12px; background:var(--surface); border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: 0; font-style: italic; } .apr-fs-head-solo { font-style: normal; color: var(--text-soft); } .apr-fs-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12px; color: var(--text); border-bottom: 1px solid var(--border); } .apr-fs-row:last-child { border-bottom: 0; } .apr-fs-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; color: var(--text-muted); flex-shrink: 0; } .apr-fs-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .apr-fs-name b { font-weight: 700; } .apr-fs-id { font-family: 'SF Mono', Menlo, monospace; font-size: 10.5px; color: var(--text-muted); background: var(--bg); padding: 1px 6px; border-radius: 3px; flex-shrink: 0; } .apr-fs-spacer { flex: 1 1 auto; min-width: 8px; } .apr-fs-note { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; background: var(--bg); border-radius: 4px; flex-shrink: 0; } .apr-fs-state { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 10px; flex-shrink: 0; } .apr-fs-state-icon { font-size: 10px; line-height: 1; } .apr-fs-state-approved { background: rgba(5,150,105,0.12); color:var(--c-green-text); } .apr-fs-state-in_review { background: rgba(245,158,11,0.14); color:var(--c-amber-text); } .apr-fs-state-rejected { background: rgba(220,38,38,0.12); color:var(--c-red-text); } .apr-fs-state-draft { background: rgba(100,116,139,0.13); color:var(--text-soft); } .apr-fs-state-inherits { background: var(--bg); color: var(--text-muted); font-weight: 600; font-style: italic; cursor: help; } @media (max-width: 640px){ .apr-fs-row { flex-wrap: wrap; } .apr-fs-spacer { display: none; } } /* Campaign-mate chips (banner/video/social) — desaturated so they're visually subordinate to LP localization chips, since they inherit approval. */ .apr-family-mate { background:var(--surface-2) !important; border-style: dashed !important; border-color: var(--border) !important; opacity: 0.92; } .apr-family-mate:hover { opacity: 1; background: var(--bg) !important; } .apr-family-inherit-badge { display: inline-block; margin-left: 2px; padding: 1px 6px; background:var(--surface-2); border-radius: 4px; font-size: 9px; font-weight: 700; color:var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; cursor: help; } /* Custom checkbox */ .approval-check-verify { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; } .approval-check-verify input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .approval-check-verify-box { width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: 4px; background:var(--surface); display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s; } .approval-check-verify input:checked + .approval-check-verify-box { background: #059669; border-color:var(--c-green-text); } .approval-check-verify input:checked + .approval-check-verify-box::after { content: ''; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); } .approval-check-verify:hover .approval-check-verify-box { border-color: var(--primary); } /* Auto-verified field (Creative ID from Monday) — locked + green */ .approval-check-verify-auto { cursor: default; } .approval-check-verify-auto:hover .approval-check-verify-box { border-color:var(--c-green-text); } .approval-check-verify-auto input:disabled + .approval-check-verify-box { background: #059669; border-color:var(--c-green-text); opacity: 1; /* override browser disabled-fade */ } .approval-check-row.auto-verified { background: rgba(5,150,105,0.04); } .approval-check-auto-badge { display: inline-block; margin-left: 4px; padding: 1px 7px; background:var(--emerald-soft); border: 1px solid #A7F3D0; border-radius: 4px; font-size: 9px; font-weight: 700; color:var(--c-green-text); text-transform: uppercase; letter-spacing: 0.04em; cursor: help; vertical-align: middle; } .approval-check-label { font-weight: 700; color: var(--text-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .approval-check-row.verified .approval-check-label { color:var(--c-green-text); } .approval-check-control { min-width: 0; display: flex; align-items: center; gap: 6px; } .approval-edit-select { width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; font-family: inherit; font-weight: 500; color: var(--text); background:var(--surface); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; min-width: 0; } .approval-edit-select:hover { border-color: var(--border-strong); } .approval-edit-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12); } .approval-edit-readonly { font-weight: 600; color: var(--text); font-size: 12.5px; padding: 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } /* Creative ID stays in monospace */ .approval-check-row[data-key="id"] .approval-edit-readonly { font-family: 'SF Mono', Menlo, monospace; } .approval-edit-action { padding: 4px 10px; border: 1px solid var(--border); border-radius: 5px; font-size: 11px; font-weight: 600; background: var(--surface); color: var(--primary); cursor: pointer; flex-shrink: 0; } .approval-edit-action:hover { background: var(--primary-soft); border-color: var(--primary); } /* Tweaks for the approval queue row layout */ .approval-row-meta-right { display: flex; align-items: center; gap: 8px; } .approval-row-subhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; font-size: 12px; color: var(--text-soft); } .approval-meta-comment { font-style: italic; color: var(--text-soft); } /* Approve button intensifies when all verified */ .wf-action-approve.ready { box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4); animation: approve-pulse 2s ease-in-out infinite; } @keyframes approve-pulse { 0%, 100% { box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4); } 50% { box-shadow: 0 4px 18px rgba(5, 150, 105, 0.55); } } @media (max-width: 900px) { .approval-checklist-grid { grid-template-columns: 1fr; } .approval-check-row { grid-template-columns: 22px 100px 1fr; } } /* ========================================================= COMPARE SIDE-BY-SIDE ========================================================= */ .cmp-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px); z-index: 1000; display: none; align-items: flex-start; justify-content: center; padding: 32px 16px; overflow-y: auto; } .cmp-backdrop.open { display: flex; } .cmp-modal { background:var(--surface); border-radius: 14px; width: 100%; max-width: 1280px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 64px); } .cmp-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%); } .cmp-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 4px; } .cmp-sub { font-size: 12.5px; color: var(--text-muted); } .cmp-close { background: transparent; border: 1px solid var(--border); width: 32px; height: 32px; border-radius: 8px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .cmp-close:hover { background:var(--surface-2); color: var(--text); } .cmp-body { padding: 18px 22px; overflow-y: auto; flex: 1; } .cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .cmp-col { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; } .cmp-col-head { padding: 10px 12px; background:var(--surface); border-bottom: 1px solid var(--border); } .cmp-col-title { font-size: 13.5px; font-weight: 700; color: var(--text); } .cmp-col-id { font-size: 11px; color: var(--text-muted); font-family: 'SF Mono', Menlo, monospace; margin-top: 2px; } .cmp-iframe-wrap { position: relative; width: 100%; height: 520px; background:var(--surface); overflow: hidden; } .cmp-iframe-wrap iframe { width: 100%; height: 1400px; border: 0; display: block; } .cmp-empty { padding: 60px 20px; text-align: center; color: var(--text-muted); font-size: 13px; font-style: italic; } .cmp-open-link { display: block; padding: 8px 12px; background:var(--surface); border-top: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--primary); text-align: center; text-decoration: none; } .cmp-open-link:hover { background: var(--primary-soft); } .cmp-diff { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .cmp-diff-head { padding: 12px 14px; background:var(--surface); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .cmp-diff-head h3 { font-size: 13px; font-weight: 700; color: var(--text); } .cmp-diff-count { font-size: 11px; font-weight: 700; padding: 2px 8px; background: rgba(245, 158, 11, 0.14); color:var(--c-amber-text); border-radius: 999px; } .cmp-diff-table { display: flex; flex-direction: column; } .cmp-diff-row { display: grid; grid-template-columns: 160px 1fr 1fr; align-items: center; gap: 12px; padding: 8px 14px; font-size: 12.5px; border-bottom: 1px solid var(--border); } .cmp-diff-row:last-child { border-bottom: 0; } .cmp-diff-row.cmp-diff-header { background:var(--surface-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .cmp-diff-row.diff { background: rgba(245, 158, 11, 0.05); } .cmp-diff-row.diff .cmp-diff-val { color:var(--c-amber-text); font-weight: 600; } .cmp-diff-label { font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.04em; } .cmp-diff-val { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* cells that hold chips/flags wrap instead of truncating */ .cmp-diff-val:has(.cmp-tags), .cmp-diff-val:has(.cmp-locs), .cmp-diff-val:has(.cmp-deliv) { white-space: normal; overflow: visible; } /* --- match summary chip --- */ .cmp-match { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--emerald-soft); color:var(--c-green-text); font-size: 11px; font-weight: 600; } .cmp-match b { font-weight: 800; } /* --- section divider rows --- */ .cmp-section-row { padding: 0; } .cmp-section-label { padding: 9px 14px 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); background: var(--primary-soft); border-bottom: 1px solid var(--border); } /* --- type badge in column head --- */ .cmp-type-badge { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 7px; border-radius: 5px; font-size: 10px; font-weight: 700; background: var(--primary-soft); color: var(--primary); text-transform: uppercase; letter-spacing: 0.03em; } .cmp-type-badge.cmp-type-prelander { background: var(--cyan-soft); color:var(--c-cyan-text); } /* --- inline pills in the table --- */ .cmp-pill { display: inline-block; padding: 1px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; background: var(--primary-soft); color: var(--primary); } .cmp-pill.cmp-pill-prelander { background: var(--cyan-soft); color:var(--c-cyan-text); } /* --- clickable link --- */ .cmp-link { color: var(--primary); font-weight: 600; text-decoration: none; } .cmp-link:hover { text-decoration: underline; } /* --- muted placeholder --- */ .cmp-na { color: var(--text-muted); font-weight: 400; } /* --- operational status --- */ .cmp-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; } .cmp-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); } .cmp-status-live .cmp-status-dot { background: var(--emerald); } .cmp-status-stopped .cmp-status-dot { background: var(--rose); } .cmp-status-idle .cmp-status-dot { background: var(--text-muted); } .cmp-status-archived .cmp-status-dot { background: #9CA3AF; } .cmp-status-detail { color: var(--text-muted); font-weight: 400; margin-left: 4px; } /* --- localizations --- */ .cmp-locs { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .cmp-locs b { font-weight: 800; color: var(--text); } .cmp-loc-flag { font-size: 14px; line-height: 1; } /* --- deliverables --- */ .cmp-deliv { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; } .cmp-deliv b { font-weight: 800; color: var(--text); } .cmp-deliv-chip { padding: 1px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 600; background: var(--bg); color: var(--text-soft); border: 1px solid var(--border); } /* --- prelander relationship --- */ .cmp-prelander { color: var(--text-soft); } .cmp-prelander b { color: var(--text); font-weight: 700; } /* --- tags wrap --- */ .cmp-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; } .cmp-foot { padding: 14px 22px; border-top: 1px solid var(--border); background:var(--surface-2); display: flex; gap: 8px; flex-wrap: wrap; } .bulk-act-compare { background: #06B6D4 !important; border-color: #06B6D4 !important; color: #fff !important; box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4); } .bulk-act-compare:hover { background: #0891B2 !important; border-color:var(--c-cyan-text) !important; } /* ========================================================= MOBILE / TABLET RESPONSIVE Breakpoints: tablet ≤ 900px, mobile ≤ 640px, narrow ≤ 480px ========================================================= */ /* ---------- TABLET ≤ 900px ---------- */ @media (max-width: 900px) { /* Top nav */ .topnav { padding: 0 14px; gap: 12px; height: 56px; } .brand-sub { display: none; } .topnav-links { gap: 2px; margin-left: 8px; } .topnav-link { padding: 6px 9px; font-size: 12.5px; } .topnav-actions { gap: 8px; } .role-badge-label { display: none; } .role-badge { padding: 5px 8px; } /* Page header */ .page-header-inner { padding: 18px 14px 16px; } .page-title-row { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 16px; } .page-title { font-size: 22px; } .page-subtitle { font-size: 12.5px; } .page-actions { justify-content: flex-start; flex-wrap: wrap; } .stats-strip { gap: 24px 28px; } .stat-num { font-size: 20px; } /* Catalog toolbar */ .app { padding: 16px 14px; } .catalog-toolbar { padding: 14px 14px; } .toolbar-row { flex-wrap: wrap; gap: 8px; } .search { flex: 1 1 100%; max-width: none; } .sort-select { flex: 1; min-width: 0; } .filter-dropdowns { flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 4px; } .filter-dropdowns::-webkit-scrollbar { display: none; } /* Grid: 2 columns on tablet */ .grid.grid-layout { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } /* Modal */ .modal { max-width: calc(100vw - 24px); } .modal-body-grid { grid-template-columns: 1fr !important; } /* Compare modal */ .cmp-grid { grid-template-columns: 1fr; } .cmp-iframe-wrap { height: 380px; } .cmp-diff-row { grid-template-columns: 120px 1fr 1fr; gap: 8px; padding: 8px 10px; } /* Admin: sidebar to top tabs */ .admin-shell { grid-template-columns: 1fr; } .admin-side { border-right: 0; border-bottom: 1px solid var(--border); padding: 12px 14px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .admin-side::-webkit-scrollbar { display: none; } .admin-side-head { display: none; } .admin-side-link { display: inline-flex; width: auto; margin-right: 4px; margin-bottom: 0; white-space: nowrap; padding: 8px 12px; } .admin-main { padding: 20px 14px 50px; } .admin-head h1 { font-size: 18px; } .admin-stats { grid-template-columns: repeat(2, 1fr); } .admin-monday-banner { flex-wrap: wrap; } .admin-monday-sync-btn { width: 100%; justify-content: center; } .admin-integrations { grid-template-columns: 1fr; } .approval-checklist-grid { grid-template-columns: 1fr; } .approval-check-row { grid-template-columns: 22px 130px 1fr; } /* Admin table densify */ .admin-table-head, .admin-table-row { padding: 8px 12px; gap: 8px; font-size: 12px; } .admin-table-users .admin-table-head, .admin-table-users .admin-table-row { grid-template-columns: 2fr 1fr 110px 90px 80px; } .admin-table-users .admin-table-row > div:nth-child(5) { display: none; } /* hide Status col */ /* Saved views strip */ .saved-views-strip { overflow-x: auto; flex-wrap: nowrap; } /* Bulk bar */ .bulk-bar { left: 12px; right: 12px; min-width: auto; } .bulk-bar-inner { flex-direction: column; align-items: stretch; } .bulk-bar-right { flex-wrap: wrap; } /* Request form modal */ .rf-modal { max-width: calc(100vw - 24px); } /* Account / role menu */ .account-menu, .role-menu { width: 260px; } } /* ---------- MOBILE ≤ 640px ---------- */ @media (max-width: 640px) { /* Top nav — keep only logo + admin/role + avatar; hide secondary chrome */ .topnav { gap: 8px; padding: 0 10px; } .brand-logo { height: 22px; } .icon-btn { width: 30px; height: 30px; } .topnav-link[data-page="analytics"] { display: none; } .role-badge { padding: 4px 6px; } /* Header */ .page-header-inner { padding: 16px 12px 14px; } .page-title { font-size: 19px; line-height: 1.2; } .breadcrumb { display: none; } .stats-strip { gap: 16px 20px; } .stat-num { font-size: 18px; } .stat-label { font-size: 10.5px; } .sync-chip { padding: 6px 10px; font-size: 11px; } .btn-red { padding: 7px 11px; font-size: 12px; } /* View tabs */ .view-tab { padding: 10px 12px; font-size: 13px; } .view-tab span:not(.view-tab-count) { font-size: 13px; } /* Catalog body */ .app { padding: 10px 10px 30px; } .catalog-toolbar { padding: 12px 10px; } .filter-bar-label { display: none; } /* Grid: 1 column */ .grid.grid-layout { grid-template-columns: 1fr !important; gap: 12px !important; } .grid.list { gap: 0; } .card-preview { aspect-ratio: 16 / 9; } .card { border-radius: 10px; } /* List rows compact */ .list-row { padding: 10px 12px; gap: 10px; } .list-name { font-size: 13px; } .list-meta { font-size: 10.5px; } /* Detail modal — go full-screen */ .modal-bg { padding: 0; align-items: stretch; } .modal { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; } .modal-body { padding: 14px; } .modal-head { padding: 14px 14px 10px; } .modal-head h2 { font-size: 16px; flex-wrap: wrap; gap: 6px; } .modal-foot { padding: 12px 14px; flex-direction: column; align-items: stretch; gap: 8px; } .modal-foot-left { flex-wrap: wrap; } .modal-foot .btn { width: 100%; justify-content: center; } .lp-iframe-wrap { height: 360px !important; } /* Compare modal — full-screen + tall enough */ .cmp-backdrop { padding: 0; align-items: stretch; } .cmp-modal { max-width: 100%; max-height: 100vh; border-radius: 0; } .cmp-body { padding: 12px; } .cmp-iframe-wrap { height: 320px; } .cmp-diff-row { grid-template-columns: 100px 1fr 1fr; gap: 6px; padding: 7px 10px; font-size: 11.5px; } .cmp-diff-label { font-size: 10px; } /* Admin */ .admin-main { padding: 16px 10px 40px; } .admin-stats { grid-template-columns: 1fr 1fr; gap: 8px; } .admin-stat { padding: 10px 12px; } .admin-stat-num { font-size: 18px; } /* Admin approval list rows */ .approval-row { padding: 12px; } .approval-row-head { flex-direction: column; align-items: flex-start; gap: 4px; } .approval-row-actions { flex-direction: column; align-items: stretch; } .approval-row-actions .wf-action, .approval-row-actions .wf-action-link { width: 100%; justify-content: center; } .approval-checklist-grid { grid-template-columns: 1fr; gap: 4px; } .approval-check-row { grid-template-columns: 22px 110px 1fr; padding: 5px 6px; } .approval-check-label { font-size: 10px; } /* Admin tables — fall back to stacked card rows */ .admin-table-head { display: none; } .admin-table-row { display: flex !important; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); } .admin-table-row > div { width: 100%; } .admin-row-actions { justify-content: flex-end; width: 100%; } .admin-col-num { text-align: left; } /* Pager */ .pager { flex-direction: column; align-items: stretch; gap: 10px; } .pager-controls { justify-content: space-between; } /* Request form */ .rf-modal { max-height: 100vh; border-radius: 0; } .rf-cta-card { padding: 32px 20px 24px; } /* Bulk bar */ .bulk-bar { left: 8px; right: 8px; bottom: 12px; } .bulk-bar-inner { padding: 10px 12px; gap: 8px; } .bulk-count b { font-size: 14px; } .bulk-act { flex: 1 1 auto; justify-content: center; font-size: 11.5px; padding: 7px 9px; } /* Saved views: smaller chips */ .sv-chip { font-size: 11.5px; padding: 4px 6px 4px 8px; } .sv-label svg { display: none; } .sv-label { font-size: 10px; } /* Hide tags column on list when very narrow */ .list-tags { display: none; } /* Cards: bring back nicer minimum heights */ .card-cover { padding: 12px; } .cover-name { font-size: 13.5px; } .cover-favicon { width: 46px; height: 46px; } } /* ---------- NARROW ≤ 480px ---------- */ @media (max-width: 480px) { .stats-strip { gap: 12px 16px; } .stat-num { font-size: 16px; } .page-title { font-size: 17px; } .topnav { padding: 0 8px; } .icon-btn { width: 28px; height: 28px; } .avatar { width: 28px; height: 28px; font-size: 11px; } /* Filter chips inline */ .filter-trigger { padding: 5px 9px; font-size: 11.5px; } .approval-checklist-note { font-size: 10.5px; } } /* Touch-friendly tap targets across all sizes */ @media (hover: none) and (pointer: coarse) { .copy-id, .copy-btn { width: 28px; height: 28px; } .bulk-checkbox { width: 26px; height: 26px; } .hover-act, .list-act { width: 30px; height: 30px; } /* Always show card hover actions since hover doesn't exist on touch */ .card-hover-actions { opacity: 1; } .status-led::after { display: none; } /* tooltips don't make sense on touch */ } /* ========================================================= FILTER UX POLISH ========================================================= */ /* "More filters" trigger looks slightly different (icon + label) */ .filter-more-trigger { gap: 6px; } .filter-more-trigger svg:first-child { opacity: 0.7; } /* The More popover is wider with a 2×2 grid of sub-filter sections */ .filter-more-popover { min-width: 560px; max-width: 660px; padding: 6px; } .filter-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .filter-more-section { background: var(--bg); border-radius: 8px; padding: 10px 12px; overflow: hidden; } .filter-more-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; padding: 0 2px; } .filter-more-section .filter-options { max-height: 220px; overflow-y: auto; -ms-overflow-style: thin; scrollbar-width: thin; } .filter-more-section .filter-popover-search { margin-bottom: 6px; } @media (max-width: 720px) { .filter-more-popover { min-width: calc(100vw - 32px); max-width: 100%; } .filter-more-grid { grid-template-columns: 1fr; } } /* Reset link: only show when something's active. */ .reset-link { background: transparent; border: 0; color: var(--rose); font-size: 12px; font-weight: 700; cursor: pointer; padding: 6px 10px; border-radius: 6px; margin-left: auto; } .reset-link:hover { background: rgba(244,63,94,0.08); } /* Empty-results state */ .empty { text-align: center; padding: 64px 24px; color: var(--text-soft); display: flex; flex-direction: column; align-items: center; gap: 14px; } .empty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .empty h3 { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin: 0; } .empty p { font-size: 13.5px; color: var(--text-muted); max-width: 360px; margin: 0; } .empty-clear-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; } /* Saved-views hint */ .sv-hint { font-size: 11.5px; color: var(--text-muted); font-style: italic; margin-left: 6px; padding: 4px 8px; background: var(--bg); border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } @media (max-width: 640px) { .sv-hint { display: none; } } /* ========================================================= WORKFLOW POLISH (Cluster D) ========================================================= */ /* Compact workflow panel for approved items */ .wf-panel-compact { padding: 10px 14px; margin: 12px 22px 0; } .wf-compact-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wf-compact-meta { font-size: 12px; color: var(--text-soft); } .wf-compact-meta b { color: var(--text); font-weight: 600; } .wf-compact-spacer { flex: 1; min-width: 1px; } .wf-compact-link { background: transparent; border: 0; font-size: 12px; font-weight: 600; color: var(--primary); cursor: pointer; padding: 4px 8px; border-radius: 5px; } .wf-compact-link:hover { background: var(--primary-soft); } .wf-compact-link-danger { color:var(--c-red-text); } .wf-compact-link-danger:hover { background: rgba(220, 38, 38, 0.08); } /* History is collapsed by default in compact mode; expand on click */ .wf-history-collapsed { display: none; } .wf-panel-compact.expanded .wf-history-collapsed { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } /* Secondary action button (Send back to draft from in-review) */ .wf-action-secondary { background: var(--surface); color: var(--text-soft); border: 1px solid var(--border); } .wf-action-secondary:hover { background: var(--bg); color: var(--text); border-color: var(--border-strong); } /* Approval queue bulk bar */ .approval-bulk-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; transition: background 0.15s, border-color 0.15s; } .approval-bulk-bar.active { background: var(--primary-soft); border-color: rgba(79, 70, 229, 0.3); } .approval-bulk-checkbox { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; cursor: pointer; flex-shrink: 0; } .approval-bulk-checkbox input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .approval-bulk-checkbox-box { width: 18px; height: 18px; border: 1.5px solid var(--border-strong); border-radius: 4px; background:var(--surface); display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s; } .approval-bulk-checkbox input:checked + .approval-bulk-checkbox-box { background: var(--primary); border-color: var(--primary); } .approval-bulk-checkbox input:checked + .approval-bulk-checkbox-box::after { content: ''; width: 10px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); } .approval-bulk-count { font-size: 12.5px; color: var(--text); } .approval-bulk-count b { font-weight: 700; } .approval-bulk-link { background: transparent; border: 0; color: var(--text-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; } .approval-bulk-link:hover { color: var(--text); text-decoration: underline; } .approval-bulk-actions { display: flex; gap: 8px; margin-left: auto; } /* Per-row checkbox in approval queue */ .approval-row-checkbox { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; cursor: pointer; flex-shrink: 0; margin-right: 4px; } .approval-row-checkbox input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .approval-row-checkbox-box { width: 18px; height: 18px; border: 1.5px solid var(--border-strong); border-radius: 4px; background:var(--surface); display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s; } .approval-row-checkbox input:checked + .approval-row-checkbox-box { background: var(--primary); border-color: var(--primary); } .approval-row-checkbox input:checked + .approval-row-checkbox-box::after { content: ''; width: 10px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); } .approval-row.selected { border-left-color: var(--primary); background: rgba(79, 70, 229, 0.03); } /* sent_back history rows */ .wf-history-sent_back { color:var(--c-amber-text); } @media (max-width: 640px) { .approval-bulk-bar { flex-wrap: wrap; } .approval-bulk-actions { width: 100%; } .approval-bulk-actions .wf-action { flex: 1; justify-content: center; } } /* ========================================================= ANALYTICS DASHBOARD ========================================================= */ #analytics-page { background: var(--bg); min-height: calc(100vh - 60px); display: none; } .dash-bar { height: 3px; background: linear-gradient(90deg, #7C3AED 0%, #06B6D4 100%); } .dash-shell { max-width: 1400px; margin: 0 auto; padding: 28px 32px 60px; } .dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .dash-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 0 0 4px; } .dash-sub { font-size: 13px; color: var(--text-soft); max-width: 600px; line-height: 1.5; } .dash-controls { display: flex; gap: 8px; } .dash-select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; } .dash-kpis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-bottom: 28px; } .dash-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; align-items: center; gap: 10px; } .dash-kpi-icon { font-size: 20px; line-height: 1; } .dash-kpi-body { min-width: 0; } .dash-kpi-value { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; line-height: 1.1; } .dash-kpi-label { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-top: 3px; } .dash-section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 20px; } .dash-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .dash-section-head h3 { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .dash-section-sub { font-size: 12px; color: var(--text-muted); } .dash-metric-toggle { display: inline-flex; gap: 4px; background: var(--bg); border-radius: 8px; padding: 3px; } .dash-metric-btn { padding: 5px 11px; background: transparent; border: 0; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-soft); cursor: pointer; transition: all 0.12s; } .dash-metric-btn:hover { color: var(--text); } .dash-metric-btn.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgba(15,23,42,0.05); } .dash-trend { position: relative; width: 100%; height: 160px; background: var(--bg); border-radius: 8px; overflow: hidden; } .dash-trend-svg { width: 100%; height: 100%; display: block; } .dash-trend-labels { position: absolute; bottom: 6px; left: 12px; right: 12px; display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-family: 'SF Mono', Menlo, monospace; } .dash-empty { padding: 30px; text-align: center; color: var(--text-muted); font-size: 12px; } .dash-top-list { display: flex; flex-direction: column; gap: 4px; } .dash-top-row { display: grid; grid-template-columns: 28px 1fr 80px 110px; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background 0.12s; } .dash-top-row:hover { background: var(--bg); } .dash-top-rank { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; } .dash-top-body { min-width: 0; } .dash-top-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-top-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-soft); margin-top: 3px; } .dash-top-meta .tag { font-size: 10.5px; padding: 1px 7px; } .dash-top-spark { color: var(--primary); opacity: 0.85; } .dash-top-metric { text-align: right; font-weight: 700; font-size: 13px; color: var(--text); font-family: 'SF Mono', Menlo, monospace; } .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .dash-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; } .dash-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .dash-card-head h3 { font-size: 13px; font-weight: 700; color: var(--text); } .dash-card-sub { font-size: 11px; color: var(--text-muted); } .dash-card-body { display: flex; flex-direction: column; gap: 6px; } .dash-row { display: grid; grid-template-columns: 120px 1fr 110px; align-items: center; gap: 10px; font-size: 12.5px; } .dash-row-label { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-row-bar { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; } .dash-row-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; } .dash-row-value { text-align: right; font-family: 'SF Mono', Menlo, monospace; font-size: 12px; font-weight: 600; color: var(--text); } .dash-row-pct { display: inline-block; margin-left: 6px; color: var(--text-muted); font-weight: 500; min-width: 32px; } .dash-status-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .dash-status-block { display: flex; flex-direction: column; gap: 6px; } .dash-status-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; } .dash-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .dash-status-label { font-weight: 600; color: var(--text); } .dash-status-count { margin-left: auto; font-weight: 700; color: var(--text); font-family: 'SF Mono', Menlo, monospace; } .dash-status-bar { height: 6px; background: var(--bg); border-radius: 999px; overflow: hidden; } .dash-status-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; } .dash-note { margin-top: 16px; padding: 10px 12px; background: rgba(124, 58, 237, 0.05); border: 1px solid rgba(124, 58, 237, 0.15); border-radius: 8px; display: flex; align-items: center; gap: 8px; font-size: 12px; color:var(--c-violet-text); } @media (max-width: 1100px) { .dash-kpis { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 900px) { .dash-shell { padding: 20px 14px 50px; } .dash-kpis { grid-template-columns: repeat(2, 1fr); } .dash-grid { grid-template-columns: 1fr; } .dash-status-strip { grid-template-columns: 1fr 1fr; } .dash-row { grid-template-columns: 90px 1fr 90px; } } @media (max-width: 640px) { .dash-top-row { grid-template-columns: 24px 1fr 80px; } .dash-top-spark { display: none; } } /* ========================================================= ANALYTICS COMING SOON ========================================================= */ .coming-soon { max-width: 480px; margin: 120px auto; text-align: center; padding: 0 24px; } .coming-soon-icon { width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(6,182,212,0.12)); color:var(--c-violet-text); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; } .coming-soon h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 0 0 10px; } .coming-soon p { font-size: 14px; color: var(--text-soft); line-height: 1.55; margin: 0 0 24px; } .coming-soon .btn { display: inline-flex; align-items: center; gap: 6px; } /* ========================================================= A/B TESTING — card overlay + modal section ========================================================= */ /* PRELANDER badge — top-left of the card preview. Distinct teal so it's visually different from the A/B overlay (top-center) and the status LED (bottom-right). Tooltip explains it on hover. */ .card-prelander-badge { position: absolute; top: 10px; left: 10px; z-index: 6; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; background: rgba(14,116,144,0.95); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; border-radius: 4px; cursor: help; box-shadow: 0 1px 3px rgba(15,23,42,0.18); pointer-events: auto; } .card-prelander-badge svg { opacity: 0.9; } /* Overlay on the card preview: variant pills sit in the top-right corner so they don't compete with the thumbnail's centered content or the cover-name. */ .ab-overlay { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; z-index: 5; pointer-events: none; } .ab-overlay > * { pointer-events: auto; } .ab-badge { display: inline-flex; align-items: center; padding: 3px 9px; background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; border-radius: 999px; box-shadow: 0 2px 6px rgba(124,58,237,0.35); text-transform: uppercase; } .ab-pills { display: inline-flex; gap: 1px; padding: 1px; background: rgba(255,255,255,0.95); border-radius: 999px; box-shadow: 0 1px 3px rgba(15,23,42,0.15); } .ab-pill { width: 18px; height: 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text-soft); font-size: 9.5px; font-weight: 700; cursor: pointer; transition: all 0.12s; padding: 0; line-height: 1; } .ab-pill:hover { color: var(--text); background: rgba(15,23,42,0.06); } .ab-pill.active { background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%); color: #fff; } /* Modal A/B Variants section */ .ab-section { margin: 16px 22px 0; padding: 18px 18px 16px; background: linear-gradient(135deg, rgba(124,58,237,0.04) 0%, rgba(6,182,212,0.04) 100%); border: 1px solid rgba(124,58,237,0.18); border-radius: 12px; position: relative; } .ab-section::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: linear-gradient(90deg, #7C3AED 0%, #06B6D4 100%); border-radius: 12px 12px 0 0; } .ab-section-head { margin-bottom: 14px; } .ab-section-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); } .ab-section-badge { display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; border-radius: 4px; } .ab-section-count { background: rgba(124,58,237,0.12); color:var(--c-violet-text); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; } .ab-section-sub { font-size: 11.5px; color: var(--text-soft); line-height: 1.45; margin-top: 4px; } .ab-section-sub code { font-family: 'SF Mono', Menlo, monospace; background: rgba(15,23,42,0.05); padding: 1px 5px; border-radius: 3px; font-size: 11px; } .ab-var-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ab-var-card { background:var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.15s, box-shadow 0.15s; } .ab-var-card:hover { border-color: rgba(124,58,237,0.4); box-shadow: 0 2px 8px rgba(124,58,237,0.08); } .ab-var-card.ab-var-primary { border-color:var(--c-violet-text); box-shadow: 0 0 0 1px #7C3AED; } .ab-var-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); } .ab-var-letter { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ab-var-meta-stack { flex: 1; min-width: 0; } .ab-var-title { font-size: 13px; font-weight: 700; color: var(--text); } .ab-var-primary-chip { display: inline-block; background: rgba(124,58,237,0.14); color:var(--c-violet-text); font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 4px; letter-spacing: 0.04em; } .ab-var-hero { font-size: 11.5px; color: var(--text-muted); font-style: italic; margin-top: 2px; } .ab-var-preview { position: relative; width: 100%; height: 320px; background:var(--surface); overflow: hidden; } .ab-var-preview iframe { width: 100%; height: 1200px; border: 0; display: block; } .ab-var-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background:var(--surface-2); border-top: 1px solid var(--border); gap: 8px; } .ab-var-link { font-size: 11.5px; font-weight: 600; color: var(--primary); text-decoration: none; } .ab-var-link:hover { text-decoration: underline; } .ab-var-promote { background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%); color: #fff; border: 0; border-radius: 6px; padding: 5px 10px; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 4px rgba(124,58,237,0.3); } .ab-var-promote:hover { filter: brightness(1.08); } .ab-var-current { font-size: 11px; font-weight: 700; color:var(--c-violet-text); } .ab-section-foot { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(124,58,237,0.2); display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-muted); } @media (max-width: 700px) { .ab-var-grid { grid-template-columns: 1fr; } .ab-var-preview { height: 280px; } } /* ========================================================= HELP CENTER MODAL ========================================================= */ .help-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px); z-index: 1000; display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; } .help-backdrop.open { display: flex; } .help-modal { background:var(--surface); border-radius: 14px; width: 100%; max-width: 920px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 80px); } .help-head { padding: 18px 22px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%); } .help-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 2px; } .help-sub { font-size: 12.5px; color: var(--text-muted); } .help-close { background: transparent; border: 1px solid var(--border); width: 32px; height: 32px; border-radius: 8px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .help-close:hover { background:var(--surface-2); color: var(--text); } .help-body { display: grid; grid-template-columns: 200px 1fr; flex: 1; min-height: 0; } .help-side { border-right: 1px solid var(--border); padding: 12px 8px; background:var(--surface-2); overflow-y: auto; } .help-side-link { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; background: transparent; border: 0; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-soft); cursor: pointer; text-align: left; margin-bottom: 2px; transition: all 0.12s; } .help-side-link:hover { background:var(--surface); color: var(--text); } .help-side-link.active { background:var(--surface); color: var(--primary); box-shadow: 0 1px 2px rgba(15,23,42,0.05); } .help-side-link svg { color: inherit; flex-shrink: 0; } .help-main { padding: 24px 28px; overflow-y: auto; } .help-h1 { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin: 0 0 6px; } .help-lead { font-size: 13.5px; color: var(--text-soft); line-height: 1.55; margin: 0 0 22px; } .help-callout { background: var(--primary-soft); border: 1px solid rgba(79, 70, 229, 0.18); border-radius: 8px; padding: 11px 14px; font-size: 12.5px; color: var(--text); line-height: 1.55; margin-top: 20px; } .help-callout b { font-weight: 700; } /* Quick start steps */ .help-steps { display: flex; flex-direction: column; gap: 12px; } .help-step { display: flex; gap: 14px; padding: 14px 16px; background:var(--surface-2); border: 1px solid var(--border); border-radius: 10px; } .help-step-num { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, #7C3AED 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; } .help-step-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; } .help-step-text { font-size: 13px; color: var(--text-soft); line-height: 1.55; } /* Glossary */ .help-glossary { margin: 0; display: flex; flex-direction: column; gap: 0; } .help-term { padding: 12px 0; border-bottom: 1px dashed var(--border); } .help-term:last-child { border-bottom: 0; } .help-term dt { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; } .help-term-alt { font-size: 11px; font-weight: 500; color: var(--text-muted); font-style: italic; margin-left: 4px; } .help-term dd { font-size: 12.5px; color: var(--text-soft); line-height: 1.55; margin: 0; } .help-term code { font-family: 'SF Mono', Menlo, monospace; background: var(--bg); padding: 1px 5px; border-radius: 3px; font-size: 11.5px; } /* How-to accordions */ .help-guides { display: flex; flex-direction: column; gap: 6px; } .help-guide { background:var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 0; } .help-guide summary { cursor: pointer; list-style: none; padding: 12px 14px; font-size: 13px; font-weight: 600; color: var(--text); position: relative; user-select: none; } .help-guide summary::-webkit-details-marker { display: none; } .help-guide summary::after { content: '+'; position: absolute; right: 14px; top: 12px; font-size: 16px; font-weight: 400; color: var(--text-muted); transition: transform 0.15s; } .help-guide[open] summary::after { content: '−'; } .help-guide[open] summary { color: var(--primary); } .help-guide-steps { margin: 0; padding: 0 14px 14px 36px; font-size: 12.5px; color: var(--text-soft); line-height: 1.6; } .help-guide-steps li { margin-bottom: 6px; } /* Changelog */ .help-changelog { display: flex; flex-direction: column; gap: 14px; } .help-change { padding: 12px 14px; background:var(--surface-2); border: 1px solid var(--border); border-radius: 8px; } .help-change-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .help-change-head b { font-size: 13px; color: var(--text); font-weight: 700; } .help-change-date { font-size: 11px; color: var(--text-muted); font-family: 'SF Mono', Menlo, monospace; } .help-change-list { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-soft); line-height: 1.55; } .help-change-list li { margin-bottom: 3px; } /* Contact */ .help-contacts { display: flex; flex-direction: column; gap: 10px; } .help-contact { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background:var(--surface); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; transition: all 0.15s; } .help-contact:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(79, 70, 229, 0.08); text-decoration: none; } .help-contact-icon { width: 40px; height: 40px; border-radius: 10px; color: #fff; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .help-contact-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .help-contact-sub { font-size: 12px; color: var(--text-soft); line-height: 1.5; } /* Keyboard shortcuts */ .help-keys { display: flex; flex-direction: column; gap: 8px; } .help-key-row { display: flex; align-items: center; gap: 14px; padding: 8px 12px; background:var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text); } .help-key-row kbd { font-family: 'SF Mono', Menlo, monospace; background:var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 1px 0 var(--border-strong); padding: 2px 8px; border-radius: 5px; font-size: 11.5px; font-weight: 600; color: var(--text); min-width: 60px; text-align: center; } @media (max-width: 640px) { .help-modal { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; } .help-body { grid-template-columns: 1fr; } .help-side { border-right: 0; border-bottom: 1px solid var(--border); display: flex; overflow-x: auto; padding: 8px; } .help-side-link { flex-shrink: 0; } .help-main { padding: 18px 16px; } } /* ========================================================= UPLOAD MODAL ========================================================= */ .up-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(3px); z-index: 1000; display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; } .up-backdrop.open { display: flex; } .up-modal { background:var(--surface); border-radius: 14px; width: 100%; max-width: 760px; box-shadow: 0 24px 60px rgba(15,23,42,0.28); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 80px); } .up-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%); } .up-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 2px; } .up-sub { font-size: 12.5px; color: var(--text-muted); max-width: 520px; line-height: 1.5; } .up-close { background: transparent; border: 1px solid var(--border); width: 32px; height: 32px; border-radius: 8px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .up-close:hover { background:var(--surface-2); color: var(--text); } .up-body { padding: 20px 22px; overflow-y: auto; flex: 1; } .up-drop { border: 2px dashed var(--border-strong); border-radius: 12px; padding: 36px 24px; text-align: center; background:var(--surface-2); transition: all 0.15s; margin-bottom: 16px; } .up-drop.drag-over { border-color: var(--primary); background: var(--primary-soft); } .up-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-soft); } .up-drop svg { color: var(--text-muted); } .up-drop.drag-over svg { color: var(--primary); } .up-drop-title { font-size: 14.5px; font-weight: 600; color: var(--text); } .up-browse-btn { background: transparent; border: 0; color: var(--primary); font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; font-size: inherit; } .up-drop-hint { font-size: 12px; color: var(--text-muted); } .up-file-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } .up-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; } .up-file-thumb { width: 44px; height: 44px; border-radius: 6px; background: #252525; display: flex; align-items: center; justify-content: center; overflow: hidden; color: rgba(255,255,255,0.6); flex-shrink: 0; } .up-file-thumb img { width: 100%; height: 100%; object-fit: cover; } .up-file-body { flex: 1; min-width: 0; } .up-file-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .up-file-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .up-file-error { font-size: 11.5px; color:var(--c-red-text); margin-top: 4px; font-weight: 600; } .up-file-done { font-size: 11.5px; color:var(--c-green-text); font-weight: 600; margin-top: 4px; } .up-file-bar { height: 4px; background: var(--bg); border-radius: 999px; margin-top: 6px; overflow: hidden; } .up-file-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #7C3AED); transition: width 0.15s ease; } .up-file-remove { width: 26px; height: 26px; background: transparent; border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .up-file-remove:hover { background: rgba(220,38,38,0.08); color:var(--c-red-text); border-color: rgba(220,38,38,0.3); } .up-section { margin-top: 8px; } .up-section-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 10px; } .up-section-sub { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--text-muted); margin-left: 6px; } .up-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .up-field-wide { grid-column: 1 / -1; } .up-field { display: flex; flex-direction: column; gap: 4px; } .up-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .up-req { color:var(--c-red-text); } .up-opt { color:var(--text-muted,#94a3b8); font-weight:500; font-size:10px; text-transform:uppercase; letter-spacing:0.04em; margin-left:4px; } .up-hint { font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; } .up-field select, .up-input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: inherit; background:var(--surface); color: var(--text); } .up-field select:focus, .up-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.12); } .up-pipeline { margin-top: 8px; padding: 12px 14px; background: rgba(5,150,105,0.05); border: 1px solid rgba(5,150,105,0.15); border-radius: 8px; } .up-pipeline-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color:var(--c-green-text); margin-bottom: 6px; } .up-pipeline-steps { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text-soft); line-height: 1.6; } .up-foot { padding: 14px 22px; border-top: 1px solid var(--border); background:var(--surface-2); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .up-foot-info { font-size: 11.5px; color: var(--text-soft); display: inline-flex; align-items: center; gap: 6px; } .up-foot-actions { display: flex; gap: 8px; } /* ========================================================= FILES SECTION (detail modal) ========================================================= */ .files-section { margin: 16px 22px 0; padding: 16px 18px; background:var(--surface-2); border: 1px solid var(--border); border-radius: 10px; } .files-section-head { margin-bottom: 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .files-section-head-left { min-width: 0; flex: 1 1 auto; } .files-upload-more-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap; flex-shrink: 0; font-family: inherit; } .files-upload-more-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* Locked Creative ID input — used when "Upload more sizes" preset the ID */ .up-id-input.locked { background: rgba(124,58,237,0.04); border-color: rgba(124,58,237,0.55); color:var(--c-violet-text); cursor: not-allowed; } .up-sub-code { font-family: 'SF Mono', Menlo, monospace; background: rgba(15,23,42,0.06); padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; } .files-section-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); } .files-count { background: var(--primary-soft); color: var(--primary); font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 10px; } .files-section-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; } .files-bulk { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background:var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; flex-wrap: wrap; } .files-bulk-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; } .files-platform { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; } .files-platform label { color: var(--text-muted); font-weight: 600; } .files-platform select { padding: 4px 8px; border: 1px solid var(--border); border-radius: 5px; font-size: 12px; background:var(--surface); font-family: inherit; } .files-download-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%); color: #fff; border: 0; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(124,58,237,0.3); } .files-download-btn:hover { filter: brightness(1.08); } .files-list { display: flex; flex-direction: column; gap: 4px; } .files-row { display: grid; grid-template-columns: 24px 70px 1fr 140px 60px; align-items: center; gap: 10px; padding: 8px 10px; background:var(--surface); border: 1px solid var(--border); border-radius: 7px; transition: border-color 0.12s; } .files-row:hover { border-color: var(--border-strong); } .files-check input { margin: 0; cursor: pointer; } .files-icon { width: 56px; height: 32px; border-radius: 5px; background: #252525; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .files-icon-size { background: rgba(124,58,237,0.1); color:var(--c-violet-text); font-size: 10.5px; font-weight: 800; font-family: 'SF Mono', Menlo, monospace; } /* Original-upload badge — same shape as derivatives but tinted differently so the master source file still reads as distinct from the auto-generated size variants. Outline + slightly bolder. */ .files-icon-original { background: rgba(15,23,42,0.04); color: var(--text); border: 1px solid var(--border-strong); } [data-theme="dark"] .files-icon-original { background: rgba(255,255,255,0.04); } .files-name b { font-size: 12.5px; font-weight: 700; color: var(--text); display: block; } .files-asset-name { font-family: 'SF Mono', Menlo, monospace !important; font-size: 11.5px !important; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: block; } .files-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; } /* Platform tags per file row — Meta / Google Display / Outbrain / etc. */ .files-platforms { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; } .files-platform-tag { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 1px 6px; background: var(--bg); color: var(--text-soft); border: 1px solid var(--border); border-radius: 4px; letter-spacing: 0.02em; white-space: nowrap; } .files-original-name { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.75; } .files-section-sub code { font-family: 'SF Mono', Menlo, monospace; background: rgba(15,23,42,0.06); padding: 1px 5px; border-radius: 3px; font-size: 10.5px; font-weight: 600; color: var(--text); } .files-size { font-size: 11.5px; color: var(--text-soft); font-family: 'SF Mono', Menlo, monospace; text-align: right; } .files-webp { color:var(--c-green-text); } .files-copy-url { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; font-size: 10.5px; font-weight: 700; color: var(--text-soft); cursor: pointer; transition: all 0.12s; } .files-copy-url:hover { background: var(--surface); color: var(--primary); border-color: var(--primary); } .files-copy-url.copied { background: rgba(5,150,105,0.1); color:var(--c-green-text); border-color: rgba(5,150,105,0.3); } @media (max-width: 640px) { .up-modal { max-height: 100vh; max-width: 100%; border-radius: 0; } .up-form-grid { grid-template-columns: 1fr; } .files-row { grid-template-columns: 24px 50px 1fr 60px; } .files-size, .files-copy-url { grid-column: 1 / -1; text-align: left; justify-self: start; } } /* ========================================================= UPLOAD — format detection chips + summary ========================================================= */ .up-file-format-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .up-fmt-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; font-size: 11px; font-weight: 600; } .up-fmt-matched { background: rgba(5,150,105,0.12); color:var(--c-green-text); border: 1px solid rgba(5,150,105,0.25); } .up-fmt-near { font-weight: 500; font-size: 10.5px; opacity: 0.75; margin-left: 2px; } .up-fmt-manual { background: rgba(124,58,237,0.12); color:var(--c-violet-text); border: 1px solid rgba(124,58,237,0.25); } .up-fmt-custom { background: rgba(245,158,11,0.12); color:var(--c-amber-text); border: 1px solid rgba(245,158,11,0.25); } .up-size-override { padding: 3px 6px; border: 1px solid var(--border); border-radius: 5px; font-size: 11px; background:var(--surface); color: var(--text); font-family: inherit; cursor: pointer; } .up-size-override:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(79,70,229,0.12); } .up-summary { margin-top: 8px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .up-summary-stats { display: inline-flex; align-items: center; gap: 8px; } .up-summary-stat { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .up-summary-matched { background: rgba(5,150,105,0.14); color:var(--c-green-text); } .up-summary-custom { background: rgba(245,158,11,0.14); color:var(--c-amber-text); } .up-summary-pending { background: rgba(100,116,139,0.14); color:var(--text-soft); } .up-group-toggle { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .up-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .up-group-opt { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; cursor: pointer; font-size: 11.5px; transition: all 0.12s; } .up-group-opt:hover { border-color: var(--border-strong); } .up-group-opt.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); } .up-group-opt input { margin: 0; cursor: pointer; } .up-group-opt b { font-weight: 700; } .up-group-opt span { color: var(--text-muted); font-size: 10.5px; } .up-group-opt.active span { color: inherit; opacity: 0.75; } /* User-defined custom size — purple-tinted (treated as valid + intentional) */ .up-fmt-usercustom { background: rgba(124,58,237,0.12); color:var(--c-violet-text); border: 1px solid rgba(124,58,237,0.3); } /* Truly unrecognized — soft amber warning (user can keep or override) */ .up-fmt-pending { background: rgba(245,158,11,0.12); color:var(--c-amber-text); border: 1px solid rgba(245,158,11,0.25); } .up-summary-usercustom { background: rgba(124,58,237,0.14); color:var(--c-violet-text); } /* Optgroup styling for the size override dropdown */ .up-size-override optgroup { font-style: normal; font-weight: 700; color: var(--text-muted); font-size: 10.5px; } /* Platform tags below the format chip */ .up-fmt-platforms { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 4px; vertical-align: middle; } .up-platform-tag { font-size: 9.5px; font-weight: 700; padding: 1px 6px; background: var(--bg); color: var(--text-soft); border: 1px solid var(--border); border-radius: 4px; letter-spacing: 0.02em; white-space: nowrap; } .up-platform-more { background: rgba(124,58,237,0.1); color:var(--c-violet-text); border-color: rgba(124,58,237,0.25); cursor: help; } /* ========================================================= LOCALIZATIONS section — language pills under the modal header ========================================================= */ .localizations-section { margin: 18px 22px 22px; padding: 14px 16px; background:var(--bg); border: 1px solid var(--border); border-radius: 10px; } .loc-section-head { margin-bottom: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .loc-section-head-left { flex: 1 1 auto; min-width: 0; } .loc-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 7px; border: 1px solid #D4D7E0; background:var(--surface); color:var(--text-soft); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; flex-shrink: 0; } .loc-add-btn:hover { background: var(--violet-soft); border-color: var(--primary); color: var(--primary); } .loc-add-btn svg { opacity: 0.75; } .loc-add-btn:hover svg { opacity: 1; } .loc-add-arrow { font-size: 11px; opacity: 0.55; margin-left: 1px; transition: transform 0.15s; } .loc-add-btn:hover .loc-add-arrow { opacity: 1; transform: translate(1px, -1px); } body[data-role="viewer"] .loc-add-btn, body[data-role="user"] .loc-add-btn { display: none !important; } .loc-section-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); } .loc-count { background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; } .loc-section-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; } .loc-section-sub code { font-family: 'SF Mono', Menlo, monospace; background: rgba(15,23,42,0.06); padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; color: var(--text); } .loc-pills { display: flex; flex-wrap: wrap; gap: 6px; } .loc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background:var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; transition: all 0.12s; font-family: inherit; } .loc-pill:hover { border-color: var(--primary); background: var(--primary-soft); } .loc-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; cursor: default; box-shadow: 0 2px 6px rgba(79,70,229,0.25); } .loc-pill.active:hover { background: var(--primary); } .loc-pill-flag { font-size: 14px; line-height: 1; } .loc-pill-lang { letter-spacing: -0.01em; } .loc-pill-market { font-size: 10.5px; font-weight: 500; opacity: 0.7; padding: 1px 5px; background: rgba(15,23,42,0.06); border-radius: 4px; } .loc-pill.active .loc-pill-market { background: rgba(255,255,255,0.2); opacity: 0.9; } .loc-pill-parent-badge { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 5px; background: rgba(99,102,241,0.18); color: var(--primary); border-radius: 3px; } .loc-pill.active .loc-pill-parent-badge { background: rgba(255,255,255,0.22); color: #fff; } /* Inline language chips in the modal's "Language" detail row. Mirrors the bigger pills in the Localizations section but compact, so the detail-row stays tight. Active = current asset's language. */ .detail-langs { display: flex; flex-wrap: wrap; gap: 4px; } .detail-lang-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit; transition: all 0.12s; } .detail-lang-chip:hover { background: var(--primary-soft); border-color: var(--primary); } .detail-lang-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; cursor: default; } .detail-lang-chip.active:hover { background: var(--primary); } .detail-lang-flag { font-size: 12px; line-height: 1; } .detail-lang-market { font-size: 9.5px; font-weight: 500; opacity: 0.75; padding: 1px 4px; background: rgba(15,23,42,0.06); border-radius: 3px; } .detail-lang-chip.active .detail-lang-market { background: rgba(255,255,255,0.22); opacity: 0.9; } .detail-lang-parent { font-size: 10px; color: #F59E0B; margin-left: 1px; } .detail-lang-chip.active .detail-lang-parent { color: #FCD34D; } /* "custom" tag inside a user-defined size chip */ .up-fmt-custom-tag { font-size: 9px; font-weight: 700; padding: 1px 5px; margin-left: 3px; background: rgba(124,58,237,0.18); color:var(--c-violet-text); border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em; } /* "+ Add custom size" trigger — only appears for non-standard files */ .up-add-custom-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border: 1px dashed rgba(124,58,237,0.45); background: rgba(124,58,237,0.06); color:var(--c-violet-text); border-radius: 999px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.12s; } .up-add-custom-btn:hover { background: rgba(124,58,237,0.12); border-color: rgba(124,58,237,0.7); border-style: solid; } /* Inline custom-size form (appears inside the file row) */ .up-custom-form { flex: 1 1 100%; margin-top: 8px; padding: 12px; background: rgba(124,58,237,0.05); border: 1px solid rgba(124,58,237,0.25); border-radius: 8px; } .up-custom-form-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color:var(--c-violet-text); margin-bottom: 8px; } .up-custom-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .up-custom-form-foot { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .up-cf-note { font-size: 10.5px; color: var(--text-muted); font-style: italic; flex: 1 1 auto; min-width: 0; } .up-cf-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; } .up-cf-field > span { color: var(--text-muted); font-weight: 600; font-size: 10.5px; } .up-cf-field > span .up-req { color:var(--c-red-text); } .up-cf-field > span .up-hint { color: var(--text-muted); font-weight: 400; opacity: 0.75; margin-left: 4px; } .up-cf-field input, .up-cf-field select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px; font-size: 12px; background:var(--surface); font-family: inherit; color: var(--text); } .up-cf-field input:focus, .up-cf-field select:focus { outline: none; border-color:var(--c-violet-text); box-shadow: 0 0 0 2px rgba(124,58,237,0.15); } .up-cf-wide { grid-column: 1 / -1; } .up-custom-form-actions { margin-top: 10px; display: flex; justify-content: flex-end; gap: 6px; } .btn-mini { padding: 5px 12px; font-size: 11px; font-weight: 600; border: 1px solid var(--border); background:var(--surface); color: var(--text); border-radius: 6px; cursor: pointer; font-family: inherit; } .btn-mini:hover { background: var(--bg); } .btn-mini-primary { background: #7C3AED; border-color:var(--c-violet-text); color: #fff; } .btn-mini-primary:hover { background: #6D28D9; border-color:var(--c-violet-text); } /* Creative ID — pinned row, prominent because it's the LP↔creative link key */ .up-id-row { margin-top: 12px; padding: 12px 14px; background: linear-gradient(90deg, rgba(220,38,38,0.04), rgba(220,38,38,0.01)); border: 1px solid rgba(220,38,38,0.18); border-radius: 8px; } .up-label-strong { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; display: block; } .up-id-input-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .up-id-input { flex: 0 0 220px; font-family: 'SF Mono','Menlo',monospace; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; padding: 7px 10px; } .up-id-input.valid { border-color: rgba(5,150,105,0.6); background: rgba(5,150,105,0.05); } .up-id-input.invalid { border-color: rgba(220,38,38,0.6); background: rgba(220,38,38,0.04); } .up-id-hint { flex: 1 1 auto; font-size: 11.5px; color: var(--text-muted); font-style: italic; } .up-id-hint.valid { color:var(--c-green-text); font-style: normal; } .up-id-hint.invalid { color:var(--c-red-text); font-style: normal; } .up-id-hint.append { color:var(--c-violet-text); font-style: normal; font-weight: 600; } .up-id-input.append { border-color: rgba(124,58,237,0.55); background: rgba(124,58,237,0.04); } .up-id-row-append { background: linear-gradient(90deg, rgba(124,58,237,0.06), rgba(124,58,237,0.02)); border-color: rgba(124,58,237,0.25); } /* Creative ID row when the ID was auto-minted by Monday (localization mode) */ .up-id-row-monday { background: linear-gradient(90deg, rgba(5,150,105,0.06), rgba(5,150,105,0.02)); border-color: rgba(5,150,105,0.28); } .up-id-row-monday .up-id-input.locked { background: rgba(5,150,105,0.04); border-color: rgba(5,150,105,0.5); color:var(--c-green-text); cursor: not-allowed; } .up-monday-icon { display: inline-block; vertical-align: -1px; margin-right: 4px; color:var(--c-green-text); } .up-id-monday-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: rgba(5,150,105,0.12); color:var(--c-green-text); border: 1px solid rgba(5,150,105,0.35); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; flex-shrink: 0; } /* Append-mode summary card — replaces the metadata form when the entered ID matches an existing creative. Shows what we're appending TO. */ .up-append-card { margin-top: 12px; padding: 12px 14px; background: rgba(124,58,237,0.04); border: 1px solid rgba(124,58,237,0.22); border-radius: 8px; } .up-append-card-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color:var(--c-violet-text); margin-bottom: 10px; } .up-append-card-head b { color: var(--text); font-weight: 700; } .up-append-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 14px; } .up-append-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .up-append-cell span { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .up-append-cell b { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .up-append-foot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(124,58,237,0.25); font-size: 10.5px; color: var(--text-muted); font-style: italic; display: flex; align-items: center; gap: 6px; } .up-append-foot svg { flex-shrink: 0; opacity: 0.75; } @media (max-width: 640px){ .up-append-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Editable append-mode form — pre-filled metadata, override-friendly. */ .up-form-grid-append { margin-bottom: 4px; } .up-append-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background:var(--surface); border: 1px solid rgba(124,58,237,0.25); border-radius: 10px; font-size: 10.5px; font-weight: 600; color:var(--c-violet-text); text-transform: lowercase; letter-spacing: 0.01em; } /* "original was X" hint shown under a field that's been changed in append mode */ .up-orig-hint { margin-top: 4px; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color:var(--c-amber-text); background: var(--amber-soft); border: 1px solid #FDE68A; border-radius: 6px; padding: 3px 7px; font-style: normal; font-weight: 500; } .up-orig-hint svg { flex-shrink: 0; opacity: 0.7; } .up-orig-hint b { color:var(--c-amber-text); font-weight: 700; } .up-orig-revert { background: transparent; border: 0; padding: 0; margin-left: 3px; color:var(--c-violet-text); font-size: 10.5px; font-weight: 600; cursor: pointer; text-decoration: underline; font-family: inherit; } .up-orig-revert:hover { color:var(--c-blue-text); } /* "locked" chip used on the Type field in append mode */ .up-locked-chip { display: inline-block; margin-left: 4px; padding: 1px 6px; background:var(--surface-2); border: 1px solid #E2E8F0; border-radius: 4px; font-size: 9.5px; font-weight: 700; color:var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; cursor: help; vertical-align: middle; } .up-input.locked { background:var(--bg); color:var(--text-muted); cursor: not-allowed; } /* "Existing tags" preview shown under the Tags input in append mode */ .up-tags-existing { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-muted); } .up-tag-existing { display: inline-block; padding: 2px 7px; background:var(--surface); border: 1px solid var(--border); border-radius: 4px; font-size: 10.5px; color: var(--text); font-weight: 500; } /* Tags chip-picker — replaces the old free-text input. Sources tags from the admin-managed TAGS dictionary, with a custom-text fallback. */ .up-field-tags { display: flex; flex-direction: column; gap: 6px; } .up-tags-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; padding: 4px 0; } .up-tags-empty { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; font-size: 11px; color: var(--text-muted); font-style: italic; } .up-tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 8px; background:var(--surface); border: 1px solid; border-radius: 14px; font-size: 11.5px; font-weight: 600; line-height: 1; transition: all 0.15s; } .up-tag-chip:hover { background:var(--surface-2); } .up-tag-chip-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .up-tag-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 0; background: transparent; color: inherit; opacity: 0.55; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1; padding: 0; font-family: inherit; transition: opacity 0.15s, background 0.15s; } .up-tag-chip-x:hover { opacity: 1; background: rgba(0,0,0,0.06); } .up-tag-unmanaged { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background:var(--surface-2); color:var(--text-muted); font-size: 9px; font-weight: 700; cursor: help; } .up-tags-add-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .up-tags-select, .up-tags-custom { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background:var(--surface); font-size: 12px; font-family: inherit; color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; } .up-tags-select:focus, .up-tags-custom:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); } .up-tags-select { cursor: pointer; } @media (max-width: 640px){ .up-tags-add-row { grid-template-columns: 1fr; } } /* "auto · from file" hint next to the Type label when type was suggested from the dropped file's MIME (image → Image Banner, video → Video Banner). */ .up-auto-hint { display: inline-block; margin-left: 4px; padding: 1px 7px; background:var(--emerald-soft); border: 1px solid #A7F3D0; border-radius: 4px; font-size: 9.5px; font-weight: 700; color:var(--c-green-text); text-transform: uppercase; letter-spacing: 0.04em; cursor: help; vertical-align: middle; font-family: inherit; } /* Summary note (replaces the group-mode toggle) */ .up-summary-note { font-size: 11px; color: var(--text-muted); font-style: italic; } .up-summary-note b { color: var(--text); font-style: normal; } /* ============================================================ BULK IMPORT — Admin → Bulk Import Two-step CSV flow: download template + upload filled. ============================================================ */ .bulk-import-step { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; } .bulk-import-step-body { flex: 1; min-width: 0; } .bulk-import-step-text { font-size: 13px; color: var(--text-soft); line-height: 1.5; margin: 0 0 10px; } .bulk-import-cols-hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.9; } .bulk-import-cols-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10.5px; margin-right: 4px; } .bulk-import-col-name { display: inline-block; font-family: 'SF Mono', Menlo, monospace; font-size: 11px; background: var(--bg); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; color: var(--text); cursor: help; } .bulk-import-col-name.required { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.25); color:var(--c-red-text); } /* Drop zone (no file picked yet) */ .bulk-import-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 24px; background: var(--surface); border: 2px dashed var(--border); border-radius: 10px; color: var(--text-muted); cursor: default; transition: all 0.15s; } .bulk-import-drop.dragover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); } .bulk-import-drop svg { opacity: 0.6; } .bulk-import-drop-title { font-size: 14px; font-weight: 600; color: var(--text); } .bulk-import-drop-sub { font-size: 12px; color: var(--text-soft); } .bulk-import-browse { background: transparent; border: 0; padding: 0; color: var(--primary); font-weight: 600; cursor: pointer; font-size: 12px; text-decoration: underline; font-family: inherit; } .bulk-import-browse:hover { color:var(--c-violet-text); } /* Preview after parse */ .bulk-import-preview { display: flex; flex-direction: column; gap: 12px; } .bulk-import-preview-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .bulk-import-file-name { font-size: 12px; color: var(--text); font-weight: 600; background: var(--bg); padding: 4px 10px; border-radius: 6px; } .bulk-import-summary { display: inline-flex; gap: 8px; } .bulk-import-stat { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--text-soft); } .bulk-import-stat.is-valid { background: rgba(5,150,105,0.12); color:var(--c-green-text); } .bulk-import-stat.has-error { background: rgba(220,38,38,0.12); color:var(--c-red-text); } .bulk-import-stat b { font-weight: 700; } .bulk-import-clear { margin-left: auto; background: transparent; border: 1px solid var(--border); padding: 5px 12px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-soft); cursor: pointer; font-family: inherit; transition: all 0.15s; } .bulk-import-clear:hover { background: var(--bg); color: var(--text); border-color: var(--border-strong); } .bulk-import-banner-err { font-size: 11.5px; color:var(--c-amber-text); background: var(--amber-soft); border: 1px solid #FDE68A; border-radius: 6px; padding: 8px 12px; } .bulk-import-banner-err b { color:var(--c-amber-text); font-weight: 700; } .bulk-import-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; max-height: 480px; overflow-y: auto; } .bulk-import-row { display: grid; grid-template-columns: 60px 1.6fr 100px 110px 100px 100px 90px 130px 1.4fr; gap: 0; font-size: 11.5px; border-bottom: 1px solid var(--border); } .bulk-import-row:last-child { border-bottom: 0; } .bulk-import-row-header { background: var(--bg); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; color: var(--text-muted); position: sticky; top: 0; z-index: 1; } .bulk-import-row.has-error { background: rgba(220,38,38,0.04); } .bulk-import-row.is-valid:hover { background: var(--bg); } .bulk-import-cell { padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--border); } .bulk-import-cell:last-child { border-right: 0; } .bulk-import-cell-status { display: inline-flex; align-items: center; gap: 6px; } .bulk-import-rownum { font-family: 'SF Mono', Menlo, monospace; font-size: 10px; color: var(--text-muted); } .bulk-import-ok { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: var(--emerald-soft); color:var(--c-green-text); border-radius: 50%; font-size: 11px; font-weight: 700; } .bulk-import-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: var(--rose-soft); color:var(--c-red-text); border-radius: 50%; font-size: 10px; font-weight: 700; cursor: help; } .bulk-import-cell-err { font-size: 10.5px; color:var(--c-red-text); font-style: italic; } .bulk-import-empty { padding: 40px; text-align: center; color: var(--text-muted); font-style: italic; } .bulk-import-actions { display: flex; align-items: center; gap: 14px; padding: 12px 0; flex-wrap: wrap; } .bulk-import-skip-note { font-size: 11.5px; color:var(--c-amber-text); } @media (max-width: 900px){ .bulk-import-step { flex-direction: column; align-items: stretch; } .bulk-import-row { grid-template-columns: 50px 1fr 80px 100px; } .bulk-import-row .bulk-import-cell:nth-child(n+5) { display: none; } } /* ============================================================================ AUTH · LOGIN SCREEN (shown when Supabase driver is active + no session) ============================================================================ */ .auth-login-screen{position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,#EEF2FF 0%,#F8FAFC 50%,#FFF1F2 100%);display:flex;align-items:center;justify-content:center;padding:24px;} .auth-card{width:100%;max-width:420px;background:var(--surface);border-radius:18px;box-shadow:var(--shadow-xl);padding:32px;display:flex;flex-direction:column;gap:18px;} .auth-card-head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:6px;} .auth-logo{width:56px;height:56px;border-radius:14px;object-fit:cover;display:block;margin-bottom:8px;box-shadow:var(--shadow);} .auth-title{font-size:22px;font-weight:700;letter-spacing:-0.02em;color:var(--text);margin:0;} .auth-sub{font-size:13px;color:var(--text-soft);margin:0;} .auth-form{display:flex;flex-direction:column;gap:8px;margin-top:6px;} .auth-label{font-size:12px;font-weight:600;color:var(--text-soft);} .auth-label-row{display:flex;justify-content:space-between;align-items:center;margin-top:6px;} .auth-link{background:none;border:none;padding:0;color:var(--primary);font-size:12px;font-weight:600;cursor:pointer;} .auth-link:hover{color:var(--primary-dark);text-decoration:underline;} .auth-input{height:44px;padding:0 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);font-size:14px;color:var(--text);transition:all 0.15s;outline:none;} .auth-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);} .auth-btn-primary{height:44px;border-radius:10px;background:var(--primary);color:#fff;font-weight:600;font-size:14px;margin-top:8px;transition:background 0.15s;} .auth-btn-primary:hover{background:var(--primary-dark);} .auth-btn-sso{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;} .auth-btn-sso svg{flex-shrink:0;border-radius:2px;background:#fff;padding:1px;} .auth-or{display:flex;align-items:center;gap:12px;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;margin:4px 0;} .auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--border);} .auth-btn-secondary{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);font-weight:600;font-size:14px;color:var(--text);transition:all 0.15s;} .auth-btn-secondary:hover{background:var(--bg);border-color:var(--text-soft);} .auth-msg{font-size:13px;padding:10px 12px;border-radius:8px;display:none;} .auth-msg-ok{display:block;background:var(--emerald-soft);color:var(--emerald);border:1px solid rgba(16,185,129,0.2);} .auth-msg-err{display:block;background:var(--rose-soft);color:var(--rose);border:1px solid rgba(244,63,94,0.2);} .auth-foot{font-size:12px;color:var(--text-muted);text-align:center;line-height:1.5;padding-top:10px;border-top:1px solid var(--border);} /* ============================================================================ FIRST-RUN WALKTHROUGH · spotlight tour (theme-variable driven → dark-ready) ============================================================================ */ #tour-root{position:fixed;inset:0;z-index:10000;} .tour-dim{position:fixed;inset:0;background:rgba(15,23,42,0.66);display:none;} .tour-spot{position:fixed;border-radius:12px;border:2px solid var(--primary); box-shadow:0 0 0 9999px rgba(15,23,42,0.66), 0 0 0 4px color-mix(in srgb, var(--primary) 35%, transparent); transition:top .3s ease,left .3s ease,width .3s ease,height .3s ease;pointer-events:none;display:none;} .tour-pop{position:fixed;width:320px;max-width:calc(100vw - 24px);background:var(--surface); border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-xl);padding:18px 18px 14px; z-index:10001;animation:tourPop .22s ease;} .tour-pop-center{top:50%;left:50%;transform:translate(-50%,-50%);width:380px;text-align:left;} @keyframes tourPop{from{opacity:0;transform:translateY(6px) scale(0.98);}to{opacity:1;transform:none;}} .tour-pop-center{animation:tourPopCenter .25s ease;} @keyframes tourPopCenter{from{opacity:0;transform:translate(-50%,-46%) scale(0.97);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}} .tour-pop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;} .tour-count{font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--primary);} .tour-skip{background:none;border:none;color:var(--text-muted);font-size:12px;font-weight:600;cursor:pointer;padding:2px 4px;} .tour-skip:hover{color:var(--text-soft);text-decoration:underline;} .tour-title{font-size:17px;font-weight:700;letter-spacing:-0.01em;color:var(--text);margin:0 0 6px;} .tour-body{font-size:13.5px;line-height:1.55;color:var(--text-soft);} .tour-body b{color:var(--text);font-weight:600;} .tour-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;} .tour-dots{display:flex;gap:5px;} .tour-dot{width:6px;height:6px;border-radius:50%;background:var(--border-strong);transition:all .2s;} .tour-dot.on{background:var(--primary);width:18px;border-radius:3px;} .tour-nav{display:flex;gap:8px;} .tour-back{background:var(--surface);border:1px solid var(--border-strong);border-radius:8px; padding:7px 14px;font-size:13px;font-weight:600;color:var(--text-soft);cursor:pointer;font-family:inherit;} .tour-back:hover{background:var(--surface-2);color:var(--text);} .tour-next{background:var(--primary);border:1px solid var(--primary);border-radius:8px; padding:7px 16px;font-size:13px;font-weight:600;color:#fff;cursor:pointer;font-family:inherit;} .tour-next:hover{background:var(--primary-dark);} /* Help center — replay tour button */ .help-tour-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 16px; background:var(--primary-soft);border:1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius:10px;color:var(--primary);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;} .help-tour-cta:hover{background:var(--primary);color:#fff;border-color:var(--primary);} .help-cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;} .help-manual-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 16px; background:var(--surface);border:1px solid var(--border);border-radius:10px; color:var(--text);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit; text-decoration:none;transition:all .15s;} .help-manual-cta:hover{background:var(--surface-2,var(--bg));border-color:var(--text-soft);} /* ============================================================================ BULK IMPORT · Monday-sync preview cells (v2) ============================================================================ */ .bulk-import-sync-note{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px; background:var(--primary-soft);border:1px solid color-mix(in srgb, var(--primary) 25%, transparent); border-radius:8px;font-size:12px;color:var(--text-soft);line-height:1.5;} .bulk-import-sync-note svg{flex-shrink:0;margin-top:1px;color:var(--primary);} .bulk-import-sync-note code{background:var(--surface-2);padding:1px 5px;border-radius:4px;font-size:11px;color:var(--text);} .bulk-import-mon-new{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--c-green-text);} .bulk-import-mon-existing{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--c-blue-text);font-family:'SF Mono',Menlo,monospace;} .bulk-import-mon-skip{color:var(--text-muted);} .bulk-import-stat-new{color:var(--c-green-text);} .bulk-import-stat-mirror{color:var(--c-blue-text);} /* ============================================================================ REQUEST CREATIVE · guided multi-step form (v2) — overrides old iframe mode ============================================================================ */ .rf-modal{ max-width: 660px; height: auto; max-height: calc(100vh - 80px); } .rf-shell{ display:flex; flex-direction:column; min-height:0; max-height:calc(100vh - 80px); } .rf-head-text{ min-width:0; } .rf-foot{ padding:0 26px 20px; } .rf-fallback-link{ font-size:12px; color:var(--text-muted); font-weight:500; } .rf-fallback-link:hover{ color:var(--primary); text-decoration:underline; } /* Step 1 · type chooser */ .rf-type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:20px 26px 8px; overflow-y:auto; } .rf-type-card{ display:flex; align-items:center; gap:12px; text-align:left; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--surface); cursor:pointer; transition:all .15s; font-family:inherit; } .rf-type-card:hover{ border-color:var(--primary); background:var(--primary-soft); transform:translateY(-1px); box-shadow:var(--shadow); } .rf-type-icon{ width:42px; height:42px; flex-shrink:0; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--primary-soft); color:var(--primary); } .rf-type-card:hover .rf-type-icon{ background:var(--primary); color:#fff; } .rf-type-body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; } .rf-type-label{ font-size:14px; font-weight:700; color:var(--text); } .rf-type-blurb{ font-size:12px; color:var(--text-soft); line-height:1.4; } .rf-type-arrow{ color:var(--text-muted); flex-shrink:0; } .rf-type-card:hover .rf-type-arrow{ color:var(--primary); } /* Step 2 · form */ .rf-form{ display:flex; flex-direction:column; min-height:0; } .rf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; padding:20px 26px; overflow-y:auto; } .rf-field{ display:flex; flex-direction:column; gap:6px; min-width:0; } .rf-field-full{ grid-column:1 / -1; } .rf-label{ font-size:12px; font-weight:600; color:var(--text-soft); } .rf-label-req::after{ content:' *'; color:var(--rose); } .rf-opt{ color:var(--text-muted); font-weight:400; } .rf-input{ height:40px; padding:0 12px; border:1px solid var(--border-strong); border-radius:9px; background:var(--surface); font-size:13.5px; color:var(--text); font-family:inherit; outline:none; transition:all .15s; width:100%; } .rf-input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); } .rf-textarea{ height:auto; padding:10px 12px; resize:vertical; line-height:1.5; } .rf-hint{ font-size:11.5px; color:var(--text-muted); line-height:1.45; } .rf-parent-info{ margin-top:2px; } .rf-parent-chip{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 12px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); font-size:12.5px; } .rf-parent-chip-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; } .rf-parent-meta{ color:var(--text-muted); font-size:11.5px; } .rf-inherit{ padding:9px 12px; border-radius:9px; background:var(--primary-soft); border:1px solid color-mix(in srgb, var(--primary) 22%, transparent); font-size:12.5px; color:var(--text-soft); } .rf-inherit b{ color:var(--text); } .rf-inherit-empty{ background:var(--surface-2); border-color:var(--border); } .rf-requestor{ flex-direction:row; align-items:center; gap:7px; font-size:12px; color:var(--text-muted); padding-top:6px; border-top:1px dashed var(--border); } .rf-requestor b{ color:var(--text-soft); } .rf-actions{ display:flex; justify-content:flex-end; gap:10px; padding:16px 26px; border-top:1px solid var(--border); background:var(--surface-2); flex-shrink:0; } .rf-actions-center{ justify-content:center; flex-wrap:wrap; background:transparent; border-top:0; } .rf-submit{ display:inline-flex; align-items:center; gap:8px; } /* Step 3 · confirmation */ .rf-done{ padding:32px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; } .rf-done-check{ width:60px; height:60px; border-radius:50%; background:var(--emerald-soft); color:var(--emerald); display:flex; align-items:center; justify-content:center; margin-bottom:14px; } .rf-done-check.rf-done-err{ background:rgba(231,30,37,0.12); color:#E71E25; } .rf-done-pending{ color:var(--text-soft); font-style:italic; font-size:13px; } .rf-done-title{ font-size:20px; font-weight:700; color:var(--text); margin:0 0 6px; } .rf-done-sub{ font-size:13.5px; color:var(--text-soft); line-height:1.5; max-width:420px; margin:0 0 18px; } .rf-done-card{ width:100%; max-width:440px; border:1px solid var(--border); border-radius:11px; overflow:hidden; margin-bottom:16px; text-align:left; } .rf-done-row{ display:flex; gap:12px; padding:10px 14px; border-bottom:1px solid var(--border); font-size:13px; } .rf-done-row:last-child{ border-bottom:0; } .rf-done-row > span:first-child{ width:90px; flex-shrink:0; color:var(--text-muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.03em; padding-top:1px; } .rf-done-row code{ font-family:'SF Mono',Menlo,monospace; font-size:12.5px; color:var(--primary); } .rf-done-note{ font-size:12px; color:var(--text-muted); line-height:1.5; max-width:440px; margin:0 0 18px; } @media (max-width:560px){ .rf-type-grid{ grid-template-columns:1fr; } .rf-grid{ grid-template-columns:1fr; } } /* Request form · searchable parent combobox */ .rf-combo{ position:relative; } .rf-combo-icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; z-index:1; } .rf-combo-input{ padding-left:34px; } .rf-combo-results{ position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30; max-height:300px; overflow-y:auto; background:var(--surface); border:1px solid var(--border-strong); border-radius:10px; box-shadow:var(--shadow-lg); padding:4px; } .rf-combo-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px; cursor:pointer; } .rf-combo-item:hover, .rf-combo-item.active{ background:var(--primary-soft); } .rf-combo-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; } .rf-combo-main{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; } .rf-combo-main b{ font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rf-combo-meta{ font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rf-combo-right{ flex-shrink:0; font-size:12px; display:flex; align-items:center; gap:5px; } .rf-combo-right code{ font-family:'SF Mono',Menlo,monospace; font-size:11px; color:var(--text-muted); } .rf-combo-empty{ padding:14px; font-size:12.5px; color:var(--text-muted); text-align:center; } .rf-combo-more{ padding:8px 10px; font-size:11px; color:var(--text-muted); text-align:center; border-top:1px solid var(--border); margin-top:2px; } /* Request form · segmented toggle (Creative: connected vs standalone) */ .rf-segment{ display:flex; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; } .rf-seg{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 10px; border:none; border-radius:7px; background:transparent; color:var(--text-soft); font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .15s; } .rf-seg:hover{ color:var(--text); } .rf-seg.active{ background:var(--surface); color:var(--primary); box-shadow:var(--shadow-sm); } .rf-seg svg{ flex-shrink:0; } /* Request form · creative-kind chooser + extras */ .rf-type-grid-3{ grid-template-columns:1fr 1fr; } .rf-head-back{ width:32px; height:32px; flex-shrink:0; border:1px solid var(--border); border-radius:8px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--text-soft); cursor:pointer; margin-right:4px; transition:all .15s; } .rf-head-back:hover{ background:var(--surface-2); color:var(--text); } .rf-checks{ display:flex; flex-wrap:wrap; gap:8px; } .rf-check{ display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid var(--border-strong); border-radius:8px; font-size:12.5px; color:var(--text-soft); cursor:pointer; background:var(--surface); transition:all .15s; } .rf-check:hover{ border-color:var(--primary); color:var(--text); } .rf-check input{ accent-color:var(--primary); } /* Request form · manual-parent escape hatch link */ .rf-manual-link{ background:none; border:none; padding:0; color:var(--primary); font-weight:600; font-size:11.5px; cursor:pointer; font-family:inherit; } .rf-manual-link:hover{ color:var(--primary-dark); text-decoration:underline; } /* ---------- In-app feedback (Report a bug / request a feature) ---------- */ .fb-overlay{ position:fixed; inset:0; background:rgba(15,23,42,0.55); display:flex; align-items:center; justify-content:center; z-index:6000; padding:20px; } .fb-modal{ background:var(--surface); border:1px solid var(--border); border-radius:14px; width:100%; max-width:520px; max-height:90vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); padding:22px; } .fb-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .fb-title{ font-size:18px; font-weight:700; color:var(--text); margin:0; } .fb-close{ width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text-soft); cursor:pointer; font-size:13px; } .fb-close:hover{ background:var(--bg); border-color:var(--text-soft); } .fb-type{ display:flex; gap:8px; margin-bottom:6px; } .fb-type-btn{ flex:1; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text-soft); font-weight:600; font-size:13px; cursor:pointer; transition:all 0.15s; } .fb-type-btn.active{ border-color:var(--primary); color:var(--primary); background:rgba(231,30,37,0.06); } .fb-form{ display:flex; flex-direction:column; } .fb-label{ font-size:12px; font-weight:600; color:var(--text-soft); margin-top:10px; margin-bottom:4px; } .fb-req{ color:#E71E25; } .fb-input{ width:100%; padding:9px 11px; border:1px solid var(--border-strong, var(--border)); border-radius:8px; background:var(--bg); color:var(--text); font-size:13px; font-family:inherit; box-sizing:border-box; } .fb-input:focus{ outline:none; border-color:var(--primary); } .fb-textarea{ resize:vertical; } .fb-row{ display:flex; gap:10px; } .fb-col{ flex:1; display:flex; flex-direction:column; min-width:0; } .fb-meta{ font-size:11.5px; color:var(--text-muted); margin-top:12px; } .fb-msg{ font-size:12.5px; margin-top:8px; min-height:16px; } .fb-msg-err{ color:#E71E25; } .fb-msg-ok{ color:var(--emerald, #10B981); } .fb-submit{ margin-top:12px; height:42px; border:0; border-radius:10px; background:var(--primary); color:#fff; font-weight:600; font-size:14px; cursor:pointer; transition:background 0.15s; } .fb-submit:hover{ background:var(--primary-dark); } .fb-foot{ margin-top:14px; font-size:12px; color:var(--text-muted); text-align:center; } .fb-foot a{ color:var(--primary); font-weight:600; } @media (max-width:640px){ .fb-row{ flex-direction:column; } .fb-modal{ padding:16px; } } /* ============================================================================ STACK PAGE — software / subscriptions tracker ============================================================================ */ .stack-wrap { max-width: 1400px; margin: 0 auto; padding: 24px; } .stack-head { padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; } .stack-head-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } .stack-head-title { flex: 1; min-width: 0; } .stack-head-sub { color: var(--text-soft); font-size: 13.5px; margin-top: 6px; max-width: 720px; } .stack-head-actions { flex-shrink: 0; display: flex; gap: 8px; align-items: center; } .stack-loading { padding: 40px; text-align: center; color: var(--text-muted); } /* Spend overview cards */ .stack-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 32px; } .stack-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; } .stack-stat-num { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; } .stack-stat-num-sm { font-size: 14px; font-weight: 700; line-height: 1.3; } .stack-stat-lbl { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; font-weight: 600; } .stack-stat-soon .stack-stat-num { color: var(--text); } /* Section header */ .stack-section { margin-bottom: 32px; } .stack-section-head { margin-bottom: 14px; } .stack-section-head h2 { font-size: 18px; font-weight: 700; margin: 0; display: inline-flex; align-items: center; gap: 8px; } .stack-count { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; font-size: 11.5px; color: var(--text-soft); font-weight: 700; } .stack-section-sub { color: var(--text-muted); font-size: 12.5px; margin: 4px 0 0; } /* Table */ .stack-table { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .stack-thead { display: grid; grid-template-columns: 2fr 1fr 110px 110px 130px 1fr 50px; gap: 12px; padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .stack-thead-canceled { grid-template-columns: 2fr 1fr 110px 120px 2fr 50px; } .stack-th { cursor: pointer; user-select: none; } .stack-th:hover { color: var(--text); } .stack-th-r { text-align: right; } .stack-row { display: grid; grid-template-columns: 2fr 1fr 110px 110px 130px 1fr 50px; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); align-items: center; cursor: pointer; transition: background 0.12s; } .stack-row-canceled { grid-template-columns: 2fr 1fr 110px 120px 2fr 50px; opacity: 0.78; cursor: default; } .stack-row:last-child { border-bottom: none; } .stack-row:not(.stack-row-canceled):hover { background: var(--bg); } .stack-td { font-size: 13px; color: var(--text); min-width: 0; } .stack-td-r { text-align: right; font-variant-numeric: tabular-nums; } .stack-td b { font-weight: 700; } .stack-td-name { overflow: hidden; } .stack-td-name b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stack-td-notes { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stack-td-reason { font-size: 12.5px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stack-url { color: var(--primary); text-decoration: none; font-size: 11px; margin-left: 3px; } .stack-url:hover { text-decoration: underline; } .stack-cat { display: inline-block; padding: 3px 9px; border-radius: 5px; font-size: 10.5px; font-weight: 700; text-transform: capitalize; letter-spacing: 0.02em; } .stack-renewal-soon { color: #C2410C; font-weight: 700; } .stack-renewal-overdue { color: #B91C1C; font-weight: 800; } .stack-cycle { font-size: 10px; font-weight: 600; color: var(--text-muted); margin-left: 2px; font-variant-numeric: tabular-nums; } .stack-cycle-annual { color: #6D28D9; } .stack-cycle-one-time { color: #047857; } .stack-row-actions { display: flex; gap: 4px; justify-content: flex-end; } .stack-row-btn { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text-soft); cursor: pointer; transition: all 0.12s; font-size: 14px; font-weight: 700; } .stack-row-btn:hover { background: var(--bg); color: var(--text); } .stack-row-btn-danger:hover { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; } /* Empty state */ .stack-empty { background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; padding: 60px 20px; text-align: center; color: var(--text-muted); } .stack-empty svg { color: var(--text-muted); opacity: 0.5; margin-bottom: 8px; } .stack-empty h3 { color: var(--text); margin: 0 0 6px; font-size: 15px; font-weight: 700; } .stack-empty p { font-size: 13px; margin: 0 0 14px; } /* Modal form (Add / Edit tool) */ .stack-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: flex-start; justify-content: center; z-index: 1000; padding: 60px 20px; overflow-y: auto; } .stack-modal { background: var(--surface); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); width: 100%; max-width: 640px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; border: 1px solid var(--border); } .stack-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); } .stack-modal-head h2 { margin: 0; font-size: 17px; font-weight: 700; } .stack-modal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 22px; overflow-y: auto; } .stack-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .stack-field-wide { grid-column: span 2; } .stack-field > span { font-size: 12px; color: var(--text-soft); font-weight: 600; } .stack-hint { font-weight: 400; color: var(--text-muted); margin-left: 4px; } .stack-field input, .stack-field select, .stack-field textarea { border: 1px solid var(--border); border-radius: 7px; padding: 9px 11px; font-size: 13.5px; background: var(--bg); color: var(--text); font-family: inherit; transition: border-color 0.12s; } .stack-field input:focus, .stack-field select:focus, .stack-field textarea:focus { outline: none; border-color: var(--primary); } .stack-field textarea { resize: vertical; } .stack-modal-foot { grid-column: span 2; display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 4px; } /* ============================================================================ STACK PAGE — v2 polish: hero panel, upcoming strip, grouped tools, search ============================================================================ */ /* Hide v1 stats grid (replaced by hero panel) */ .stack-overview { display: none; } /* Hero spend panel */ .stack-hero { background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%); border: 1px solid var(--border); border-radius: 14px; padding: 28px 30px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 22px; } .stack-hero-totals { display: flex; align-items: stretch; gap: 28px; } .stack-hero-total { display: flex; flex-direction: column; } .stack-hero-num { font-size: 38px; font-weight: 800; color: var(--text); letter-spacing: -0.025em; line-height: 1.1; font-variant-numeric: tabular-nums; } .stack-hero-num-soft { color: var(--text-soft); font-weight: 700; } .stack-hero-lbl { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-top: 6px; } .stack-hero-sep { width: 1px; background: var(--border); } .stack-hero-meta { margin-left: auto; display: flex; flex-direction: column; justify-content: center; gap: 4px; font-size: 12.5px; color: var(--text-soft); } .stack-hero-meta-row b { color: var(--text); font-weight: 700; margin-right: 4px; } .stack-hero-meta-muted { opacity: 0.7; } .stack-hero-breakdown { display: flex; flex-direction: column; gap: 12px; } .stack-hero-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); } .stack-hero-bar-seg { transition: opacity 0.15s; cursor: default; } .stack-hero-bar-seg:hover { opacity: 0.85; } .stack-hero-legend { display: flex; flex-wrap: wrap; gap: 14px 22px; font-size: 12px; color: var(--text-soft); } .stack-hero-legend-item { display: inline-flex; align-items: center; gap: 6px; } .stack-hero-legend-dot { width: 9px; height: 9px; border-radius: 3px; } .stack-hero-legend-item b { color: var(--text); font-weight: 600; text-transform: capitalize; } .stack-hero-legend-amt { color: var(--text-muted); } /* Upcoming renewals strip */ .stack-upcoming { margin-bottom: 28px; } .stack-upcoming-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .stack-upcoming-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); } .stack-upcoming-sub { font-size: 12px; color: var(--text-muted); } .stack-upcoming-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .stack-upc-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cat-color, #64748B); border-radius: 9px; padding: 12px 14px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: transform 0.08s, box-shadow 0.12s; } .stack-upc-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,0.08); } .stack-upc-day { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .stack-upc-overdue .stack-upc-day { color: #B91C1C; } .stack-upc-soon .stack-upc-day { color: #C2410C; } .stack-upc-near .stack-upc-day { color: #B45309; } .stack-upc-name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stack-upc-meta { font-size: 11.5px; color: var(--text-soft); } .stack-upc-date { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* Section header row (with search + grouping toggle) */ .stack-section-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .stack-section-head-l { display: flex; flex-direction: column; } .stack-section-head-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .stack-search { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; transition: border-color 0.12s; } .stack-search:focus-within { border-color: var(--primary); } .stack-search svg { color: var(--text-muted); flex-shrink: 0; } .stack-search input { border: none; outline: none; background: transparent; font-size: 13px; color: var(--text); width: 200px; font-family: inherit; } .stack-search-clear { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 2px 4px; } .stack-search-clear:hover { color: var(--text); } .stack-group-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-soft); cursor: pointer; transition: all 0.12s; } .stack-group-toggle:hover { color: var(--text); border-color: var(--border-strong); } .stack-group-toggle.active { color: var(--primary); border-color: var(--primary); background: rgba(79,70,229,0.06); } /* Category groups */ .stack-group { margin-bottom: 14px; } .stack-group-head { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--surface); border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0; padding: 12px 18px; cursor: pointer; text-align: left; transition: background 0.12s; } .stack-group-head:hover { background: var(--bg); } .stack-group-caret { color: var(--text-muted); transition: transform 0.15s; flex-shrink: 0; } .stack-group-caret.collapsed { transform: rotate(-90deg); } .stack-group-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .stack-group-name { font-size: 13.5px; font-weight: 700; color: var(--text); text-transform: capitalize; } .stack-group-count { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; font-size: 11px; color: var(--text-soft); font-weight: 700; } .stack-group-spacer { flex: 1; } .stack-group-total { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .stack-group .stack-table { border-radius: 0 0 10px 10px; border-top: none; } /* Better empty state */ .stack-empty-hero { padding: 50px 30px; } .stack-empty-hero h3 { font-size: 18px; } .stack-empty-hero p { max-width: 380px; margin: 0 auto 18px; } .stack-empty-quickadd { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); } .stack-empty-quickadd-label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 12px; } .stack-empty-quickadd-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .stack-quickadd-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 12.5px; color: var(--text); transition: all 0.12s; } .stack-quickadd-chip:hover { border-color: var(--primary); background: rgba(79,70,229,0.04); } .stack-quickadd-chip b { font-weight: 700; } .stack-quickadd-price { color: var(--text-muted); font-size: 11.5px; } .stack-empty-search { padding: 30px; text-align: center; color: var(--text-muted); background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; } @media (max-width: 720px){ .stack-hero { padding: 20px; } .stack-hero-totals { flex-direction: column; gap: 16px; } .stack-hero-sep { display: none; } .stack-hero-num { font-size: 32px; } .stack-hero-meta { margin-left: 0; flex-direction: row; gap: 14px; flex-wrap: wrap; } .stack-section-head-row { flex-direction: column; align-items: stretch; } .stack-section-head-r { justify-content: flex-end; } .stack-search input { width: 100%; } } /* Stack — currency switch + FX */ .stack-hero-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: -8px; } .stack-ccy-switch { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px; overflow: hidden; } .stack-ccy-btn { background: transparent; border: none; padding: 4px 14px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); cursor: pointer; border-radius: 999px; transition: all 0.12s; letter-spacing: 0.04em; } .stack-ccy-btn:hover { color: var(--text); } .stack-ccy-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,0.06); } .stack-fx-note { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .stack-row-fx { font-size: 10.5px; color: var(--text-muted); font-weight: 500; margin-left: 6px; font-variant-numeric: tabular-nums; } /* List view — family card shows multiple flags in the language column */ .list-flag-row { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .list-flag-row .list-flag { font-size: 14px; line-height: 1; } /* List view — name + brand>WL icons inline, name flush left */ .list-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 2px; } .list-name-row .list-name { margin-bottom: 0; flex: 0 1 auto; } .list-name-row .list-icon-cell { flex-shrink: 0; padding: 0; } .list-name-row .list-icon-cell .list-favicon, .list-name-row .list-icon-cell img { width: 18px; height: 18px; } .list-name-row .list-icon-sep { width: 9px; height: 9px; opacity: 0.5; } /* ============================================================================ RESYNC SETTINGS MODAL — admin escape hatch for forcing a Monday re-fetch ============================================================================ */ .resync-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: flex-start; justify-content: center; z-index: 1100; padding: 80px 20px; overflow-y: auto; } .resync-modal { background: var(--surface); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); width: 100%; max-width: 520px; border: 1px solid var(--border); display: flex; flex-direction: column; } .resync-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); } .resync-modal-head h2 { margin: 0; font-size: 17px; font-weight: 700; } .resync-modal-form { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; } .resync-modal-hint { font-size: 12.5px; color: var(--text-soft); margin: 0 0 4px; line-height: 1.5; } .resync-field { display: flex; flex-direction: column; gap: 6px; } .resync-field > span:first-child { font-size: 12px; color: var(--text-soft); font-weight: 600; } .resync-field input { border: 1px solid var(--border); border-radius: 7px; padding: 9px 11px; font-size: 13.5px; background: var(--bg); color: var(--text); font-family: inherit; } .resync-field input:focus { outline: none; border-color: var(--primary); } .resync-field code { font-family: 'SF Mono', Menlo, monospace; font-size: 11.5px; background: var(--bg); padding: 1px 5px; border-radius: 3px; } .resync-hint { font-size: 11px; color: var(--text-muted); } .resync-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; border-top: 1px solid var(--border); padding: 14px 0 0; margin-top: 6px; } /* Resync button loading state — subtle pulse */ .btn.loading { opacity: 0.6; pointer-events: none; } .btn.loading svg { animation: resync-spin 1s linear infinite; } @keyframes resync-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================================================ ADMIN USER EDIT MODAL — role + monday_id + name in one place ============================================================================ */ .admin-user-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: flex-start; justify-content: center; z-index: 1100; padding: 80px 20px; overflow-y: auto; } .admin-user-modal { background: var(--surface); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); width: 100%; max-width: 560px; border: 1px solid var(--border); display: flex; flex-direction: column; } .admin-user-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); } .admin-user-modal-head-l { display: flex; align-items: center; gap: 12px; } .admin-user-modal-avatar { width: 40px; height: 40px; border-radius: 10px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--text); border: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.04em; } .admin-user-modal-head h2 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.2; } .admin-user-modal-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .admin-user-modal-form { padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; } .admin-user-field { display: flex; flex-direction: column; gap: 6px; } .admin-user-field > span:first-child { font-size: 12px; color: var(--text-soft); font-weight: 600; } .admin-user-field input { border: 1px solid var(--border); border-radius: 7px; padding: 9px 11px; font-size: 13.5px; background: var(--bg); color: var(--text); font-family: inherit; } .admin-user-field input:focus { outline: none; border-color: var(--primary); } .admin-user-hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; } .admin-user-hint code { font-family: 'SF Mono', Menlo, monospace; font-size: 11px; background: var(--bg); padding: 1px 5px; border-radius: 3px; } .admin-user-role-picker { display: flex; flex-direction: column; gap: 6px; } .admin-user-role-opt { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: all 0.12s; background: var(--surface); } .admin-user-role-opt:hover { border-color: var(--border-strong); } .admin-user-role-opt.active { border-color: var(--primary); background: rgba(79,70,229,0.04); } .admin-user-role-opt input[type="radio"] { display: none; } .admin-user-role-body { flex: 1; min-width: 0; } .admin-user-role-label { font-size: 13px; font-weight: 700; color: var(--text); } .admin-user-role-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; } .admin-user-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; border-top: 1px solid var(--border); padding: 14px 0 0; margin-top: 4px; }