/* Take Me CRM - UI themes.
   Brand taken from takeme.taxi (Elementor kit): primary/accent #00A6EB, text #000, background #F8F8F8, pill buttons (50px), cards 25-35px radius, font Baloo 2 (SIL OFL, self-hosted in static/fonts/).
   Two looks, chosen with <html data-theme="white|colour"> (default white). All colours are CSS variables; every text/background pairing is >= WCAG AA 4.5:1. */
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/baloo2-latin.woff2) format("woff2")}

/* ---------- theme variables ---------- */
:root,[data-theme=white]{
 --blue:#00A6EB;--blue-light:#45C6FF;--teal:#05BC9D;--gold:#BD9B51;--red:#C21F34;
 --font:"Baloo 2",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 --r:20px;--r-sm:12px;--shadow:0 1px 2px rgba(14,26,36,.05),0 6px 20px rgba(14,26,36,.05);
 --bg:#F6F8FA;--ink:#0E1A24;--muted:#56636F;--line:#E3E8ED;--link:#00668F;--focus:#005A82;
 --top-bg:#fff;--top-ink:#0E1A24;--top-sub:#56636F;--top-bd:#E3E8ED;--top-shadow:0 1px 0 rgba(14,26,36,.04);
 --side-bg:#fff;--side-bd:#E3E8ED;--nav-ink:#26343F;--nav-hover:#EAF1F6;--nav-on-bg:#0E1A24;--nav-on-ink:#fff;--navhd:#56636F;
 --card:#fff;--card-bd:#E3E8ED;--card-2:#fff;--card-3:#fff;--card-4:#fff;
 --th-bg:#EEF2F5;--th-ink:#33414C;--row-hover:#F0F8FD;--zebra:transparent;
 --field-bg:#fff;--field-bd:#8493A0;
 --btn-bg:#0E1A24;--btn-ink:#fff;--btn-hover:#2B3B48;--sec-bg:#fff;--sec-ink:#0E1A24;--sec-bd:#9AA7B3;--sec-hover:#EEF3F7;
 --go-bg:#00A6EB;--go-ink:#00131C;--go-hover:#38BBF2;
 --stat1:#fff;--stat2:#fff;--stat3:#fff;--stat4:#fff;--stat5:#fff;
 --code-bg:#E6F6FD;--code-ink:#00547A;--pre-bg:#F1F4F7;
 --seg-bg:#EEF2F5;--seg-ink:#26343F;--seg-on-bg:#0E1A24;--seg-on-ink:#fff;
 --auth-bg:radial-gradient(circle at 12% 8%,rgba(0,166,235,.16),transparent 42%),radial-gradient(circle at 92% 92%,rgba(69,198,255,.18),transparent 40%),#F6F8FA;
 --flash-ok-bg:#E3F8F3;--flash-ok-ink:#04594A;--flash-err-bg:#FDE8EB;--flash-err-ink:#8A1626;--flash-inv-bg:#E6F6FD;--flash-inv-ink:#00506E;
}
[data-theme=colour]{
 --bg:#E4F3FB;--ink:#08202E;--muted:#3E5566;--line:#B6DCEE;--link:#005C84;--focus:#06293B;
 --top-bg:#00A6EB;--top-ink:#00131C;--top-sub:#00263A;--top-bd:#0090CE;--top-shadow:0 4px 18px rgba(0,100,150,.25);
 --side-bg:#F2FAFE;--side-bd:#B6DCEE;--nav-ink:#08202E;--nav-hover:#D2ECFA;--nav-on-bg:#00A6EB;--nav-on-ink:#00131C;--navhd:#3E5566;
 --card:#F1FAFE;--card-bd:#A9D8EE;--card-2:#EAFAF5;--card-3:#FFF7E3;--card-4:#F3EEFD;
 --th-bg:#C9E8F8;--th-ink:#06293B;--row-hover:#DDF1FB;--zebra:rgba(255,255,255,.55);
 --field-bg:#fff;--field-bd:#5B7A8F;
 --btn-bg:#06293B;--btn-ink:#fff;--btn-hover:#0B4260;--sec-bg:#fff;--sec-ink:#06293B;--sec-bd:#5B7A8F;--sec-hover:#E4F4FC;
 --go-bg:#00A6EB;--go-ink:#00131C;--go-hover:#38BBF2;
 --stat1:#D3EEFB;--stat2:#CFF3E9;--stat3:#FBEAC2;--stat4:#E6DEFA;--stat5:#FAD9DF;
 --code-bg:#fff;--code-ink:#00506E;--pre-bg:#fff;
 --seg-bg:#fff;--seg-ink:#06293B;--seg-on-bg:#06293B;--seg-on-ink:#fff;
 --auth-bg:linear-gradient(160deg,#00A6EB 0%,#0097D8 55%,#0083C0 100%);
 --flash-ok-bg:#D4F4EA;--flash-ok-ink:#04503F;--flash-err-bg:#FFDDE2;--flash-err-ink:#7A1222;--flash-inv-bg:#fff;--flash-inv-ink:#00506E;
 --shadow:0 2px 4px rgba(0,80,120,.08),0 8px 24px rgba(0,80,120,.10);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:500 16px/1.55 var(--font);background:var(--bg);color:var(--ink)}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
h1{font-size:30px;line-height:1.15;margin:0 0 18px;font-weight:800;letter-spacing:-.4px}
h1::after{content:"";display:block;width:48px;height:5px;background:var(--blue);border-radius:5px;margin-top:8px}
h2{font-size:20px;margin:0 0 12px;font-weight:700;line-height:1.25}
.muted{color:var(--muted);font-size:14px}
.grow{flex:1}

/* ---------- mode banner ---------- */
.banner{padding:6px 16px;font-size:13px;font-weight:600;text-align:center}
.banner.dry{background:#000;color:#8EDBFF}.banner.live{background:var(--red);color:#fff}

/* ---------- top bar ---------- */
header.top{background:var(--top-bg);color:var(--top-ink);border-bottom:1px solid var(--top-bd);box-shadow:var(--top-shadow);position:sticky;top:0;z-index:30}
header.top .in{max-width:1380px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px}
header.top form{margin:0}
header.top .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--top-ink);flex:none}
header.top .logo img{height:44px;width:auto;display:block}
header.top .logo span{font-weight:800;font-size:18px;line-height:1.05;letter-spacing:-.2px}
header.top .logo small{display:block;font-weight:500;font-size:12px;color:var(--top-sub);letter-spacing:0}
.me{color:var(--top-ink);text-decoration:none;font-weight:700;font-size:14px;padding:4px 12px;line-height:1.1;border-radius:12px}
.me:hover{background:rgba(127,127,127,.14)}
.me small{display:block;font-weight:600;color:var(--top-sub);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
header.top .lo button{min-height:38px;padding:3px 16px;font-size:14px}
.burger{display:none;min-height:40px;padding:3px 16px}

/* theme switch (segmented control) */
.themesw{display:flex;align-items:center;gap:8px;margin:0}
.themesw .lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--top-sub)}
.seg{display:inline-flex;background:var(--seg-bg);border-radius:50px;padding:3px;border:1px solid var(--line);gap:2px}
.seg button{min-height:30px;padding:0 14px;font-size:13px;line-height:26px;font-weight:700;background:transparent;color:var(--seg-ink);border:0;border-radius:50px}
.seg button:hover{background:rgba(127,127,127,.18);color:var(--seg-ink)}
.seg button.on,.seg button.on:hover{background:var(--seg-on-bg);color:var(--seg-on-ink)}
header.top .seg{border-color:transparent}

/* list switcher */
form.lsw select{background:var(--field-bg);border:2px solid var(--blue);color:var(--ink);font-weight:700;border-radius:50px;padding:5px 14px;max-width:240px;min-height:40px}
[data-theme=colour] form.lsw select{border-color:var(--top-ink)}

/* ---------- layout: sidebar + content ---------- */
.shell{max-width:1380px;margin:0 auto;padding:24px 20px 60px;display:grid;grid-template-columns:232px minmax(0,1fr);gap:28px;align-items:start}
.shell.nonav{display:block}
main{min-width:0}
nav.main{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;background:var(--side-bg);border:1px solid var(--side-bd);border-radius:var(--r);padding:12px;box-shadow:var(--shadow)}
nav.main a{display:flex;align-items:center;gap:6px;color:var(--nav-ink);text-decoration:none;padding:9px 14px;border-radius:12px;font-weight:600;white-space:nowrap}
nav.main a:hover{background:var(--nav-hover)}
nav.main a.on{background:var(--nav-on-bg);color:var(--nav-on-ink);font-weight:700}
nav.main .adm{display:flex;flex-direction:column;gap:2px}
.navhd{display:block;margin:12px 14px 4px;padding-top:10px;border-top:1px solid var(--side-bd);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--navhd)}
.navlo{display:none;margin:0}
.badge{display:inline-block;min-width:20px;padding:0 6px;margin-left:auto;border-radius:50px;background:#FFC24D;color:#000;font-size:12px;font-weight:800;line-height:20px;text-align:center}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--card-bd);border-radius:var(--r);padding:22px;margin-bottom:20px;box-shadow:var(--shadow);overflow-x:auto}
[data-theme=colour] main>.card:nth-of-type(4n+2){background:var(--card-2)}
[data-theme=colour] main>.card:nth-of-type(4n+3){background:var(--card-3)}
[data-theme=colour] main>.card:nth-of-type(4n+4){background:var(--card-4)}
.card.accent{border-top:5px solid var(--blue)}
.card[style*="padding:0"]{padding:0;overflow:hidden;overflow-x:auto}
.review{border-left:6px solid var(--gold)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--th-bg);color:var(--th-ink);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.7px;white-space:nowrap}
th:first-child{border-top-left-radius:12px}th:last-child{border-top-right-radius:12px}
tr:nth-child(even) td{background:var(--zebra)}
tbody tr:hover td,table tr:hover td{background:var(--row-hover)}
tr:last-child td{border-bottom:0}

/* ---------- forms ---------- */
label{display:block;font-weight:600;margin:12px 0 4px}label.inline{display:inline-block;font-weight:500;margin:4px 14px 4px 0}
input[type=text],input[type=password],input[type=email],input[type=search],select,textarea,input[type=file]{padding:9px 14px;border:1.5px solid var(--field-bd);border-radius:var(--r-sm);font:inherit;background:var(--field-bg);color:var(--ink);max-width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
textarea{width:100%;font:inherit;font-size:14px;padding:10px 14px;min-width:220px}
input[type=checkbox],input[type=radio]{accent-color:#0077B3;width:18px;height:18px;vertical-align:-3px}

/* ---------- buttons ---------- */
.btn,button{background:var(--btn-bg);color:var(--btn-ink);border:2px solid transparent;border-radius:50px;padding:6px 22px;font:600 15px/1.6 var(--font);cursor:pointer;text-decoration:none;display:inline-block;transition:background .15s,box-shadow .15s,transform .05s;min-height:42px}
.btn:hover,button:hover{background:var(--btn-hover);color:var(--btn-ink);box-shadow:0 4px 12px rgba(14,26,36,.18)}
.btn:active,button:active{transform:translateY(1px)}
.btn.sec,button.sec{background:var(--sec-bg);color:var(--sec-ink);border-color:var(--sec-bd)}.btn.sec:hover,button.sec:hover{background:var(--sec-hover);color:var(--sec-ink);box-shadow:none}
.btn.go,button.go{background:var(--go-bg);color:var(--go-ink);font-weight:700}.btn.go:hover,button.go:hover{background:var(--go-hover);color:var(--go-ink)}
.btn.danger,button.danger{background:var(--red);color:#fff}.btn.danger:hover,button.danger:hover{background:#A31A2C;color:#fff}
.seg button{box-shadow:none}

/* ---------- flash ---------- */
.flash{padding:12px 18px;border-radius:var(--r-sm);margin-bottom:14px;font-weight:600;border-left:6px solid}
.flash.ok{background:var(--flash-ok-bg);color:var(--flash-ok-ink);border-color:var(--teal)}.flash.err{background:var(--flash-err-bg);color:var(--flash-err-ink);border-color:var(--red)}
.flash.invite{background:var(--flash-inv-bg);color:var(--flash-inv-ink);border-color:var(--blue);word-break:break-all}
.invitelink{width:100%;margin-top:6px;font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;padding:7px 10px;border:1.5px solid var(--field-bd);border-radius:10px;background:#fff;color:var(--ink)}

/* ---------- stat tiles ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.stat{background:var(--stat1);border:1px solid var(--card-bd);border-radius:var(--r);padding:16px 18px;text-decoration:none;color:inherit;border-bottom:5px solid var(--blue);transition:transform .15s,box-shadow .15s;box-shadow:var(--shadow)}
.stat:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(14,26,36,.12)}
.stat b{display:block;font-size:32px;line-height:1.1;font-weight:800;color:var(--ink)}.stat span{color:var(--muted);font-size:14px;font-weight:600}
.stat:nth-child(5n+2){border-bottom-color:var(--teal);background:var(--stat2)}.stat:nth-child(5n+3){border-bottom-color:var(--blue-light);background:var(--stat3)}
.stat:nth-child(5n+4){border-bottom-color:var(--gold);background:var(--stat4)}.stat:nth-child(5n+5){border-bottom-color:var(--red);background:var(--stat5)}
[data-theme=colour] .stat:nth-child(5n+1){background:var(--stat1)}
[data-theme=colour] .stat:nth-child(5n+3){background:var(--stat3)}

/* ---------- status chips ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:0 11px;border-radius:50px;font-size:12px;font-weight:700;background:#ECEFF2;color:#33414C;margin:1px 3px 1px 0;line-height:24px;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(14,26,36,.10)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.75;flex:none}
.tag.Active,.tag.sent,.tag.handled,.tag.done{background:#D5F5EE;color:#04594A}
.tag.Deactivated,.tag.cancelled{background:#E5E7EA;color:#4A5560}
.tag.failed,.tag.bounce,.tag.complaint,.tag.paused,.tag.unassigned{background:#FDE0E4;color:#8A1626}
.tag.sending,.tag.pending,.tag.approved{background:#DCF1FC;color:#00608A}
.tag.unsubscribe,.tag.manual,.tag.skipped,.tag.unsubscribed{background:#F6EEDD;color:#6E551C}
.tag.pending_approval,.tag.open{background:#FFF0CC;color:#704B00}
.tag.b2b,.tag.pilot_done{background:#E8E1F7;color:#3D2A7A}
.tag.tagx{background:#EEF1F4;color:#3A4651}
.tag.b2b::before,.tag.tagx::before{display:none}

/* ---------- misc ---------- */
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}.pager{display:flex;gap:12px;align-items:center}.pager a{font-weight:700}
iframe{width:100%;height:820px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
pre{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-width:100%;background:var(--pre-bg);padding:12px;border-radius:var(--r-sm);font-size:13px;border:1px solid var(--line)}
pre.msg{background:#fff;padding:16px;font:15px/1.5 var(--font)}
code{background:var(--code-bg);padding:1px 8px;border-radius:6px;font-size:13px;word-break:break-all;color:var(--code-ink)}
.listcard{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.listcard.cur{border-left:6px solid var(--blue);padding-left:12px}
.stepper{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px;padding:0;list-style:none}
.stepper li{flex:1 1 120px;padding:9px 10px;border-radius:50px;background:#E3E8ED;color:#33414C;font-weight:700;font-size:13px;text-align:center}
.stepper li.done{background:#D5F5EE;color:#04594A}.stepper li.now{background:var(--blue);color:#00131C}
.kv{display:grid;grid-template-columns:minmax(150px,max-content) 1fr;gap:6px 20px;margin:0}.kv dt{color:var(--muted);font-weight:600}.kv dd{margin:0}
.bar{height:10px;border-radius:6px;background:#DDE3E8;overflow:hidden}.bar i{display:block;height:100%;background:#04977F}.bar i.bad{background:#C7253E}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:14px 0 10px}.or:before,.or:after{content:"";flex:1;border-top:1px solid var(--line)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;box-sizing:border-box}
.center{max-width:440px;margin:10vh auto}

/* ---------- login / public pages ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--auth-bg)}
.auth .box{background:#fff;color:#0E1A24;border-radius:28px;padding:36px 32px;width:100%;max-width:420px;text-align:center;box-shadow:0 24px 60px rgba(0,40,70,.18);border-top:6px solid var(--blue)}
.auth .box{--ink:#0E1A24;--muted:#56636F;--line:#E3E8ED;--link:#00668F;--field-bg:#fff;--field-bd:#8493A0;--sec-bg:#fff;--sec-ink:#0E1A24;--sec-bd:#9AA7B3;--sec-hover:#EEF3F7;--btn-bg:#0E1A24;--btn-hover:#2B3B48;--flash-ok-bg:#E3F8F3;--flash-ok-ink:#04594A;--flash-err-bg:#FDE8EB;--flash-err-ink:#8A1626;--code-bg:#E6F6FD;--code-ink:#00547A;--focus:#005A82;--seg-bg:#EEF2F5;--seg-ink:#26343F;--seg-on-bg:#0E1A24;--seg-on-ink:#fff;--top-sub:#56636F}
.auth .box img{width:96px;height:auto;margin:0 auto 10px;display:block}.auth h1{font-size:26px}.auth h1::after{margin:8px auto 0}
.auth .box form{text-align:left}.auth .box input[type=password],.auth .box input[type=text]{width:100%}.auth .box button.go{width:100%;margin-top:12px}
.auth p.sub{color:var(--muted);margin:0 0 18px}
.auth .box .themesw{justify-content:center;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}

/* ---------- responsive ---------- */
@media(max-width:980px){
 .shell{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px 14px 50px}
 header.top .in{flex-wrap:wrap;padding:8px 14px;gap:10px}
 header.top .logo img{height:38px}header.top .logo small{display:none}
 .burger{display:block;order:3;margin-left:0}
 .grow{display:none}
 form.lsw{order:5;flex:1 0 100%}form.lsw select{width:100%;max-width:none}
 header.top>.in>.themesw{margin-left:auto;order:2}.themesw .lbl{display:none}
 header.top .me{order:4}header.top form.lo{display:none}
 nav.main{display:none;position:static}nav.main.open{display:flex}
 nav.main a{padding:12px 14px}
 .navlo{display:block;margin-top:8px;padding-top:10px;border-top:1px solid var(--side-bd)}
 nav.main .me-m{display:block}
}
@media(max-width:760px){
 body{font-size:16px}
 h1{font-size:25px}
 .card{padding:16px;border-radius:16px}.stat b{font-size:26px}
 .kv{grid-template-columns:1fr}
 .row>div,.row input,.row select{width:100%}.row button,.row .btn{flex:1}
 input[type=text],input[type=email],input[type=search],select{width:100%}
 table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
 table.stack tr:first-child{display:none}
 table.stack tr{padding:10px 14px;border-bottom:1px solid var(--line)}
 table.stack td{border:0;padding:2px 0;background:none!important}
 table.stack td::before{content:attr(data-label);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
 iframe{height:760px}
 .auth .box{padding:28px 20px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}