/* TheDOJOApp Sales center - design system v3.3 tokens.
   No Metronic here, so no !important arms race. Same values, clean cascade. */

:root{
  --dj-brand:#0E8F84;  --dj-brand-hover:#0B7A70;  --dj-brand-dark:#0B6B63;
  --dj-brand-tint:#E6F4F2;  --dj-brand-tint-2:#CDE9E5;
  --dj-page:#EDF1F5;   --dj-card:#FFFFFF;
  --dj-line:#DDE3EA;   --dj-line-soft:#ECF0F4;   --dj-hover:#F7F9FB;
  --dj-text:#111826;   --dj-text-2:#49525F;      --dj-text-3:#6E7886;
  --dj-ok:#137A45;     --dj-ok-tint:#E7F6ED;
  --dj-warn:#A55A08;   --dj-warn-tint:#FDF2E3;
  --dj-bad:#B0261B;    --dj-bad-tint:#FDEDEB;
  --dj-info:#0F5B77;   --dj-info-tint:#EDF6FA;
  --dj-r:8px;          --dj-r-lg:12px;   --dj-h:38px;
  --side:252px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--dj-page); color:var(--dj-text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--dj-brand-dark);}
:focus-visible{outline:2px solid var(--dj-brand); outline-offset:2px;}

/* ---------- banners ---------- */
.banner{
  height:30px; display:flex; align-items:center; justify-content:center; gap:18px;
  font-size:12px; font-weight:600; position:fixed; top:0; left:0; right:0; z-index:80;
  background:#3A2E14; color:#E0B45F;
}
.banner span{white-space:nowrap;}

/* ---------- sidebar ---------- */
.djs{position:fixed; top:var(--top); left:0; bottom:0; width:var(--side); z-index:60; background:#0B1220; overflow-y:auto; padding-bottom:24px;}
.djs-brand{height:56px; display:flex; align-items:center; gap:9px; padding:0 16px; border-bottom:1px solid #263148; color:#fff; font-size:15px; font-weight:700;}
.djs-mark{width:26px; height:26px; border-radius:7px; object-fit:cover; display:block;} /* v1.8: the real logo, app-icon style */
.djs-group{color:#68738A; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; padding:16px 16px 6px;}
.djs-item{display:flex; align-items:center; gap:10px; padding:9px 16px; color:#B4BECC; font-size:14.5px; text-decoration:none;}
.djs-item:hover{color:#fff; background:#182234;}
.djs-item.is-active{background:var(--dj-brand); color:#fff; font-weight:600;}
.djs-item svg{flex:0 0 18px; width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7;}
.djs-soon{margin-left:auto; font-size:10px; color:#68738A; letter-spacing:.04em;}

/* ---------- header ---------- */
.hdr{position:fixed; top:var(--top); left:var(--side); right:0; height:52px; z-index:50; background:#fff; border-bottom:1px solid var(--dj-line); display:flex; align-items:center; padding:0 20px 0 14px;}
.hdr-pill{background:var(--dj-brand-tint); border:1px solid var(--dj-brand-tint-2); color:var(--dj-brand-dark); font-size:12px; font-weight:700; letter-spacing:.05em; padding:4px 10px; border-radius:999px;}
.hdr-right{margin-left:auto; display:flex; align-items:center; gap:9px;}
.hdr-av{width:26px; height:26px; border-radius:999px; background:var(--dj-brand); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.hdr-name{font-size:14px; color:var(--dj-text-2);}
.hdr form{margin:0;}
.linkbtn{border:0; background:none; font:inherit; font-size:13px; color:var(--dj-text-3); cursor:pointer; padding:0;}
.linkbtn:hover{color:var(--dj-text);}

/* ---------- page ---------- */
.page{margin-left:var(--side); padding:calc(var(--top) + 52px + 22px) 24px 60px;}
.page-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; flex-wrap:wrap;}
h1{margin:0; font-size:22px; font-weight:700; letter-spacing:-.01em;}
h2{margin:0 0 10px; font-size:16px; font-weight:700;}
.page-sub{margin:3px 0 0; font-size:13.5px; color:var(--dj-text-2);}
.page-actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap;}

/* ---------- buttons / forms ---------- */
.btn{height:38px; padding:0 14px; border-radius:var(--dj-r); font-size:14px; font-weight:500; display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:inherit; background:var(--dj-card); border:1px solid var(--dj-line); color:var(--dj-text); text-decoration:none;}
.btn:hover{background:var(--dj-page);}
.btn-primary{background:var(--dj-brand); border-color:var(--dj-brand); color:#fff; font-weight:600;}
.btn-primary:hover{background:var(--dj-brand-hover);}
.btn-primary[disabled]{opacity:.45; cursor:not-allowed;}
.btn-danger{color:var(--dj-bad);}
.btn-danger:hover{background:var(--dj-bad-tint);}
.btn-sm{height:31px; padding:0 11px; font-size:13px;}
.btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8;}
label.fl{display:block; font-size:13px; font-weight:600; color:var(--dj-text-2); margin:0 0 5px;}
.req{color:var(--dj-bad); font-weight:700;}
.input,.select,.textarea{width:100%; border:1px solid var(--dj-line); background:#fff; border-radius:var(--dj-r); padding:0 12px; font-size:14px; font-family:inherit; color:var(--dj-text); height:38px;}
.textarea{height:auto; padding:9px 12px; line-height:1.6; resize:vertical;}
.field{margin-bottom:14px;}
.hint{font-size:12.5px; color:var(--dj-text-3); margin-top:5px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}

/* ---------- how to use ---------- */
details.how{background:var(--dj-card); border:1px solid var(--dj-line); border-radius:var(--dj-r-lg); padding:11px 16px; margin-bottom:16px;}
details.how summary{cursor:pointer; font-size:13.5px; font-weight:600; list-style:none; display:flex; align-items:center; gap:7px;}
details.how summary::-webkit-details-marker{display:none;}
details.how summary b{color:var(--dj-brand); font-size:14px;}
details.how p{margin:10px 0 0; font-size:13.5px; color:var(--dj-text-2); line-height:1.65;}

/* ---------- kpi ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:18px;}
.kpi{background:var(--dj-card); border:1px solid var(--dj-line); border-radius:var(--dj-r-lg); padding:15px 16px;}
.kpi-l{font-size:13px; font-weight:600; color:var(--dj-text-2); display:flex; align-items:center; gap:6px;}
.kpi-v{font-size:26px; font-weight:700; margin:6px 0 3px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.kpi-v.is-empty{color:var(--dj-text-3);}
.kpi-f{font-size:12.5px; color:var(--dj-text-3); font-variant-numeric:tabular-nums;}
.up{color:var(--dj-ok); font-weight:600;}
.down{color:var(--dj-bad); font-weight:600;}
.nc{background:#F0F3F7; color:#8A94A3; font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap;}

/* ---------- toolbar ---------- */
.toolbar{display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.toolbar form{display:flex; gap:8px; margin:0;}
.search{height:38px; border:1px solid var(--dj-line); background:#fff; border-radius:var(--dj-r); padding:0 12px; font-size:14px; width:250px; font-family:inherit;}
.seg{display:flex; border:1px solid var(--dj-line); background:#fff; border-radius:var(--dj-r); overflow:hidden;}
.seg a{height:36px; padding:0 13px; display:flex; align-items:center; font-size:13.5px; color:var(--dj-text-2); text-decoration:none; border-right:1px solid var(--dj-line);}
.seg a:last-child{border-right:0;}
.seg a.is-on{background:var(--dj-brand-tint); color:var(--dj-brand-dark); font-weight:600;}

/* ---------- board ---------- */
.board-wrap{overflow-x:auto; padding-bottom:8px;}
.board{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(212px,1fr); gap:12px; align-items:start; min-width:1330px;}
.col{background:var(--dj-line-soft); border:1px solid var(--dj-line); border-radius:var(--dj-r-lg); padding:10px;}
.col-h{display:flex; align-items:center; gap:7px; margin-bottom:9px; padding:0 2px;}
.col-h b{font-size:13.5px; font-weight:700;}
.col-n{background:#fff; border:1px solid var(--dj-line); color:var(--dj-text-2); font-size:12px; font-weight:600; padding:1px 8px; border-radius:999px; font-variant-numeric:tabular-nums;}
.card{display:block; background:#fff; border:1px solid var(--dj-line); border-radius:var(--dj-r); padding:11px 12px; margin-bottom:8px; text-decoration:none; color:inherit;}
.card:hover{border-color:var(--dj-brand-tint-2); background:var(--dj-hover);}
.card-t{font-size:14px; font-weight:600; line-height:1.35;}
.card-s{font-size:12.5px; color:var(--dj-text-2); margin-top:2px;}
.card-m{display:flex; align-items:center; gap:6px; margin-top:9px; flex-wrap:wrap;}
.col-empty{font-size:12.5px; color:var(--dj-text-3); text-align:center; padding:16px 8px; border:1px dashed var(--dj-line); border-radius:var(--dj-r); background:#fff;}

/* ---------- chips ---------- */
.chip{font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; display:inline-flex; align-items:center; gap:4px;}
.chip-ok{background:var(--dj-ok-tint); color:var(--dj-ok);}
.chip-info{background:var(--dj-info-tint); color:var(--dj-info);}
.chip-warn{background:var(--dj-warn-tint); color:var(--dj-warn);}
.chip-bad{background:var(--dj-bad-tint); color:var(--dj-bad);}
.chip-mute{background:#F0F3F7; color:#8A94A3;}
.rep-av{width:22px; height:22px; border-radius:999px; background:var(--dj-brand-tint); color:var(--dj-brand-dark); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-left:auto;}
.rep-av.is-none{background:#F0F3F7; color:#8A94A3;}

/* ---------- panel / table ---------- */
.panel{background:var(--dj-card); border:1px solid var(--dj-line); border-radius:var(--dj-r-lg); margin-bottom:16px;}
.panel-h{padding:13px 16px; border-bottom:1px solid var(--dj-line); display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.panel-h b{font-size:14.5px; font-weight:700;}
.panel-h .right{margin-left:auto; display:flex; align-items:center; gap:8px;}
.panel-b{padding:16px;}
table{width:100%; border-collapse:collapse;}
th{font-size:12.5px; font-weight:600; color:var(--dj-text-2); text-align:left; padding:9px 16px; border-bottom:1px solid var(--dj-line); background:var(--dj-hover); white-space:nowrap;}
td{font-size:14px; padding:11px 16px; border-bottom:1px solid var(--dj-line-soft); vertical-align:middle;}
tr:last-child td{border-bottom:0;}
tbody tr:hover{background:var(--dj-hover);}
.num{text-align:right; font-variant-numeric:tabular-nums;}
.mute{color:var(--dj-text-3);}

/* ---------- detail ---------- */
.two{display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:16px; align-items:start;}
.stage-bar{display:flex; gap:8px; margin-bottom:16px;}
.stage-bar span{flex:1; font-size:12.5px; font-weight:600; color:var(--dj-text-3);}
.stage-bar span.on{color:var(--dj-brand-dark);}
.stage-bar i{display:block; height:5px; background:var(--dj-line); border-radius:999px; margin-bottom:5px;}
.stage-bar span.on i{background:var(--dj-brand);}
.tl{list-style:none; margin:0; padding:0;}
.tl li{display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--dj-line-soft);}
.tl li:last-child{border-bottom:0;}
.tl-ic{flex:0 0 30px; width:30px; height:30px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:var(--dj-brand-tint); color:var(--dj-brand-dark); font-size:12px; font-weight:700;}
.tl-t{font-size:14px; font-weight:600;}
.tl-d{font-size:13px; color:var(--dj-text-2); margin-top:2px; line-height:1.55; white-space:pre-wrap;}
.tl-w{font-size:12.5px; color:var(--dj-text-3); margin-top:3px; font-variant-numeric:tabular-nums;}
.kv{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--dj-line-soft); font-size:14px;}
.kv:last-child{border-bottom:0;}
.kv span{color:var(--dj-text-2); font-size:13.5px;}
.kv b{font-weight:600; text-align:right;}

/* ---------- flash ---------- */
.flash{border-radius:var(--dj-r-lg); padding:11px 15px; font-size:13.5px; margin-bottom:16px; border:1px solid var(--dj-line);}
.flash-ok{background:var(--dj-ok-tint); color:var(--dj-ok);}
.flash-bad{background:var(--dj-bad-tint); color:var(--dj-bad);}

/* ---------- login ---------- */
.login{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.login-card{background:#fff; border:1px solid var(--dj-line); border-radius:var(--dj-r-lg); padding:34px 32px; width:100%; max-width:400px; text-align:center;}
.login-card h1{font-size:20px; margin-bottom:6px;}
.login-card p{font-size:14px; color:var(--dj-text-2); margin:0 0 22px;}

.blank{background:var(--dj-card); border:1px solid var(--dj-line); border-radius:var(--dj-r-lg); padding:44px 24px; text-align:center;}
.blank h3{margin:0 0 6px; font-size:16px; font-weight:700;}
.blank p{margin:0 auto 16px; font-size:14px; color:var(--dj-text-2); max-width:520px; line-height:1.65;}

@media (max-width:1200px){ .two{grid-template-columns:1fr;} .row3{grid-template-columns:1fr;} }

/* ---------- today ---------- */
.urgent{background:var(--dj-card); border:1px solid var(--dj-line); border-radius:var(--dj-r-lg); margin-bottom:16px; overflow:hidden;}
.urgent-h{padding:13px 16px; border-bottom:1px solid var(--dj-line); display:flex; align-items:center; gap:10px;}
.urgent-h b{font-size:14.5px;}
.urgent-h .right{margin-left:auto; font-size:12.5px; color:var(--dj-text-3);}
.row-lead{display:flex; align-items:flex-start; gap:14px; padding:14px 16px; border-bottom:1px solid var(--dj-line-soft);}
.row-lead:last-child{border-bottom:0;}
.row-lead:hover{background:var(--dj-hover);}
.rl-main{flex:1; min-width:0;}
.rl-t{font-size:15px; font-weight:600;}
.rl-t a{color:inherit; text-decoration:none;}
.rl-t a:hover{color:var(--dj-brand-dark);}
.rl-s{font-size:13px; color:var(--dj-text-2); margin-top:2px;}
.rl-m{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; align-items:center;}
.rl-act{flex:0 0 auto; display:flex; gap:6px; align-items:flex-start;}
.callbox{background:var(--dj-page); border-top:1px solid var(--dj-line); padding:12px 16px; display:none;}
.callbox.is-on{display:block;}
.callbox form{display:grid; grid-template-columns:170px 1fr 150px auto; gap:8px; align-items:center;}
@media (max-width:900px){ .callbox form{grid-template-columns:1fr;} }
.zero{padding:26px 16px; text-align:center; color:var(--dj-text-3); font-size:13.5px;}
.msgrail a{display:flex; align-items:center; gap:8px; padding:11px 16px; border-bottom:1px solid var(--dj-line-soft); font-size:14px; color:var(--dj-text); text-decoration:none;}
.msgrail a:last-child{border-bottom:0;}
.msgrail a:hover{background:var(--dj-hover);}
.msgrail a.is-on{background:var(--dj-brand-tint); color:var(--dj-brand-dark); font-weight:600;}
.msgrail em{margin-left:auto; font-style:normal; font-size:12.5px; color:var(--dj-text-3);}
.two-rail{display:grid; grid-template-columns:280px minmax(0,1fr); gap:16px; align-items:start;}
@media (max-width:1100px){ .two-rail{grid-template-columns:1fr;} }
.msgbody{white-space:pre-wrap; font-size:13.5px; color:var(--dj-text-2); line-height:1.6; margin-top:6px;}
.bar{height:8px; background:var(--dj-line-soft); border-radius:999px; overflow:hidden;}
.bar i{display:block; height:100%; background:var(--dj-brand);}
.hdr .btn-sm{margin-left:6px;}
.exrow{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--dj-line-soft);}
.exrow:last-of-type{border-bottom:0;}
.daygrid{display:grid; grid-template-columns:110px 1fr; gap:9px 12px; align-items:center;}

/* ---------- sidebar tail ---------- */
.djs-sep{height:1px; background:#1B2537; margin:14px 16px 8px;}
.djs-item.is-soon{color:#5A6579; cursor:default;}
.djs-item.is-soon:hover{background:none; color:#5A6579;}

/* ---------- month calendar (public booking page) ---------- */
.cal{width:100%; max-width:340px; user-select:none;}
.cal-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.cal-h b{font-size:15px; font-weight:700;}
.cal-nav{width:30px; height:30px; border:1px solid var(--dj-line); background:#fff; border-radius:var(--dj-r); font-size:17px; line-height:1; color:var(--dj-text-2); cursor:pointer; font-family:inherit;}
.cal-nav:hover:not(:disabled){border-color:var(--dj-brand); color:var(--dj-brand-dark);}
.cal-nav:disabled{opacity:.32; cursor:default;}
.cal-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px;}
.cal-dow span{text-align:center; font-size:11.5px; font-weight:700; color:var(--dj-text-3); letter-spacing:.04em; padding:4px 0;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.cal-d{height:40px; border:1px solid transparent; background:none; border-radius:var(--dj-r); font-size:14px; font-family:inherit; color:var(--dj-text-3); position:relative; padding:0;}
.cal-d.is-out{visibility:hidden;}
/* A date we are open on: the only thing that looks clickable. */
.cal-d.is-open{background:var(--dj-brand-tint); border-color:var(--dj-brand-tint-2); color:var(--dj-brand-dark); font-weight:600; cursor:pointer;}
.cal-d.is-open:hover{background:var(--dj-brand-tint-2);}
/* Closed on purpose - greyed AND struck through, never colour alone. */
.cal-d.is-closed{color:var(--dj-text-3); background:var(--dj-line-soft); text-decoration:line-through; cursor:pointer;}
.cal-d.is-closed:hover{border-color:var(--dj-line);}
.cal-d.is-off{color:#C3CAD4;}
.cal-d.is-sel{background:var(--dj-brand); border-color:var(--dj-brand); color:#fff; font-weight:700; text-decoration:none;}
.cal-d.is-today::after{content:''; position:absolute; left:50%; bottom:5px; width:4px; height:4px; margin-left:-2px; border-radius:999px; background:currentColor; opacity:.55;}
.cal-key{display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--dj-text-2);}
.cal-key i{width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; border:1px solid var(--dj-line);}
.cal-key .k-open{background:var(--dj-brand-tint); border-color:var(--dj-brand-tint-2);}
.cal-key .k-closed{background:var(--dj-line-soft);}

/* ---------- click-to-pick weekly times ---------- */

/* ---------- weekly schedule (one row per weekday, WCMA console layout) ---------- */
.weekrow{display:grid; grid-template-columns:112px minmax(0,1fr); gap:12px; align-items:start; padding:11px 0; border-bottom:1px solid var(--dj-line-soft);}
.weekrow:last-child{border-bottom:0;}
.wday{font-size:14px; font-weight:600; color:var(--dj-text); padding-top:7px;}
.wslots{display:flex; flex-wrap:wrap; gap:7px; align-items:center;}
.tslot{display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 6px 0 12px; border:1px solid var(--dj-brand-tint-2); background:var(--dj-brand-tint); border-radius:999px;}
.tslot b{font-size:13.5px; font-weight:700; color:var(--dj-brand-dark);}
.tslot em{font-style:normal; font-size:12px; color:var(--dj-text-2);}
.tslot .x{width:22px; height:22px; border:0; border-radius:999px; background:none; color:var(--dj-text-3); font-size:11px; cursor:pointer; font-family:inherit;}
.tslot .x:hover{background:var(--dj-bad-tint); color:var(--dj-bad);}
.tnone{font-size:13.5px; color:var(--dj-text-3);}
.addslot{height:34px; padding:0 13px; border:1px dashed var(--dj-line); background:none; border-radius:999px; font-family:inherit; font-size:13.5px; color:var(--dj-text-2); cursor:pointer;}
.addslot:hover{border-color:var(--dj-brand); color:var(--dj-brand-dark); background:var(--dj-brand-tint);}
@media (max-width:700px){ .weekrow{grid-template-columns:1fr; gap:6px;} .wday{padding-top:0;} }

/* ---------- modal ---------- */
.modal-bg{position:fixed; inset:0; z-index:200; background:rgba(17,24,38,.45); display:none; align-items:center; justify-content:center; padding:24px;}
.modal-bg.is-on{display:flex;}
.modal{background:var(--dj-card); border-radius:var(--dj-r-lg); padding:24px; width:100%; max-width:420px; box-shadow:0 18px 50px rgba(17,24,38,.22); max-height:90vh; overflow-y:auto;} /* v1.4: taller than the screen scrolls inside, never clips */
.modal h2{font-size:18px; margin:0 0 4px;}
.modal-foot{display:flex; justify-content:flex-end; gap:8px; margin-top:22px;}
.timepick{display:flex; align-items:center; gap:7px;}
.timepick .select{width:auto; min-width:74px;}
.timepick span{color:var(--dj-text-3); font-weight:700;}
.djs-ver{margin-left:auto; font-style:normal; font-size:11px; font-weight:600; color:#68738A; letter-spacing:.03em;}

/* ---------- pipeline stage colors (fixed stage_N ids, colour + label always) ---------- */
[data-stage="stage_1"]{--st:#0F5B77; --st-tint:#EDF6FA;}
[data-stage="stage_2"]{--st:#2A78D6; --st-tint:#EAF2FC;}
[data-stage="stage_3"]{--st:#A55A08; --st-tint:#FDF2E3;}
[data-stage="stage_4"]{--st:#C74E14; --st-tint:#FDEFE8;}
[data-stage="stage_5"]{--st:#0E8F84; --st-tint:#E6F4F2;}
[data-stage="stage_6"]{--st:#137A45; --st-tint:#E7F6ED;}
.col{border-top:3px solid var(--st, var(--dj-line));}
.col-dot{width:9px; height:9px; border-radius:999px; background:var(--st, var(--dj-text-3)); display:inline-block; margin-right:7px; flex:0 0 auto;}
.col .col-n{background:var(--st-tint, #F0F3F7); color:var(--st, #8A94A3);}
.col .card{border-left:3px solid var(--st, var(--dj-line));}

/* ---------- toast (WCMA console pattern) ---------- */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px); z-index:300;
  background:#111826; color:#fff; font-size:13.5px; font-weight:600; padding:11px 18px; border-radius:999px;
  box-shadow:0 10px 30px rgba(17,24,38,.3); opacity:0; pointer-events:none; transition:all .25s ease;}
.toast.is-on{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- dirty save (button wakes up when there is something to save) ---------- */
.savebtn.is-dirty{box-shadow:0 0 0 3px var(--dj-brand-tint-2); position:relative;}
.savebtn.is-dirty::after{content:''; position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:999px; background:#EB6834; border:2px solid #fff;}

/* ---------- v0.9.0: Today strip on the board ---------- */
.tstrip{display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; margin:0 0 14px;}
.tstrip-t{font-size:12px; font-weight:700; color:var(--dj-text-3); text-transform:uppercase; letter-spacing:.5px; padding:6px 2px 0;}
.tstrip details{position:relative;}
.tstrip summary{list-style:none; cursor:pointer; display:inline-flex;}
.tstrip summary::-webkit-details-marker{display:none;}
.tstrip .ts-list{position:absolute; z-index:40; top:calc(100% + 6px); left:0; min-width:280px; max-width:380px;
  background:var(--dj-card); border:1px solid var(--dj-line); border-radius:var(--dj-r-lg);
  box-shadow:0 12px 30px rgba(17,24,38,.14); padding:6px;}
.tstrip .ts-list a{display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:8px 10px; border-radius:var(--dj-r); text-decoration:none; color:var(--dj-text); font-size:13.5px;}
.tstrip .ts-list a:hover{background:var(--dj-hover);}
.tstrip .ts-list a b{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tstrip .ts-list a em{font-style:normal; color:var(--dj-text-3); font-size:12.5px; white-space:nowrap;}
.tstrip .ts-more{display:block; padding:7px 10px; font-size:12.5px; color:var(--dj-text-3);}

/* ---------- v0.9.0: settings tabs ---------- */
.settabs{display:flex; gap:2px; margin:0 0 18px; border-bottom:1px solid var(--dj-line);}
.settabs a{padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--dj-text-2);
  text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px;}
.settabs a:hover{color:var(--dj-text);}
.settabs a.is-on{color:var(--dj-brand-dark); border-bottom-color:var(--dj-brand);}

/* ---------- v1.0.0: one-page console ---------- */
.csec{min-height:60vh;}
.lostTg{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--dj-text-2);cursor:pointer;white-space:nowrap;}
.col.is-over{outline:2px dashed var(--dj-brand);outline-offset:2px;border-radius:var(--dj-r-lg);}
.col .card{cursor:pointer;}
.col-lost{opacity:.85;}
.col-lost .col-dot{background:var(--dj-text-3) !important;}
.card.is-lost{opacity:.75;}
.stinfo{position:relative;cursor:pointer;color:var(--dj-text-3);font-size:12px;margin-left:2px;}
.stinfo .sttip{display:none;position:absolute;z-index:50;top:calc(100% + 6px);left:-8px;width:240px;background:var(--dj-card);border:1px solid var(--dj-line);border-radius:10px;box-shadow:0 12px 30px rgba(17,24,38,.14);padding:10px 12px;font-size:12.5px;color:var(--dj-text-2);font-weight:400;line-height:1.5;}
.stinfo.is-on .sttip{display:block;}
.stinfo:hover .sttip{display:block;} /* v1.3: hover shows the tip, leaving hides it */

/* v1.4.1 - lead detail: composer tabs + the quiet ... menu */
.ctabs{display:flex;gap:2px;border-bottom:1px solid var(--dj-line);}
.ctab{background:none;border:0;padding:8px 12px;font-size:13.5px;font-weight:600;color:var(--dj-text-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.ctab.is-on{color:var(--dj-brand);border-bottom-color:var(--dj-brand);}
.ctab:disabled{color:var(--dj-line);cursor:not-allowed;}
.kmenu{position:relative;display:inline-block;}
.kmenu .kmenu-list{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:80;background:var(--dj-card);border:1px solid var(--dj-line);border-radius:10px;box-shadow:0 12px 30px rgba(17,24,38,.14);min-width:170px;padding:6px;}
.kmenu.is-on .kmenu-list{display:block;}
.kmenu-list button{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 10px;font-size:13.5px;border-radius:8px;cursor:pointer;color:var(--dj-text);}
.kmenu-list button:hover{background:var(--dj-hover);}
.kmenu-list button.danger{color:var(--dj-bad);}

/* v1.5 - rich email editor */
.ck-editor__editable_inline{min-height:140px;font-size:14px;}
.ck.ck-editor{margin-bottom:4px;}
/* v1.6.2 - pictures fit the box they are edited and previewed in */
.ck-content img{max-width:100% !important;height:auto !important;}
.ck-content .image{max-width:100%;margin:12px 0;}
.prevbox img{max-width:100%;height:auto;border-radius:8px;}

/* settings overlay */
.ovbg{position:fixed;inset:0;background:rgba(17,24,38,.45);display:none;z-index:90;}
.ovbg.is-on{display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px;}
.ovpanel{background:var(--dj-page);border-radius:16px !important;width:min(880px,100%);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(17,24,38,.3);}
.ovhead{display:flex;align-items:center;justify-content:space-between;padding:16px 22px 10px;}
.ovhead b{font-size:18px;}
.ovx{border:0;background:none;font-size:15px;color:var(--dj-text-3);cursor:pointer;padding:6px;border-radius:8px !important;}
.ovx:hover{background:var(--dj-hover);color:var(--dj-text);}
.ovbody{overflow:auto;padding:18px 22px 26px;}
.setpane{display:none;}
.spanel{background:var(--dj-card);border:1px solid var(--dj-line);border-radius:var(--dj-r-lg) !important;padding:16px 18px;margin-bottom:14px;}
.spanel>b{font-size:14px;}
.spanel .hint{margin:6px 0 12px;}

/* lead detail modal */
.modal-lg{max-width:860px;width:min(860px,94vw);}
.ld-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;align-items:start;}
@media (max-width:760px){.ld-grid{grid-template-columns:1fr;}}
.ld-box{background:var(--dj-page);border:1px solid var(--dj-line-soft);border-radius:12px !important;padding:12px 14px;margin-bottom:12px;}
.ld-box>b{font-size:13.5px;}

/* messages tab rows */
.mrow{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--dj-line-soft);flex-wrap:wrap;}
.mrow:first-of-type{border-top:0;}
.mprev{flex:1;min-width:160px;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dj-text-2);}
.mtg input{position:absolute;opacity:0;}
.mtg{position:relative;display:inline-flex;cursor:pointer;}
.mtg i{width:34px;height:20px;border-radius:999px !important;background:#CBD5E1;position:relative;transition:background .15s;}
.mtg i::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50% !important;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.2);}
.mtg input:checked + i{background:var(--dj-brand);}
.mtg input:checked + i::after{left:16px;}
.medit{padding:0 0 6px;}

/* toasts */
#toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;}
.toast-bad{background:var(--dj-bad) !important;}
.toast.is-out{opacity:0;transition:opacity .4s;}

/* toasts inside the console container stack instead of overlapping */
#toasts .toast{position:static;transform:none;}

/* ---------- v1.1.0 ---------- */
.tb-right{margin-left:auto; display:flex; gap:8px; align-items:center;}
[data-stage="noshow"]{--st:#6E7886; --st-tint:#EEF1F5;}
.pal{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 8px;}
.pal-t{font-size:12px; color:var(--dj-text-3); margin-right:2px;}
.palchip{border:1px solid var(--dj-line); background:var(--dj-card); border-radius:999px !important;
  padding:4px 11px; font-size:12.5px; font-weight:600; color:var(--dj-text-2); cursor:pointer;}
.palchip:hover{background:var(--dj-hover); color:var(--dj-text);}
.palchip.is-btn{background:var(--dj-brand-tint); border-color:var(--dj-brand-tint-2); color:var(--dj-brand-dark);}
.palchip.is-btn:hover{background:var(--dj-brand-tint-2);}
.prevbox{background:var(--dj-page); border:1px dashed var(--dj-line); border-radius:12px !important;
  padding:16px 18px; margin-top:10px; font-size:14px; line-height:1.6;}

/* ---------- v1.2.0 ---------- */
.mtg-t{font-style:normal; font-size:11px; font-weight:700; color:var(--dj-text-3); margin-left:6px; letter-spacing:.3px;}
.mtg-t.is-on{color:var(--dj-ok);}
.card.archived-card{opacity:.7;}

/* v2.3 - drag & drop import */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px dashed var(--dj-line);border-radius:12px;padding:26px 16px;text-align:center;cursor:pointer;color:var(--dj-ink);background:var(--dj-panel,#fff);transition:border-color .15s,background .15s}
.dropzone:hover{border-color:var(--dj-brand)}
.dropzone.is-drag{border-color:var(--dj-brand);background:#E6F4F2}

/* v2.4 - clickable rows on the Email list */
.p-click{cursor:pointer}
tr:hover .p-click b{color:var(--dj-brand)}

/* v2.4.1 - every button visibly reacts. Press = sinks; busy = spinner and
   the click is ignored; disabled = faded with a "not now" cursor. */
.btn{transition:background .12s, transform .06s;}
.btn:not(:disabled):active{transform:translateY(1px) scale(.98);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn.is-busy{opacity:.75; pointer-events:none;}
.spin{display:inline-block; width:12px; height:12px; border:2px solid rgba(128,128,128,.3);
  border-top-color:currentColor; border-radius:999px; animation:djspin .7s linear infinite;}
@keyframes djspin{to{transform:rotate(360deg)}}

/* v2.5 - inbox */
.navbadge{background:#B0261B;color:#fff;font-size:11px;font-weight:700;border-radius:999px !important;
  padding:1px 7px;margin-left:6px;line-height:1.5;}
.ib-dot{display:inline-block;width:8px;height:8px;border-radius:999px !important;background:var(--dj-brand);}
tr.ib-unread td{font-weight:600;}
tr.ib-unread .hint{font-weight:400;}

/* v2.7 - inbox management */
.ib-star{border:0;background:none;cursor:pointer;font-size:17px;color:#B8C0CC;padding:2px 4px;line-height:1;}
.ib-star:hover{color:#E5A50A;}
.ib-star.is-on{color:#E5A50A;}

/* v3.0 - calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-w{font-size:12px;font-weight:700;color:var(--dj-text-3);text-align:center;padding:2px 0;}
.cal-day{border:1px solid var(--dj-line);border-radius:10px !important;min-height:96px;max-height:150px;
  overflow:auto;padding:6px;background:var(--dj-card);}
.cal-day.is-other{opacity:.45;}
.cal-day.is-today{border-color:var(--dj-brand);box-shadow:inset 0 0 0 1px var(--dj-brand);}
.cal-num{font-size:12.5px;font-weight:700;color:var(--dj-text-2);margin-bottom:4px;}
.cal-day.is-today .cal-num{color:var(--dj-brand);}
.cal-ev{font-size:11.5px;line-height:1.35;background:var(--dj-brand-tint);border:1px solid var(--dj-brand-tint-2);
  color:var(--dj-brand-dark);border-radius:6px !important;padding:2px 6px;margin:0 0 4px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-ev:hover{background:var(--dj-brand-tint-2);}
.cal-ev.is-allday{background:#EEF1F5;border-color:#E6EAEF;color:var(--dj-text-2);}

/* v3.2 - company mail (Info / Support) */
.mx-body{font-size:14px;line-height:1.55;overflow-wrap:anywhere;overflow-x:auto;}
.mx-body img{max-width:100% !important;height:auto !important;}
.mx-body table{max-width:100% !important;}
.mx-body blockquote{border-left:3px solid #E6EAEF;margin:6px 0;padding:2px 10px;color:var(--dj-text-2);}

/* v3.4 - library */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;}
.lib-card{background:var(--dj-card,#fff);border:1px solid #E6EAEF;border-radius:12px !important;padding:14px 16px;}

/* v3.4.1 - pin the nav link colors in EVERY link state. Browsers (and some
   extensions) paint visited links their own blue when a state is left
   unspecified; these lines close that gap for good. */
.djs-item:link,.djs-item:visited{color:#B4BECC !important;}
.djs-item:hover,.djs-item:focus{color:#fff !important;}
.djs-item.is-active,.djs-item.is-active:link,.djs-item.is-active:visited{color:#fff !important;}
a:visited{color:var(--dj-brand-dark);}

/* v3.5 - thread reading: newest first, quotes folded, bigger view */
.mx-scroll{max-height:48vh;overflow:auto;border:1px solid #E6EAEF;border-radius:10px !important;padding:2px 14px;}
.mx-quote-hidden{display:none !important;}
.mx-quote-btn{margin:6px 0;color:var(--dj-text-3);}
.modal.mx-max{width:min(1280px,94vw) !important;max-width:94vw !important;}
.modal.mx-max .mx-scroll{max-height:72vh;}