/* ============================================================
   VisionAir Office — Operations Portal
   Light, airy, premium. Built by CheatCode Solutions.
   Desktop-first for office roles · phone-first for reps.
   ============================================================ */

:root{
  --bg:#fcfdfc;
  --bg-card:#ffffff;
  --mint:#eef8f3;
  --mint-2:#ddf0e7;
  --sky:#ebf5fd;
  --sky-2:#d6eafb;
  --sand:#fbf8f1;
  --ink:#14302a;
  --ink-2:#41564e;
  --ink-3:#5f716a;
  --ink-4:#78867e;
  --line:rgba(20,48,42,.10);
  --line-2:rgba(20,48,42,.16);
  --teal:#1f9270;
  --teal-deep:#0f6b50;
  --teal-soft:#c4e8d8;
  --skyblue:#2f9fe0;
  --sky-deep:#1c6fae;
  --sky-soft:#c2e3f7;
  --sun:#f4c33f;
  --coral:#ff7a5c;
  --violet:#8a78ec;
  --danger:#d64545;
  --shadow-sm:0 1px 2px rgba(16,48,42,.05),0 4px 14px rgba(16,48,42,.05);
  --shadow:0 14px 36px -16px rgba(14,64,50,.22);
  --shadow-lg:0 40px 80px -28px rgba(14,64,50,.30);
  --radius:16px; --radius-sm:11px; --radius-lg:24px; --radius-pill:999px;
  --rainbow:linear-gradient(90deg,#ff6a6a,#ff9f43,#ffd23f,#37c97e,#3aa0e0,#8a78ec);
  --grad-tealsky:linear-gradient(120deg,var(--teal),var(--skyblue));
  --font-d:"Fraunces",Georgia,serif;
  --font-b:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --side-w:262px;
  --top-h:66px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-b);color:var(--ink);background:var(--bg);
  font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--teal-soft);color:var(--teal-deep)}
[hidden]{display:none!important}

/* ambient pastel washes + grain (whole app) */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(60vw 50vh at 10% -8%,rgba(63,174,138,.13),transparent 60%),
  radial-gradient(55vw 50vh at 102% 4%,rgba(47,159,224,.12),transparent 60%),
  radial-gradient(50vw 45vh at 50% 110%,rgba(244,195,63,.08),transparent 60%),var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#ambient{position:fixed;inset:0;z-index:-1;pointer-events:none}

h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;line-height:1.08;letter-spacing:-.012em;color:var(--ink);margin:0}

/* ============================ BOOT LOADER ============================ */
.app-loader{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:var(--bg);transition:opacity .4s ease}
.app-loader.hide{opacity:0;pointer-events:none}
.al-inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.al-inner img{width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(14,64,50,.2));animation:vaFloat 5s ease-in-out infinite}
.al-bar{width:150px;height:4px;border-radius:4px;background:var(--mint-2);overflow:hidden;position:relative}
.al-bar span{position:absolute;left:0;top:0;bottom:0;width:40%;border-radius:4px;background:var(--grad-tealsky);animation:alSlide 1.15s cubic-bezier(.5,0,.5,1) infinite}
@keyframes alSlide{0%{left:-40%}100%{left:100%}}

/* ============================ LOGIN ============================ */
.login{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:26px;position:relative}
.login-arc{position:fixed;top:-30vh;left:50%;transform:translateX(-50%);width:min(1100px,140vw);aspect-ratio:2/1;
  border-radius:50%/100% 100% 0 0;background:linear-gradient(90deg,#ffd6d6,#ffe6c9,#fff3c4,#cdeedd,#cfe7fa,#e0dbfb);
  filter:blur(12px);opacity:.55;z-index:-1;
  -webkit-mask:radial-gradient(closest-side,transparent 62%,#000 63%,#000 76%,transparent 78%);
  mask:radial-gradient(closest-side,transparent 62%,#000 63%,#000 76%,transparent 78%)}
.login-card{width:min(430px,100%);background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:clamp(28px,5vw,44px);text-align:center;position:relative;overflow:hidden}
.login-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--rainbow)}
.login-emblem{width:86px;height:86px;margin:4px auto 14px;filter:drop-shadow(0 10px 22px rgba(14,64,50,.22));
  animation:vaFloat 6s ease-in-out infinite}
@keyframes vaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.login-title{font-size:clamp(28px,5vw,34px)}
.login-title small{display:block;font-family:var(--font-b);font-weight:700;font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--teal);margin-top:8px}
.login-sub{color:var(--ink-3);font-size:14px;margin:12px 0 24px}
.login-form{display:grid;gap:14px;text-align:left}
.lf-field label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.lf-field input{width:100%;font-family:inherit;font-size:15.5px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line-2);border-radius:13px;padding:14px 16px;transition:.2s}
.lf-field input:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(31,146,112,.13)}
.login-err{display:none;background:#fdf1f0;border:1px solid rgba(214,69,69,.3);color:#a83232;border-radius:12px;
  padding:11px 14px;font-size:13.5px;font-weight:600;text-align:left}
.login-err.show{display:block}
.login-foot{margin-top:22px;font-size:12.5px;color:var(--ink-4)}
.login-foot b{color:var(--ink-3)}

/* ============================ BUTTONS ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-size:14px;
  letter-spacing:.01em;border-radius:var(--radius-pill);padding:13px 24px;border:1px solid transparent;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background .22s,color .2s;white-space:nowrap}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 12px 24px -12px rgba(15,107,80,.7)}
.btn-primary:hover{transform:translateY(-2px);background:var(--teal-deep)}
.btn-sky{background:var(--skyblue);color:#fff;box-shadow:0 12px 24px -12px rgba(28,111,174,.6)}
.btn-sky:hover{transform:translateY(-2px);background:var(--sky-deep)}
.btn-ghost{background:rgba(255,255,255,.75);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--teal);color:var(--teal-deep);box-shadow:var(--shadow-sm)}
.btn-danger{background:#fdf1f0;color:#a83232;border-color:rgba(214,69,69,.25)}
.btn-danger:hover{background:#fbe4e2}
.btn-block{display:flex;width:100%}
.btn:disabled{opacity:.55;pointer-events:none}
.btn .spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:vaSpin .7s linear infinite}
@keyframes vaSpin{to{transform:rotate(360deg)}}

/* ============================ APP SHELL (desktop / office) ============================ */
.shell{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100svh}

.side-scrim{display:none}
.side{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;background:rgba(255,255,255,.8);
  backdrop-filter:blur(14px);border-right:1px solid var(--line);z-index:60}
.side-brand{display:flex;align-items:center;gap:11px;padding:18px 18px 14px}
.side-brand img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(14,64,50,.18))}
.side-brand .bn{font-family:var(--font-d);font-weight:600;font-size:19px;line-height:1.05}
.side-brand .bn small{display:block;font-family:var(--font-b);font-weight:800;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--teal);margin-top:3px}
.side-rainbow{height:3px;background:var(--rainbow);opacity:.9;margin:0 18px;border-radius:3px}
.side-nav{flex:1;overflow-y:auto;padding:14px 12px 12px;display:flex;flex-direction:column;gap:2px}
.sn-label{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);padding:14px 10px 6px}
.sn-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;font-size:14px;font-weight:700;
  color:var(--ink-2);border:1px solid transparent;transition:.18s;position:relative;background:none;text-align:left;width:100%}
.sn-item svg{width:19px;height:19px;color:var(--ink-3);flex:0 0 auto;transition:.18s}
.sn-item:hover{background:var(--mint);color:var(--teal-deep)}
.sn-item:hover svg{color:var(--teal)}
.sn-item.active{background:var(--mint);color:var(--teal-deep);border-color:var(--teal-soft)}
.sn-item.active svg{color:var(--teal)}
.sn-item .cnt{margin-left:auto;background:var(--teal);color:#fff;font-size:11px;font-weight:800;border-radius:var(--radius-pill);
  padding:1px 8px;min-width:20px;text-align:center}
.sn-item .cnt.warn{background:var(--coral)}
.sn-item .soon{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--ink-4);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:2px 8px;text-transform:uppercase}
.side-user{border-top:1px solid var(--line);padding:14px;display:flex;align-items:center;gap:11px}
.avatar{width:38px;height:38px;border-radius:12px;background:var(--grad-tealsky);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:14px;flex:0 0 auto}
.side-user .u-name{font-size:13.5px;font-weight:800;line-height:1.2}
.side-user .u-role{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.side-user .u-out{margin-left:auto;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.side-user .u-out:hover{border-color:var(--coral);background:#fff5f2}
.side-user .u-out svg{width:17px;height:17px;color:var(--ink-3)}
.side-user .u-out:hover svg{color:var(--coral)}

.main{min-width:0;display:flex;flex-direction:column}
.top{height:var(--top-h);display:flex;align-items:center;gap:16px;padding:0 clamp(18px,3vw,34px);
  border-bottom:1px solid var(--line);background:rgba(252,253,252,.75);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50}
.top h1{font-size:21px}
.top .t-date{font-size:12.5px;font-weight:700;color:var(--ink-3);margin-left:auto;letter-spacing:.02em}
.top .t-sync{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  color:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 13px;background:#fff}
.top .t-sync .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-4)}
.top .t-sync.ok .dot{background:var(--teal);box-shadow:0 0 0 3px rgba(31,146,112,.18)}
.top .t-sync.wait .dot{background:var(--sun);box-shadow:0 0 0 3px rgba(244,195,63,.2)}
.content{flex:1;padding:clamp(18px,3vw,34px);display:flex;flex-direction:column;gap:22px;max-width:1460px;width:100%}

/* ============================ STAT TILES ============================ */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(min-width:1180px){.tiles{grid-template-columns:repeat(6,1fr)}}
.tile{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:20px 20px 18px;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tile::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-tealsky);opacity:0;transition:.3s}
.tile:hover::after{opacity:1}
.tile .t-num{font-family:var(--font-d);font-weight:600;font-size:clamp(30px,3vw,40px);line-height:1;color:var(--teal-deep)}
.tile .t-lbl{margin-top:8px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.tile .t-ic{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:11px;background:var(--mint);
  display:flex;align-items:center;justify-content:center}
.tile .t-ic svg{width:19px;height:19px;color:var(--teal)}
.tile.sky .t-num{color:var(--sky-deep)}
.tile.sky .t-ic{background:var(--sky)}
.tile.sky .t-ic svg{color:var(--skyblue)}
.tile.sun .t-ic{background:#fdf6e3}
.tile.sun .t-ic svg{color:var(--sun)}

/* ============================ CARDS / PANELS ============================ */
.panel{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.panel-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:17px}
.panel-head .ph-sub{font-size:12.5px;color:var(--ink-3);font-weight:600}
.panel-head .ph-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.panel-body{padding:20px}

/* ============================ TABLES ============================ */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);text-align:left;
  padding:11px 16px;border-bottom:1px solid var(--line);background:rgba(238,248,243,.5);white-space:nowrap}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .15s;cursor:pointer}
.tbl tbody tr:hover{background:var(--mint)}
.tbl .td-main{font-weight:800;color:var(--ink)}
.tbl .td-sub{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:1px}
.tbl .td-time{font-weight:800;color:var(--teal-deep);white-space:nowrap}

/* chips + badges */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:4px 11px;
  font-size:11.5px;font-weight:800;letter-spacing:.03em;border:1px solid transparent;white-space:nowrap}
.chip-teal{background:var(--mint);color:var(--teal-deep);border-color:var(--teal-soft)}
.chip-sky{background:var(--sky);color:var(--sky-deep);border-color:var(--sky-soft)}
.chip-sun{background:#fdf6e3;color:#8a6d1a;border-color:#f3e3b3}
.chip-coral{background:#fff0ec;color:#b4472e;border-color:#f7cfc3}
.chip-violet{background:#efedfd;color:#5a4bc4;border-color:#d9d3f8}
.chip-gray{background:var(--bg);color:var(--ink-3);border-color:var(--line-2)}
.confirm-pair{display:inline-flex;gap:5px}
.cf{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;border-radius:var(--radius-pill);padding:3px 9px}
.cf.on{background:var(--mint);color:var(--teal-deep)}
.cf.off{background:#fff0ec;color:#b4472e}

/* ============================ EMPTY STATES ============================ */
.empty{padding:clamp(40px,7vw,70px) 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.empty img{width:66px;height:66px;opacity:.5;filter:saturate(.9)}
.empty h3{font-size:20px}
.empty p{margin:0;color:var(--ink-3);font-size:14px;max-width:44ch}
.empty .chip{margin-top:4px}

/* ============================ REVEAL ============================ */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.06s}.rv[data-d="2"]{transition-delay:.12s}
.rv[data-d="3"]{transition-delay:.18s}.rv[data-d="4"]{transition-delay:.24s}

/* ============================ TOASTS ============================ */
.toast-host{position:fixed;bottom:22px;right:22px;z-index:1200;display:flex;flex-direction:column;gap:10px}
.toast{background:#fff;border:1px solid var(--line-2);border-left:4px solid var(--teal);border-radius:13px;
  box-shadow:var(--shadow);padding:13px 18px;font-size:13.5px;font-weight:700;color:var(--ink);min-width:240px;max-width:360px;
  animation:toastIn .35s cubic-bezier(.2,.7,.3,1)}
.toast.err{border-left-color:var(--danger)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ============================ MODAL ============================ */
.modal-host{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:22px}
.modal-bg{position:absolute;inset:0;background:rgba(14,48,42,.38);backdrop-filter:blur(4px)}
.modal{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  width:min(560px,100%);max-height:88svh;overflow-y:auto;padding:26px;animation:toastIn .3s cubic-bezier(.2,.7,.3,1)}

/* ============================ REP SHELL (phone-first) ============================ */
.rep-shell{min-height:100svh;display:flex;flex-direction:column;max-width:760px;margin:0 auto;width:100%}
.rep-top{display:flex;align-items:center;gap:12px;padding:16px 18px 12px;position:sticky;top:0;z-index:50;
  background:rgba(252,253,252,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.rep-top img{width:38px;height:38px;object-fit:contain}
.rep-top .rt-name{font-family:var(--font-d);font-weight:600;font-size:18px;line-height:1.1}
.rep-top .rt-name small{display:block;font-family:var(--font-b);font-weight:800;font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal)}
.rep-top .u-out{margin-left:auto;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center}
.rep-top .u-out svg{width:17px;height:17px;color:var(--ink-3)}
.rep-content{flex:1;padding:18px 18px calc(88px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));max-width:760px;margin:0 auto}
.tb-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;border-radius:12px;
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:none;border:0;transition:.18s}
.tb-item svg{width:21px;height:21px}
.tb-item.active{color:var(--teal-deep);background:var(--mint)}
.appt-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:16px 18px;display:flex;flex-direction:column;gap:9px;transition:.25s}
.appt-card:active{transform:scale(.985)}
.appt-card .ac-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.appt-card .ac-time{font-family:var(--font-d);font-weight:600;font-size:19px;color:var(--teal-deep)}
.appt-card .ac-name{font-weight:800;font-size:16px}
.appt-card .ac-meta{font-size:12.5px;color:var(--ink-3);font-weight:600}

/* ============================ MISC ============================ */
.note-band{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);padding:15px 18px;
  display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink-2)}
.note-band svg{width:20px;height:20px;color:var(--sun);flex:0 0 auto;margin-top:1px}
.skel{background:linear-gradient(90deg,var(--mint) 25%,var(--mint-2) 50%,var(--mint) 75%);background-size:200% 100%;
  animation:skel 1.4s infinite;border-radius:8px}
@keyframes skel{to{background-position:-200% 0}}
.view-loading{display:grid;gap:14px;padding:4px}
.view-loading .sk-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(min-width:1180px){.view-loading .sk-tiles{grid-template-columns:repeat(6,1fr)}}
.view-loading .sk-tile{height:104px;border-radius:var(--radius)}
.view-loading .sk-panel{height:300px;border-radius:var(--radius)}
.rep-content .view-loading .sk-row{height:96px;border-radius:var(--radius)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* ============================ MODAL FORMS + ACTIONS ============================ */
.modal-head{margin-bottom:16px}
.modal-head h3{font-size:22px}
.modal-head p{margin:7px 0 0;font-size:13.5px;color:var(--ink-3);font-weight:600}
.m-sec{padding:14px 0;border-top:1px solid var(--line)}
.m-sec h4{font-family:var(--font-b);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px}
.m-sec h4 .td-sub{text-transform:none;letter-spacing:0;font-weight:600}
/* Key/value rows inside a modal section (sale record, etc). Wraps to two lines on
   a phone rather than squeezing the value into a sliver. */
.m-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;border-bottom:1px solid var(--line)}
.m-row:last-child{border-bottom:0}
.m-k{font-size:12.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.m-v{font-size:13.5px;color:var(--ink);text-align:right;word-break:break-word}
@media (max-width:520px){.m-row{flex-direction:column;gap:2px}.m-v{text-align:left}}
.m-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.m-btns{display:flex;gap:8px;flex-wrap:wrap}
.btn-sm{padding:10px 16px;font-size:13px}
.btn-xs{padding:6px 12px;font-size:11.5px;border-radius:9px}
.btn-sm svg,.btn-xs svg{width:15px;height:15px}
.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.form-grid2 .field{grid-column:1/-1}
.form-grid2 .field.half{grid-column:auto}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.field label{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.field label .req{color:var(--coral)}
.field input,.field select,.field textarea{font-family:inherit;font-size:15px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;transition:.2s;width:100%}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(31,146,112,.12)}
.field .hint{font-size:12px;color:var(--ink-4);font-weight:600;text-transform:none;letter-spacing:0}
.seg{display:flex;gap:6px}
.seg button{flex:1;padding:11px 10px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);
  font-weight:800;font-size:13.5px;color:var(--ink-2);transition:.18s}
.seg button.on{background:var(--mint);border-color:var(--teal);color:var(--teal-deep)}
.status-sel{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink-2);background:#fff;
  border:1px solid var(--line-2);border-radius:9px;padding:6px 9px}
.tel{color:var(--sky-deep);font-weight:700}
.ph-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px}
.ph-thumbs img{width:74px;height:74px;object-fit:cover;border-radius:11px;border:1px solid var(--line-2);transition:.2s}
.ph-thumbs a:hover img{transform:scale(1.05);border-color:var(--teal)}
.upload-btn{position:relative;overflow:hidden;display:inline-flex}
.review-card{gap:11px}
.bg-bar{height:8px;border-radius:8px;background:var(--mint-2);overflow:hidden}
.bg-bar span{display:block;height:100%;border-radius:8px;background:var(--grad-tealsky);transition:width .6s cubic-bezier(.2,.7,.3,1)}
.ac-btn{text-align:left;width:100%;font-family:inherit;color:inherit;font-size:inherit;cursor:pointer}
.nb-link{width:100%;text-align:left;font-family:inherit;font-size:13.5px;color:var(--ink-2);cursor:pointer;transition:.2s}
.nb-link:hover{border-color:var(--teal);transform:translateY(-2px)}
.sn-gear{opacity:.85}

/* ============================ RESPONSIVE ============================ */
.mob-nav-tog{display:none}
@media(max-width:1020px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(84vw,300px);transform:translateX(-102%);transition:transform .32s cubic-bezier(.2,.7,.3,1);box-shadow:var(--shadow-lg)}
  .side.open{transform:none}
  .side-scrim{display:block;position:fixed;inset:0;background:rgba(14,48,42,.35);backdrop-filter:blur(2px);z-index:55;opacity:0;pointer-events:none;transition:.25s}
  .side-scrim.show{opacity:1;pointer-events:auto}
  .mob-nav-tog{display:flex;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);background:#fff;
    align-items:center;justify-content:center}
  .mob-nav-tog svg{width:21px;height:21px}
  .grid-2{grid-template-columns:1fr}
}
@media(max-width:560px){
  .content{padding:16px}
  .tiles{grid-template-columns:1fr 1fr}
  .top h1{font-size:18px}
  .top .t-date{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

/* ---------- Wants · Gots · Needs board ---------- */
/* Column widths must come from the LAYOUT, not from the content. Without
   table-layout:fixed a long customer name ("Garcia, Bree & Frudakis, Kyle")
   widens its own slot column and shoves every later column out from under its
   header, so the time headings stop lining up with the cells beneath them.
   Fixed layout + an explicit DAY/OFF-SLOT width divides the rest evenly, and
   the chip inside each cell does the truncating instead of the column. */
.wgn-tbl{table-layout:fixed;width:100%;min-width:940px}
.wgn-tbl td,.wgn-tbl th{padding:9px 10px;white-space:nowrap;overflow:hidden}
.wgn-tbl th:first-child,.wgn-tbl td:first-child{width:118px}
.wgn-tbl th:last-child,.wgn-tbl td:last-child{width:190px}
.wgn-tbl th{text-align:center}
.wgn-tbl th:first-child,.wgn-tbl td:first-child,
.wgn-tbl th:last-child,.wgn-tbl td:last-child{text-align:left}
.wgn-tbl tbody tr{cursor:default}
.wgn-cell{text-align:center}
.wgn{display:inline-flex;align-items:center;gap:5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  padding:4px 8px;border-radius:8px;font-size:11.5px;font-weight:700;border:1px solid transparent}
.wgn-got{background:var(--mint);color:var(--teal-deep);border-color:var(--teal-soft)}
.wgn-need{background:#fdf6e3;color:#8a6d1a;border-color:#f3e3b3}
.wgn-no{background:transparent;color:var(--ink-4);border-color:var(--line-2);font-weight:600}
.wgn-extra{background:var(--sky);color:var(--sky-deep);border-color:var(--sky-soft)}
.wgn-zone{display:block;margin-top:3px;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4)}
.wgn-today td{background:var(--mint)}
.wgn-key{display:flex;flex-wrap:wrap;gap:8px;padding-top:0}
@media (max-width:680px){
  .wgn-tbl td,.wgn-tbl th{padding:7px 8px}
  .wgn{max-width:100%;font-size:10.5px;padding:3px 6px}
  .wgn-tbl{min-width:760px}
  .wgn-tbl th:first-child,.wgn-tbl td:first-child{width:92px}
  .wgn-tbl th:last-child,.wgn-tbl td:last-child{width:130px}
}

/* ---- Digital 12 wizard: one question-set per screen, thumb-sized targets ---- */
.d12-step{display:flex;flex-direction:column;gap:16px}
.d12-head h3{font-family:var(--font-b);font-size:22px;margin:2px 0 0}
.d12-head p{margin:6px 0 0;color:var(--ink-2);font-size:14px}
.d12-count{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--brand);text-transform:uppercase}
/* The primary button must NEVER need a scroll to reach. The modal caps at 88svh
   and scrolls, so on a 375x812 phone the first screen's CTA sat 17px below the
   fold — the rep is one-handed in someone's living room and the main action was
   clipped. Pin the action bar to the bottom of the scroll area, bled to the
   modal's edges (it has 26px padding) and padded for the iPhone home indicator. */
.d12-actions{
  position:sticky;
  bottom:-26px;
  margin:8px -26px -26px;
  padding:14px 26px calc(18px + env(safe-area-inset-bottom,0px));
  background:#fff;
  border-top:1px solid var(--line);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
.d12-yn{display:flex;flex-direction:column;gap:10px;margin:4px 0 2px}
.d12-q{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--ink)}
.d12-yn .btn{width:100%;padding:16px;font-size:16px}
.d12-batch{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.d12-b-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px}
/* In the home the rep is one-handed on a phone: everything is reachable and big. */
@media (max-width:680px){
  .d12-step .form-grid2{grid-template-columns:1fr}
  .d12-step input,.d12-step select,.d12-step textarea{font-size:16px;padding:14px} /* 16px stops iOS zoom-on-focus */
  .d12-head h3{font-size:20px}
}

/* Names Queue — Maya's worklist */
.nq-strip{display:flex;gap:10px;flex-wrap:wrap;padding:0 0 14px}
.nq-stat{flex:1 1 110px;background:var(--mint);border:1px solid var(--teal-soft);border-radius:12px;padding:10px 14px}
.nq-stat b{display:block;font-family:var(--font-d);font-size:22px;line-height:1.1;color:var(--teal-deep)}
.nq-stat span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.nq-tbl td{vertical-align:top}
.nq-act{white-space:nowrap;text-align:right}
.nq-act .btn{margin-left:6px}
@media (max-width:680px){ .nq-act{text-align:left} .nq-act .btn{margin:4px 6px 0 0} }
.d12-warn{margin-top:10px;padding:10px 12px;border-radius:10px;background:#fdf6e3;border:1px solid #f3e3b3;color:#8a6d1a;font-size:13.5px}


/* ===== Team invite · permissions (ported 2026-10-06) ===== */
.invite{width:min(640px,100%);max-height:min(86vh,820px);overflow:auto;padding:4px}
.invite-head{margin-bottom:18px}
.invite-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.invite-head h3{font-size:24px;margin:0}
.invite-head p{margin:8px 0 0;font-size:13.5px;color:var(--ink-3);font-weight:600;line-height:1.45}
.invite-steps{list-style:none;display:flex;gap:6px;padding:16px 0 0;margin:0;flex-wrap:wrap}
.invite-steps li{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:12px;font-weight:700;color:var(--ink-3)}
.invite-steps li .is-n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);font-size:11px}
.invite-steps li.on{background:var(--mint);border-color:var(--teal-soft);color:var(--teal-deep)}
.invite-steps li.on .is-n{background:var(--teal);border-color:var(--teal);color:#fff}
.invite-steps li.done{background:#eaf6ef;border-color:var(--teal-soft);color:var(--teal-deep)}
.invite-steps li.done .is-n{background:var(--teal);border-color:var(--teal);color:#fff}
.invite-body{min-height:220px}
.invite-actions{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,#fff 28%);padding-top:16px;margin-top:8px}
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.role-card{text-align:left;padding:14px;border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;transition:.15s ease;font:inherit;color:inherit}
.role-card:hover{border-color:var(--teal-soft);transform:translateY(-1px)}
.role-card.on{border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,146,112,.15);background:#f4fbf7}
.role-card .rc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.role-card .rc-top b{font-size:15px}
.role-card .rc-sub{font-size:12px;color:var(--ink-3);font-weight:600;margin-bottom:10px}
.role-card ul{margin:0;padding-left:16px;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.role-card li{margin:3px 0}
.perm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.perm-block{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:12px;background:#fff}
.perm-h{padding:10px 14px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:var(--bg);border-bottom:1px solid var(--line)}
.perm-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid var(--line)}
.perm-row:last-child{border-bottom:0}
.perm-copy{flex:1;min-width:0}
.perm-copy b{display:block;font-size:13.5px}
.perm-copy span{display:block;font-size:12px;color:var(--ink-3);font-weight:600;margin-top:2px}
.perm-tog{width:44px;height:26px;border-radius:999px;border:1px solid var(--line-2);background:#e6ebe8;position:relative;flex:0 0 auto;cursor:pointer;padding:0;transition:.15s ease}
.perm-tog.on{background:var(--teal);border-color:var(--teal)}
.perm-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:.15s ease}
.perm-tog.on .perm-knob{left:20px}
.review-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.rv-row{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px}
.rv-row:last-child{border-bottom:0}
.rv-row span{color:var(--ink-3);font-weight:700}
.rv-row b{font-weight:700;word-break:break-word}
.invite-foot{margin:14px 0 0;font-size:12.5px;color:var(--ink-3);font-weight:600}
.invite-foot code{font-size:11.5px;background:var(--bg);padding:1px 6px;border-radius:6px;border:1px solid var(--line)}

/* ===== People filter (owner/manager data scope) ===== */
.people-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius)}
.people-filter .pf-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.people-filter .pf-chip{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink-2);font:inherit}
.people-filter .pf-chip:hover{border-color:var(--teal-soft)}
.people-filter .pf-chip.on{background:var(--mint);border-color:var(--teal);color:var(--teal-deep)}

/* ===== Opportunities cards ===== */
.opp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;padding:14px}
.opp-card{text-align:left;width:100%}

@media (max-width:720px){
  .role-grid{grid-template-columns:1fr}
  .rv-row{grid-template-columns:1fr}
  .opp-grid{grid-template-columns:1fr}
}


/* Library + Integrations sync stream chips (2026-10-06) */
.sync-stream-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;padding:14px}
.sync-stream-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 10px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.sync-stream-label{font-weight:600;font-size:13px;min-width:7.5rem}
.lib-row{align-items:center}
.lib-seg{flex-wrap:wrap}