/* ═══════════════════════════════════════════════════════════════ DP PRODUCTIONS PORTAL — style.css — v2.0.0 ═══════════════════════════════════════════════════════════════ MAP: tokens → login → app shell → components (buttons, badges, avatars, modals, forms) → pages (stats, tables, pipeline, cards, call sheet, calendar, finance) → tablet → mobile → print Dark theme only. Brand red #c0201e, gold #c8a84b. ═══════════════════════════════════════════════════════════════ */ :root{--red:#c0201e;--red2:#a01a18;--rd:rgba(192,32,30,0.11);--rb:rgba(192,32,30,0.28);--bg:#0a0a0a;--s1:#111;--s2:#1a1a1a;--s3:#222;--b1:rgba(255,255,255,0.07);--b2:rgba(255,255,255,0.13);--tx:#e8e8e8;--mu:#7a7a7a;--su:#9a9a9a;--blue:#4a90d9;--bd:rgba(74,144,217,0.11);--green:#3eb87a;--gd:rgba(62,184,122,0.11);--purple:#9b72d4;--pd:rgba(155,114,212,0.11);--amber:#d4882a;--ad:rgba(212,136,42,0.11);--teal:#2ab8c4;--td:rgba(42,184,196,0.11);--gold:#c8a84b;--r:8px;--r2:12px;} *{box-sizing:border-box;margin:0;padding:0;} /* ── LIGHT THEME ──────────────────────────────────────────────── Dark is default. flips every token; accents are darkened variants (all WCAG-checked on white). */ [data-theme="light"]{ --bg:#f4f4f5;--s1:#ffffff;--s2:#f4f4f5;--s3:#e9e9eb; --b1:rgba(0,0,0,0.08);--b2:rgba(0,0,0,0.15); --tx:#18181b;--mu:#6d6d74;--su:#52525b; --blue:#2563b8;--bd:rgba(37,99,184,0.10); --green:#17814e;--gd:rgba(23,129,78,0.10); --purple:#7444b8;--pd:rgba(116,68,184,0.10); --amber:#a05e14;--ad:rgba(160,94,20,0.10); --teal:#0e7c86;--td:rgba(14,124,134,0.10); --gold:#8a6f1c; --rd:rgba(192,32,30,0.08);--rb:rgba(192,32,30,0.30); } [data-theme="light"] .np{box-shadow:0 8px 28px rgba(0,0,0,0.14);} [data-theme="light"] .lc{box-shadow:0 20px 60px rgba(0,0,0,0.12);} [data-theme="light"] #impb{color:#fff;} [data-theme="light"] .sb{box-shadow:none;} body{background:var(--bg);color:var(--tx);font-family:'Inter',-apple-system,sans-serif;font-size:14px;min-height:100vh;-webkit-font-smoothing:antialiased;} [lang=ar]{font-family:'Cairo',sans-serif;direction:rtl;} [lang=ar] .sb{border-right:none;border-left:1px solid var(--b1);} [lang=ar] .ni{flex-direction:row-reverse;} /* ── ACCESSIBILITY & MICRO-INTERACTIONS (v2.1) ─────────────────── */ /* keyboard focus — visible ring on every interactive element */ button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[draggable]:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px;} /* form focus — border + soft ring */ select.fi:focus,input.fi:focus,textarea.fi:focus{box-shadow:0 0 0 3px var(--rd);} /* press feedback (150ms, transform-only so no layout shift) */ .btn,.lb,.fb,.lp,.nb,.mx,.pwbtn{transition:transform .12s ease,background .15s,color .15s,border-color .15s;touch-action:manipulation;} .btn:active,.lb:active,.fb:active,.nb:active{transform:scale(.96);} /* respect reduced-motion */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;} } /* tabular figures — numbers never jiggle in stats, money, dates */ .stv,.rvv,.dld,.lt,.csv{font-variant-numeric:tabular-nums;} /* dark-theme scrollbars */ *{scrollbar-width:thin;scrollbar-color:var(--s3) transparent;} ::-webkit-scrollbar{width:8px;height:8px;} ::-webkit-scrollbar-thumb{background:var(--s3);border-radius:4px;} ::-webkit-scrollbar-thumb:hover{background:var(--b2);} /* LOGIN */ #ls{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);position:relative;overflow:hidden;} #ls::before{content:'';position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(192,32,30,0.15),transparent 65%);top:-160px;right:-120px;pointer-events:none;} #ls::after{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(200,168,75,0.07),transparent 65%);bottom:-140px;left:-100px;pointer-events:none;} .lc{width:360px;max-width:calc(100vw - 32px);background:var(--s1);border:1px solid var(--b2);border-radius:var(--r2);padding:36px 28px;position:relative;z-index:1;box-shadow:0 20px 60px rgba(0,0,0,0.5);} .ll{text-align:center;margin-bottom:20px;} .ll img{height:54px;object-fit:contain;} .lbn{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;text-transform:uppercase;text-align:center;margin-bottom:2px;letter-spacing:.5px;} .lbn span{color:var(--red);} .lsub{font-size:11px;color:var(--mu);text-align:center;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;} .lprow{display:flex;justify-content:center;gap:8px;margin-bottom:14px;} .lp{padding:5px 16px;border-radius:20px;font-size:13px;cursor:pointer;border:1px solid var(--b2);background:transparent;color:var(--mu);font-family:inherit;transition:all .12s;} .lp.on{background:var(--rd);color:var(--red);border-color:var(--rb);} .tp{display:block;text-align:center;background:var(--ad);border:1px solid rgba(212,136,42,0.3);color:var(--amber);font-size:11px;padding:5px;border-radius:var(--r);margin-bottom:14px;} .fl{font-size:10px;color:var(--mu);letter-spacing:.06em;text-transform:uppercase;font-weight:500;margin-bottom:5px;display:block;margin-top:10px;} select.fi,input.fi{background:var(--s2);border:1px solid var(--b2);color:var(--tx);padding:10px 12px;border-radius:var(--r);font-size:14px;font-family:inherit;width:100%;} select.fi:focus,input.fi:focus{outline:none;border-color:var(--red);} .lb{width:100%;background:var(--red);color:#fff;border:none;padding:12px;border-radius:var(--r);font-size:15px;font-family:'Barlow Condensed',sans-serif;font-weight:900;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;margin-top:14px;transition:background .15s;} .lb:hover{background:var(--red2);} /* APP */ #app{display:none;min-height:100vh;flex-direction:column;} .tb{height:54px;background:var(--s1);border-bottom:1px solid var(--b1);display:flex;align-items:center;padding:0 18px;gap:12px;position:sticky;top:0;z-index:100;} .tl{display:flex;align-items:center;gap:8px;} .tl img{height:26px;object-fit:contain;} .tln{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;} .tln span{color:var(--red);} .tdi{width:1px;height:20px;background:var(--b2);} .tr2{font-size:11px;color:var(--mu);background:var(--s2);padding:3px 10px;border-radius:20px;border:1px solid var(--b1);} .tr{margin-left:auto;display:flex;align-items:center;gap:8px;} .so{font-size:12px;color:var(--mu);background:none;border:1px solid var(--b1);padding:4px 10px;border-radius:var(--r);cursor:pointer;font-family:inherit;} .lgb{background:none;border:1px solid var(--b1);color:var(--mu);padding:4px 10px;border-radius:var(--r);cursor:pointer;font-size:12px;font-family:inherit;} .nb{position:relative;background:none;border:none;color:var(--su);cursor:pointer;padding:6px;font-size:17px;border-radius:var(--r);} .nb:hover{background:var(--s2);} .nbdg{position:absolute;top:3px;right:3px;width:7px;height:7px;background:var(--red);border-radius:50%;display:none;} .nbdg.on{display:block;} /* NOTIF PANEL */ .np{position:fixed;top:54px;right:14px;width:290px;background:var(--s1);border:1px solid var(--b2);border-radius:var(--r2);z-index:300;display:none;max-height:360px;overflow-y:auto;box-shadow:0 8px 28px rgba(0,0,0,.6);} .np.on{display:block;} .nph{padding:11px 14px;border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;} .ni2{padding:11px 14px;border-bottom:1px solid var(--b1);font-size:12px;} .ni2:last-child{border-bottom:none;} .ni2.unr{background:var(--rd);} .ni2 .nt{font-weight:600;margin-bottom:2px;} .ni2 .nb2{color:var(--su);line-height:1.4;} .ni2 .ntm{color:var(--mu);font-size:10px;margin-top:3px;} /* LAYOUT */ .sh{display:flex;flex:1;} .sb{width:206px;background:var(--s1);border-right:1px solid var(--b1);padding:12px 8px;display:flex;flex-direction:column;position:sticky;top:54px;height:calc(100vh - 54px);overflow-y:auto;} .ng{font-size:10px;color:var(--mu);letter-spacing:.08em;text-transform:uppercase;padding:10px 8px 5px;font-weight:500;} .ni{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r);cursor:pointer;color:var(--su);font-size:13px;border:1px solid transparent;transition:all .12s;} .ni:hover{background:var(--s2);color:var(--tx);} .ni.on{background:var(--rd);color:var(--red);border-color:var(--rb);font-weight:600;box-shadow:inset 3px 0 0 var(--red);} .nic{width:16px;text-align:center;font-size:13px;flex-shrink:0;} .ndv{border:none;border-top:1px solid var(--b1);margin:6px 0;} .mn{flex:1;padding:26px 30px;overflow-y:auto;} /* PAGE HEADER */ .ph{margin-bottom:22px;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px;} .pht{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;line-height:1;margin-bottom:3px;} .pht span{color:var(--red);} [lang=ar] .pht{font-family:'Cairo',sans-serif;font-size:24px;letter-spacing:0;} .phs{font-size:12px;color:var(--mu);} /* STATS */ .sts{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:10px;margin-bottom:20px;} .st{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r2);padding:15px 17px;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.14);} .st::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--b2);} .st:has(.stv.cr)::before{background:var(--red);} .st:has(.stv.cb)::before{background:var(--blue);} .st:has(.stv.cv)::before{background:var(--purple);} .st:has(.stv.cg)::before{background:var(--green);} .st:has(.stv.ct)::before{background:var(--teal);} .st:has(.stv.ca)::before{background:var(--amber);} .st:has(.stv.ck)::before{background:var(--gold);} .stl{font-size:10px;color:var(--mu);letter-spacing:.05em;text-transform:uppercase;margin-bottom:7px;} .stv{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:900;letter-spacing:-1px;line-height:1;} .cr{color:var(--red);} .cb{color:var(--blue);} .cv{color:var(--purple);} .cg{color:var(--green);} .ct{color:var(--teal);} .ca{color:var(--amber);} .ck{color:var(--gold);} /* CARD */ .cd{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r2);margin-bottom:16px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.14);} /* interactive cards lift on hover */ .shc,.qc,.tac,.pp,.dlr{transition:transform .15s ease,border-color .15s,box-shadow .15s;} .shc:hover,.qc:hover,.tac:hover,.pp:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.28);} [data-theme="light"] .shc:hover,[data-theme="light"] .qc:hover,[data-theme="light"] .tac:hover,[data-theme="light"] .pp:hover{box-shadow:0 8px 20px rgba(0,0,0,0.10);} .cdh{padding:12px 16px;border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;} /* TABLE */ .tbl{width:100%;border-collapse:collapse;} .tbl th{font-size:10px;color:var(--mu);letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;text-align:left;border-bottom:1px solid var(--b1);font-weight:500;} .tbl td{padding:13px 14px;border-bottom:1px solid var(--b1);font-size:13px;vertical-align:middle;} .tbl tbody tr{transition:background .12s;} .tbl tr:last-child td{border-bottom:none;} .tbl tbody tr:hover td{background:var(--s2);cursor:pointer;} .pn{font-weight:600;} .pc{font-size:11px;color:var(--mu);margin-top:2px;} /* BADGES */ .bdg{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;white-space:nowrap;letter-spacing:.01em;} .bdd{width:5px;height:5px;border-radius:50%;flex-shrink:0;} .si{background:rgba(136,136,136,.12);color:var(--su);} .di{background:var(--su);} .sv{background:var(--td);color:var(--teal);} .dv{background:var(--teal);} .sp{background:var(--bd);color:var(--blue);} .dp{background:var(--blue);} .ss{background:var(--rd);color:var(--red);} .ds{background:var(--red);} .so2{background:var(--pd);color:var(--purple);} .do2{background:var(--purple);} .sr{background:var(--ad);color:var(--amber);} .dr{background:var(--amber);} .sd{background:var(--gd);color:var(--green);} .dd{background:var(--green);} .sn{background:rgba(85,85,85,.15);color:var(--mu);} .dn{background:var(--mu);} .sk{background:rgba(200,168,75,.1);color:var(--gold);} .dk{background:var(--gold);} .pl{display:inline-block;font-size:11px;padding:2px 7px;border-radius:var(--r);background:var(--s3);color:var(--su);margin-right:3px;margin-bottom:2px;} .rt{display:inline-block;font-size:10px;padding:2px 7px;border-radius:20px;background:var(--rd);color:var(--red);border:1px solid var(--rb);font-weight:700;margin-left:5px;} .tk{display:inline-block;font-size:10px;padding:2px 7px;border-radius:20px;background:rgba(200,168,75,.1);color:var(--gold);border:1px solid rgba(200,168,75,.3);font-weight:700;margin-left:5px;} /* BUTTONS */ .btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:var(--r);font-size:13px;font-weight:500;cursor:pointer;border:none;font-family:inherit;transition:all .15s;} .btp{background:var(--red);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:900;letter-spacing:.04em;text-transform:uppercase;} .btp:hover{background:var(--red2);} .bts{background:var(--s2);color:var(--su);border:1px solid var(--b2);} .bts:hover{color:var(--tx);} .btg{background:transparent;color:var(--mu);} .btg:hover{color:var(--su);} .btsm{padding:5px 10px;font-size:12px;} .btgr{background:var(--green);color:#fff;} .btgr:hover{opacity:.88;} .btarch{background:rgba(85,85,85,.12);color:var(--mu);border:1px solid var(--b1);} /* AVATAR */ .av{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;} .avs{display:flex;} .avs .av{margin-left:-6px;border:2px solid var(--s1);} .avs .av:first-child{margin-left:0;} /* MODAL */ .ov{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;display:none;align-items:center;justify-content:center;padding:16px;} .ov.on{display:flex;} .mo{background:var(--s1);border:1px solid var(--b2);border-radius:var(--r2);padding:26px 30px;width:640px;max-width:100%;max-height:90vh;overflow-y:auto;position:relative;} .mx{position:absolute;top:6px;right:6px;background:none;border:none;color:var(--mu);font-size:22px;cursor:pointer;line-height:1;padding:10px 12px;z-index:5;min-width:44px;min-height:44px;} .mx:hover{color:var(--tx);} .mot{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;} .mot span{color:var(--red);} [lang=ar] .mot{font-family:'Cairo',sans-serif;letter-spacing:0;text-transform:none;} .mos{font-size:12px;color:var(--mu);margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid var(--b1);} .mot{padding-right:40px;} .fg2{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px;} .fg{display:flex;flex-direction:column;gap:5px;margin-bottom:11px;} textarea.fi{resize:vertical;min-height:70px;font-family:inherit;} .fsc{font-size:10px;color:var(--mu);letter-spacing:.06em;text-transform:uppercase;font-weight:500;margin:14px 0 8px;padding-top:12px;border-top:1px solid var(--b1);} .cr2{display:flex;flex-wrap:wrap;gap:6px;} .cp{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;border:1px solid var(--b2);font-size:12px;cursor:pointer;user-select:none;transition:all .12s;} .cp input{accent-color:var(--red);cursor:pointer;} .cp:has(input:checked){background:var(--rd);border-color:var(--rb);color:var(--red);} .moa{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--b1);} /* DETAIL */ .dg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:11px;} .df{background:var(--s2);border-radius:var(--r);padding:10px 12px;} .dfl{font-size:10px;color:var(--mu);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;} .dfv{font-size:13px;color:var(--tx);font-weight:500;line-height:1.5;} .stp{display:flex;align-items:center;overflow-x:auto;padding-bottom:4px;margin-bottom:16px;} .sn2{padding:5px 11px;border-radius:20px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--b1);color:var(--mu);white-space:nowrap;transition:all .15s;font-family:inherit;} .sn2.dn2{background:var(--gd);color:var(--green);border-color:transparent;} .sn2.cn{background:var(--rd);color:var(--red);border-color:var(--rb);} .sln{width:12px;height:1px;background:var(--b2);flex-shrink:0;} .fnf{background:rgba(200,168,75,.06);border:1px solid rgba(200,168,75,.2);} .fnf .dfl{color:var(--gold);} /* SHOOT CARD */ .shc{background:var(--s2);border:1px solid var(--b1);border-radius:var(--r2);padding:14px 16px;margin-bottom:9px;display:flex;gap:12px;cursor:pointer;transition:border-color .15s;} .shc:hover{border-color:var(--b2);} .db{background:var(--rd);border:1px solid var(--rb);border-radius:var(--r);padding:7px 10px;text-align:center;min-width:48px;flex-shrink:0;} .dd2{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:900;color:var(--red);line-height:1;} .dm{font-size:9px;color:var(--red);text-transform:uppercase;letter-spacing:.08em;margin-top:1px;} /* TASK CARD */ .tac{background:var(--s2);border:1px solid rgba(200,168,75,.25);border-radius:var(--r2);padding:14px 16px;margin-bottom:9px;cursor:pointer;transition:border-color .15s;} .tac:hover{border-color:rgba(200,168,75,.4);} /* QUEUE CARD */ .qc{background:var(--s2);border:1px solid var(--b1);border-radius:var(--r2);padding:12px 14px;margin-bottom:7px;display:flex;gap:11px;align-items:center;cursor:pointer;transition:border-color .15s;} .qc:hover{border-color:var(--b2);} .dlnr{color:var(--red);font-size:12px;font-weight:600;} .dlmd{color:var(--amber);font-size:12px;font-weight:500;} .dlok{color:var(--green);font-size:12px;} /* LINK CHIP */ .lch{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;background:var(--bd);color:var(--blue);font-size:12px;margin-right:5px;margin-bottom:4px;text-decoration:none;border:1px solid rgba(74,144,217,.25);} /* ALERTS */ .al{display:flex;gap:10px;padding:10px 14px;border-radius:var(--r);margin-bottom:11px;font-size:13px;line-height:1.5;} .alw{background:rgba(212,136,42,.1);border:1px solid rgba(212,136,42,.25);color:var(--amber);} .ali{background:var(--bd);border:1px solid rgba(74,144,217,.25);color:var(--blue);} .alg{background:var(--gd);border:1px solid rgba(62,184,122,.25);color:var(--green);} /* FILTERS */ .flt{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;} .fb{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--b1);background:transparent;color:var(--mu);transition:all .12s;font-family:inherit;} .fb:hover{border-color:var(--b2);color:var(--su);} .fb.on{background:var(--rd);color:var(--red);border-color:var(--rb);} /* PIPELINE */ .pb{display:grid;grid-template-columns:repeat(6,minmax(170px,1fr));gap:10px;overflow-x:auto;} .pc2{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r2);overflow:hidden;} .pch{padding:9px 12px;border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between;} .pcb{padding:8px;display:flex;flex-direction:column;gap:5px;} .pp{background:var(--s2);border:1px solid var(--b1);border-radius:var(--r);padding:8px 10px;cursor:pointer;transition:border-color .12s;} .pp:hover{border-color:var(--b2);} /* DAY ROW */ .dr2{display:flex;gap:8px;align-items:center;margin-bottom:7px;background:var(--s2);padding:8px 10px;border-radius:var(--r);border:1px solid var(--b1);} /* CALL SHEET */ .cs{background:#fff;color:#000;border-radius:var(--r2);overflow:hidden;margin-top:12px;} .cst{background:var(--red);color:#fff;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 16px;} .cstl{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;} .cstlo img{height:30px;filter:brightness(0) invert(1);} .cstd{text-align:right;font-size:11px;opacity:.85;} .csg{display:grid;grid-template-columns:1fr 1fr;} .csc{padding:8px 13px;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;font-size:12px;} .csc:nth-child(even){border-right:none;} .csc strong{color:var(--red);font-size:10px;display:block;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px;} .css{background:var(--red);color:#fff;padding:6px 13px;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;} .csf{padding:8px 13px;font-size:12px;border-bottom:1px solid #e5e7eb;line-height:1.6;} /* CALL SHEET MODAL */ .csb{margin-top:10px;} .csr{display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid var(--b1);} .csk{font-size:10px;color:var(--mu);text-transform:uppercase;letter-spacing:.05em;width:140px;flex-shrink:0;font-weight:500;} .csv{font-size:13px;font-weight:600;color:var(--tx);flex:1;line-height:1.4;} /* WA */ .wab{background:var(--s3);border:1px solid var(--b1);border-radius:var(--r);padding:13px 15px;font-size:13px;line-height:1.8;white-space:pre-wrap;direction:auto;max-height:300px;overflow-y:auto;} /* LOG */ .li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--b1);font-size:12px;} .lt{color:var(--mu);white-space:nowrap;min-width:90px;} .lu{font-weight:600;min-width:70px;} .la{color:var(--su);flex:1;} /* MEMBER */ .mr{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--b1);} .mr:last-child{border-bottom:none;} /* SEP */ .sep{font-size:10px;color:var(--mu);letter-spacing:.06em;text-transform:uppercase;font-weight:500;margin:16px 0 10px;padding-top:12px;border-top:1px solid var(--b1);} /* LINK ROW */ .llr{display:flex;gap:7px;align-items:center;margin-bottom:6px;} .llr input{flex:1;background:var(--s2);border:1px solid var(--b2);color:var(--tx);padding:7px 10px;border-radius:var(--r);font-size:12px;font-family:inherit;} .llr input:focus{outline:none;border-color:var(--red);} /* HAMBURGER — hidden on desktop */ .hmb{display:none;background:none;border:none;color:var(--tx);font-size:20px;cursor:pointer;padding:4px 8px;} /* ── TABLET 641–1024px ─────────────────────────────────────────────── */ @media(min-width:641px) and (max-width:1024px){ .sb{width:176px;} .mn{padding:20px 22px;} .sts{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));} .fg2{grid-template-columns:1fr 1fr;} .dg{grid-template-columns:1fr 1fr;} .pb{grid-template-columns:repeat(4,minmax(170px,1fr));overflow-x:auto;} .mo{padding:22px 24px;} .hmb{display:flex!important;} .sb{display:none;position:fixed;left:0;top:54px;z-index:90;height:calc(100vh - 54px);box-shadow:4px 0 20px rgba(0,0,0,.5);} .sb.on{display:flex;} .tdi{display:none;} } /* ── MOBILE ≤640px ─────────────────────────────────────────────────── */ @media(max-width:640px){ /* sidebar — slide-in overlay */ .sb{display:none;position:fixed;left:0;top:54px;z-index:90;width:240px;height:calc(100vh - 54px);box-shadow:4px 0 24px rgba(0,0,0,.7);} .sb.on{display:flex;} .hmb{display:flex!important;} /* topbar — slim down */ .tb{padding:0 10px;gap:6px;} .tdi,.tr2{display:none;} .tln{font-size:14px;} .tr{gap:4px;} .lgb{font-size:11px;padding:3px 8px;} .nb{font-size:15px;padding:4px;} /* hide sign-out label, show only icon */ #sobtn{font-size:0;padding:5px 7px;border-radius:var(--r);} #sobtn::before{content:'⏻';font-size:15px;} /* page title smaller on mobile */ .pht{font-size:20px!important;} .ph{margin-bottom:14px;} /* main content */ .mn{padding:14px 13px;} /* login card */ .lc{padding:28px 18px;} /* page header — stack action buttons below title */ .ph{flex-direction:column;align-items:flex-start;gap:8px;} .ph .btn,.ph button{align-self:flex-start;} /* stats — 2 columns */ .sts{grid-template-columns:1fr 1fr;gap:8px;} .stv{font-size:24px;} /* tables — fit the screen; wide lists render as cards via JS */ .tbl{min-width:0;} .tbl th,.tbl td{padding:9px 8px;font-size:12px;} /* project/shoot cards */ .shc{flex-direction:column;gap:8px;} .db{align-self:flex-start;} /* forms */ .fg2{grid-template-columns:1fr!important;} .dg{grid-template-columns:1fr!important;} /* modal — full-screen sheet on mobile */ .ov{padding:0;align-items:flex-end;} .mo{width:100%!important;max-width:100%!important;border-radius:var(--r2) var(--r2) 0 0;max-height:92vh;padding:20px 16px;} .moa{flex-wrap:wrap;} .moa .btn{flex:1;justify-content:center;} /* call sheet modal — override full-screen for print */ #cm{align-items:flex-end;} #cm .mo{border-radius:var(--r2) var(--r2) 0 0;} /* pipeline — vertical stack: one stage section under the other */ .pb{grid-template-columns:1fr!important;gap:10px;overflow-x:visible;} .pc2{min-width:0;} /* filters — wrap into rows, everything visible */ .flt{flex-wrap:wrap;overflow-x:visible;} /* stage stepper — wraps into rows, no side-scroll */ .stpw{overflow-x:visible!important;} .stpw>div{flex-wrap:wrap!important;min-width:0!important;row-gap:6px;} .stpw .sln{display:none;} /* team load — single column */ .tmgrid{grid-template-columns:1fr!important;} /* notification panel — full width */ .np{right:0;left:0;width:100%;border-radius:0 0 var(--r2) var(--r2);} /* search overlay */ #sov .sbox{width:calc(100% - 24px);} /* detail grid — single col */ .dg{grid-template-columns:1fr;} /* queue cards */ .qc{flex-wrap:wrap;} /* WA message box */ .wab{font-size:12px;} /* shoot-days editor — 4 inputs wrap into two lines */ .dr2{flex-wrap:wrap;row-gap:4px;} .dr2 input[type=date]{flex:1 1 120px;min-width:120px;} /* impersonation banner */ #impb{font-size:11px;padding:6px 10px;flex-wrap:wrap;} #impb button{padding:3px 10px;font-size:11px;} /* touch targets — comfortable heights on phones */ .btn{min-height:40px;} .btsm{min-height:36px;} .fb,.lp{min-height:36px;} .fi{min-height:44px;font-size:16px;} /* 16px also prevents iOS auto-zoom */ } /* PWA */ #pwab{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--red);color:#fff;padding:12px 18px;z-index:999;align-items:center;justify-content:space-between;gap:10px;} #pwab.on{display:flex;} .pwbtn{padding:6px 14px;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:inherit;} @media print{ body{background:#fff;} #ls,#app>.tb,.sb,.np,#pwab,.ov:not(#cm){display:none!important;} #cm{position:static!important;background:transparent!important;display:block!important;padding:0!important;z-index:auto!important;} #cm>.mo{width:100%!important;max-width:100%!important;max-height:none!important;border:none!important;padding:0!important;background:#fff!important;box-shadow:none!important;} .mx,.moa,.btn{display:none!important;} .cs{border-radius:0;} } /* SEARCH OVERLAY */ #sov{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:500;display:none;align-items:flex-start;justify-content:center;padding:80px 16px 16px;} #sov.on{display:flex;} .sbox{width:620px;max-width:100%;} .sinp{display:flex;align-items:center;gap:10px;background:var(--s2);border:1px solid var(--b2);border-radius:var(--r2);padding:12px 16px;margin-bottom:8px;} .sinp input{flex:1;background:none;border:none;color:var(--tx);font-size:16px;font-family:inherit;outline:none;} .sinp span{color:var(--mu);font-size:18px;} .sres{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r2);max-height:420px;overflow-y:auto;} .sri{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background .1s;} .sri:last-child{border-bottom:none;} .sri:hover{background:var(--s2);} .sri .sric{font-size:13px;font-weight:600;flex:1;} .sri .srim{font-size:11px;color:var(--mu);} .snon{padding:24px;text-align:center;color:var(--mu);font-size:13px;} /* COMMENTS */ .cmts{margin-top:14px;padding-top:12px;border-top:1px solid var(--b1);} .cmtl{font-size:10px;color:var(--mu);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;font-weight:500;} .cmt{display:flex;gap:9px;margin-bottom:9px;} .cmtb{background:var(--s2);border-radius:var(--r);padding:8px 11px;flex:1;} .cmtu{font-size:11px;font-weight:600;margin-bottom:2px;} .cmtx{font-size:12px;color:var(--su);line-height:1.5;} .cmtt{font-size:10px;color:var(--mu);margin-top:3px;} .cmtin{display:flex;gap:7px;margin-top:8px;} .cmtin input{flex:1;background:var(--s2);border:1px solid var(--b2);color:var(--tx);padding:8px 11px;border-radius:var(--r);font-size:13px;font-family:inherit;} .cmtin input:focus{outline:none;border-color:var(--red);} /* GEAR CHECKLIST */ .gear{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;} .gi{display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:20px;font-size:11px;cursor:pointer;border:1px solid var(--b1);background:var(--s2);color:var(--mu);user-select:none;transition:all .12s;} .gi.on{background:var(--gd);border-color:rgba(62,184,122,.4);color:var(--green);} .gi input{display:none;} /* DEADLINE CALENDAR */ .dlwk{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r2);margin-bottom:12px;overflow:hidden;} .dlwkh{padding:9px 14px;border-bottom:1px solid var(--b1);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mu);} .dlr{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background .1s;} .dlr:last-child{border-bottom:none;} .dlr:hover{background:var(--s2);} .dldt{min-width:52px;text-align:center;background:var(--s3);border-radius:var(--r);padding:5px 6px;} .dld{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;line-height:1;} .dlm{font-size:9px;text-transform:uppercase;letter-spacing:.06em;margin-top:1px;} .dlnm{font-size:13px;font-weight:600;flex:1;} .dlcl{font-size:11px;color:var(--mu);} /* REVENUE CARD */ .rv{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:16px;} .rvc{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r2);padding:12px 14px;} .rvl{font-size:10px;color:var(--mu);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;} .rvv{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;color:var(--gold);} .rvp{font-size:11px;color:var(--mu);margin-top:2px;} /* CLIENT HINT */ .chint{background:var(--bd);border:1px solid rgba(74,144,217,.3);color:var(--blue);font-size:12px;padding:5px 10px;border-radius:var(--r);margin-top:4px;display:none;}