/* ═══════════════════════════════════════════════════════════ APEX Film Deliverables — shared styles Dark theme, DM Sans / Playfair Display / DM Mono ═══════════════════════════════════════════════════════════ */ *{margin:0;padding:0;box-sizing:border-box} :root{ --bg:#0f0f0f; --card:#1a1a1a; --card2:#222; --card3:#2a2a2a; --border:#2e2e2e; --border-light:#3a3a3a; --accent:#ff6b2b; --accent2:#ffb347; --accent-dim:#e55a1b; --text:#f0f0f0; --text-dim:#c0c0c0; --muted:#888; --muted-dim:#666; --error:#ff4444; --success:#2ecc71; --warning:#ffb347; --info:#3498db; --shadow:0 4px 24px rgba(0,0,0,.5); } html,body{ height:100%; font-family:'DM Sans',system-ui,sans-serif; background:var(--bg); color:var(--text); -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased; } a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-dim)} button{ -webkit-tap-highlight-color:transparent; -webkit-appearance:none; appearance:none; font-family:inherit; } button:focus{outline:none} button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} h1,h2,h3{font-family:'Playfair Display',serif;font-weight:600} h1{font-size:1.8rem;letter-spacing:.5px} h2{font-size:1.4rem} h3{font-size:1.1rem} code,kbd,.mono{font-family:'DM Mono',ui-monospace,monospace} /* ── Animations ── */ @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} /* ── Loader ── */ .loading-overlay{ position:fixed;inset:0;background:var(--bg); display:flex;align-items:center;justify-content:center; z-index:999;transition:opacity .3s; } .loading-overlay.hide{opacity:0;pointer-events:none} .spinner{ width:36px;height:36px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; } /* ── App shell ── */ .app-shell{display:flex;flex-direction:column;min-height:100vh} .page{ flex:1; padding:24px; /* Push content below the topbar (60px) + iPhone safe-area inset (notch) */ padding-top:calc(60px + env(safe-area-inset-top, 0px) + 24px); padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px)); max-width:1200px; margin:0 auto; width:100%; animation:fadeUp .4s ease both; } .page-narrow{max-width:780px} /* ── Header ── */ .topbar{ position:fixed;top:0;left:0;right:0; /* Account for iPhone notch / Dynamic Island when running inside Capacitor */ height:calc(60px + env(safe-area-inset-top, 0px)); padding-top:env(safe-area-inset-top, 0px); background:rgba(15,15,15,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border); display:flex;align-items:center; padding-left:20px;padding-right:20px; z-index:100; } .topbar-logo{font-family:'Playfair Display',serif;font-weight:700;font-size:1.1rem;letter-spacing:1.5px;color:var(--text)} .topbar-logo span{color:var(--accent)} .topbar-nav{display:flex;gap:6px;margin-left:28px} .topbar-nav a{ color:var(--muted);padding:8px 14px;border-radius:8px;font-size:.88rem;font-weight:500; transition:all .15s;display:inline-flex;align-items:center;gap:6px; } .topbar-nav a:hover{color:var(--text);background:var(--card)} .topbar-nav a.active{color:var(--accent);background:rgba(255,107,43,.08)} /* Live-count badge on nav items (admin Orders, etc.) */ .nav-badge{ display:inline-flex;align-items:center;justify-content:center; min-width:18px;height:18px;padding:0 6px;border-radius:9px; background:var(--accent);color:#fff;font-size:.65rem;font-weight:700; font-family:'DM Sans',sans-serif;line-height:1;letter-spacing:.2px; } .nav-badge[hidden]{display:none} .nav-badge-urgent{background:#ff6b6b;animation:badgePulse 1.6s ease-in-out infinite} @keyframes badgePulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.08);opacity:.85} } /* Hamburger button — visible only at mobile widths (see media query below). Animates 3 bars into an X when open. CSS-only. */ .topbar-burger{ display:none; /* hidden on desktop */ flex-direction:column;justify-content:center;align-items:center;gap:5px; width:36px;height:36px;border-radius:8px; background:none;border:none;cursor:pointer; margin-right:6px;padding:0; } .topbar-burger span{ display:block;width:20px;height:2px;background:var(--text); border-radius:2px;transition:transform .2s ease, opacity .15s ease; transform-origin:center; } .topbar-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .topbar-burger.is-open span:nth-child(2){opacity:0} .topbar-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .topbar-burger:hover{background:var(--card)} .topbar-spacer{flex:1} .topbar-user{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted)} .topbar-user .email{color:var(--text-dim)} .topbar-user .signout{ padding:6px 12px;background:var(--card);border:1px solid var(--border); border-radius:6px;color:var(--muted);cursor:pointer;font-size:.8rem; } .topbar-user .signout:hover{color:var(--text);border-color:var(--border-light)} @media (max-width:720px){ .topbar{padding:0 14px} .topbar-nav{margin-left:14px;gap:2px} .topbar-nav a{padding:8px 10px;font-size:.8rem} .topbar-user .email{display:none} } /* ── Splash ad (full-screen interstitial on client app open) ── */ .splash-ad-overlay{ position:fixed;inset:0;z-index:9999; background:rgba(0,0,0,.82); display:flex;align-items:center;justify-content:center; /* iOS safe-area insets so the card clears the notch + home indicator */ padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); opacity:0;transition:opacity .25s ease; -webkit-tap-highlight-color:transparent; } .splash-ad-overlay.splash-ad-shown{opacity:1} .splash-ad-overlay.splash-ad-closing{opacity:0} .splash-ad-card{ position:relative; /* Cap width + height so it never covers the entire screen — always leaves visible content behind it so clients know there's a page underneath. */ max-width:min(380px, 88vw); max-height:min(480px, 72vh); width:100%; background:#000; border-radius:18px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.70); transform:scale(.96);transition:transform .25s ease; display:flex;flex-direction:column; } .splash-ad-overlay.splash-ad-shown .splash-ad-card{transform:scale(1)} .splash-ad-img{ display:block;width:100%;height:auto; /* Constrain the image so it never pushes the card taller than max-height */ max-height:calc(min(480px, 72vh) - 48px); object-fit:contain; background:#000;flex:1;min-height:0; } .splash-ad-tap{ position:absolute;inset:0 0 48px 0; /* leaves the skip bar area untouched */ display:block;cursor:pointer; z-index:1; } /* ── Close/skip bar at the bottom of the card — always visible, hard to miss ── */ .splash-ad-skip{ display:flex;align-items:center;justify-content:center;gap:10px; padding:12px 16px; background:rgba(0,0,0,.75); border-top:1px solid rgba(255,255,255,.12); flex:0 0 auto;z-index:4; cursor:pointer; -webkit-tap-highlight-color:transparent; } .splash-ad-skip-label{ font-size:.82rem;font-weight:600;color:rgba(255,255,255,.85); letter-spacing:.5px;text-transform:uppercase; font-family:'DM Mono',monospace; } .splash-ad-skip-timer{ font-size:.72rem;color:rgba(255,255,255,.5); font-family:'DM Mono',monospace; min-width:28px;text-align:right; } /* ── Corner ✕ button — large, high contrast, impossible to miss ── */ .splash-ad-close{ position:absolute;top:10px;right:10px;z-index:5; /* Larger tap target (44×44 → iOS HIG minimum) */ width:44px;height:44px;border-radius:50%; background:rgba(0,0,0,.80);color:#fff; /* Solid white border so it stands out on any ad image colour */ border:2px solid rgba(255,255,255,.70); font-size:1.2rem;font-weight:700;line-height:1; cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background .15s ease, transform .15s ease, border-color .15s; -webkit-tap-highlight-color:transparent; /* Drop-shadow so it's readable even on white/light ad backgrounds */ box-shadow:0 2px 10px rgba(0,0,0,.6); } .splash-ad-close:hover{background:rgba(0,0,0,.95);border-color:#fff;transform:scale(1.08)} .splash-ad-close:active{transform:scale(.92)} /* ── Ad carousel (client dashboard promo banner) ── */ .ad-carousel{ position:relative;width:100%; border-radius:14px;overflow:hidden; background:var(--card2);border:1px solid var(--border); margin-bottom:24px; user-select:none; } .ad-track{ display:flex;width:100%; transition:transform .55s cubic-bezier(.65,.05,.36,1); will-change:transform; } .ad-slide{ flex:0 0 100%; /* Match the image's native aspect ratio (the carousel spec is 2400×480 = 5:1) across every viewport. background-size: contain then shows the full image edge-to-edge — no horizontal crop on narrow phones. The slide just gets shorter on small screens; nothing is cut off. */ aspect-ratio: 5 / 1; background:#000 center / contain no-repeat; position:relative; } .ad-slide > a, .ad-slide > div{ display:block;width:100%;height:100%; text-decoration:none;color:inherit; } .ad-slide > a{cursor:pointer} .ad-dots{ position:absolute;left:50%;bottom:8px;transform:translateX(-50%); display:flex;gap:8px; background:rgba(0,0,0,.30);backdrop-filter:blur(4px); padding:6px 10px;border-radius:999px; } .ad-dot{ width:8px;height:8px;border-radius:50%; background:rgba(255,255,255,.45);border:0;cursor:pointer;padding:0; transition:background .2s ease, transform .2s ease; } .ad-dot:hover{background:rgba(255,255,255,.75)} .ad-dot.is-active{background:#fff;transform:scale(1.2)} @media(max-width:480px){ /* Phones in portrait: taller aspect ratio so banner isn't a sliver, dots smaller. */ .ad-slide{aspect-ratio:5 / 2} /* 5:2 on mobile vs 5:1 on desktop — still a banner, not a box */ .ad-carousel{margin-bottom:16px} .ad-dots{padding:4px 8px;gap:6px;bottom:6px} .ad-dot{width:6px;height:6px} } /* ── Staff view-only mode (shadow admin) ── */ .staff-mode-banner{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:10px 18px; background:linear-gradient(90deg,rgba(255,180,90,.20),rgba(255,180,90,.08)); border-bottom:1px solid rgba(255,180,90,.35); color:#ffd9a8;font-size:.85rem;line-height:1.4; position:sticky;top:0;z-index:9; } .staff-mode-banner .sm-icon{font-size:1.2rem} .staff-mode-banner .sm-text{flex:1;min-width:220px} .staff-mode-banner .sm-text strong{color:#ffe4be} .staff-mode-banner.staff-mode-elevated{ background:linear-gradient(90deg,rgba(46,204,113,.20),rgba(46,204,113,.08)); border-bottom-color:rgba(46,204,113,.40); color:#bff5d0; } .staff-mode-banner.staff-mode-elevated .sm-text strong{color:#dffde9} #sm-countdown{font-family:'DM Mono',monospace;font-weight:600} /* In read-only mode, dim/disable obvious write affordances. Firestore rules are the real gate — this is purely a UX hint. We don't disable inputs wholesale (search/filter inputs would break) — instead we gray out primary/danger/deliver action buttons and add a "no-action" cursor. The :not(.staff-mode-allow) escape lets specific buttons opt out — the PIN unlock button and any "search"/"navigate" buttons that aren't writes. */ body.mode-staff-view .btn-primary:not(.staff-mode-allow), body.mode-staff-view .btn-danger:not(.staff-mode-allow), body.mode-staff-view .btn-deliver:not(.staff-mode-allow), body.mode-staff-view .btn[data-write-action]:not(.staff-mode-allow){ opacity:.45 !important; cursor:not-allowed !important; pointer-events:none !important; } /* Buttons inside the staff banner itself always work (PIN unlock, etc.) */ body.mode-staff-view .staff-mode-banner .btn{ opacity:1 !important; cursor:pointer !important; pointer-events:auto !important; } body.mode-staff-view .btn-primary::before{ content:""; } /* Hide elements from read-only staff view. Three opt-in selectors: - [data-staff-hide] generic per-element hide - .staff-hide-revenue financial numbers (revenue tab, dashboard cards) - .staff-hide-admin-only admin-only blocks (PIN management, user role edits, etc — anything staff shouldn't reach even with view access) PIN-escalated temp-admin staff DO NOT have .mode-staff-view, so all three become visible the moment they unlock with the PIN. */ body.mode-staff-view [data-staff-hide], body.mode-staff-view .staff-hide-revenue, body.mode-staff-view .staff-hide-admin-only{display:none !important} /* ── Cards ── */ .card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px} .card-title{font-family:'Playfair Display',serif;font-size:1.15rem;margin-bottom:14px;display:flex;align-items:center;gap:10px} .card-sub{color:var(--muted);font-size:.82rem;margin-bottom:16px} .panel{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:14px} .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .panel-title{font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:8px} .panel-title .icon{width:20px;height:20px} /* ── Forms ── */ .field{margin-bottom:16px} .field label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:6px;font-weight:500;letter-spacing:.5px;text-transform:uppercase} .field input[type=text],.field input[type=email],.field input[type=password],.field input[type=url],.field input[type=number],.field input[type=date],.field textarea,.field select{ width:100%;padding:11px 13px;background:var(--card2);border:1px solid var(--border); border-radius:8px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.93rem; outline:none;transition:border-color .15s; } .field textarea{min-height:80px;resize:vertical;font-family:inherit} .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)} .field input::placeholder,.field textarea::placeholder{color:var(--muted-dim)} .field .hint{font-size:.74rem;color:var(--muted);margin-top:5px;font-family:'DM Mono',monospace} .field-row{display:grid;gap:14px} .field-row.cols-2{grid-template-columns:1fr 1fr} .field-row.cols-3{grid-template-columns:1fr 1fr 1fr} @media (max-width:640px){.field-row.cols-2,.field-row.cols-3{grid-template-columns:1fr}} /* ── Buttons ── */ .btn{ padding:10px 18px;border:1px solid transparent;border-radius:8px; font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:600; cursor:pointer;transition:all .15s;letter-spacing:.3px; display:inline-flex;align-items:center;gap:8px; } .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)} .btn-primary:hover{background:var(--accent-dim);border-color:var(--accent-dim);transform:translateY(-1px)} .btn-primary:active{transform:translateY(0)} .btn-secondary{background:var(--card2);color:var(--text);border-color:var(--border)} .btn-secondary:hover{background:var(--card3);border-color:var(--border-light)} .btn-ghost{background:transparent;color:var(--muted);border-color:transparent} .btn-ghost:hover{color:var(--text);background:var(--card)} .btn-danger{background:var(--error);color:#fff;border-color:var(--error)} .btn-danger:hover{background:#d93636} .btn-block{width:100%;justify-content:center} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none !important} .btn-sm{padding:6px 12px;font-size:.78rem} .btn-lg{padding:14px 22px;font-size:.95rem} /* ── Badges / Status chips ── */ .chip{ display:inline-flex;align-items:center;gap:6px; padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:600; letter-spacing:.3px;text-transform:uppercase; } .chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor} .chip-pending{background:rgba(136,136,136,.12);color:#a0a0a0} .chip-in_progress{background:rgba(52,152,219,.12);color:#5dade2} .chip-ready{background:rgba(46,204,113,.16);color:#2ecc71} .chip-client_review{background:rgba(255,179,71,.12);color:#ffb347} .chip-approved{background:rgba(46,204,113,.12);color:#2ecc71} .chip-delivered{background:rgba(255,107,43,.14);color:#ff8c5a} .chip-blocked{background:rgba(255,68,68,.12);color:#ff6b6b} /* Trailer-approval call-out on My Films cards */ .approval-banner{ margin:12px 0 6px;padding:10px 14px; background:rgba(255,107,43,.12);border:1px solid rgba(255,107,43,.4); border-radius:8px;color:var(--accent);font-weight:600;font-size:.86rem; } /* ── Messages ── */ .msg{padding:11px 14px;border-radius:8px;font-size:.85rem;margin-bottom:14px;display:none} .msg.show{display:block} .msg-error{background:rgba(255,68,68,.1);border:1px solid rgba(255,68,68,.3);color:var(--error)} .msg-success{background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.3);color:var(--success)} .msg-warn{background:rgba(255,179,71,.08);border:1px solid rgba(255,179,71,.25);color:var(--warning)} .msg-warning{background:rgba(255,179,71,.08);border:1px solid rgba(255,179,71,.25);color:var(--warning)} .msg-info{background:rgba(52,152,219,.08);border:1px solid rgba(52,152,219,.25);color:var(--info)} /* ── Toast ── */ .toast{ position:fixed;bottom:32px;left:50%; transform:translateX(-50%) translateY(90px); background:var(--card2);border:1px solid var(--border); color:var(--text);padding:12px 22px;border-radius:10px;font-size:.88rem; transition:transform .3s ease;z-index:1000;white-space:nowrap;box-shadow:var(--shadow); } .toast.show{transform:translateX(-50%) translateY(0)} .toast.success{border-color:var(--success)} .toast.error{border-color:var(--error)} /* ── Tables ── */ .table{width:100%;border-collapse:collapse;font-size:.9rem} .table th,.table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border)} .table th{font-size:.74rem;font-weight:600;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;background:var(--card)} .table tbody tr{transition:background .12s;cursor:pointer} .table tbody tr:hover{background:var(--card2)} .table tbody tr.clickable{cursor:pointer} .table-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden} /* ── Empty states ── */ .empty{padding:56px 20px;text-align:center;color:var(--muted)} .empty h3{font-family:'Playfair Display',serif;margin-bottom:8px;color:var(--text-dim)} .empty p{font-size:.88rem;margin-bottom:18px} /* ── Checklist ── */ .check-row{display:flex;align-items:flex-start;gap:14px;padding:12px;border-radius:8px;border:1px solid transparent;transition:background .12s} .check-row:hover{background:var(--card2)} .check-row + .check-row{border-top:1px solid var(--border)} .check-row .meta{flex:1;min-width:0} .check-row .item{font-size:.92rem;color:var(--text);margin-bottom:4px} .check-row .item .req{color:var(--accent);font-weight:700} .check-row .cat{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:2px} .check-row .note{font-size:.82rem;color:var(--muted);margin-top:4px;font-style:italic} .check-row .actions{display:flex;gap:4px;flex-shrink:0} .check-status-btn{ padding:5px 10px;border:1px solid var(--border);border-radius:6px; background:var(--card2);color:var(--muted);font-size:.72rem;font-weight:600; cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.5px; } .check-status-btn:hover{color:var(--text);border-color:var(--border-light)} .check-status-btn.active.pass{background:rgba(46,204,113,.15);color:var(--success);border-color:var(--success)} .check-status-btn.active.fail{background:rgba(255,68,68,.15);color:var(--error);border-color:var(--error)} .check-status-btn.active.na{background:rgba(136,136,136,.15);color:var(--muted);border-color:var(--muted)} .unconfirmed-banner{ padding:8px 12px;background:rgba(255,179,71,.08);border-left:3px solid var(--warning); color:var(--warning);font-size:.78rem;margin-top:4px;border-radius:4px; } /* ── Utility ── */ .row{display:flex;gap:12px;align-items:center} .row-end{justify-content:flex-end} .row-between{justify-content:space-between} .row-wrap{flex-wrap:wrap} .gap-sm{gap:6px} .gap-lg{gap:20px} .mt-sm{margin-top:8px} .mt-md{margin-top:16px} .mt-lg{margin-top:28px} .mb-sm{margin-bottom:8px} .mb-md{margin-bottom:16px} .mb-lg{margin-bottom:28px} .text-muted{color:var(--muted)} .text-dim{color:var(--text-dim)} .text-center{text-align:center} .text-right{text-align:right} .hidden{display:none !important} .ff-mono{font-family:'DM Mono',monospace} .small{font-size:.8rem} .tiny{font-size:.72rem} .grow{flex:1} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .copy-row{display:flex;gap:6px;align-items:center} .copy-row input{flex:1;font-family:'DM Mono',monospace;font-size:.82rem !important} /* ═══════════════════════════════════════════════════════════ Phase 2 additions — Requests / Contracts / Revenue / Dropbox ═══════════════════════════════════════════════════════════ */ /* ── Request status chips ── */ .chip-open{background:rgba(52,152,219,.12);color:#5dade2} .chip-acknowledged{background:rgba(255,179,71,.12);color:#ffb347} .chip-resolved{background:rgba(46,204,113,.14);color:#2ecc71} .chip-rejected{background:rgba(255,68,68,.12);color:#ff6b6b} /* ── Asset classification chips ── */ .chip-contract{background:rgba(255,107,43,.14);color:#ff8c5a} .chip-trailer{background:rgba(52,152,219,.12);color:#5dade2} .chip-poster{background:rgba(155,89,182,.14);color:#c39bd3} .chip-hero{background:rgba(255,205,40,.16);color:#ffd866} .chip-caption{background:rgba(46,204,113,.12);color:#2ecc71} .chip-master{background:rgba(255,179,71,.14);color:#ffb347} .chip-screengrab{background:rgba(236,72,153,.18);color:#f472b6} .chip-clip{background:rgba(231,76,60,.22);color:#ff6b6b;font-weight:600} .chip-other{background:rgba(136,136,136,.14);color:#a0a0a0} /* "NEW" pink pill — films created within the last 30 days. Auto-applied by newBadgeHtml() in ui.js. Per-film dismiss via film.hideNewBadge. */ .new-badge{ display:inline-block;background:#ff4d92;color:#fff; font-size:.62rem;font-weight:800;letter-spacing:1px; padding:2px 7px;border-radius:999px; vertical-align:middle;margin-left:8px; box-shadow:0 1px 6px rgba(255,77,146,.45); text-transform:uppercase;line-height:1.4; } /* 🔥 PRIORITY pill — red counterpart to the pink NEW pill. Applied via priorityBadgeHtml() to films flagged film.highPriority=true. Used to call out titles that need to be expedited (TUBI delivery, client request, etc). */ .priority-badge{ display:inline-block;background:#e74c3c;color:#fff; font-size:.62rem;font-weight:800;letter-spacing:1px; padding:2px 7px;border-radius:999px; vertical-align:middle;margin-left:8px; box-shadow:0 1px 6px rgba(231,76,60,.55); text-transform:uppercase;line-height:1.4; animation: priorityPulse 2.4s ease-in-out infinite; } @keyframes priorityPulse { 0%, 100% { box-shadow: 0 1px 6px rgba(231,76,60,.55); } 50% { box-shadow: 0 2px 14px rgba(231,76,60,.85); } } /* 🔍 INVESTIGATE pill — purple, manual toggle. For films you've flagged for follow-up or further review. Not as urgent as PRIORITY, not as final as NOT INTERESTED — just "look at this again". */ .investigate-badge { display: inline-block; background: rgba(155, 89, 182, .18); color: #bb8fce; font-size: .62rem; font-weight: 800; letter-spacing: 1px; padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 8px; box-shadow: 0 1px 6px rgba(155, 89, 182, .35); text-transform: uppercase; line-height: 1.4; border: 1px solid rgba(155, 89, 182, .35); } /* 📋 READY FOR AVAIL pill — baby blue, auto-derived. Surfaces films that are wired up + Ready across all 6 deliverables but haven't been through TUBI's acceptance process yet, so they're queued for the next monthly Avail Sheet. Positive but lower-key than HIGH PRIORITY (no animation). */ .ready-avail-badge { display: inline-block; background: rgba(137, 207, 240, .18); color: #89cff0; font-size: .62rem; font-weight: 800; letter-spacing: 1px; padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 8px; box-shadow: 0 1px 5px rgba(137, 207, 240, .25); text-transform: uppercase; line-height: 1.4; border: 1px solid rgba(137, 207, 240, .35); } /* 🚫 NOT INTERESTED pill — muted grey for films the filmmaker pulled from 1919 Distribution. Opposite signal from the red PRIORITY pill: this means "skip / deprioritize", so it's intentionally low-contrast and never animated. Visible to admin + distributors; the client audience helper filters it out so a filmmaker never sees their own film tagged here. */ .not-interested-badge { display: inline-block; background: rgba(140, 140, 140, .22); color: #999; font-size: .62rem; font-weight: 800; letter-spacing: 1px; padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 8px; text-transform: uppercase; line-height: 1.4; border: 1px solid rgba(140, 140, 140, .35); } /* When a row in the admin films table is marked NOT INTERESTED, dim it so the eye skips past during normal triage. Hover restores full opacity. */ tr.row-not-interested { opacity: .55; } tr.row-not-interested:hover { opacity: 1; } tr.row-not-interested .new-badge, tr.row-not-interested .priority-badge { opacity: .6; } /* Per-episode dropdowns on series Overview → Deliverables status card */ .ep-dropdown-list{display:flex;flex-direction:column;gap:6px} .ep-dropdown{ background:var(--card2);border:1px solid var(--border);border-radius:8px; overflow:hidden; } .ep-dropdown[open]{border-color:var(--accent)} .ep-dropdown-head{ list-style:none;cursor:pointer; display:flex;align-items:center;gap:10px;padding:10px 12px; user-select:none; } .ep-dropdown-head::-webkit-details-marker{display:none} .ep-dropdown-head::before{ content:'▸';color:var(--muted);font-size:.85rem; transition:transform .15s;flex:0 0 auto; } .ep-dropdown[open] .ep-dropdown-head::before{transform:rotate(90deg)} .ep-dropdown-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem} .ep-dropdown-label .ep-num{ font-family:'DM Mono',monospace;font-size:.74rem; color:var(--muted);margin-right:6px; } .ep-dropdown-status{flex:0 0 auto} .ep-dropdown-head .ep-dl-all{flex:0 0 auto} .ep-dropdown-body{background:var(--card);border-top:1px solid var(--border)} /* TUBI prep dialog — deliverable summary + per-asset wiring badges */ .tubi-prep-deliv-summary{ background:var(--card3);border:1px solid var(--border);border-radius:10px; padding:10px;display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto; } .tubi-prep-summary-row{ display:flex;gap:12px;align-items:flex-start; padding:8px 10px;background:var(--card2);border-radius:8px; } .tubi-prep-summary-label{flex:0 0 240px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .tubi-prep-summary-files{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center} .tubi-prep-summary-file{ background:rgba(255,255,255,.05);border:1px solid var(--border); border-radius:6px;padding:3px 8px;font-size:.74rem;font-family:'DM Mono',monospace; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:380px; } .tubi-prep-badge{ display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.5px; padding:2px 7px;border-radius:999px;line-height:1.4;text-transform:uppercase; vertical-align:middle; } .tubi-prep-badge-ready { background:rgba(46,204,113,.18); color:#2ecc71; } .tubi-prep-badge-progress{ background:rgba(241,196,15,.18); color:#f1c40f; } .tubi-prep-badge-pending { background:rgba(255,255,255,.06); color:var(--muted); } .tubi-prep-badge-blocked { background:rgba(231,76,60,.18); color:#e74c3c; } /* ── Asset list (admin Dropbox tab) ── */ .asset-group{margin-bottom:22px} .asset-group-title{font-family:'Playfair Display',serif;font-size:1.05rem;margin-bottom:10px;display:flex;align-items:center;gap:8px} .asset-group-title .count{color:var(--muted);font-size:.78rem;font-family:'DM Mono',monospace;font-weight:normal} .asset-list{background:var(--card2);border:1px solid var(--border);border-radius:10px;overflow:hidden} /* Grid is: [thumb] [info — flex] [actions]. Thumb is fixed-width so the filename column expands to fill remaining space. */ .asset-row{display:grid;grid-template-columns:auto 48px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)} .asset-row .asset-select-cb{justify-self:center} .asset-row:last-child{border-bottom:none} .asset-row:hover{background:var(--card3)} .asset-row .info{min-width:0} .asset-row .name{font-size:.9rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;word-break:break-word} .asset-row .meta-line{font-size:.74rem;color:var(--muted);font-family:'DM Mono',monospace;margin-top:3px} .asset-row .actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} /* ── Asset thumbnail (Dropbox preview / glyph fallback) ── */ .asset-thumb{ width:48px;height:48px;border-radius:6px;overflow:hidden; background:var(--card2);border:1px solid var(--border); display:flex;align-items:center;justify-content:center; flex-shrink:0;position:relative; font-size:1.4rem;line-height:1; } .asset-thumb img{ width:100%;height:100%;object-fit:cover;display:block; } /* `data-fallback` glyph appears when the Dropbox thumbnail 404s and we remove the . Adds the parent class `asset-thumb-failed` via onerror. */ .asset-thumb-failed::after, .asset-thumb-glyph::after{ content:attr(data-fallback); } .asset-thumb-glyph{font-size:1.4rem} .asset-thumb-failed{font-size:1.4rem} @media (max-width:640px){ .asset-row{grid-template-columns:1fr;gap:8px} .asset-row .actions{justify-content:flex-start} } .asset-edit-form{background:var(--card3);border-top:1px solid var(--border);padding:12px 14px;display:none} .asset-edit-form.show{display:block;animation:fadeIn .2s ease both} /* ── Contract card (client view) ── */ .contract-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:12px} .contract-card .head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px} .contract-card .title{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:600} .contract-card .sub{color:var(--muted);font-size:.78rem;margin-top:3px;font-family:'DM Mono',monospace} .contract-card .body{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:14px;font-size:.84rem} .contract-card .body div .k{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.8px;margin-bottom:2px} /* ── Request form + list ── */ .request-form{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:20px} .request-item{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px} .request-item .head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px} .request-item .type-line{display:flex;align-items:center;gap:8px;font-size:.86rem} .request-item .desc{color:var(--text);font-size:.9rem;margin:6px 0;white-space:pre-wrap} .request-item .replacement{font-size:.82rem;margin-top:6px} .request-item .admin-response{margin-top:10px;padding:10px 12px;background:rgba(255,107,43,.06);border-left:3px solid var(--accent);border-radius:4px;font-size:.86rem} .request-item .admin-response .label{color:var(--accent);font-size:.7rem;text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;font-weight:600} .request-item .footer{margin-top:8px;color:var(--muted);font-size:.72rem;font-family:'DM Mono',monospace} /* Admin request editor inline controls */ .request-admin-controls{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap} .request-admin-controls select{max-width:180px} /* ── Revenue summary + table ── */ .rev-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px} .rev-summary .stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px} .rev-summary .stat .label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px} .rev-summary .stat .val{font-family:'Playfair Display',serif;font-size:1.6rem;margin-top:4px;color:var(--text)} .rev-summary .stat .sub{font-size:.72rem;color:var(--muted);font-family:'DM Mono',monospace;margin-top:2px} @media (max-width:640px){.rev-summary{grid-template-columns:1fr}} .revenue-table{width:100%;border-collapse:collapse;font-size:.88rem;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden} .revenue-table th,.revenue-table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border)} .revenue-table th{font-size:.72rem;font-weight:600;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;background:var(--card2)} .revenue-table tbody tr:hover{background:var(--card2)} .revenue-table td.num{text-align:right;font-family:'DM Mono',monospace} /* ── Admin Dropbox tab controls ── */ .dbx-header{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:18px} .dbx-header .path{font-family:'DM Mono',monospace;font-size:.82rem;color:var(--text-dim);word-break:break-all} .dbx-header .last-sync{color:var(--muted);font-size:.74rem;margin-top:4px} .dbx-header .controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} /* ── Tab row (client version mirrors admin) ── */ .tabs{display:flex;gap:4px;background:var(--card2);padding:4px;border-radius:10px;margin-bottom:16px;overflow-x:auto} .tab{flex:1;min-width:90px;padding:10px;background:none;border:none;color:var(--muted);border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap} .tab.active{background:var(--accent);color:#fff} .tab-content{display:none} .tab-content.active{display:block;animation:fadeUp .25s ease both} /* ── Dashboard badges ── */ .badge-open{display:inline-block;padding:2px 8px;background:rgba(52,152,219,.15);color:#5dade2;border-radius:999px;font-size:.7rem;font-weight:600;margin-left:6px} /* ═══════════════════════════════════════════════════════════ Phase 3 additions — Distributor CEO portal ═══════════════════════════════════════════════════════════ */ /* ── Search results (distributor portal) ── */ .search-results{ list-style:none;padding:0;margin:10px 0 0; background:var(--card);border:1px solid var(--border);border-radius:10px; max-height:320px;overflow:auto; } .search-results li{ padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--border); font-size:.92rem;transition:background .12s; } .search-results li:last-child{border-bottom:none} .search-results li:hover,.search-results li.focused{background:var(--card2)} .search-results .title{color:var(--text);font-weight:600} .search-results .sub{color:var(--muted);font-size:.72rem;margin-top:2px;font-family:'DM Mono',monospace} .search-results.empty-msg{color:var(--muted);padding:16px;font-size:.86rem;text-align:center} /* ── Film progress panel ── */ .film-panel{ background:var(--card);border:1px solid var(--border);border-radius:14px; padding:22px 24px;margin-top:18px;animation:fadeUp .25s ease both; } .film-panel h2{font-family:'Playfair Display',serif;font-size:1.55rem;margin-bottom:14px} /* ── 5-stage progress bar ── */ .progress-stages{ display:flex;gap:6px;margin:6px 0 10px; } .stage{ flex:1;padding:12px 10px;border-radius:8px;text-align:center; font-size:.72rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase; background:var(--card2);color:var(--muted); border:1px solid var(--border); transition:background .15s,color .15s,border-color .15s; } .stage .stage-label{display:block} .stage .stage-state{display:block;font-size:.64rem;font-weight:500;letter-spacing:.4px;margin-top:3px;opacity:.75;text-transform:none} .stage.stage-not-started{opacity:.55} .stage.stage-in-progress{background:rgba(52,152,219,.14);color:#5dade2;border-color:rgba(52,152,219,.35)} .stage.stage-complete{background:rgba(255,107,43,.16);color:#ff8c5a;border-color:rgba(255,107,43,.4)} .stage.stage-blocked{background:rgba(255,68,68,.14);color:#ff6b6b;border-color:rgba(255,68,68,.4)} /* Thin connector lines between stages (optional visual flourish) */ .progress-stages{position:relative} @media (max-width:640px){ .progress-stages{flex-wrap:wrap} .stage{min-width:calc(50% - 3px)} } /* ── Tubi link button ── */ .tubi-link{ display:inline-flex;align-items:center;gap:8px; margin-top:12px;padding:10px 18px; background:var(--accent);color:#fff;border-radius:8px; font-weight:600;font-size:.88rem; transition:background .15s,transform .15s; } .tubi-link:hover{background:var(--accent-dim);color:#fff;transform:translateY(-1px)} /* ── Empty search-no-results ── */ .search-empty{ color:var(--muted);font-size:.88rem;text-align:center;padding:24px; background:var(--card);border:1px dashed var(--border);border-radius:10px;margin-top:10px; } /* ═══════════════════════════════════════════════════════════ iOS / WKWebView polish — kill double-tap zoom, the 300ms tap delay, the iOS long-press callout, and the gray tap highlight. Inputs/textarea/contenteditable still allow text selection. ═══════════════════════════════════════════════════════════ */ html, body { /* Disables double-tap-to-zoom and removes the 300 ms tap delay across the whole app. */ touch-action: manipulation; /* Block the rubber-band over-scroll bounce inside the WebView */ overscroll-behavior: none; -webkit-text-size-adjust: 100%; } /* No iOS long-press copy/share callout on UI chrome. */ button, .btn, a, .tab, .tab-btn, .filter-btn, .stage, .chip, .check-status-btn, .qc-cat, .film-card, .film-chip, .topbar, .topbar-nav a, label { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* But text inputs / textareas still need to be selectable + editable. */ input, textarea, [contenteditable], [contenteditable="true"], .copy-url, code, .ff-mono, .mono { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* ═══════════════════════════════════════════════════════════ Organize-folder dialog (admin/film.html → Dropbox tab) ═══════════════════════════════════════════════════════════ */ dialog.organize-dialog { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 0; max-width: 760px; width: calc(100vw - 32px); max-height: calc(100vh - 60px); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); } dialog.organize-dialog::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(2px); } .organize-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .organize-header h2 { font-family: 'Playfair Display', serif; font-size: 1.3rem; margin: 0; } .organize-close { background: transparent; border: 0; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 10px; border-radius: 6px; } .organize-close:hover { color: var(--text); background: var(--bg); } .organize-body { padding: 16px 20px; overflow-y: auto; max-height: calc(100vh - 220px); } .organize-summary { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin: 10px 0 14px; font-size: .85rem; } .organize-stat-row { display: flex; flex-wrap: wrap; gap: 14px 22px; color: var(--muted); } .organize-stat-row strong { color: var(--text); } .organize-existing { margin-top: 8px; color: var(--muted); font-size: .8rem; border-top: 1px dashed var(--border); padding-top: 8px; } .organize-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .organize-table th, .organize-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); } .organize-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 600; } .organize-table tr.row-skipped { opacity: .42; } .organize-table tr.row-skipped .filename { text-decoration: line-through; } .organize-table .conf-cell { width: 24px; text-align: center; } .organize-table .name-cell { word-break: break-word; max-width: 360px; } .organize-table .filename { font-family: 'DM Mono', monospace; font-size: .82rem; } .organize-table .filesize { color: var(--muted); font-size: .72rem; margin-top: 2px; } .organize-table .dest-cell { width: 200px; } .organize-table select { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: .82rem; } .conf-dot { font-size: 1.1rem; line-height: 1; } .conf-dot.conf-high { color: #5dade2; } /* blue — confident */ .conf-dot.conf-low { color: #ff8c5a; } /* orange — please verify */ .organize-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--bg); } /* ── Series vs Film type pill (admin dashboard) ── */ .type-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; line-height: 1.5; } .type-pill.type-film { background: rgba(93,173,226,.12); color: #5dade2; border: 1px solid rgba(93,173,226,.3); } .type-pill.type-series { background: rgba(255,107,43,.12); color: var(--accent); border: 1px solid rgba(255,107,43,.3); } /* ═══════════════════════════════════════════════════════════ Episode list (admin/film.html → Episodes tab when type=series) ═══════════════════════════════════════════════════════════ */ .ep-list { display: flex; flex-direction: column; gap: 8px; } .ep-row { display: grid; grid-template-columns: 1fr auto auto 24px; gap: 16px; align-items: center; padding: 12px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; transition: border-color .15s, transform .12s; } .ep-row.clickable { cursor: pointer; } .ep-row.clickable:hover { border-color: var(--accent); transform: translateX(2px); } .ep-row-id { font-family: 'DM Mono', monospace; font-size: .92rem; } .ep-row-mini { display: flex; gap: 4px; } .ep-row-arrow { font-size: 1.4rem; color: var(--muted); } /* Mini per-deliverable status pills inside an episode row */ .ep-mini-chip { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: .65rem; font-weight: 700; border: 1px solid var(--border); background: var(--bg); color: var(--muted); } /* Ready / approved / legacy delivered = green (terminal "Ready to deliver" state). */ .ep-mini-chip.ep-mini-ready { background: rgba(46,204,113,.18); color: #2ecc71; border-color: rgba(46,204,113,.4); } .ep-mini-chip.ep-mini-approved { background: rgba(46,204,113,.18); color: #2ecc71; border-color: rgba(46,204,113,.4); } .ep-mini-chip.ep-mini-delivered { background: rgba(46,204,113,.18); color: #2ecc71; border-color: rgba(46,204,113,.4); } .ep-mini-chip.ep-mini-in_progress { background: rgba(93,173,226,.15); color: #5dade2; border-color: rgba(93,173,226,.35); } .ep-mini-chip.ep-mini-client_review{ background: rgba(93,173,226,.15); color: #5dade2; border-color: rgba(93,173,226,.35); } .ep-mini-chip.ep-mini-blocked { background: rgba(255,107,107,.15); color: #ff6b6b; border-color: rgba(255,107,107,.35); } @media (max-width: 640px) { .ep-row { grid-template-columns: 1fr auto; } .ep-row-mini, .ep-row-arrow { display: none; } } /* ── Series overview rollup card ── */ .series-overview { display: flex; flex-direction: column; gap: 4px; } .series-overview-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); } .series-overview-row:last-child { border-bottom: 0; } .series-overview-label { color: var(--muted); font-size: .85rem; } .series-overview-value { font-size: .92rem; } /* ── Episode page breadcrumb ── */ .ep-breadcrumb { margin-bottom: 6px; } .ep-breadcrumb a { color: var(--muted); font-size: .85rem; } .ep-breadcrumb a:hover { color: var(--accent); } /* ── Avail-Sheet film selection list ── */ .avail-film-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px; background: var(--bg); } .avail-film-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 6px; cursor: pointer; transition: background 0.12s; } .avail-film-row:hover { background: var(--card); } .avail-film-row + .avail-film-row { border-top: 1px dashed var(--border); } .avail-film-row input[type="checkbox"] { margin-top: 4px; flex-shrink: 0; cursor: pointer; width: 18px; height: 18px; accent-color: var(--accent); } .avail-film-meta { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } /* Avail Sheet — stat row at top of modal */ .avail-stats { margin: 6px 0 14px; } .avail-stat-row { display: flex; flex-wrap: wrap; gap: 8px; } .avail-stat { flex: 1; min-width: 120px; background: var(--card2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; } .avail-stat-label { font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); } .avail-stat-value { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; } .avail-stat-value.ok { color: #2ecc71; } .avail-stat-value.warn { color: #ff9d3a; } .avail-stat-value.muted { color: var(--muted); } /* Avail Sheet — per-deliverable readiness chips on each film row */ .avail-chip-strip { display: flex; gap: 3px; flex-wrap: wrap; } .avail-chip { display: inline-block; padding: 1px 6px; border-radius: 999px; font-family: 'DM Mono', monospace; font-size: .62rem; font-weight: 700; letter-spacing: .5px; line-height: 1.4; } .avail-chip-ready { background: rgba(46,204,113,.18); color: #2ecc71; } .avail-chip-progress { background: rgba(241,196,15,.18); color: #f1c40f; } .avail-chip-blocked { background: rgba(231,76,60,.18); color: #e74c3c; } .avail-chip-pending { background: rgba(255,255,255,.06); color: var(--muted); } /* 📅 Monthly Avail countdown — banner shown on /client/dashboard.html and per-film cards reminding filmmakers when APEX sends the monthly Avail Sheet to TUBI. Color band escalates as the deadline approaches. */ .avail-countdown { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin: 12px 0 18px; border-radius: 12px; border: 1px solid; } .avail-countdown .ac-icon { font-size: 1.6rem; flex: 0 0 auto; } .avail-countdown .ac-body { flex: 1; min-width: 0; } .avail-countdown .ac-title { font-weight: 600; font-size: .95rem; margin-bottom: 2px; } .avail-countdown .ac-sub { font-size: .78rem; color: var(--muted); } .avail-countdown .ac-count { flex: 0 0 auto; font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; line-height: 1; display: flex; align-items: baseline; gap: 4px; } .avail-countdown .ac-count span { font-family: 'DM Sans', sans-serif; font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); } .avail-countdown-plenty { background: linear-gradient(180deg, rgba(46,204,113,.08), rgba(46,204,113,.02)); border-color: rgba(46,204,113,.3); } .avail-countdown-plenty .ac-count { color: #2ecc71; } .avail-countdown-soon { background: linear-gradient(180deg, rgba(241,196,15,.10), rgba(241,196,15,.02)); border-color: rgba(241,196,15,.35); } .avail-countdown-soon .ac-count { color: #f1c40f; } .avail-countdown-urgent { background: linear-gradient(180deg, rgba(231,76,60,.12), rgba(231,76,60,.02)); border-color: rgba(231,76,60,.4); animation: availCountdownPulse 2s ease-in-out infinite; } .avail-countdown-urgent .ac-count { color: #e74c3c; } @keyframes availCountdownPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(231,76,60,.0); } 50% { box-shadow: 0 0 14px 2px rgba(231,76,60,.18); } } /* 🎉 Tubi-accepted 2-week countdown — per-film banner on client dashboard. Visible only when admin marks a film as accepted by TUBI; gives the filmmaker 14 days to upload every asset to Dropbox. */ .tubi-accepted-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 10px 0 14px; border-radius: 10px; border: 1px solid; } .tubi-accepted-banner .tab-icon { font-size: 1.4rem; flex: 0 0 auto; } .tubi-accepted-banner .tab-body { flex: 1; min-width: 0; } .tubi-accepted-banner .tab-title { font-weight: 600; font-size: .92rem; margin-bottom: 2px; } .tubi-accepted-banner .tab-sub { font-size: .76rem; color: var(--muted); line-height: 1.4; } .tubi-accepted-banner .tab-count { flex: 0 0 auto; font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 700; line-height: 1; display: flex; align-items: baseline; gap: 4px; } .tubi-accepted-banner .tab-count span { font-family: 'DM Sans', sans-serif; font-size: .65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); } .tubi-accepted-plenty { background: linear-gradient(180deg, rgba(46,204,113,.10), rgba(46,204,113,.02)); border-color: rgba(46,204,113,.35); } .tubi-accepted-plenty .tab-count { color: #2ecc71; } .tubi-accepted-soon { background: linear-gradient(180deg, rgba(241,196,15,.12), rgba(241,196,15,.02)); border-color: rgba(241,196,15,.4); } .tubi-accepted-soon .tab-count { color: #f1c40f; } .tubi-accepted-urgent { background: linear-gradient(180deg, rgba(231,76,60,.14), rgba(231,76,60,.02)); border-color: rgba(231,76,60,.45); animation: availCountdownPulse 2s ease-in-out infinite; } .tubi-accepted-urgent .tab-count { color: #e74c3c; } .tubi-accepted-overdue { background: linear-gradient(180deg, rgba(231,76,60,.20), rgba(231,76,60,.04)); border-color: rgba(231,76,60,.6); animation: availCountdownPulse 1.4s ease-in-out infinite; } /* Delivered — the countdown swaps for a green confirmation once admin has clicked "🚀 Deliver to TUBI" on the film. Same layout, no pulse — just a calm "you're done with this title" signal. */ .tubi-accepted-delivered { background: linear-gradient(180deg, rgba(46,204,113,.14), rgba(46,204,113,.02)); border-color: rgba(46,204,113,.5); } .tubi-accepted-delivered .tab-count { color: #2ecc71; font-size: 1.5rem; } /* Subtle green outline state for the "TUBI-accepted (clear)" button when the film has been accepted (so admin sees the toggle at a glance). */ .btn.btn-success-state { border-color: rgba(46,204,113,.5); background: rgba(46,204,113,.08); } /* Signup-status pill on the film Overview → Filmmaker contact block. Three states: signed up (green), invite open (yellow), no account (muted). */ .signup-pill { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .5px; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; vertical-align: middle; line-height: 1.4; } .signup-pill-yes { background: rgba(46,204,113,.18); color: #2ecc71; border: 1px solid rgba(46,204,113,.35); } .signup-pill-invited { background: rgba(241,196,15,.16); color: #f1c40f; border: 1px solid rgba(241,196,15,.32); } .signup-pill-no { background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid var(--border); } /* Clickable contact name on the Overview Filmmaker contact block. Looks like a regular value but with a subtle accent + hover underline so admin can tell it's tappable. */ .contact-name-link { color: var(--accent); text-decoration: none; border-bottom: 1px dashed rgba(232,87,39,.4); transition: border-color .15s; } .contact-name-link:hover { border-bottom-color: var(--accent); } /* ═══════════════════════════════════════════════════════════ 🎬 Social Media Clips — marketing elements in client portal ══════════════════════════════════════════════════════════ */ /* ── Dashboard teaser banner ── */ .clips-teaser { background: linear-gradient(135deg, rgba(255,0,80,.10), rgba(100,50,255,.10)); border: 1px solid rgba(255,0,80,.30); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; } .clips-teaser-content { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .clips-teaser-text { flex: 1; min-width: 0; } .clips-teaser-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #ff0050; margin-bottom: 3px; } .clips-teaser-title { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; margin-bottom: 2px; } .clips-teaser-sub { font-size: .8rem; color: var(--muted); } .clips-teaser-cta-row { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .clips-teaser-dismiss { background: transparent; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: color .12s; } .clips-teaser-dismiss:hover { color: var(--text); } .clips-teaser-platforms { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); font-size: .74rem; color: var(--muted); font-family: 'DM Mono', monospace; letter-spacing: .5px; } /* ── Services tab spotlight card ── */ .clips-spotlight { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; background: linear-gradient(135deg, rgba(255,0,80,.09) 0%, rgba(100,50,255,.09) 50%, rgba(0,0,0,0) 100%); border: 1px solid rgba(255,0,80,.30); border-radius: 18px; padding: 28px 28px 24px; margin-bottom: 28px; overflow: hidden; } .clips-spotlight-badge { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #ff0050, #7c3aed); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; } .clips-spotlight-title { font-family: 'Playfair Display', serif; font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700; line-height: 1.15; margin: 0 0 10px; } .clips-spotlight-desc { font-size: .9rem; color: var(--muted); line-height: 1.6; margin-bottom: 16px; } /* Platform pills */ .clips-platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .clips-platform { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; letter-spacing: .5px; padding: 5px 12px; border-radius: 999px; border: 1px solid; text-transform: uppercase; } .clips-platform-icon { width: 14px; height: 14px; flex-shrink: 0; } .clips-platform-tiktok { background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.25); color: #fff; } .clips-platform-reels { background: rgba(200,60,120,.18); border-color: rgba(200,60,120,.45); color: #f09; } .clips-platform-youtube { background: rgba(255,0,0,.12); border-color: rgba(255,0,0,.35); color: #f44; } .clips-platform-facebook{ background: rgba(24,119,242,.14); border-color: rgba(24,119,242,.40); color: #1877f2; } /* Features list */ .clips-features { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 6px; } .clips-features li { font-size: .86rem; color: var(--muted); line-height: 1.4; } .clips-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .clips-turnaround { font-family: 'DM Mono', monospace; font-size: .72rem; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; } /* Phone mockup */ .clips-visual { display: flex; flex-direction: column; align-items: center; gap: 14px; justify-content: center; } .clips-phone-mockup { background: #111; border: 2px solid rgba(255,255,255,.18); border-radius: 28px; width: 130px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.6); } .clips-phone-screen { background: linear-gradient(180deg, #1a1a2e, #16213e); height: 220px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .clips-phone-play { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; padding-left: 3px; } .clips-phone-caption { font-size: .58rem; color: rgba(255,255,255,.85); text-align: center; padding: 0 10px; line-height: 1.4; font-style: italic; } .clips-phone-platform-tag { font-size: .5rem; color: rgba(255,255,255,.45); font-family: 'DM Mono', monospace; letter-spacing: .5px; } .clips-phone-stats { display: flex; justify-content: space-around; padding: 8px 10px; font-size: .58rem; color: rgba(255,255,255,.75); font-family: 'DM Mono', monospace; border-top: 1px solid rgba(255,255,255,.08); gap: 4px; } .clips-aspect-badges { display: flex; gap: 8px; } .clips-aspect { width: 54px; text-align: center; font-size: .62rem; font-weight: 800; color: var(--muted); letter-spacing: 1px; padding: 8px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--card2); text-transform: uppercase; line-height: 1.3; } .clips-aspect span { font-size: .55rem; font-weight: 400; letter-spacing: .5px; } .clips-aspect-vertical { aspect-ratio: 9/16; height: 90px; } .clips-aspect-square { aspect-ratio: 1/1; height: 54px; } @media (max-width: 640px) { .clips-spotlight { grid-template-columns: 1fr; gap: 20px; } .clips-visual { display: none; } /* hide mockup on tiny screens — text is enough */ } /* Status-bubble selector on each film row of the admin Films table. Click a bubble to toggle the corresponding flag without opening the film page. Each bubble is a small pill that shows its emoji always but is dimmed when the flag is off. */ .film-bubble-row { display: inline-flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; } .film-bubble { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.04); border: 1px solid var(--border); font-size: .82rem; line-height: 1; cursor: pointer; user-select: none; transition: background .12s, border-color .12s, transform .08s; opacity: .45; } .film-bubble:hover { opacity: .9; transform: scale(1.08); } .film-bubble.active { opacity: 1; border-width: 2px; } .film-bubble.bubble-priority.active { background: rgba(231,76,60,.18); border-color: #e74c3c; box-shadow: 0 0 6px rgba(231,76,60,.4); } .film-bubble.bubble-investigate.active { background: rgba(155,89,182,.20); border-color: #bb8fce; box-shadow: 0 0 6px rgba(155,89,182,.4); } .film-bubble.bubble-ready-avail.active { background: rgba(137,207,240,.20);border-color: #89cff0; box-shadow: 0 0 6px rgba(137,207,240,.4); } .film-bubble.bubble-new.active { background: rgba(255,77,146,.18); border-color: #ff4d92; box-shadow: 0 0 6px rgba(255,77,146,.4); } .film-bubble.bubble-not-interested.active{background: rgba(140,140,140,.22);border-color: #999; box-shadow: 0 0 6px rgba(140,140,140,.35); } /* READY FOR AVAIL is now both manually toggleable AND auto-derived. When the manual flag is on OR conditions are met it's lit; clicking toggles the manual flag. Same interactive behaviour as the other bubbles. */ /* New Film modal — live duplicate-warning box under the title field. Visible only when the duplicate scanner finds existing matches. Lists up to 4 candidate films with deep-links + the reason each one matched. */ .nf-dup-warn { margin-top: 8px; padding: 10px 12px; background: rgba(241,196,15,.08); border: 1px solid rgba(241,196,15,.32); border-radius: 8px; font-size: .82rem; } .nf-dup-head { font-weight: 700; color: #f1c40f; margin-bottom: 8px; font-size: .82rem; } .nf-dup-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; } .nf-dup-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,.04); text-decoration: none; color: var(--text); transition: background .12s; } .nf-dup-item:hover { background: rgba(255,255,255,.08); } .nf-dup-item strong { flex: 0 0 auto; } .nf-dup-reasons { flex: 1; min-width: 0; color: var(--muted); font-size: .74rem; } .nf-dup-reasons em { font-style: normal; color: #f1c40f; } .nf-dup-arrow { flex: 0 0 auto; color: var(--accent); font-weight: 700; } .nf-dup-foot { color: var(--muted); font-size: .74rem; line-height: 1.4; } /* Filmmakers tab — temporary highlight on the card matching ?focus=. Scrolls into view + pulses an accent ring twice so admin's eye finds it immediately. CSS lifecycle is animation-driven so JS just adds the class. */ .fm-card.fm-card-focused { animation: fmFocusPulse 1.6s ease-out 2; border-color: var(--accent); } @keyframes fmFocusPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,87,39,0); } 30% { box-shadow: 0 0 0 6px rgba(232,87,39,.30); } 60% { box-shadow: 0 0 0 14px rgba(232,87,39,0); } } /* ⭐ Star rating widget — used on /client/reviews.html (input) and /admin/reviews.html (display only). Click/tap a star to set the rating. Hovering paints all stars up to the hovered one. Hidden radio inputs hold the underlying value so the form submits normally. */ .star-rating { display: inline-flex; flex-direction: row-reverse; font-size: 2rem; line-height: 1; user-select: none; } .star-rating input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .star-rating label { cursor: pointer; color: #555; padding: 0 2px; transition: color .12s, transform .12s; } .star-rating label::before { content: '★'; } .star-rating label:hover, .star-rating label:hover ~ label, .star-rating input:checked ~ label { color: #f1c40f; transform: scale(1.05); } .star-rating-readonly { display: inline-flex; gap: 1px; font-size: 1.1rem; line-height: 1; } .star-rating-readonly .filled { color: #f1c40f; } .star-rating-readonly .empty { color: #444; } .review-card { background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; } .review-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .review-card-head .author { font-weight: 600; } .review-card-head .when { color: var(--muted); font-size: .78rem; } .review-card-text { font-size: .92rem; line-height: 1.5; white-space: pre-wrap; } .review-card-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: .76rem; color: var(--muted); } .review-pill { font-size: .62rem; font-weight: 700; letter-spacing: .5px; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; } .review-pill-published { background: rgba(46,204,113,.18); color: #2ecc71; } .review-pill-private { background: rgba(255,255,255,.08); color: var(--muted); } .review-pill-pending { background: rgba(241,196,15,.18); color: #f1c40f; } /* ── Series Dropbox tab: per-episode asset breakdown (collapsible) ── */ .series-episode-breakdown details.episode-asset-block { background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 4px 12px; margin-bottom: 8px; } .series-episode-breakdown summary.episode-asset-summary { display: flex; align-items: center; gap: 14px; padding: 10px 4px; cursor: pointer; list-style: none; font-size: .9rem; } .series-episode-breakdown summary.episode-asset-summary::-webkit-details-marker { display: none; } .series-episode-breakdown summary.episode-asset-summary::before { content: '▶'; display: inline-block; font-size: .7rem; color: var(--muted); width: 12px; transition: transform .15s; } .series-episode-breakdown details[open] > summary.episode-asset-summary::before { transform: rotate(90deg); } .series-episode-breakdown .episode-asset-id { color: var(--text); flex-shrink: 0; min-width: 80px; } .series-episode-breakdown .episode-asset-count { flex: 1; color: var(--muted); font-size: .82rem; } .series-episode-breakdown .episode-asset-open { font-size: .78rem; color: var(--accent); padding: 4px 10px; border-radius: 6px; white-space: nowrap; } .series-episode-breakdown .episode-asset-open:hover { background: rgba(255,107,43,.08); } /* ── Distributor: series episode breakdown ── */ .search-type-tag{display:inline-block;font-size:.65rem;padding:1px 7px;margin-left:6px;background:rgba(255,107,43,.15);color:var(--accent);border-radius:4px;text-transform:uppercase;letter-spacing:.5px} .series-breakdown{margin-top:24px;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:10px} .series-breakdown-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .series-breakdown-header h3{margin:0;font-size:1rem} .ep-row-distrib{padding:10px 12px;background:var(--card2);border:1px solid var(--border);border-radius:8px;margin-bottom:8px} .ep-row-distrib-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.9rem} .ep-tubi-link{font-size:.78rem;padding:3px 10px;background:var(--accent);color:#fff;border-radius:4px} .ep-tubi-link:hover{background:var(--accent-dim);color:#fff} .progress-stages-mini{display:flex;gap:4px} .mini-stage{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;font-size:.7rem;font-weight:600} .mini-stage-not-started{background:rgba(136,136,136,.15);color:var(--muted)} .mini-stage-in-progress{background:rgba(52,152,219,.18);color:#5dade2} .mini-stage-complete{background:rgba(255,107,43,.18);color:var(--accent)} .mini-stage-blocked{background:rgba(255,68,68,.18);color:var(--error);animation:pulse 1.6s infinite} /* ── Client portal: series view ── */ .series-summary{padding:14px 18px} .ep-list-client{display:flex;flex-direction:column;gap:10px} .ep-row-client{padding:14px 16px;background:var(--card2);border:1px solid var(--border);border-radius:10px} .ep-row-client-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px} .ep-row-client-mini{display:flex;gap:5px} .ep-mini-chip{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;font-size:.78rem;font-weight:600} .ep-mini-pending{background:rgba(136,136,136,.15);color:var(--muted)} .ep-mini-in_progress,.ep-mini-client_review{background:rgba(52,152,219,.18);color:#5dade2} .ep-mini-ready,.ep-mini-approved,.ep-mini-delivered{background:rgba(46,204,113,.18);color:#2ecc71} .ep-mini-blocked{background:rgba(255,68,68,.18);color:var(--error)} /* ── Filmmakers tab ── */ .search-input{ width:100%;max-width:480px;padding:11px 14px; background:var(--card2);border:1px solid var(--border);border-radius:8px; color:var(--text);font-family:inherit;font-size:.9rem; outline:none;transition:border-color .15s; } .search-input:focus{border-color:var(--accent)} .fm-card{ background:var(--card);border:1px solid var(--border);border-radius:14px; padding:18px 20px;margin-bottom:14px;transition:border-color .15s; } .fm-card:hover{border-color:var(--border-light)} .fm-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap} .fm-avatar{ width:46px;height:46px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:rgba(255,107,43,.15);color:var(--accent); border-radius:50%;font-family:'Playfair Display',serif;font-weight:600;font-size:1.1rem; } .fm-name-block{flex:1;min-width:200px} .fm-name-block h2{font-size:1.15rem;margin:0;line-height:1.3} .fm-films-count{color:var(--muted);font-size:.8rem;font-family:'DM Mono',monospace} .fm-body{display:grid;grid-template-columns:1fr 1.2fr;gap:18px} @media(max-width:720px){.fm-body{grid-template-columns:1fr}} .fm-contact-block{ background:var(--card2);border:1px solid var(--border); border-radius:10px;padding:8px 4px; } .fm-contact-row{ display:flex;align-items:center;gap:12px; padding:10px 14px;border-radius:6px; color:var(--text);font-size:.88rem; transition:background .12s; } .fm-contact-row + .fm-contact-row{border-top:1px dashed var(--border)} .fm-contact-row:hover{background:rgba(255,107,43,.06)} .fm-icon{ width:22px;flex-shrink:0;color:var(--muted);font-size:.95rem;text-align:center; } .fm-action{ margin-left:auto;color:var(--accent);font-size:.78rem;font-weight:600;flex-shrink:0; } .fm-films-block{ background:var(--card2);border:1px solid var(--border); border-radius:10px;padding:12px 14px; } .fm-films-header{ font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted); font-weight:600;margin-bottom:10px; } /* Dim NOT INTERESTED titles on the Filmmakers tab attached-titles list, mirroring the films-dashboard row treatment. Hover restores full opacity. */ .fm-film-row-not-interested { opacity: .55; } .fm-film-row-not-interested:hover { opacity: 1; } /* 📝 Conversation notes block on each filmmaker card */ .fm-notes-block { background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-top: 12px; } .fm-notes-header { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 600; margin-bottom: 10px; } .fm-notes-empty { padding: 8px 0 10px; } .fm-notes-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; margin-bottom: 12px; padding-right: 4px; } .fm-note { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .fm-note-head { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: var(--muted); margin-bottom: 4px; } .fm-note-author { font-weight: 600; color: var(--text); } .fm-note-when { flex: 1; font-family: 'DM Mono', monospace; } .fm-note-actions { display: flex; gap: 4px; opacity: .5; transition: opacity .12s; } .fm-note:hover .fm-note-actions { opacity: 1; } .fm-note-actions button { background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 4px; font-size: .8rem; } .fm-note-actions button:hover { background: var(--card3); color: var(--text); border-color: var(--border); } .fm-note-actions .fm-note-delete:hover { color: #ff6b6b; } .fm-note-body { font-size: .9rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; } .fm-note-form { display: flex; gap: 8px; align-items: flex-start; padding-top: 10px; border-top: 1px solid var(--border); } .fm-note-input { flex: 1; min-width: 0; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: .88rem; font-family: inherit; resize: vertical; line-height: 1.4; } .fm-note-input:focus { border-color: var(--accent); outline: none; } .fm-note-save { flex: 0 0 auto; } .fm-films-list{display:flex;flex-direction:column;gap:6px} .fm-film-row{ display:flex;align-items:center; padding:8px 12px;border-radius:6px;background:var(--bg); color:var(--text);font-size:.88rem; transition:background .12s;gap:10px; } .fm-film-row:hover{background:var(--card3);color:var(--text)} .fm-film-title-link{ flex:1;min-width:0;color:var(--text);text-decoration:none; display:flex;align-items:center;gap:8px;overflow:hidden; } .fm-film-title-link:hover{color:var(--accent)} .fm-film-title-link .film-thumb{margin-right:0} .fm-film-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block} .fm-film-detach{ background:transparent;border:1px solid var(--border); color:var(--muted);width:26px;height:26px;border-radius:6px; font-size:.85rem;line-height:1;cursor:pointer;flex-shrink:0; transition:all .12s;padding:0; } .fm-film-detach:hover{ background:rgba(255,68,68,.12);border-color:rgba(255,68,68,.4);color:var(--error); } .fm-film-detach:disabled{opacity:.5;cursor:not-allowed} /* ── Film thumbnail (used everywhere a title is shown in a list) ── */ .film-thumb{ display:inline-flex;align-items:center;justify-content:center; flex-shrink:0;border-radius:4px;overflow:hidden; background:linear-gradient(135deg, rgba(255,107,43,.18), rgba(255,107,43,.05)); border:1px solid var(--border); position:relative;vertical-align:middle; font-family:'Playfair Display',serif;font-weight:700; color:var(--accent);text-transform:uppercase; } .film-thumb img{ width:100%;height:100%;object-fit:cover;display:block; } /* Initial letter shown via ::after — appears for empty state AND on image load failure */ .film-thumb-empty::after, .film-thumb-failed::after{ content:attr(data-initial); } .film-thumb-failed{ background:linear-gradient(135deg, rgba(255,107,43,.18), rgba(255,107,43,.05)); } /* Used when a row references a film whose data hasn't loaded into the local films map yet (e.g. on the mobile chats inbox during initial page load). Renders as a subtle dimmed slot — gets replaced with a real thumbnail on the next films-listener tick. */ .film-thumb-placeholder{ background:var(--card2);border:1px dashed var(--border); animation:thumbPulse 1.4s ease-in-out infinite; } @keyframes thumbPulse{0%,100%{opacity:.5}50%{opacity:.85}} /* Sizes */ .film-thumb-sm{width:28px;height:40px;font-size:.85rem} .film-thumb-md{width:40px;height:56px;font-size:1.1rem;margin-right:10px} .film-thumb-lg{width:60px;height:84px;font-size:1.6rem;margin-right:14px} /* Page-header treatment when title has a thumbnail next to it */ h1.with-thumb{display:flex;align-items:center;gap:0;flex-wrap:wrap} h1.with-thumb .film-thumb-lg{margin-right:14px} /* Impersonation banner — shown at top of every client/distributor page when admin is "viewing as" a user. Sticky so it stays visible while they scroll. */ .impersonation-banner{ position:sticky;top:0;z-index:300; background:linear-gradient(90deg, #ff6b2b, #ff8c5a); color:#fff;padding:10px 18px; display:flex;align-items:center;gap:14px;flex-wrap:wrap; font-family:'DM Sans',sans-serif;font-size:.86rem; box-shadow:0 2px 8px rgba(0,0,0,.3); } .impersonation-banner .imp-icon{font-size:1.2rem} .impersonation-banner .imp-text{flex:1;min-width:0} .impersonation-banner .imp-text strong{font-weight:700} .impersonation-banner .imp-sub{opacity:.85;font-size:.78rem;margin-left:6px} .impersonation-banner .imp-exit{ background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.4); color:#fff;padding:6px 14px;border-radius:6px;cursor:pointer; font-family:inherit;font-size:.8rem;font-weight:600; } .impersonation-banner .imp-exit:hover{background:rgba(0,0,0,.4)} /* TUBI live-date badge sits next to title (admin + client headers) */ .tubi-live-badge{ display:inline-block;margin-left:14px; padding:5px 12px;border-radius:999px; background:rgba(46,204,113,.15);border:1px solid rgba(46,204,113,.45); color:#2ecc71;font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600; letter-spacing:.3px;vertical-align:middle;line-height:1.4;white-space:nowrap; } /* "Live on TUBI now" variant — solid green with a pulsing halo so admins + filmmakers immediately see that the film is actually streaming (not just delivered and waiting). */ .tubi-live-badge.tubi-live-badge-now{ background:#2ecc71;color:#fff;border-color:#2ecc71; text-transform:uppercase;letter-spacing:.4px; box-shadow:0 0 0 0 rgba(46,204,113,.55); animation:tubiLiveBadgePulse 2s ease-out infinite; } @keyframes tubiLiveBadgePulse{ 0% {box-shadow:0 0 0 0 rgba(46,204,113,.55)} 70% {box-shadow:0 0 0 9px rgba(46,204,113,0)} 100% {box-shadow:0 0 0 0 rgba(46,204,113,0)} } /* Films table — title cell with thumbnail + title block */ .film-title-cell{display:flex;align-items:center;gap:10px} .film-title-cell .film-thumb{margin-right:0} .film-title-text{flex:1;min-width:0} /* Distributor search results — flex row with thumbnail */ .search-result-row{display:flex;align-items:center;gap:10px} .search-result-row .film-thumb{margin-right:0} .search-result-text{flex:1;min-width:0} /* ── A la carte Services catalog + per-film orders ── */ .svc-grid, .services-grid{ display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px;margin-bottom:18px; } .svc-card{ background:var(--card);border:1px solid var(--border);border-radius:14px; padding:18px;cursor:pointer; transition:border-color .15s, transform .12s; display:flex;flex-direction:column; } .svc-card:hover{border-color:var(--accent);transform:translateY(-1px)} .svc-card.svc-inactive{opacity:.55} .svc-card-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:10px; margin-bottom:8px; } .svc-card-title strong{font-family:'Playfair Display',serif;font-size:1.05rem;line-height:1.25} .svc-card-price{font-weight:700;color:var(--accent);font-family:'DM Mono',monospace;font-size:1.05rem;white-space:nowrap} .svc-card-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:.74rem;margin-bottom:10px;align-items:center} .svc-card-desc{font-size:.86rem;color:var(--muted);line-height:1.5;margin-bottom:10px} .svc-card-features{ list-style:none;padding:0;margin:8px 0;font-size:.8rem;color:var(--text-dim); display:flex;flex-direction:column;gap:4px; } .svc-card-features li{padding-left:18px;position:relative;line-height:1.4} .svc-card-features li::before{ content:"✓";position:absolute;left:0;color:#2ecc71;font-weight:700;font-size:.85rem; } .svc-card-actions{margin-top:auto;padding-top:10px} /* Per-film service orders list (used by client + admin) */ .order-row{ display:flex;align-items:flex-start;justify-content:space-between;gap:14px; background:var(--card2);border:1px solid var(--border);border-radius:10px; padding:14px 16px;margin-bottom:8px; } .order-row-main{flex:1;min-width:0} .order-row-title{font-weight:600;font-size:.95rem;margin-bottom:3px} .order-row-meta{font-size:.76rem;color:var(--muted);font-family:'DM Mono',monospace;margin-bottom:6px} .order-row-notes{font-size:.84rem;color:var(--text-dim);margin-top:6px;padding:8px 10px;background:var(--card3);border-radius:6px} .order-row-admin{font-size:.84rem;color:var(--accent);margin-top:6px} .order-row-link{ display:inline-block;margin-top:6px;color:var(--accent);font-size:.82rem;text-decoration:none; } .order-row-link:hover{text-decoration:underline} /* Opus Send dialog — numbered three-step layout (staging → file → command). */ .opus-step{ display:flex;align-items:flex-start;gap:14px; padding:14px 0; border-top:1px solid var(--border); transition:opacity .2s; } .opus-step:first-of-type{border-top:none;padding-top:0} .opus-step-num{ flex-shrink:0; width:30px;height:30px;border-radius:50%; background:var(--accent);color:#fff;font-weight:700;font-size:.95rem; display:flex;align-items:center;justify-content:center; line-height:1; } .opus-step-body{flex:1;min-width:0} .opus-step-title{ font-family:'Playfair Display',serif;font-size:1.02rem;font-weight:700; color:var(--text);margin-bottom:2px;line-height:1.2; } /* Opus Clip import — drag/drop area for uploading generated clips straight to Dropbox from the admin film page. Used by the "📥 Import clips" button → opus-import-dialog. */ .opus-dropzone{ border:2px dashed var(--border-light); border-radius:14px; padding:30px 20px; text-align:center; background:var(--card2); transition:border-color .15s, background .15s, transform .12s; cursor:pointer; } .opus-dropzone:hover{border-color:var(--accent);background:rgba(255,107,43,.04)} .opus-dropzone.drag-over{ border-color:var(--accent); background:rgba(255,107,43,.12); transform:scale(1.01); } .opus-dropzone-empty{color:var(--muted);font-size:.9rem;line-height:1.5} .opus-import-list{ list-style:none;padding:0;margin:0; display:flex;flex-direction:column;gap:8px; } .opus-import-item{ background:var(--card2);border:1px solid var(--border);border-radius:10px; padding:10px 14px;font-size:.86rem; } .opus-import-item .oi-name{ font-weight:600;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .opus-import-item .oi-meta{ font-size:.78rem;color:var(--muted);margin-top:2px; display:flex;justify-content:space-between;gap:8px; } .opus-import-item .oi-status{ font-family:'DM Mono',monospace;font-weight:600; } .opus-import-item .oi-bar{ margin-top:6px;height:5px;border-radius:99px; background:rgba(255,107,43,.12);overflow:hidden; } .opus-import-item .oi-bar-fill{ height:100%;border-radius:99px; background:var(--accent); transition:width .25s ease, background .15s; } /* Payments breakdown on each order — used on both admin order rows and the filmmaker's services tab. Compact summary line + an itemized list of every recorded payment with a small delete affordance for admins. The legacy-paid case (no payments array) shows just the summary, no list. */ .order-payments{ margin-top:10px;padding:10px 12px; background:var(--card2);border:1px solid var(--border);border-radius:8px; font-size:.84rem; } .order-payments .payments-summary{ font-family:'DM Sans',sans-serif;color:var(--text); margin-bottom:6px;line-height:1.5; } .order-payments .payments-summary strong{font-weight:700} .order-payments .payments-list{ list-style:none;margin:6px 0 0;padding:0; border-top:1px dashed var(--border); } .order-payments .payments-list li{ display:flex;align-items:center;flex-wrap:wrap;gap:8px; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.05); font-size:.82rem; } .order-payments .payments-list li:last-child{border-bottom:none} .order-payments .pay-amount{ font-family:'DM Mono',monospace;font-weight:700;color:#2ecc71; min-width:80px; } .order-payments .pay-via{color:var(--text-dim);font-weight:600} .order-payments .pay-note{flex:1;min-width:0;color:var(--muted)} .order-payments .pay-when{font-size:.72rem;font-family:'DM Mono',monospace} .order-payments .pay-delete{ background:none;border:none;color:var(--muted);cursor:pointer; font-size:1.1rem;padding:0 6px;border-radius:4px;line-height:1; margin-left:auto; } .order-payments .pay-delete:hover{ color:#ff7676;background:rgba(255,107,107,.08); } /* Client-side variant skips the delete affordance (no .pay-delete renders), so this just exists as a hook if we want to tone it down for filmmakers. */ .order-payments.client-payments{background:var(--card3)} /* Delivered-order callout on the client side — green border + prominent CTA so filmmakers can't miss the "your finished asset is ready" moment after admin marks an order delivered + drops the Dropbox link. */ .order-delivered-callout{ margin-top:10px;padding:14px 16px;border-radius:10px; background:linear-gradient(135deg, rgba(46,204,113,.10), rgba(46,204,113,.04)); border:1px solid rgba(46,204,113,.4); border-left:4px solid #2ecc71; animation:fadeUp .35s ease both; } .order-delivered-callout .odc-row{display:flex;align-items:flex-start;gap:12px} .order-delivered-callout .odc-icon{ font-size:1.5rem;line-height:1;flex-shrink:0; } .order-delivered-callout .odc-text{flex:1;min-width:0} .order-delivered-callout .odc-title{ font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:#2ecc71; line-height:1.2;margin-bottom:3px; } .order-delivered-callout .odc-sub{ font-size:.84rem;color:var(--text);line-height:1.4; } .order-delivered-callout .odc-cta{ display:block;margin-top:12px;text-align:center; background:#2ecc71;border-color:#2ecc71;color:#fff; font-weight:700;letter-spacing:.3px; } .order-delivered-callout .odc-cta:hover{ background:#27ae60;border-color:#27ae60; transform:translateY(-1px); } /* Active-orders banner on the Deliverables tab — surfaces the same delivered callout (full green card) at the top of the page so the filmmaker can't miss it, plus a compact summary card for in-flight orders. */ #active-orders-banner:not(:empty){margin-bottom:16px} .aob-callout{margin-top:0;margin-bottom:10px} .aob-pending-card{ background:var(--card);border:1px solid var(--border); border-left:3px solid var(--accent);border-radius:10px; padding:14px 16px;margin-bottom:10px; } .aob-pending-title{ font-size:.7rem;color:var(--accent);text-transform:uppercase; letter-spacing:.6px;font-weight:700;margin-bottom:8px; } .aob-pending-row{ display:flex;justify-content:space-between;align-items:center; padding:6px 0;border-top:1px dashed var(--border);gap:10px; } .aob-pending-row:first-of-type{border-top:none} .aob-pending-name{ font-weight:600;font-size:.9rem;color:var(--text); flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .aob-pending-meta{ font-size:.76rem;color:var(--muted);font-family:'DM Mono',monospace; flex-shrink:0; } .aob-open-services{ display:inline-block;margin-top:10px; color:var(--accent);font-size:.82rem;font-weight:600; text-decoration:none; } .aob-open-services:hover{text-decoration:underline} /* ─── 1919 bumper status chip on the admin film header ─── */ .bumper-chip{ display:inline-block;padding:3px 10px;border-radius:99px; font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:700; letter-spacing:.3px;vertical-align:middle; border:1px solid transparent; } .bumper-chip.pending{ background:rgba(255,179,71,.15);color:#ffb347;border-color:rgba(255,179,71,.4); } .bumper-chip.in-progress{ background:rgba(93,173,226,.15);color:#5dade2;border-color:rgba(93,173,226,.4); animation:badgePulse 1.8s ease-in-out infinite; } .bumper-chip.done{ background:rgba(46,204,113,.15);color:#2ecc71;border-color:rgba(46,204,113,.4); } /* ─── AI auto-captions card (admin /admin/film.html Captions tab) ─── */ .ai-cc-card{ background:linear-gradient(135deg, rgba(93,173,226,.08), rgba(255,107,43,.04)); border:1px solid rgba(93,173,226,.35);border-left:4px solid #5dade2; border-radius:10px;padding:14px 16px;margin-bottom:18px; } .ai-cc-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap; } .ai-cc-title{ font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700; color:var(--text);margin-bottom:3px; } .ai-cc-badge{ display:inline-block;padding:2px 8px;border-radius:99px; background:rgba(93,173,226,.15);color:#5dade2; font-family:'DM Mono',monospace;font-size:.62rem;font-weight:700; letter-spacing:.5px;margin-left:6px;vertical-align:middle; } .ai-cc-sub{font-size:.82rem;color:var(--muted);line-height:1.45;max-width:560px} .ai-cc-state{ margin-top:12px;padding:12px 14px;border-radius:8px; display:flex;align-items:flex-start;gap:12px; background:var(--card);border:1px solid var(--border); } .ai-cc-state.ai-cc-processing{ border-color:rgba(93,173,226,.4); background:rgba(93,173,226,.06); } .ai-cc-state.ai-cc-done{ border-color:rgba(46,204,113,.4);background:rgba(46,204,113,.06); } .ai-cc-state.ai-cc-failed{ border-color:rgba(255,107,107,.4);background:rgba(255,107,107,.06); } .ai-cc-icon{font-size:1.4rem;line-height:1;flex-shrink:0} .ai-cc-body{flex:1;min-width:0} .ai-cc-body code{font-size:.8em;word-break:break-all} .ai-cc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .ai-cc-spinner{ width:24px;height:24px;border-radius:50%;flex-shrink:0; border:3px solid rgba(93,173,226,.2);border-top-color:#5dade2; animation:aiCcSpin .9s linear infinite; } @keyframes aiCcSpin{to{transform:rotate(360deg)}} /* Real-time progress bar for AI captions. Width animates smoothly between updates from the scheduled poller every ~2 min. Inline percent label appears next to the stage title in the rendered markup. */ .ai-cc-pct{ display:inline-block;margin-left:8px; font-family:'DM Mono',monospace;font-size:.78rem;color:#5dade2; font-weight:700;vertical-align:middle; } .ai-cc-progress{ height:8px;border-radius:99px; background:rgba(93,173,226,.12);overflow:hidden; margin:6px 0 8px; } .ai-cc-progress-fill{ height:100%;border-radius:99px; background:linear-gradient(90deg, #5dade2, #76d7c4); transition:width .6s ease; /* Subtle barber-pole when actively filling, so a stalled poll still "feels alive" between backend updates. */ background-size:200% 100%; animation:aiCcBarShift 2.4s linear infinite; } @keyframes aiCcBarShift{ 0%{background-position:200% 0} 100%{background-position:0 0} } /* "Refresh now" link inside the AI-captions status — small, accent-colored, inline next to the elapsed-time text. Hover bumps it slightly so taps feel responsive on mobile. */ .ai-cc-refresh-link{ color:var(--accent);text-decoration:none;font-weight:600; margin-left:2px; } .ai-cc-refresh-link:hover{text-decoration:underline;color:var(--accent-dim)} /* File picker rows inside the dialog */ .ai-cc-picker-list{ max-height:50vh;overflow-y:auto; border:1px solid var(--border);border-radius:10px; background:var(--card); } .ai-cc-picker-row{ display:flex;align-items:center;gap:10px; padding:10px 14px;cursor:pointer; border-bottom:1px solid var(--border); } .ai-cc-picker-row:last-child{border-bottom:none} .ai-cc-picker-row:hover{background:var(--card2)} .ai-cc-picker-row input[type="radio"]{margin:0;flex-shrink:0} /* Disabled rows = oversized files that exceed AssemblyAI's 5.5 GB cap. Dimmed + non-interactive so admin can't accidentally pick a doomed file. */ .ai-cc-picker-row.disabled{opacity:.55;cursor:not-allowed} .ai-cc-picker-row.disabled:hover{background:transparent} .ai-cc-picker-body{flex:1;min-width:0} .ai-cc-picker-name{ font-weight:600;font-size:.9rem;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .ai-cc-picker-meta{ font-size:.72rem;color:var(--muted);font-family:'DM Mono',monospace; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* Client dashboard — "📦 N orders ready" indicator on each film tile. Appears as a pulsing pill below the film title when there are delivered orders waiting for the filmmaker to view. */ .film-orders-ready{ display:inline-flex;align-items:center;gap:6px;margin-top:6px; padding:5px 11px;border-radius:99px; background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.4); color:#2ecc71;font-size:.78rem;font-weight:700; letter-spacing:.2px; box-shadow:0 0 0 0 rgba(46,204,113,.5); animation:livePulseDash 2.4s ease-out infinite; } /* Admin order edit grid */ .order-edit-grid{ display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px 12px;margin-top:12px; } .order-edit-grid .field{margin-bottom:0} .admin-order-row{flex-direction:column;align-items:stretch} /* Payment block on client-side order rows */ .pay-block{ margin-top:12px;padding:12px 14px; background:rgba(46,204,113,.06);border:1px solid rgba(46,204,113,.3); border-radius:10px; } .pay-block-amount{ font-family:'Playfair Display',serif;font-size:1rem;font-weight:600;color:#2ecc71; margin-bottom:8px; } .pay-block-buttons{display:flex;flex-wrap:wrap;gap:8px} .pay-block-buttons .pay-btn{padding:8px 14px;font-size:.85rem;font-weight:600} .pay-confirm{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin-top:10px;padding-top:10px;border-top:1px dashed rgba(46,204,113,.25); } .pay-paid{ margin-top:10px;padding:8px 12px; background:rgba(46,204,113,.12);border-radius:8px; color:#2ecc71;font-weight:600;font-size:.86rem; } .pay-block-empty{margin-top:10px;font-style:italic} /* Filmmaker contact block on the film Overview metadata card */ .contact-block{ grid-column:1/-1;margin-top:14px;padding-top:14px; border-top:1px dashed var(--border); } .contact-header{ display:flex;align-items:center;justify-content:space-between; margin-bottom:10px;flex-wrap:wrap;gap:8px; } .contact-grid{ display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:10px 14px; } .contact-grid a{color:var(--accent);text-decoration:none} .contact-grid a:hover{text-decoration:underline} /* ── "Called recently" pill + Mark-as-called button ── */ .called-mark-btn{ background:transparent;border:1px dashed var(--border-light); color:var(--muted);font-family:'DM Sans',sans-serif;cursor:pointer; border-radius:999px;transition:all .12s; display:inline-flex;align-items:center;gap:4px; } .called-mark-btn:hover{ border-color:var(--accent);color:var(--accent);background:rgba(255,107,43,.06); } .called-mark-btn-sm{padding:5px 11px;font-size:.74rem} .called-mark-btn-md{padding:7px 14px;font-size:.82rem} .called-pill{ display:inline-flex;align-items:center;gap:6px; background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.4); border-radius:999px;color:#2ecc71;font-family:'DM Mono',monospace; letter-spacing:.3px;animation:fadeUp .25s ease both; } .called-pill-sm{padding:4px 10px;font-size:.7rem} .called-pill-md{padding:6px 13px;font-size:.78rem} .called-pill-dot{font-size:.6rem;line-height:1} .called-pill-label{white-space:nowrap} .called-pill-clear{ background:transparent;border:0;color:#2ecc71;opacity:.65;cursor:pointer; padding:0 0 0 4px;font-size:.9rem;line-height:1;font-family:inherit; } .called-pill-clear:hover{opacity:1;color:#fff} /* ── Filmmakers tab: per-card header actions (Edit / Attach / Delete) ── */ .fm-header-actions{ display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto; } .fm-header-actions .fm-films-count{margin-left:6px} .fm-delete-btn{ background:transparent;border:1px solid rgba(255,68,68,.35); color:#ff7676;font-weight:500; } .fm-delete-btn:hover:not(:disabled){ background:rgba(255,68,68,.12);border-color:rgba(255,68,68,.6);color:#ff5252; } .fm-delete-btn:disabled{opacity:.5;cursor:not-allowed} /* ── Filmmakers tab: Attach modal — film candidate list ── */ .fm-attach-list{ max-height:340px;overflow-y:auto; background:var(--card2);border:1px solid var(--border);border-radius:10px; padding:6px;margin-top:6px; } .fm-attach-row{ display:flex;align-items:center;gap:10px; padding:10px 12px;border-radius:6px; transition:background .12s; } .fm-attach-row + .fm-attach-row{border-top:1px dashed var(--border)} .fm-attach-row:hover{background:rgba(255,107,43,.06)} .fm-attach-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .fm-attach-row-title{ font-size:.9rem;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .fm-attach-row-meta{font-size:.75rem;color:var(--muted)} /* ── Per-episode delete button on series Episodes tab ── */ .ep-row-delete{ background:transparent;border:1px solid var(--border);border-radius:6px; color:var(--muted);width:32px;height:32px;cursor:pointer; font-size:.95rem;line-height:1; transition:all .12s; } .ep-row-delete:hover{ background:rgba(255,68,68,.12);border-color:rgba(255,68,68,.4);color:var(--error); } .ep-row-delete:disabled{opacity:.5;cursor:not-allowed} /* ── Filmmakers tab: signup status block ── */ .fm-signup-status{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:10px 14px;border-radius:8px;margin-bottom:14px; font-size:.85rem; } .fm-signup-status .fm-signup-dot{font-size:.7rem} .fm-signup-status code{padding:2px 6px;background:rgba(0,0,0,.3);border-radius:4px;font-size:.78rem} .fm-signup-yes{background:rgba(46,204,113,.08);border:1px solid rgba(46,204,113,.25);color:#2ecc71} .fm-signup-yes .fm-signup-dot{color:#2ecc71} .fm-signup-pending{background:rgba(255,179,71,.08);border:1px solid rgba(255,179,71,.25);color:var(--text)} .fm-signup-pending .fm-signup-dot{color:#ffb347} .fm-signup-no{background:rgba(136,136,136,.08);border:1px solid var(--border);color:var(--text)} .fm-signup-no .fm-signup-dot{color:var(--muted)} .fm-signup-status button{margin-left:auto} /* Drift warning — shown when client account's filmIds doesn't match attached films */ .fm-drift{ margin-top:8px;padding:10px 14px; background:rgba(255,179,71,.1);border:1px solid rgba(255,179,71,.35); border-radius:10px;font-size:.85rem;color:var(--text); display:flex;align-items:center;gap:10px;flex-wrap:wrap; } .fm-drift button{margin-left:auto} /* ── Artwork tab: TUBI-spec multi-image sections ── */ .aw-spec-ref{ background:rgba(255,107,43,.06); border:1px solid rgba(255,107,43,.25); border-radius:10px; padding:14px 16px; margin-bottom:20px; font-size:.82rem; } .aw-spec-ref-title{ font-weight:600;color:var(--accent);margin-bottom:8px; text-transform:uppercase;letter-spacing:.5px;font-size:.72rem; } .aw-spec-table{width:100%;border-collapse:collapse;margin:6px 0} .aw-spec-table th,.aw-spec-table td{padding:6px 10px;text-align:left;border-bottom:1px solid var(--border)} .aw-spec-table th{font-size:.68rem;text-transform:uppercase;color:var(--muted);letter-spacing:.5px;font-weight:600} .aw-spec-table td{font-size:.82rem;color:var(--text-dim)} .aw-spec-ref-foot{color:var(--muted);font-size:.75rem;margin-top:8px;font-style:italic} @media(max-width:640px){ .aw-spec-table{font-size:.7rem} .aw-spec-table th,.aw-spec-table td{padding:5px 6px} } .aw-section{ background:var(--card2);border:1px solid var(--border);border-radius:10px; padding:14px 16px;margin-bottom:14px; } .aw-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap} .aw-section-head h3{margin:0;font-size:1rem} .aw-count{ font-family:'DM Mono',monospace;font-size:.78rem;font-weight:600; padding:3px 9px;border-radius:5px;letter-spacing:.5px; background:rgba(136,136,136,.15);color:var(--muted); } .aw-count.aw-count-ok{background:rgba(46,204,113,.15);color:#2ecc71} .aw-count.aw-count-low{background:rgba(255,179,71,.15);color:#ffb347} .aw-list{display:flex;flex-direction:column;gap:8px} .aw-empty{color:var(--muted);font-size:.8rem;font-style:italic;padding:8px 4px} .aw-row{ display:grid;grid-template-columns:1fr 200px 36px;gap:8px;align-items:center; } .aw-row .aw-url,.aw-row .aw-label{ background:var(--bg);border:1px solid var(--border);border-radius:6px; padding:8px 11px;color:var(--text);font-size:.85rem;font-family:inherit; } .aw-row .aw-url{font-family:'DM Mono',monospace;font-size:.78rem} .aw-row .aw-url:focus,.aw-row .aw-label:focus{border-color:var(--accent);outline:none} .aw-row .aw-remove{ background:transparent;border:1px solid var(--border);border-radius:6px; color:var(--muted);width:36px;height:36px;cursor:pointer;font-size:.85rem; transition:all .12s; } .aw-row .aw-remove:hover{background:rgba(255,68,68,.12);border-color:rgba(255,68,68,.4);color:var(--error)} @media(max-width:720px){ .aw-row{grid-template-columns:1fr 100px 36px} } /* ── Dropbox tab: "Use as ▾" dropdown styled to match buttons ── */ select.asset-use-as{ padding:6px 28px 6px 12px;font-size:.78rem;font-weight:600; font-family:inherit;cursor:pointer; background:transparent;border:1px solid transparent;color:var(--muted); border-radius:8px; appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center; transition:all .12s; } select.asset-use-as:hover{color:var(--text);background-color:var(--card)} select.asset-use-as:focus{outline:none;border-color:var(--accent);color:var(--text)} /* ── Per-group "Copy folder link" button (Dropbox tab) ── */ .asset-group-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .asset-group-copylink{margin-left:auto;font-size:.72rem !important;padding:5px 10px !important} /* ── Film-level "Deliver to TUBI" button ── */ .btn-deliver{ background:rgba(46,204,113,.15); border-color:rgba(46,204,113,.5); color:#2ecc71; } .btn-deliver:not(:disabled):hover{ background:#2ecc71;color:#fff;border-color:#2ecc71;transform:translateY(-1px); } .btn-deliver:disabled{ opacity:.4;background:transparent;border-color:var(--border);color:var(--muted); } .btn-deliver.btn-delivered-state{ background:#2ecc71;border-color:#2ecc71;color:#fff;opacity:1; cursor:default; } /* ── Episode Dropbox tab: asset rows + actions ── */ .asset-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px} li.asset-row{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:10px 14px;background:var(--card2);border:1px solid var(--border); border-radius:8px; } li.asset-row .info{flex:1;min-width:0} li.asset-row .name{font-family:'DM Mono',monospace;font-size:.84rem;word-break:break-word} li.asset-row .meta-line{color:var(--muted);font-size:.72rem;margin-top:2px} li.asset-row .actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap} /* ═════════════════════════════════════════════════════════════ QC chat — per-film thread between admin and filmmaker Used on /admin/film.html and /client/film.html (Chat tab) ═════════════════════════════════════════════════════════════ */ .chat-wrap{ display:flex;flex-direction:column; background:var(--card);border:1px solid var(--border);border-radius:14px; min-height:520px;max-height:72vh;overflow:hidden; } .chat-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 18px;border-bottom:1px solid var(--border);background:var(--card2); } .chat-head .title{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700} .chat-head .ttl-note{color:var(--muted);font-size:.74rem;display:flex;align-items:center;gap:6px} .chat-head .ttl-note::before{ content:'';width:8px;height:8px;border-radius:50%;background:#ff9d3a; box-shadow:0 0 0 0 rgba(255,157,58,.5);animation:livePulseDash 2.4s ease-out infinite; } .chat-body{ flex:1;overflow-y:auto;padding:18px 18px 6px; display:flex;flex-direction:column;gap:10px; background:var(--bg); } .chat-empty{ margin:auto;text-align:center;color:var(--muted);font-size:.88rem;padding:30px; } .chat-msg{display:flex;flex-direction:column;max-width:78%;animation:fadeUp .25s ease both} .chat-msg.mine{align-self:flex-end;align-items:flex-end} .chat-msg.theirs{align-self:flex-start;align-items:flex-start} .chat-msg .author{ font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px; margin-bottom:3px;font-weight:600; } .chat-msg .bubble{ padding:9px 13px;border-radius:14px;font-size:.92rem;line-height:1.4; word-wrap:break-word;white-space:pre-wrap; } .chat-msg.mine .bubble{ background:var(--accent);color:#fff;border-top-right-radius:4px; } .chat-msg.theirs .bubble{ background:var(--card2);color:var(--text);border:1px solid var(--border); border-top-left-radius:4px; } .chat-msg .ts{ font-size:.66rem;color:var(--muted);margin-top:3px;font-family:'DM Mono',monospace; } .chat-msg .ts.expiring-soon{color:#ff9d3a} /* Read receipts — shown inline in the ts line, only on the sender's own messages. Muted "✓ Sent" while waiting, green "✓✓ Read" once the other side opens the chat tab (which flips readByAdmin/readByClient). */ .chat-receipt{font-weight:600;letter-spacing:.3px} .chat-receipt.sent{color:var(--muted)} .chat-receipt.read{color:#2ecc71} /* Service offer/request inline card (replaces bubble for service_* types) */ .chat-service-card{ display:flex;flex-direction:column;gap:10px; padding:14px 16px;border-radius:14px;background:var(--card2); border:1px solid rgba(255,107,43,.35);border-left:4px solid var(--accent); max-width:340px; } .chat-msg.mine .chat-service-card{border-color:#fff;background:rgba(255,255,255,.08)} .chat-service-card .svc-header{ font-size:.7rem;color:var(--accent);text-transform:uppercase;letter-spacing:.6px; font-weight:700;display:flex;align-items:center;gap:6px; } .chat-msg.mine .chat-service-card .svc-header{color:#fff} .chat-service-card .svc-name{ font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;line-height:1.2; } .chat-service-card .svc-price{ font-size:1.15rem;font-weight:700;color:var(--accent); } .chat-msg.mine .chat-service-card .svc-price{color:#fff} .chat-service-card .svc-note{font-size:.86rem;color:var(--muted);line-height:1.4} .chat-msg.mine .chat-service-card .svc-note{color:rgba(255,255,255,.85)} .chat-service-card .svc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px} .chat-service-card .svc-actions a, .chat-service-card .svc-actions button{ font-size:.8rem;padding:6px 12px; } /* Composer */ .chat-composer{ border-top:1px solid var(--border);padding:12px 14px;background:var(--card2); display:flex;flex-direction:column;gap:8px; } .chat-composer textarea{ background:var(--card3);border:1px solid var(--border);color:var(--text); border-radius:10px;padding:10px 12px;font-family:inherit;font-size:.92rem; resize:vertical;min-height:50px;max-height:160px;line-height:1.4; } .chat-composer textarea:focus{outline:none;border-color:var(--accent)} .chat-composer .row{ display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap; } .chat-composer .actions{display:flex;gap:8px;flex-wrap:wrap} /* Unread indicator on the Chat tab itself */ .tab .tab-unread{ display:inline-block;min-width:18px;height:18px;padding:0 5px; background:var(--accent);color:#fff;border-radius:9px; font-size:.66rem;line-height:18px;font-weight:700;margin-left:6px; vertical-align:middle; } /* Force-hide the badge when JS sets the `hidden` attribute. The `display:inline-block` rule above would otherwise override the user-agent stylesheet's `[hidden] { display: none }` because of cascade specificity. */ .tab .tab-unread[hidden]{display:none} .tab.active .tab-unread{background:#fff;color:var(--accent)} @media (max-width:640px){ .chat-wrap{min-height:420px;max-height:80vh} .chat-msg{max-width:90%} .chat-service-card{max-width:100%} } /* ═════════════════════════════════════════════════════════════ Phase 2 — Mobile responsiveness polish on desktop admin pages ═════════════════════════════════════════════════════════════ These styles only kick in at phone widths. They make the desktop pages (/admin/dashboard, /admin/film, /admin/orders, etc.) usable when accidentally viewed on a phone. Admins on Capacitor are auto- routed to /admin/mobile.html — this is the fallback for browser-on- phone or mid-resize use cases. ───────────────────────────────────────────────────────────── */ @media (max-width:640px){ /* ── Topbar: collapse nav into a hamburger drawer ── Burger button (☰) shows on the left; tap to drop down a full-width vertical list. Each link is a tap-friendly row. Closes on outside tap or link tap (handled in js/ui.js). */ .topbar{padding-left:10px;padding-right:10px} .topbar-logo{font-size:.92rem;letter-spacing:1px} .topbar-burger{display:flex} /* show the hamburger at mobile width */ .topbar-nav{ /* Drawer: absolutely positioned below the topbar, full width, hidden by default. Opens via .open class added by the JS toggle. */ display:none; position:absolute;top:100%;left:0;right:0; margin-left:0;gap:0;flex-direction:column; background:rgba(15,15,15,.95); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border); padding:6px 0; max-height:calc(100vh - 60px - env(safe-area-inset-top, 0px)); overflow-y:auto; animation:topbarNavDrop .18s ease-out; } .topbar-nav.open{display:flex} .topbar-nav a{ padding:12px 18px;font-size:.92rem;border-radius:0; border-bottom:1px solid var(--border); justify-content:flex-start; } .topbar-nav a:last-child{border-bottom:none} .topbar-spacer{display:none} .topbar-user .signout{padding:5px 9px;font-size:.72rem} /* Badges + tab-unread chips inherit normal sizing inside drawer rows */ .topbar-nav .nav-badge{margin-left:auto} } @keyframes topbarNavDrop{ from{opacity:0;transform:translateY(-6px)} to {opacity:1;transform:translateY(0)} } @media (max-width:640px){ /* ── Page padding + heading sizing ── Use individual padding properties (not shorthand!) so the calc-based padding-top that clears the fixed topbar + iPhone safe-area inset is preserved. Shorthand `padding: 14px` would clobber it and slide the entire page UNDER the topbar. */ .page{ padding-left:14px; padding-right:14px; padding-top:calc(60px + env(safe-area-inset-top, 0px) + 14px); padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); } .page-narrow{padding-left:14px;padding-right:14px} h1{font-size:1.45rem} .row-between{flex-wrap:wrap;gap:6px} /* ── Tables → stacked cards ──────────────────────────────── The .table class is used by /admin/dashboard (films), /admin/orders (orders list), and a few others. Hide the thead, render each row as a self-contained card. The first cell becomes a prominent header. ─────────────────────────────────────────────────────────── */ .table-wrap{background:transparent;border:none;border-radius:0;overflow:visible} .table{border:0;font-size:.86rem} .table thead{display:none} .table tbody{display:block} .table tr{ display:block;padding:12px 14px;margin-bottom:8px; background:var(--card);border:1px solid var(--border);border-radius:12px; } .table td{ display:block;padding:3px 0;border:none; } .table td:first-child{ font-size:1rem;padding-bottom:8px; border-bottom:1px dashed var(--border);margin-bottom:6px; } /* When td has no content, hide the row gap it would otherwise add */ .table td:empty{display:none} /* ── Film page header — stack thumbnail + title + meta ── */ .with-thumb{flex-wrap:wrap} #film-title{font-size:1.3rem;line-height:1.2} #film-meta{font-size:.78rem;flex-wrap:wrap;gap:6px} #film-meta span{white-space:normal} /* ── Tab pills: tighten padding so more fit before scroll ── */ .tabs{padding:3px;gap:2px;margin-bottom:12px} .tab{padding:8px 10px;font-size:.76rem;min-width:78px} /* ── Forms / fields ── */ .field input,.field textarea,.field select{font-size:16px} /* ↑ 16px prevents iOS Safari from zooming-in on focus */ /* ── Buttons in row-end clusters wrap to new lines ── */ .row-end{flex-wrap:wrap} /* ── Stat tiles: collapse to single column ── */ .orders-stats{grid-template-columns:repeat(2,1fr) !important} /* ── Modals / dialogs respect notch + small viewport ── */ .modal{max-width:96vw;padding:18px} dialog.organize-dialog{ width:96vw;max-width:96vw;margin:auto; max-height:90vh; } } /* Phone width but still landscape (slightly wider) gets the same treatment */ @media (max-width:640px) and (orientation:landscape){ .topbar{height:calc(52px + env(safe-area-inset-top, 0px))} }