*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --blue:#1257F0;--blue-dark:#0B46CC;--blue-light:#EAF1FE;--blue-mid:#5B8DF6;
  --navy:#0B1A3F;--navy-2:#0A2466;--gold:#C9962B;--gold-bright:#F0C35C;--gold-light:#FBF3E2;
  --amber:#EF9F27;--coral:#D85A30;--coral-light:#FAECE7;--green:#1F9D46;--green-light:#E7F6EC;
  --bg:#ffffff;--bg2:#F3F6FB;--bg3:#E8EDF6;
  --text:#0B1A3F;--text2:#56648A;--text3:#8E99B4;
  --border:rgba(11,26,63,0.12);--border2:rgba(11,26,63,0.22);
  --radius:8px;--radius-lg:12px;
}
/* ── DARK MODE ── */
#screen-bk.dark-mode, #screen-client.dark-mode{
  --bg:#0f1117;--bg2:#1a1d27;--bg3:#13151e;
  --text:#e8eaf0;--text2:#8b92a8;--text3:#555d78;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.13);
  --blue-light:#0a2a3a;--blue-mid:#1a5570;
  --coral-light:#2a1510;--green-light:#0f2a18;
  background:#0f1117;
  color:#e8eaf0;
}
#screen-bk.dark-mode .nav, #screen-client.dark-mode .nav{background:#0a0d14;border-bottom:0.5px solid rgba(255,255,255,0.07);}
#screen-bk.dark-mode .card, #screen-client.dark-mode .card{background:var(--bg2);}
#screen-bk.dark-mode input,#screen-bk.dark-mode select,#screen-bk.dark-mode textarea,#screen-client.dark-mode input,#screen-client.dark-mode select,#screen-client.dark-mode textarea{background:var(--bg2);color:var(--text);border-color:var(--border2);}
#screen-bk.dark-mode .login-box, #screen-client.dark-mode .login-box{background:var(--bg2);}
#screen-bk.dark-mode .login-wrap, #screen-client.dark-mode .login-wrap{background:var(--bg3);}
#screen-bk.dark-mode .client-row, #screen-client.dark-mode .client-row{background:var(--bg2);}
#screen-bk.dark-mode .client-row:hover, #screen-client.dark-mode .client-row:hover{background:var(--bg3);}
#screen-bk.dark-mode .ov-kpi, #screen-client.dark-mode .ov-kpi{background:var(--bg2);}
#screen-bk.dark-mode .inv-card, #screen-client.dark-mode .inv-card{background:var(--bg2);}
#screen-bk.dark-mode .chat-messages, #screen-client.dark-mode .chat-messages{background:var(--bg2);}
#screen-bk.dark-mode .msg-bubble.from-acc, #screen-client.dark-mode .msg-bubble.from-acc{background:#1a2a4a;}
#screen-bk.dark-mode .msg-bubble.from-cl, #screen-client.dark-mode .msg-bubble.from-cl{background:var(--bg3);}
#screen-bk.dark-mode .thread-item, #screen-client.dark-mode .thread-item{background:var(--bg2);}
#screen-bk.dark-mode .thread-item:hover, #screen-client.dark-mode .thread-item:hover{background:var(--bg3);}
#screen-bk.dark-mode .btype-btn, #screen-client.dark-mode .btype-btn{background:var(--bg3);border-color:var(--border2);}
#screen-bk.dark-mode .bclient-row, #screen-client.dark-mode .bclient-row{border-color:var(--border);}
#screen-bk.dark-mode .vault-file-row, #screen-client.dark-mode .vault-file-row{background:var(--bg2);}
#screen-bk.dark-mode .vault-sm-row, #screen-client.dark-mode .vault-sm-row{background:var(--bg2);}
#screen-bk.dark-mode #resource-panel,#screen-bk.dark-mode #broadcast-panel,#screen-bk.dark-mode #ov-insights-panel,#screen-bk.dark-mode #ov-invoice-panel,#screen-client.dark-mode #resource-panel,#screen-client.dark-mode #broadcast-panel,#screen-client.dark-mode #ov-insights-panel,#screen-client.dark-mode #ov-invoice-panel{background:var(--bg2);}
#screen-bk.dark-mode .ov-period-row, #screen-client.dark-mode .ov-period-row{background:var(--bg2);}
#screen-bk.dark-mode .ov-period-row:hover, #screen-client.dark-mode .ov-period-row:hover{background:var(--bg3);}
#screen-bk.dark-mode .ov-notes, #screen-client.dark-mode .ov-notes{background:var(--bg2);}
#screen-bk.dark-mode .cl-tile, #screen-client.dark-mode .cl-tile{background:var(--bg2);}
#screen-bk.dark-mode #cl-settings-panel,#screen-bk.dark-mode #cl-grow-panel,#screen-bk.dark-mode #cl-invoice-panel,#screen-bk.dark-mode #cl-vault-panel,#screen-bk.dark-mode #cl-messages-panel,#screen-bk.dark-mode #cl-directory,#screen-client.dark-mode #cl-settings-panel,#screen-client.dark-mode #cl-grow-panel,#screen-client.dark-mode #cl-invoice-panel,#screen-client.dark-mode #cl-vault-panel,#screen-client.dark-mode #cl-messages-panel,#screen-client.dark-mode #cl-directory{background:var(--bg);}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg2);color:var(--text);min-height:100vh;}
.screen{display:none;min-height:100vh;}.screen.active{display:block;}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;}
.login-box{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:2rem;width:100%;max-width:400px;box-shadow:0 4px 24px rgba(18,87,240,0.08);}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:1.75rem;}
.logo-mark{width:108px;height:108px;background:transparent;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;}
.nav-logo-mark{width:28px;height:28px;background:transparent;border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;}
.logo-mark svg,.nav-logo-mark svg{stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.logo-text,.nav-logo-text{font-weight:700;background:linear-gradient(135deg,#1257F0,#0A2466);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.logo-text{font-size:18px;}.nav-logo-text{font-size:14px;}
.logo-text span,.nav-logo-text span{background:inherit;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.nav-user{font-size:13px;color:rgba(255,255,255,0.7);margin-right:8px;}
.nav-btn{padding:7px 12px;border-radius:var(--radius);border:0.5px solid rgba(255,255,255,0.2);background:transparent;color:rgba(255,255,255,0.85);font-size:13px;cursor:pointer;margin-left:6px;}
.nav-btn:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.4);color:#fff;}
.nav-btn.blue{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.4);color:#fff;font-weight:600;}
.lang-toggle{display:flex;gap:6px;margin-bottom:1.25rem;}
.lang-btn{padding:5px 14px;border-radius:20px;border:0.5px solid var(--border2);font-size:12px;cursor:pointer;color:var(--text2);background:transparent;transition:all 0.15s;}
.lang-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:500;}
.login-title{font-size:15px;font-weight:600;margin-bottom:4px;}
.login-sub{font-size:13px;color:var(--text2);margin-bottom:1.5rem;}
.role-toggle{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:1.25rem;}
.role-btn{padding:9px;border-radius:var(--radius);border:0.5px solid var(--border2);background:transparent;color:var(--text2);font-size:13px;cursor:pointer;transition:all 0.15s;text-align:center;}
.role-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:500;}
.lfield{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.lfield label{font-size:12px;color:var(--text2);font-weight:500;}
.lfield input,.lfield select{height:40px;border:0.5px solid var(--border2);border-radius:var(--radius);padding:0 12px;font-size:14px;background:var(--bg);color:var(--text);width:100%;}
.lfield input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,87,240,0.1);}
.btn-full{width:100%;height:42px;border-radius:var(--radius);border:none;background:var(--blue);color:#fff;font-size:14px;font-weight:600;cursor:pointer;}
.btn-full:hover{background:var(--blue-dark);}
.error-msg{font-size:13px;color:var(--coral);margin-top:10px;min-height:18px;}
.nav{display:flex;align-items:center;background:linear-gradient(135deg,#1257F0,#0A2466);border-bottom:none;padding:0 1.5rem;position:sticky;top:0;z-index:10;flex-wrap:nowrap;}
.nav-logo{display:flex;align-items:center;gap:8px;padding:12px 0;margin-right:auto;}
.nav-tab{padding:0 12px;height:49px;display:flex;align-items:center;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all 0.15s;white-space:nowrap;}
.nav-tab.active{color:var(--text);border-bottom-color:var(--blue);font-weight:500;}
.nav-tab:hover:not(.active){color:var(--text);}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:9px;background:var(--coral);color:#fff;font-size:10px;font-weight:700;padding:0 4px;margin-left:4px;vertical-align:middle;}
.badge.amber{background:var(--amber);}
.page{max-width:960px;margin:0 auto;padding:1.5rem;}
/* ── ACCOUNTANT DESKTOP LAYOUT ── */
#screen-bk .page{max-width:1400px;padding:1.5rem 2rem;padding-top:24px;}
#screen-bk .nav{padding:0 2rem;position:sticky;top:0;z-index:300;}
/* Always show nav-menu on accountant screen regardless of viewport width */
#screen-bk .nav .nav-menu{display:flex !important;}
/* Prevent views from overflowing but not the fixed panels */
#screen-bk .view{max-width:100%;}
/* Overview two-col — right panel fixed, left takes rest */
#screen-bk .ov-two-col{grid-template-columns:1fr 280px;}
@media(min-width:1200px){#screen-bk .ov-two-col{grid-template-columns:1fr 300px;}}
/* Input grid — 3 cols max to prevent overflow */
@media(min-width:1024px){
  #screen-bk .input-grid{grid-template-columns:repeat(3,1fr);}
}
.view{display:none;}.view.active{display:block;}
.section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3);margin-bottom:12px;}
.card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1rem;}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:8px;}
h1{font-size:16px;font-weight:600;}
.search-wrap{position:relative;margin-bottom:1rem;}
.search-wrap input{width:100%;height:40px;border:0.5px solid var(--border2);border-radius:var(--radius);padding:0 12px 0 36px;font-size:14px;background:var(--bg);color:var(--text);}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:14px;pointer-events:none;}
.input-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:10px;}
.f{display:flex;flex-direction:column;gap:5px;}
.f label{font-size:12px;color:var(--text2);font-weight:500;}
.f input,.f select{height:36px;border:0.5px solid var(--border2);border-radius:var(--radius);padding:0 10px;font-size:14px;background:var(--bg);color:var(--text);width:100%;}
.f textarea{border:0.5px solid var(--border2);border-radius:var(--radius);padding:8px 10px;font-size:14px;background:var(--bg);color:var(--text);width:100%;height:80px;resize:vertical;font-family:inherit;}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--blue);}
.f input[readonly]{background:var(--blue-light);color:var(--blue-dark);font-weight:600;border-color:var(--blue-mid);}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius);border:0.5px solid var(--border2);background:transparent;color:var(--text);font-size:13px;cursor:pointer;white-space:nowrap;}
.btn:hover{background:var(--bg2);}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:500;}
.btn.primary:hover{background:var(--blue-dark);}
.btn.sm{padding:5px 12px;font-size:12px;}
.btn-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:center;}
.hint{font-size:12px;color:var(--text2);line-height:1.6;}
.save-badge{display:none;font-size:12px;color:var(--blue);margin-left:8px;}
.save-badge.show{display:inline;}
.cat-dropdown-wrap{position:relative;margin-bottom:10px;}
.cat-trigger{display:flex;align-items:center;justify-content:space-between;height:36px;border:0.5px solid var(--border2);border-radius:var(--radius);padding:0 10px;font-size:14px;background:var(--bg);color:var(--text);cursor:pointer;user-select:none;}
.cat-trigger.open{border-color:var(--blue);}
.cat-dd{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg);border:0.5px solid var(--border2);border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(18,87,240,0.12);z-index:50;max-height:280px;overflow-y:auto;}
.cat-dd.open{display:block;}
.cat-dd-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;font-size:13px;color:var(--text2);}
.cat-dd-item:hover{background:var(--blue-light);color:var(--blue);}
.cat-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.cat-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:var(--blue-light);border:0.5px solid var(--blue-mid);border-radius:20px;font-size:12px;color:var(--blue);font-weight:500;}
.cat-tag-x{cursor:pointer;font-size:14px;color:var(--blue-mid);}
.cat-tag-x:hover{color:var(--coral);}
.client-list{display:flex;flex-direction:column;gap:8px;}
.client-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all 0.15s;}
.client-row:hover{border-color:var(--blue-mid);background:var(--blue-light);}
.c-av{width:40px;height:40px;border-radius:50%;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--blue-dark);flex-shrink:0;}
.c-info{flex:1;min-width:0;}
.c-name{font-size:14px;font-weight:500;color:var(--text);}
.c-meta{font-size:12px;color:var(--text2);margin-top:2px;}
.c-pin{font-size:11px;color:var(--text3);font-family:monospace;padding:3px 8px;background:var(--bg2);border-radius:var(--radius);}
.c-actions{display:flex;gap:6px;align-items:center;}
.icon-btn{width:30px;height:30px;border-radius:var(--radius);border:0.5px solid var(--border2);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:13px;}
.icon-btn.sm{width:24px;height:24px;font-size:11px;}
.icon-btn:hover{background:var(--bg2);}
.icon-btn.del:hover{background:var(--coral-light);border-color:var(--coral);color:var(--coral);}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--text2);font-size:14px;}
.period-wrap{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.period-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border:0.5px solid var(--border);border-radius:var(--radius);background:var(--bg);}
.period-item:hover{border-color:var(--blue);background:var(--blue-light);}
.period-item.active-period{border-color:var(--blue);background:var(--blue-light);}
.period-name{flex:1;font-size:13px;color:var(--text);cursor:pointer;}
.period-date{font-size:11px;color:var(--text3);}
.msg-row{padding:14px;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);margin-bottom:8px;cursor:pointer;}
.msg-row.unread{border-color:var(--blue);background:var(--blue-light);}
.msg-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.msg-from{font-size:13px;font-weight:600;}
.msg-date{font-size:11px;color:var(--text3);}
.msg-subj{font-size:13px;font-weight:500;color:var(--blue);margin-bottom:4px;}
.msg-body{font-size:13px;color:var(--text2);line-height:1.5;}
.todo-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:0.5px solid var(--border);}
.todo-item:last-child{border-bottom:none;}
.todo-cb{width:18px;height:18px;accent-color:var(--blue);cursor:pointer;flex-shrink:0;}
.todo-txt{flex:1;font-size:14px;color:var(--text);}
.todo-txt.done{text-decoration:line-through;color:var(--text3);}
.todo-add{display:flex;gap:8px;margin-top:10px;}
.todo-add input{flex:1;height:36px;border:0.5px solid var(--border2);border-radius:var(--radius);padding:0 10px;font-size:14px;background:var(--bg);color:var(--text);}
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:1rem;}
@media(max-width:640px){.kpi-grid{grid-template-columns:repeat(2,1fr);}}
.kpi-card{background:var(--bg2);border-radius:var(--radius);padding:1rem;border:0.5px solid var(--border);transition:border-color 0.15s,box-shadow 0.15s;}
.kpi-card.kpi-clickable:hover{border-color:var(--blue-mid);box-shadow:0 2px 8px rgba(26,86,219,0.08);}
.kpi-detail{animation:kpiSlide 0.18s ease;}
@keyframes kpiSlide{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.kpi-card.blue-border{background:var(--bg);border:1.5px solid var(--blue-mid);}
.kpi-label{font-size:11px;color:var(--text2);margin-bottom:6px;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;}
.kpi-value{font-size:22px;font-weight:700;color:var(--text);}
.kpi-sub{font-size:12px;margin-top:4px;font-weight:500;}
.up{color:var(--green);}.down{color:var(--coral);}.neutral{color:var(--text2);}
.arrow-up{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:7px solid var(--green);}
.arrow-down{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--coral);}
.paid-badge{display:inline-block;background:var(--green);color:#fff;border-radius:4px;padding:1px 8px;font-size:11px;font-weight:600;}
.acc-wrap{display:flex;justify-content:flex-end;margin-bottom:1rem;}
.acc-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;border:0.5px solid var(--blue);background:var(--blue-light);color:var(--blue);font-size:12px;font-weight:500;cursor:pointer;}
.acc-btn:hover{background:var(--blue);color:#fff;}
.acc-panel{display:none;background:var(--blue);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1.5rem;}
.acc-panel.open{display:block;}
.acc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}
.acc-card{background:rgba(255,255,255,0.15);border-radius:var(--radius);padding:0.875rem;}
.acc-lbl{font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.05em;}
.acc-val{font-size:18px;font-weight:700;color:#fff;}
.exp-dd{border:1.5px solid var(--blue-mid);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1rem;}
.exp-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--bg2);cursor:pointer;}
.exp-hdr:hover{background:var(--blue-light);}
.exp-hdr-left{display:flex;flex-direction:column;gap:2px;}
.exp-hdr-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3);}
.exp-hdr-val{font-size:20px;font-weight:700;color:var(--text);}
.exp-chevron{font-size:14px;color:var(--text2);transition:transform 0.2s;}
.exp-chevron.open{transform:rotate(180deg);}
.exp-body{display:none;padding:0 16px 12px;background:var(--bg);}
.exp-body.open{display:block;}
.exp-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:0.5px solid var(--border);font-size:13px;}
.exp-row:last-child{border-bottom:none;}
.exp-row-name{color:var(--text2);display:flex;align-items:center;gap:6px;}
.exp-row-val{font-weight:500;color:var(--text);}
.exp-row-val.paid{color:var(--green);}
.alert-box{border-radius:var(--radius);padding:12px 16px;display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;}
.al-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.appt-card{background:var(--blue-light);border:0.5px solid var(--blue-mid);border-radius:var(--radius-lg);padding:1rem 1.25rem;margin-bottom:1rem;display:flex;align-items:center;gap:12px;}
.appt-icon{width:36px;height:36px;background:var(--blue);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.appt-icon svg{width:18px;height:18px;stroke:white;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.appt-lbl{font-size:11px;color:var(--blue);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;}
.appt-date{font-size:15px;font-weight:600;color:var(--blue-dark);}
.appt-note{font-size:12px;color:var(--text2);margin-top:2px;}
.notes-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1rem;}
.note-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--border);font-size:13px;color:var(--text2);line-height:1.5;}
.note-item:last-child{border-bottom:none;}
.note-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:6px;}
.client-hero{display:flex;align-items:center;gap:14px;margin-bottom:1.5rem;}
.ch-av{width:52px;height:52px;border-radius:50%;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--blue-dark);flex-shrink:0;border:2px solid var(--blue-mid);}
.period-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1.5rem;}
.period-chip{padding:5px 14px;border-radius:20px;border:0.5px solid var(--border2);font-size:12px;cursor:pointer;color:var(--text2);background:transparent;}
.period-chip.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.loading-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;z-index:100;}
.loading-box{background:var(--bg);border-radius:var(--radius-lg);padding:1.5rem 2rem;display:flex;align-items:center;gap:12px;font-size:14px;}
.spinner{width:20px;height:20px;border:2px solid var(--border2);border-top-color:var(--blue);border-radius:50%;animation:spin 0.7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-overlay.hidden{display:none;}
.status-banner{padding:10px 16px;border-radius:var(--radius);font-size:13px;margin-bottom:1rem;display:none;}
.status-banner.success{background:var(--blue-light);color:var(--blue-dark);border:0.5px solid var(--blue-mid);display:block;}
.status-banner.error{background:var(--coral-light);color:var(--coral);border:0.5px solid var(--coral);display:block;}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:200;align-items:center;justify-content:center;padding:1rem;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--bg);border-radius:var(--radius-lg);padding:2rem;width:100%;max-width:440px;box-shadow:0 8px 32px rgba(18,87,240,0.15);}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;}
.modal-title{font-size:16px;font-weight:600;}
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text2);}

/* ── HAMBURGER MENU ── */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none;margin-left:auto;}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:all 0.2s;}
.nav-menu{display:flex;align-items:center;flex-wrap:nowrap;gap:2px;margin-left:auto;}
.nav-menu-dropdown{display:none;position:fixed;top:49px;right:0;left:0;background:var(--bg);border-bottom:0.5px solid var(--border);z-index:99;flex-direction:column;box-shadow:0 4px 16px rgba(0,0,0,0.1);}
.nav-menu-dropdown.open{display:flex;}
.nav-menu-dropdown .nav-tab{padding:14px 20px;border-bottom:0.5px solid var(--border);width:100%;text-align:left;border-radius:0;}
.nav-menu-dropdown .nav-btn{padding:14px 20px;border-bottom:0.5px solid var(--border);width:100%;text-align:left;border-radius:0;background:none;color:var(--text2);border-left:none;border-right:none;border-top:none;margin-left:0;}
.nav-menu-dropdown .nav-btn:hover{background:var(--bg2);color:var(--text);}
@media(max-width:640px){
  .hamburger{display:flex;}
  .nav-menu{display:none;}
  .nav{flex-wrap:nowrap;padding:0 1rem;}
  .nav-logo{margin-right:auto;}
}
/* ── PASSWORD STRENGTH ── */
.pw-rules{margin-top:8px;display:flex;flex-direction:column;gap:4px;}
.pw-rule{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text3);transition:color 0.2s;}
.pw-rule.pass{color:var(--green);}
.pw-rule-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);flex-shrink:0;transition:background 0.2s;}
.pw-rule.pass .pw-rule-dot{background:var(--green);}
/* ── CONSISTENT CHECKBOXES ── */
input[type=checkbox]{
  width:15px;
  height:15px;
  min-width:15px;
  min-height:15px;
  accent-color:var(--blue);
  cursor:pointer;
  margin:0;
  flex-shrink:0;
}
/* ── MESSAGING / CHAT ── */
.thread-list{display:flex;flex-direction:column;gap:8px;}
.thread-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all 0.15s;}
.thread-row:hover{border-color:var(--blue-mid);background:var(--blue-light);}
.thread-row.has-unread{border-color:var(--blue);background:var(--blue-light);}
.thread-av{width:40px;height:40px;border-radius:50%;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--blue-dark);flex-shrink:0;border:1.5px solid var(--blue-mid);}
.thread-info{flex:1;min-width:0;}
.thread-name{font-size:14px;font-weight:600;color:var(--text);}
.thread-preview{font-size:12px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.thread-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
.thread-time{font-size:11px;color:var(--text3);}
.unread-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);}
/* Chat window */
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 120px);max-height:700px;}
.chat-header{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:0.5px solid var(--border);margin-bottom:0;flex-shrink:0;}
.chat-back{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text2);padding:4px 8px 4px 0;}
.chat-messages{flex:1;overflow-y:auto;padding:16px 0;display:flex;flex-direction:column;gap:10px;}
.chat-bubble-wrap{display:flex;flex-direction:column;}
.chat-bubble-wrap.mine{align-items:flex-end;}
.chat-bubble-wrap.theirs{align-items:flex-start;}
.chat-bubble{max-width:75%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;word-break:break-word;}
.chat-bubble.mine{background:var(--blue);color:#fff;border-bottom-right-radius:4px;}
.chat-bubble.theirs{background:var(--bg2);color:var(--text);border:0.5px solid var(--border);border-bottom-left-radius:4px;}
.chat-time{font-size:10px;color:var(--text3);margin-top:3px;padding:0 4px;}
.chat-composer{display:flex;gap:8px;padding-top:14px;border-top:0.5px solid var(--border);flex-shrink:0;}
.chat-input{flex:1;min-height:40px;max-height:120px;border:0.5px solid var(--border2);border-radius:var(--radius);padding:10px 12px;font-size:14px;background:var(--bg);color:var(--text);font-family:inherit;resize:none;line-height:1.4;}
.chat-input:focus{outline:none;border-color:var(--blue);}
.chat-send{height:40px;padding:0 16px;background:var(--blue);border:none;border-radius:var(--radius);color:#fff;font-size:13px;font-weight:600;cursor:pointer;align-self:flex-end;flex-shrink:0;}
.chat-send:hover{background:var(--blue-dark);}
.chat-empty{text-align:center;padding:3rem 1rem;color:var(--text2);font-size:14px;}
/* Client messages tab */
.cl-chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 160px);max-height:650px;}
/* ── ATTACHMENTS ── */
.chat-composer-wrap{display:flex;flex-direction:column;gap:0;border-top:0.5px solid var(--border);flex-shrink:0;}
.attach-preview-row{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px 0;min-height:0;}
.attach-preview-row:empty{display:none;}
.attach-thumb{position:relative;display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:0.5px solid var(--border2);border-radius:var(--radius);padding:6px 10px;font-size:12px;color:var(--text2);max-width:200px;}
.attach-thumb img{width:48px;height:48px;object-fit:cover;border-radius:4px;flex-shrink:0;}
.attach-thumb-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;}
.attach-thumb-x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--coral);color:#fff;border:none;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;line-height:1;}
.chat-composer-row{display:flex;gap:8px;padding:10px 0 0;}
.attach-btn{width:36px;height:40px;border:0.5px solid var(--border2);border-radius:var(--radius);background:transparent;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.attach-btn:hover{background:var(--bg2);color:var(--blue);}
/* Drag-drop overlay */
.drop-overlay{display:none;position:absolute;inset:0;background:rgba(18,87,240,0.08);border:2.5px dashed var(--blue);border-radius:var(--radius-lg);z-index:50;align-items:center;justify-content:center;flex-direction:column;gap:8px;pointer-events:none;}
.drop-overlay.active{display:flex;}
.drop-overlay-icon{font-size:36px;}
.drop-overlay-text{font-size:14px;font-weight:600;color:var(--blue);}
/* Attachment bubbles in chat */
.attach-file-bubble{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;max-width:260px;text-decoration:none;}
.attach-file-bubble.mine{background:rgba(255,255,255,0.2);}
.attach-file-bubble.theirs{background:var(--bg3);border:0.5px solid var(--border);}
.attach-file-icon{font-size:22px;flex-shrink:0;}
.attach-file-info{flex:1;min-width:0;}
.attach-file-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.attach-file-size{font-size:11px;opacity:0.7;margin-top:1px;}
.chat-img-attach{max-width:220px;max-height:200px;border-radius:10px;display:block;cursor:pointer;object-fit:cover;}
.upload-progress{height:3px;background:rgba(255,255,255,0.3);border-radius:2px;margin-top:6px;overflow:hidden;}
.upload-progress-bar{height:100%;background:#fff;border-radius:2px;transition:width 0.2s;}
/* ── CLIENT HOME TILES ── */
.cl-home-wrap{max-width:480px;margin:0 auto;padding:1.25rem 1rem;}
.cl-home-greeting{font-size:18px;font-weight:700;color:var(--text);margin-bottom:2px;text-align:left;}
.cl-home-sub{font-size:12px;color:var(--text2);margin-bottom:1rem;text-align:left;}
.cl-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}

/* ── PHONE ── */
body.device-phone .cl-home-wrap{max-width:100%;padding:16px 12px;}
body.device-phone .cl-home-greeting{font-size:20px;text-align:left;}
body.device-phone .cl-tiles{gap:8px;grid-template-columns:repeat(3,1fr) !important;}

body.device-phone .cl-tile{min-height:100px;padding:14px 6px;}
body.device-phone .cl-tile-icon{width:52px;height:52px;font-size:28px;}
body.device-phone .cl-tile-title{font-size:11px;}

/* ── TABLET ── */
body.device-tablet .cl-home-wrap{max-width:720px;padding:24px 20px;}
body.device-tablet .cl-home-greeting{font-size:22px;text-align:left;}
body.device-tablet .cl-tiles{gap:12px;grid-template-columns:repeat(4,1fr);}
body.device-tablet .cl-tile{min-height:110px;padding:18px 10px;}
body.device-tablet .cl-tile-icon{width:60px;height:60px;font-size:32px;}
body.device-tablet .cl-tile-title{font-size:13px;}

/* ── DESKTOP ── */
body.device-desktop .cl-home-wrap{max-width:900px;padding:32px 24px;}
body.device-desktop .cl-home-greeting{font-size:24px;text-align:left;}
body.device-desktop .cl-home-sub{font-size:13px;text-align:left;}
body.device-desktop .cl-tiles{gap:16px;}
body.device-desktop .cl-tile{min-height:140px;padding:28px 16px;}
body.device-desktop .cl-tile-icon{width:74px;height:74px;font-size:40px;}
body.device-desktop .cl-tile-title{font-size:13px;}
.cl-tile{background:#e6f7fd;border:1.5px solid #b8e4f5;border-radius:var(--radius-lg);padding:20px 12px;cursor:pointer;transition:all 0.2s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(18,87,240,0.08),0 1px 3px rgba(18,87,240,0.06);text-align:center;min-height:120px;}
.cl-tile:hover{border-color:#5B8DF6;box-shadow:0 8px 24px rgba(18,87,240,0.14),0 2px 6px rgba(18,87,240,0.08);transform:translateY(-2px);}
.cl-tile.disabled{cursor:default;opacity:0.7;}
.cl-tile.disabled:hover{transform:none;box-shadow:0 4px 12px rgba(18,87,240,0.08);border-color:#b8e4f5;}
.cl-tile-icon{width:86px;height:86px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:48px;flex-shrink:0;}
.cl-tile-title{font-size:12px;font-weight:700;color:var(--text);line-height:1.3;text-align:center;width:100%;display:block;}
.cl-back-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;font-size:28px;font-weight:300;color:var(--text2);cursor:pointer;font-family:inherit;line-height:1;padding:4px 8px 4px 0;transition:color 0.15s;min-width:32px;}
.cl-back-btn:hover{color:var(--text);}

.cl-tile-desc{display:none;}
.cl-tile-soon{position:absolute;top:8px;right:8px;background:var(--amber);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:20px;letter-spacing:0.04em;}
.cl-tile-badge{position:absolute;top:8px;right:8px;background:var(--coral);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:20px;}
/* ── TREND CHART ── */
.chart-range-btn{padding:4px 10px;border-radius:20px;border:0.5px solid var(--border2);font-size:11px;font-weight:500;cursor:pointer;background:transparent;color:var(--text2);font-family:inherit;transition:all 0.15s;}
.chart-range-btn:hover{border-color:var(--blue-mid);color:var(--blue);}
.chart-range-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;}
.ov-kpi.chart-active{border-color:var(--blue);box-shadow:0 0 0 2px rgba(18,87,240,0.15);cursor:pointer;}
.ov-kpi{cursor:pointer;}
.ov-kpi:hover{border-color:var(--blue-mid);}
#bk-txn-search,#mybooks-txn-search{outline:none !important;box-shadow:none !important;transition:border-color 0.15s;}
#bk-txn-search:focus,#mybooks-txn-search:focus{outline:none !important;box-shadow:none !important;}
#bk-txn-list,#mybooks-txn-list{width:100%;max-width:100%;overflow:hidden;box-sizing:border-box;}
#bk-txn-list>div,#mybooks-txn-list>div{max-width:100%;box-sizing:border-box;}
/* ── CLIENT OVERVIEW SIDEBAR ── */
.ov-menu-item{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;transition:all 0.15s;border-left:3px solid transparent;}
.ov-menu-item:hover{background:var(--bg2);color:var(--text);}
.ov-menu-item.active-ov-menu{background:var(--blue-light);color:var(--blue);border-left-color:var(--blue);font-weight:700;}
.ov-menu-item span:first-child{font-size:16px;flex-shrink:0;}
/* ── MODULE BUTTONS ── */
.nav-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;}
.bk-module-btn{background:rgba(255,255,255,0.12)!important;color:rgba(255,255,255,0.9)!important;border:1px solid rgba(255,255,255,0.3)!important;font-weight:600!important;font-size:14px!important;padding:10px 22px!important;border-radius:var(--radius)!important;cursor:pointer;font-family:inherit;transition:all 0.2s!important;}
.bk-module-btn:hover{background:rgba(255,255,255,0.2)!important;color:#fff!important;}
.bk-module-btn.active-module{background:#fff!important;color:#1e56c8!important;border-color:#fff!important;font-weight:800!important;font-size:16px!important;padding:11px 26px!important;box-shadow:0 2px 16px rgba(0,0,0,0.2)!important;}
/* ── BALANCE SHEET ── */
.bs-section-header{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3);margin-bottom:10px;}
#bs-balance-check{background:var(--bg2);border:1.5px solid var(--border2);}
#bs-balance-check.balanced{background:#edf7e0;border-color:#1F9D46;color:#1F9D46;}
#bs-balance-check.unbalanced{background:#fff5f5;border-color:var(--coral);color:var(--coral);}
/* ── BROADCAST ── */
.btype-btn{background:var(--bg2);border:1.5px solid var(--border2);border-radius:var(--radius-lg);padding:12px;text-align:center;cursor:pointer;transition:all 0.15s;}
.btype-btn:hover{border-color:var(--blue-mid);}
.btype-btn.active{border-color:var(--coral);background:#fff5f5;}
.bclient-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:0.5px solid var(--border);cursor:pointer;transition:background 0.1s;}
.bclient-row:last-child{border-bottom:none;}
.bclient-row:hover{background:var(--bg2);}
.bclient-row input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--coral);}
/* ── INVOICES ── */
.inv-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:10px;transition:border-color 0.15s;}
.inv-card:hover{border-color:var(--blue-mid);}
.inv-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.inv-number{font-size:13px;font-weight:700;color:var(--text);}
.inv-status{font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:0.05em;}
.inv-status.draft{background:#f3f4f6;color:#6b7280;}
.inv-status.sent{background:var(--blue-light);color:var(--blue);}
.inv-status.paid{background:#edf7e0;color:#1F9D46;}
.inv-status.overdue{background:#fff5f5;color:var(--coral);}
.inv-meta{font-size:12px;color:var(--text2);margin-bottom:8px;}
.inv-amount{font-size:20px;font-weight:800;color:var(--text);}
.inv-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.inv-line-row{display:grid;grid-template-columns:1fr 60px 80px 30px;gap:6px;margin-bottom:4px;align-items:center;}
.inv-line-row input{height:32px;border:0.5px solid var(--border2);border-radius:var(--radius);padding:0 8px;font-size:12px;background:var(--bg);color:var(--text);font-family:inherit;width:100%;}
/* ── VAULT ── */
.vault-cat-section{margin-bottom:20px;}
.vault-cat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3);margin-bottom:8px;padding-bottom:6px;border-bottom:0.5px solid var(--border);}
.vault-file-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);margin-bottom:6px;transition:border-color 0.15s;}
.vault-file-row:hover{border-color:var(--blue-mid);}
.vault-file-icon{width:36px;height:36px;border-radius:8px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.vault-file-info{flex:1;min-width:0;}
.vault-file-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vault-file-meta{font-size:11px;color:var(--text3);margin-top:2px;}
.vault-sm-row{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:0.5px solid var(--border);font-size:12px;}
.vault-sm-row:last-child{border-bottom:none;}
.vault-sm-name{flex:1;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;}
.vault-sm-cat{font-size:10px;color:var(--text3);flex-shrink:0;}
/* ── GROW YOUR BUSINESS ── */
.res-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all 0.2s;cursor:pointer;}
.res-card:hover{border-color:var(--blue-mid);box-shadow:0 4px 16px rgba(18,87,240,0.1);transform:translateY(-2px);}
.res-thumb{width:100%;height:158px;object-fit:cover;background:var(--bg2);display:block;}
.res-thumb-placeholder{width:100%;height:158px;background:linear-gradient(135deg,var(--blue-light),var(--bg2));display:flex;align-items:center;justify-content:center;font-size:40px;}
.res-body{padding:12px 14px;}
.res-cat-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.05em;}
.res-cat-badge.Taxes{background:#fef3c7;color:#92400e;}
.res-cat-badge.Bookkeeping{background:var(--blue-light);color:var(--blue-dark);}
.res-cat-badge.Marketing{background:#fdf4ff;color:#7e22ce;}
.res-cat-badge.Business-Growth{background:#edf7e0;color:#166534;}
.res-cat-badge.General{background:var(--bg2);color:var(--text2);}
.res-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.4;margin-bottom:6px;}
.res-url{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.res-filter-btn{padding:5px 14px;border-radius:20px;border:0.5px solid var(--border2);font-size:12px;font-weight:500;cursor:pointer;background:var(--bg);color:var(--text2);transition:all 0.15s;}
.res-filter-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.res-mgmt-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);margin-bottom:8px;}
.res-mgmt-thumb{width:48px;height:36px;border-radius:6px;object-fit:cover;background:var(--bg2);flex-shrink:0;}
.res-mgmt-info{flex:1;min-width:0;}
.res-mgmt-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.res-mgmt-meta{font-size:11px;color:var(--text3);}
/* ── OVERVIEW TWO-COLUMN RESPONSIVE ── */
@media(max-width:700px){.ov-two-col{grid-template-columns:1fr!important;}}
/* ── CLIENT OVERVIEW ── */
.ov-header{display:flex;align-items:center;gap:16px;padding:20px;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);margin-bottom:1rem;}
.ov-av{width:56px;height:56px;border-radius:50%;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--blue-dark);flex-shrink:0;border:2px solid var(--blue-mid);}
.ov-name{font-size:19px;font-weight:700;color:var(--text);line-height:1.2;}
.ov-meta{font-size:13px;color:var(--text2);margin-top:4px;display:flex;flex-wrap:wrap;gap:12px;}
.ov-meta a{color:var(--blue);text-decoration:none;}
.ov-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:1rem;}
.ov-kpi{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px;min-width:0;overflow:hidden;}
.ov-kpi-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text3);margin-bottom:6px;}
.ov-kpi-value{font-size:20px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ov-kpi-sub{font-size:11px;color:var(--text2);margin-top:4px;line-height:1.5;}
.ov-kpi.highlight{border-color:var(--blue-mid);background:var(--blue-light);}
.ov-kpi.highlight .ov-kpi-value{color:var(--blue-dark);}
/* Prevent overview columns from overflowing */
.ov-two-col>*{min-width:0;overflow-x:hidden;}
#ov-chat-col{min-width:0;}
.ov-notes{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:1rem;}
.ov-notes-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.ov-notes-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text3);}
.ov-note-add{width:28px;height:28px;border-radius:50%;background:var(--blue);border:none;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;}
.ov-note-add:hover{background:var(--blue-dark);}
.ov-note-item{display:flex;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--border);}
.ov-note-item:last-child{border-bottom:none;}
.ov-note-date{font-size:11px;color:var(--text3);white-space:nowrap;padding-top:2px;flex-shrink:0;min-width:80px;}
.ov-note-text{flex:1;font-size:13px;color:var(--text);line-height:1.5;outline:none;border:none;background:transparent;font-family:inherit;resize:none;width:100%;}
.ov-note-text:focus{color:var(--text);}
.ov-note-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:13px;padding:0 2px;flex-shrink:0;}
.ov-note-del:hover{color:var(--coral);}
.ov-note-empty{font-size:13px;color:var(--text3);font-style:italic;}
.ov-period-row{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);transition:all 0.15s;cursor:pointer;}
.ov-period-row:hover{border-color:var(--blue-mid);background:var(--blue-light);}
.ov-period-row.active-period{border-color:var(--blue);background:var(--blue-light);}
.ov-period-name{font-size:13px;font-weight:600;color:var(--text);}
.ov-period-stats{display:flex;gap:8px;flex-wrap:wrap;}
.ov-period-stat{font-size:11px;color:var(--text2);}
.ov-period-stat strong{color:var(--text);}
/* ── MESSAGE CONTEXT MENU ── */
.msg-ctx-menu{position:fixed;background:var(--bg);border:0.5px solid var(--border2);border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(0,0,0,0.15);z-index:500;min-width:160px;overflow:hidden;animation:ctxFade 0.1s ease;}
@keyframes ctxFade{from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}}
.msg-ctx-item{display:flex;align-items:center;gap:10px;padding:11px 16px;font-size:13px;color:var(--text);cursor:pointer;transition:background 0.1s;}
.msg-ctx-item:hover{background:var(--bg2);}
.msg-ctx-item.danger{color:var(--coral);}
.msg-ctx-item.danger:hover{background:var(--coral-light);}
.msg-ctx-sep{height:0.5px;background:var(--border);margin:4px 0;}
/* ── INSIGHTS ── */
.insight-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1rem;border-left:4px solid var(--blue);}
.insight-card.up{border-left-color:var(--green);}
.insight-card.down{border-left-color:var(--coral);}
.insight-card.warning{border-left-color:var(--amber);}
.insight-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.insight-title{font-size:15px;font-weight:700;color:var(--text);line-height:1.3;}
.insight-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap;flex-shrink:0;}
.insight-badge.up{background:var(--green-light);color:var(--green);}
.insight-badge.down{background:var(--coral-light);color:var(--coral);}
.insight-badge.warning{background:#fff8e1;color:#b45309;}
.insight-body{font-size:13px;color:var(--text2);line-height:1.7;margin-bottom:12px;}
.insight-body strong{color:var(--text);}
.insight-suggest{background:var(--blue-light);border-radius:var(--radius);padding:10px 14px;font-size:13px;color:var(--blue-dark);line-height:1.6;margin-bottom:14px;}
.insight-suggest::before{content:'💡 ';font-style:normal;}
.insight-contact{display:flex;align-items:center;gap:16px;padding:10px 14px;background:var(--bg2);border-radius:var(--radius);margin-bottom:14px;flex-wrap:wrap;}
.insight-contact-name{font-size:13px;font-weight:600;color:var(--text);}
.insight-contact-meta{font-size:12px;color:var(--text2);}
.insight-contact-phone{font-size:13px;font-weight:600;color:var(--blue);text-decoration:none;}
.insight-contact-phone:hover{text-decoration:underline;}
.insight-actions{display:flex;gap:8px;flex-wrap:wrap;}
.insight-dismiss{padding:7px 16px;background:transparent;border:0.5px solid var(--border2);border-radius:var(--radius);font-size:12px;color:var(--text2);cursor:pointer;font-family:inherit;}
.insight-dismiss:hover{background:var(--bg2);}
.insight-call{padding:7px 16px;background:var(--blue);border:none;border-radius:var(--radius);font-size:12px;font-weight:600;color:#fff;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:5px;}
.insight-call:hover{background:var(--blue-dark);}
.insight-period-tag{font-size:11px;color:var(--text3);margin-bottom:8px;font-weight:500;}
/* Grouped insight client card */
.insight-client-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);margin-bottom:12px;overflow:hidden;}
.insight-client-header{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;user-select:none;transition:background 0.15s;}
.insight-client-header:hover{background:var(--bg2);}
.insight-client-av{width:40px;height:40px;border-radius:50%;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--blue-dark);flex-shrink:0;}
.insight-client-info{flex:1;min-width:0;}
.insight-client-name{font-size:14px;font-weight:600;color:var(--text);}
.insight-client-meta{font-size:12px;color:var(--text2);margin-top:2px;}
.insight-client-badges{display:flex;gap:5px;flex-wrap:wrap;flex-shrink:0;align-items:center;}
.insight-client-chevron{font-size:12px;color:var(--text3);transition:transform 0.2s;flex-shrink:0;margin-left:4px;}
.insight-client-chevron.open{transform:rotate(180deg);}
.insight-client-body{display:none;border-top:0.5px solid var(--border);}
.insight-client-body.open{display:block;}
.insight-client-actions{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;border-top:0.5px solid var(--border);background:var(--bg2);}
/* Individual insight row inside client card */
.insight-row{padding:14px 16px;border-bottom:0.5px solid var(--border);border-left:4px solid transparent;}
.insight-row:last-of-type{border-bottom:none;}
.insight-row.up{border-left-color:var(--green);}
.insight-row.down{border-left-color:var(--coral);}
.insight-row.warning{border-left-color:var(--amber);}
.insight-row-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.insight-row-title{font-size:13px;font-weight:600;color:var(--text);}
.insight-row-body{font-size:12px;color:var(--text2);line-height:1.6;margin-bottom:6px;}
.insight-row-suggest{font-size:12px;color:var(--blue-dark);background:var(--blue-light);border-radius:var(--radius);padding:8px 10px;line-height:1.5;}
.insight-row-suggest::before{content:'💡 ';}
@keyframes lp-scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}



  /* ── NAVAZIA BRAND COLORS ── */
  /* Primary: #1257F0 (blue), #1F9D46 (green), gradient: #1257F0 → #1F9D46 */
  .lp-wrap{min-height:100vh;background:#ffffff;overflow-x:hidden;font-family:'Segoe UI',system-ui,sans-serif;color:#1a1a2e;}
  .lp-grid-bg{display:none;}
  .lp-glow1{display:none;}
  .lp-glow2{display:none;}
  .lp-nav{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,5vw,6rem);background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);border-bottom:1px solid rgba(18,87,240,0.12);box-shadow:0 1px 12px rgba(0,0,0,0.06);}
  .lp-nav-logo{display:flex;align-items:center;gap:10px;}
  .lp-nav-logo-mark{width:40px;height:40px;background:transparent;border-radius:9px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;}
  .lp-nav-logo-mark img{mix-blend-mode:multiply;}
  .lp-nav-logo-text{font-size:17px;font-weight:800;background:linear-gradient(135deg,#1257F0,#0A2466);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.02em;}
  .lp-nav-logo-text span{background:linear-gradient(135deg,#1257F0,#0A2466);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
  .lp-nav-btns{display:flex;align-items:center;gap:10px;}
  .lp-nav-links{display:flex;align-items:center;gap:4px;}
  .lp-nav-item{position:relative;}
  .lp-nav-link{background:none;border:none;font-family:inherit;font-size:13px;font-weight:600;color:#3a4a5a;cursor:pointer;padding:8px 12px;border-radius:8px;display:flex;align-items:center;gap:5px;transition:all 0.15s;white-space:nowrap;}
  .lp-nav-link:hover{background:rgba(18,87,240,0.07);color:#1257F0;}
  .lp-nav-arrow{font-size:8px;opacity:0.5;transition:transform 0.2s;}
  .lp-nav-item:hover .lp-nav-arrow{transform:rotate(180deg);}
  .lp-dropdown{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#fff;border:1.5px solid rgba(18,87,240,0.14);border-radius:16px;padding:16px;box-shadow:0 16px 48px rgba(0,0,0,0.12);min-width:300px;opacity:0;visibility:hidden;transition:all 0.18s;z-index:200;}
  .lp-dropdown-wide{min-width:640px;display:flex;gap:0;padding:20px;}
  .lp-dropdown-grid{min-width:360px;}
  .lp-dropdown-pricing{min-width:300px;}
  .lp-nav-item:hover .lp-dropdown{opacity:1;visibility:visible;top:calc(100% + 6px);}
  .lp-drop-col{flex:1;padding:0 12px;}
  .lp-drop-col:first-child{border-right:1px solid rgba(18,87,240,0.1);padding-left:0;}
  .lp-drop-col:last-child{padding-right:0;}
  .lp-drop-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#1257F0;margin-bottom:8px;padding:0 4px;}
  .lp-drop-item{display:flex;align-items:flex-start;gap:10px;padding:8px;border-radius:10px;text-decoration:none;color:inherit;transition:background 0.15s;cursor:pointer;}
  .lp-drop-item:hover{background:rgba(18,87,240,0.06);}
  .lp-drop-icon{font-size:18px;margin-top:1px;flex-shrink:0;}
  .lp-drop-item strong{display:block;font-size:13px;font-weight:600;color:#1a1a2e;line-height:1.3;}
  .lp-drop-item p{margin:0;font-size:11px;color:#8a9ab0;line-height:1.4;margin-top:2px;}
  .lp-drop-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;}
  .lp-drop-pill{display:flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(18,87,240,0.05);border:1px solid rgba(18,87,240,0.12);border-radius:9px;text-decoration:none;font-size:12px;font-weight:600;color:#3a4a5a;transition:all 0.15s;white-space:nowrap;}
  .lp-drop-pill:hover{background:rgba(18,87,240,0.12);border-color:rgba(18,87,240,0.3);color:#1257F0;}
  .lp-drop-divider{height:1px;background:rgba(18,87,240,0.1);margin:10px 0;}
  .lp-btn-ghost{padding:7px 16px;background:transparent;border:1.5px solid rgba(18,87,240,0.35);border-radius:8px;color:#1257F0;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s;}
  .lp-btn-ghost:hover{background:rgba(18,87,240,0.07);border-color:#1257F0;}
  .lp-btn-primary{padding:7px 18px;background:linear-gradient(135deg,#1257F0,#0A2466);border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(18,87,240,0.3);transition:all 0.2s;}
  .lp-btn-primary:hover{box-shadow:0 6px 20px rgba(18,87,240,0.45);transform:translateY(-1px);}
  .lp-hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:110px 2rem 16px;position:relative;z-index:1;text-align:center;background:linear-gradient(160deg,#f0fbff 0%,#f8fff2 50%,#ffffff 100%);}
  .lp-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(18,87,240,0.09);border:1px solid rgba(18,87,240,0.22);border-radius:100px;padding:5px 16px;margin-bottom:28px;}
  .lp-badge-dot{width:6px;height:6px;border-radius:50%;background:#1257F0;box-shadow:0 0 8px #1257F0;animation:pulse 2s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
  .lp-badge-text{font-size:11px;font-weight:600;color:#1257F0;letter-spacing:0.06em;text-transform:uppercase;}
  .lp-hero-brand{font-size:clamp(36px,4.5vw,52px);font-weight:900;letter-spacing:-0.03em;background:linear-gradient(135deg,#1257F0,#0A2466);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:28px;display:inline-block;}
  .lp-h1{font-size:clamp(40px,6.5vw,76px);font-weight:900;line-height:1.05;letter-spacing:-0.03em;margin:0 0 8px;}
  .lp-h1-white{color:#1a1a2e;}
  .lp-h1-grad{background:linear-gradient(135deg,#1257F0,#0A2466);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 4s linear infinite;}
  @keyframes shimmer{0%{background-position:0%;}100%{background-position:200%;}}
  .lp-sub{font-size:clamp(15px,2vw,19px);color:#5a6a7a;max-width:560px;margin:0 auto 36px;line-height:1.65;}
  .lp-hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px;}
  .lp-hero-cta{padding:14px 32px;background:linear-gradient(135deg,#1257F0,#0A2466);border:none;border-radius:10px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 6px 24px rgba(18,87,240,0.3);transition:all 0.2s;display:flex;align-items:center;gap:8px;}
  .lp-hero-cta:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(18,87,240,0.45);}
  .lp-hero-sec{padding:14px 32px;background:#fff;border:1.5px solid rgba(18,87,240,0.25);border-radius:10px;color:#1257F0;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s;}
  .lp-hero-sec:hover{background:rgba(18,87,240,0.05);border-color:#1257F0;}
  .lp-stats{display:flex;gap:0;justify-content:center;border:1.5px solid rgba(18,87,240,0.15);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 4px 24px rgba(18,87,240,0.08);}
  .lp-stat{padding:20px 40px;text-align:center;border-right:1px solid rgba(18,87,240,0.12);flex:1;}
  .lp-stat:last-child{border-right:none;}
  .lp-stat-num{font-size:28px;font-weight:800;background:linear-gradient(135deg,#1257F0,#0A2466);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.02em;}
  .lp-stat-label{font-size:12px;color:#8a9ab0;margin-top:3px;}
  .lp-section{padding:80px 2rem;max-width:1100px;margin:0 auto;position:relative;z-index:1;}
  .lp-section-label{font-size:11px;font-weight:700;letter-spacing:0.12em;color:#1257F0;text-transform:uppercase;margin-bottom:14px;}
  .lp-section-h2{font-size:clamp(26px,4vw,44px);font-weight:800;color:#1a1a2e;margin:0 0 16px;letter-spacing:-0.02em;line-height:1.1;}
  .lp-section-sub{font-size:16px;color:#6a7f96;margin:0 0 48px;}
  .lp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
  .lp-card{background:#fff;border:1.5px solid rgba(18,87,240,0.12);border-radius:20px;padding:36px;position:relative;overflow:hidden;transition:all 0.3s;box-shadow:0 4px 24px rgba(18,87,240,0.06);}
  .lp-card:hover{border-color:rgba(18,87,240,0.35);transform:translateY(-4px);box-shadow:0 16px 48px rgba(18,87,240,0.14);}
  .lp-card-glow{position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;pointer-events:none;}
  .lp-card-icon{font-size:36px;margin-bottom:18px;}
  .lp-card-h3{font-size:20px;font-weight:700;color:#1a1a2e;margin:0 0 10px;}
  .lp-card-p{font-size:14px;color:#6a7f96;margin:0 0 24px;line-height:1.6;}
  .lp-check{display:flex;align-items:center;gap:10px;font-size:13px;color:#3a4a5a;margin-bottom:9px;}
  .lp-check-icon{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
  .lp-card-btn{margin-top:28px;width:100%;padding:11px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s;}
  .lp-pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
  .lp-price-card{background:#fff;border:1.5px solid rgba(18,87,240,0.12);border-radius:16px;padding:28px;transition:all 0.2s;box-shadow:0 2px 12px rgba(18,87,240,0.05);}
  .lp-price-card:hover{border-color:rgba(18,87,240,0.35);transform:translateY(-2px);box-shadow:0 8px 28px rgba(18,87,240,0.12);}
  .lp-price-card.featured{background:linear-gradient(160deg,#f0fbff,#f8fff2);border-color:rgba(18,87,240,0.4);box-shadow:0 8px 32px rgba(18,87,240,0.15);}
  .lp-price-tier{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#8a9ab0;margin-bottom:12px;}
  .lp-price-tier.blue{color:#1257F0;}
  .lp-price-amount{font-size:36px;font-weight:800;color:#1a1a2e;line-height:1;}
  .lp-price-period{font-size:14px;color:#8a9ab0;font-weight:400;}
  .lp-price-desc{font-size:12px;color:#8a9ab0;margin:8px 0 20px;}
  .lp-price-btn{width:100%;padding:10px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s;}
  .lp-ai-strip{background:linear-gradient(135deg,rgba(18,87,240,0.06),rgba(31,157,70,0.06));border:1.5px solid rgba(18,87,240,0.15);border-radius:20px;padding:40px;text-align:center;margin:0 2rem;position:relative;z-index:1;overflow:hidden;}
  .lp-ai-strip-glow{display:none;}
  .lp-cta-section{padding:100px 2rem;text-align:center;position:relative;z-index:1;background:linear-gradient(160deg,#f0fbff,#f8fff2);}
  .lp-footer{border-top:1px solid rgba(18,87,240,0.1);padding:28px 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:1100px;margin:0 auto;position:relative;z-index:1;}
  /* LP Nav hamburger elements */
  .lp-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:4px;}
  .lp-hamburger span{display:block;width:22px;height:2px;background:#3a4a5a;border-radius:2px;transition:all 0.25s;}
  .lp-mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:rgba(255,255,255,0.98);z-index:101;overflow-y:auto;padding:16px 20px 40px;flex-direction:column;gap:4px;}
  .lp-mobile-menu.open{display:flex;}
  .lp-mobile-menu-item{font-size:15px;font-weight:600;color:#3a4a5a;padding:14px 12px;border-bottom:1px solid rgba(18,87,240,0.08);cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
  .lp-mobile-menu-item:hover{color:#1257F0;}
  .lp-mobile-sub{display:none;flex-direction:column;padding:4px 0 8px 16px;}
  .lp-mobile-sub.open{display:flex;}
  .lp-mobile-sub a{font-size:13px;color:#5a6a7a;padding:8px 12px;text-decoration:none;display:block;}
  .lp-mobile-sub a:hover{color:#1257F0;}
  .lp-mobile-menu-item span{transition:transform 0.2s;display:inline-block;}
  .lp-mobile-sub.open + * .lp-mobile-menu-item span,
  .lp-mobile-menu-item.active span{transform:rotate(90deg);}
  .lp-mobile-btns{display:flex;flex-direction:column;gap:10px;margin-top:20px;}

  @media(max-width:1024px){
    .lp-nav-links{display:none;}
    .lp-nav-btns{display:none;}
    .lp-hamburger{display:flex;}
  }

  @media(max-width:639px){
    .lp-signin-desktop{display:none!important;}
    .lp-hero-btns{flex-direction:column;align-items:stretch;}
    .lp-stats{flex-direction:column;border-radius:12px;}
    .lp-stat{border-right:none;border-bottom:1px solid rgba(18,87,240,0.1);padding:16px 24px;}
    .lp-stat:last-child{border-bottom:none;}
    .lp-section{padding:60px 1.25rem;}
    .lp-ai-strip{margin:0 1.25rem;padding:28px 20px;}
    .lp-footer{flex-direction:column;align-items:center;text-align:center;}
  }.inbox-row:hover{background:var(--bg2)!important;}


/* ── CLIENT PANELS RESPONSIVE WIDTH ── */
/* On phone — full width, minimal padding */
body.device-phone .cl-panel-inner{max-width:100%;padding:16px 12px;}
/* On tablet — 720px max */
body.device-tablet .cl-panel-inner{max-width:720px;padding:20px 16px;}
/* On desktop — 860px max */
body.device-desktop .cl-panel-inner{max-width:860px;padding:24px 20px;}
/* cl-dashboard (Check Finances) */
body.device-phone #cl-dashboard{padding:0 12px;}
body.device-tablet #cl-dashboard .kpi-grid{grid-template-columns:repeat(2,1fr);}
body.device-desktop #cl-dashboard{max-width:860px;margin:0 auto;padding:0 20px;}

/* ── CLIENT PANEL WIDTHS ── */
/* All client sliding panels: constrained width on desktop */
#cl-mybooks-panel > div,
#cl-grow-panel > div,
#cl-vault-panel > div,
#cl-miles-panel > div,
#cl-taxes-panel > div,
#cl-invoice-panel > div,
#cl-settings-panel > div,
#cl-documents-panel > div,
#cl-docform-panel > div,
#cl-directory > div,
#cl-tile-customizer > div{max-width:860px;margin-left:auto;margin-right:auto;}

/* Phone: tighter padding */
body.device-phone #cl-mybooks-panel > div,
body.device-phone #cl-grow-panel > div,
body.device-phone #cl-vault-panel > div,
body.device-phone #cl-miles-panel > div,
body.device-phone #cl-invoice-panel > div,
body.device-phone #cl-settings-panel > div,
body.device-phone #cl-documents-panel > div,
body.device-phone #cl-docform-panel > div{padding-left:12px;padding-right:12px;}


/* ═══════════════════════════════════════════
   PULSE-STYLE CLIENT UI
   Fonts: Plus Jakarta Sans (headings) + DM Sans (body)
═══════════════════════════════════════════ */

/* ── CSS VARS (Navazia brand) ── */
:root {
  --navy: #1a1a2e;
  --navy2: #0a0d14;
  --t2: #5a6480;
  --t3: #9ba3b8;
  --brand: linear-gradient(135deg, #1257F0 0%, #0A2466 100%);
  --brand-deep: linear-gradient(135deg, #0A2466 0%, #1257F0 100%);   /* navy into Navazia blue */
}

/* ── APP NAV (Bottom bar mobile / Left sidebar desktop) ── */
.cl-app-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(26,26,46,0.20);
  display: flex;
  align-items: center;
  z-index: 500;
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Mobile nav items */
.cl-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border: none;
  background: none;
  cursor: pointer;
  color: #4a5060;
  transition: color 0.18s;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.cl-nav-item.active { color: #1257F0; }

/* Elements hidden on mobile bottom bar */
.cl-nav-brand,
.cl-nav-bubble,
.cl-nav-label,
.cl-nav-divider,
.cl-nav-section-lbl,
.cl-nav-secondary { display: none; }

/* Mobile badge */
.cl-nav-badge {
  position: absolute;
  top: 4px; right: calc(50% - 16px);
  background: #ff4422; color: white;
  font-size: 0.5rem; font-weight: 700;
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cl-nav-badge.hidden { display: none; }

.cl-nav-mob-icon { display: block; }
.cl-nav-mob-lbl { line-height: 1; font-size: 0.6rem; }

/* ── DESKTOP / TABLET: Left sidebar ── */
@media (min-width: 768px) {
  .cl-app-nav {
    position: fixed;
    top: 0; bottom: 0; left: 0; right: auto;
    width: 240px; height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    border-top: none;
    border-right: 1px solid rgba(26,26,46,0.20);
    background: #ffffff;
    padding: 16px 14px 24px;
    gap: 4px;
    overflow-y: auto;
  }

  .cl-nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--navy);
    letter-spacing: -0.02em;
    padding: 4px 10px 20px;
    border-bottom: 1px solid rgba(26,26,46,0.20);
    margin-bottom: 8px;
    flex-shrink: 0;
  }

  .cl-nav-item {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #4a6080;
    background: white;
    border: 1.5px solid #d1d5db;
    box-shadow: 0 1px 3px rgba(26,26,46,0.04);
    transition: all 0.15s;
    text-align: left;
    min-height: 48px;
  }

  .cl-nav-item:hover:not(.active) {
    border-color: rgba(18,87,240,0.22);
    box-shadow: 0 3px 8px rgba(0,48,120,0.08);
    transform: translateX(2px);
    color: var(--navy);
  }

  .cl-nav-item.active {
    background: linear-gradient(135deg, rgba(0,200,152,0.07), rgba(18,87,240,0.09));
    border-color: rgba(18,87,240,0.28);
    color: var(--navy);
    box-shadow: 0 3px 10px rgba(18,87,240,0.1);
  }

  .cl-nav-item.active::before {
    content: '';
    position: absolute;
    left: -1.5px; top: 20%; bottom: 20%;
    width: 3px;
    background: linear-gradient(180deg, #0A2466, #1257F0);
    border-radius: 2px;
  }

  .cl-nav-bubble {
    display: flex;
    width: 34px; height: 34px;
    border-radius: 9px;
    align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
  }

  .cl-nav-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
  }

  .cl-nav-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cl-nav-sub {
    font-size: 0.62rem;
    color: var(--t2);
    font-weight: 400;
    white-space: nowrap;
  }

  .cl-nav-mob-icon,
  .cl-nav-mob-lbl { display: none; }

  .cl-nav-secondary { display: flex; }

  .cl-nav-divider {
    display: block;
    height: 1px;
    background: rgba(26,26,46,0.20);
    margin: 8px 4px;
  }

  .cl-nav-section-lbl {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--t3);
    padding: 0 12px;
    margin-bottom: 2px;
  }
}

/* ── SHELL (content area right of sidebar) ── */
.cl-shell {
  display: block;
  min-height: 100vh;
  padding-bottom: 64px;
  background: #ffffff;
}

@media (min-width: 768px) {
  .cl-shell {
    margin-left: 240px;
    padding-bottom: 0;
  }
}

/* ── SCREENS ── */
.cl-screen {
  display: none;
  min-height: calc(100vh - 64px);
  background: #ffffff;
}
.cl-screen.active { display: block; }
@media (min-width: 768px) {
  .cl-screen { min-height: 100vh; }
}

/* ── HOME FLAT SCROLL AREA ── */
.cl-home-flat {
  background: #ffffff;
  padding: 16px 18px 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--navy);
}

/* ── HOME TOP BAR ── */
.cl-home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}

.cl-home-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--navy);
}

/* Hide logo on desktop since sidebar has it */
@media (min-width: 768px) {
  .cl-home-logo { display: none; }
}

.cl-home-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 4px 10px rgba(18,87,240,0.2);
}

.cl-home-ai-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  filter: drop-shadow(0 2px 5px rgba(26,86,219,0.3));
  transition: transform 0.15s;
}
.cl-home-ai-btn:hover { transform: scale(1.08); }

/* ── GREETING ── */
.cl-home-greet-row {
  padding: 2px 2px 0;
}

.cl-home-greeting {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 2px;
}

.cl-home-sub {
  font-size: 0.78rem;
  color: var(--t2);
}

/* ── NET CARD ── */
.cl-net-card {
  background: var(--brand-deep);
  border-radius: 20px;
  padding: 18px 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px -8px rgba(26,26,46,0.3);
  text-align: center;
  cursor: pointer;
}

.cl-net-card::after {
  content: '';
  position: absolute;
  top: -36px; right: -36px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  pointer-events: none;
}

.cl-net-lbl {
  position: relative; z-index: 1;
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.cl-net-val {
  position: relative; z-index: 1;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 4px;
}

.cl-net-sub {
  position: relative; z-index: 1;
  font-size: 0.72rem;
  opacity: 0.75;
}

/* ── KPI ROW ── */
.cl-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cl-kpi-card {
  background: #f8f9fc;
  border-radius: 16px;
  padding: 14px 16px;
  border: 1.5px solid #d1d5db;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cl-kpi-card:hover {
  box-shadow: 0 4px 12px rgba(0,48,120,0.08);
}

.cl-kpi-card.cl-kpi-green { }
.cl-kpi-card.cl-kpi-red   { }

.cl-kpi-lbl {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--t2);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.cl-kpi-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
}

.cl-kpi-green .cl-kpi-val { color: #1F9D46; }
.cl-kpi-red   .cl-kpi-val { color: #c04820; }

/* ── SECTION TITLES ── */
.cl-home-section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.01em;
  margin-bottom: -4px;
}

/* ── QUICK GRID ── */
.cl-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (min-width: 480px) {
  .cl-quick-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
  .cl-quick-grid { grid-template-columns: repeat(6, 1fr); }
}

.cl-quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  background: white;
  border: 1.5px solid #d1d5db;
  border-radius: 14px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
  box-shadow: 0 1px 4px rgba(26,26,46,0.05);
  -webkit-tap-highlight-color: transparent;
}

.cl-quick-card:hover {
  border-color: rgba(18,87,240,0.25);
  box-shadow: 0 4px 10px rgba(0,48,120,0.09);
  transform: translateY(-1px);
}

.cl-quick-card:active { transform: translateY(0); }

.cl-quick-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.cl-quick-lbl {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  line-height: 1.2;
}

/* ── TIP CARD ── */
.cl-home-tip {
  background: linear-gradient(135deg, #f0f8ff, #e8f4f8);
  border-radius: 14px;
  padding: 14px 16px;
  border: 1.5px solid #d1d5db;
}

.cl-home-tip-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #0B46CC;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.cl-home-tip-text {
  font-size: 0.82rem;
  color: var(--t2);
  line-height: 1.5;
}

/* ── PANEL LAYER (old panels mount here, fullscreen overlay) ── */
.cl-panel-layer {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 50;
  overflow-y: auto;
}

/* Keep existing fixed panels working at right z-index */
#cl-tile-customizer,
#cl-projects-panel,
#cl-calendar-panel,
#cl-security-panel,
#cl-employees-panel,
#cl-miles-panel,
#cl-mybooks-panel,
#cl-financials-panel,
#cl-settings-panel,
#cl-grow-panel,
#cl-customers-panel,
#cl-invoice-panel,
#cl-vault-panel,
#cl-messages-panel,
#cl-directory,
#cl-documents-panel,
#cl-docform-panel {
  top: 0 !important;
  bottom: 64px !important; /* clear mobile bottom nav */
  z-index: 600 !important;
}

/* On desktop shift panels right of sidebar, full height */
@media (min-width: 768px) {
  #cl-tile-customizer,
  #cl-projects-panel,
  #cl-calendar-panel,
  #cl-security-panel,
  #cl-employees-panel,
  #cl-miles-panel,
  #cl-mybooks-panel,
  #cl-financials-panel,
  #cl-settings-panel,
  #cl-grow-panel,
  #cl-customers-panel,
  #cl-invoice-panel,
  #cl-vault-panel,
  #cl-messages-panel,
  #cl-directory,
  #cl-documents-panel,
  #cl-docform-panel {
    left: 240px !important;
    bottom: 0 !important;
  }
}

/* AI panel repositioned */
#cl-ai-panel {
  bottom: 72px !important; /* above mobile nav */
  z-index: 800 !important;
}

@media (min-width: 768px) {
  #cl-ai-panel {
    bottom: 24px !important;
    left: 252px !important;
    right: auto !important;
  }
}

/* Phone: always 3-col quick grid */
body.device-phone .cl-quick-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

body.device-phone .cl-home-flat {
  padding: 12px 14px 90px;
}

/* ── DESKTOP TWO-COLUMN HOME LAYOUT ── */

/* Goal card — Pulse style */
.cl-goal-card {
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(26,26,46,0.04);
}
.cl-goal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.cl-goal-emoji { font-size: 1.1rem; flex-shrink: 0; }
.cl-goal-body  { flex: 1; min-width: 0; }
.cl-goal-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8rem; font-weight: 700; color: var(--navy); }
.cl-goal-sub   { font-size: 0.68rem; color: var(--t2); margin-top: 1px; }
.cl-goal-pct   { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.78rem; font-weight: 700; color: var(--navy); flex-shrink: 0; }
.cl-goal-bar   { height: 5px; background: rgba(26,26,46,0.20); border-radius: 3px; overflow: hidden; }
.cl-goal-fill  { height: 100%; background: linear-gradient(90deg, #0A2466, #1257F0); border-radius: 3px; transition: width 0.4s ease; }

/* Invoice / Bill card — Pulse style */
.cl-inv-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(26,26,46,0.04);
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.cl-inv-card:hover { box-shadow: 0 4px 12px rgba(0,48,120,0.09); }
.cl-inv-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg,#fff7e0,#ffeab0);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.cl-inv-body { flex: 1; min-width: 0; }
.cl-inv-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8rem; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-inv-sub   { font-size: 0.68rem; color: var(--t2); margin-top: 1px; }
.cl-inv-amt   { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.88rem; font-weight: 800; color: var(--navy); flex-shrink: 0; }
.cl-inv-amt.overdue { color: #D85A30; }
.cl-inv-amt.paid    { color: #1F9D46; }

/* Empty state */
.cl-empty-msg  { font-size: 0.8rem; color: var(--t2); padding: 8px 0; }
.cl-link-btn   { background: none; border: none; color: #1257F0; cursor: pointer; font-size: 0.8rem; font-weight: 600; padding: 0; font-family: inherit; }

/* Card list */
.cl-card-list  { display: flex; flex-direction: column; gap: 8px; }

/* Mobile: right col is hidden, show only on desktop */
.cl-home-right-col { display: none; }

@media (min-width: 768px) {
  .cl-home-flat {
    padding: 20px 28px 40px;
    display: grid;
    grid-template-columns: 3fr 2fr;
    column-gap: 24px;
    row-gap: 12px;
    align-items: start;
  }

  .cl-home-topbar    { grid-column: 1 / -1; }
  .cl-home-greet-row,
  .cl-net-card,
  .cl-kpi-row,
  .cl-home-tip       { grid-column: 1; }

  .cl-home-right-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    grid-column: 2;
    grid-row: 2 / 8;
  }
}

@media (min-width: 1100px) {
  .cl-home-flat { padding: 24px 36px 40px; column-gap: 32px; }
}

/* ── SALES VS EXPENSES CHART (Pulse mm-cmp style) ── */
.cl-sv-chart-card {
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(26,26,46,0.04);
  grid-column: 1; /* stays in left col on desktop */
}

.cl-sv-chart-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  row-gap: 6px;
}

.cl-sv-chart-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -0.01em;
  flex: 1;
}

.cl-sv-legend {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cl-sv-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  color: #5a6480;
  font-weight: 600;
  white-space: nowrap;
}

.cl-sv-dot {
  width: 9px; height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.cl-sv-dot-rev { background: linear-gradient(180deg, #0A2466, #1257F0); }
.cl-sv-dot-exp { background: #e0e0ea; }

.cl-sv-see-all {
  background: none;
  border: none;
  color: #1257F0;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
}
.cl-sv-see-all:hover { background: rgba(18,87,240,0.06); }

/* The bar area — aligned to bottom with axis lines */
.cl-sv-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
  padding: 0 0 0 4px;
  border-left: 1.5px solid #d1d5db;
  border-bottom: 1.5px solid #d1d5db;
  overflow: hidden;
}

/* Each month column */
.cl-sv-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  gap: 0;
}

/* Two bars side by side */
.cl-sv-pair {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100px;
}

.cl-sv-bar-track {
  flex: 1;
  max-width: 14px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: rgba(26,26,46,0.05);
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.cl-sv-bar-fill {
  width: 100%;
  border-radius: 3px 3px 0 0;
  transition: height 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.cl-sv-bar-rev .cl-sv-bar-fill { background: #8fbe6a; }
.cl-sv-bar-exp .cl-sv-bar-fill { background: #e08060; }

/* Month label */
.cl-sv-lbl {
  font-size: 0.52rem;
  font-weight: 600;
  color: #4a5060;
  text-align: center;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
}

@media (min-width: 480px) {
  .cl-sv-pair { height: 110px; }
  .cl-sv-bar-track { max-width: 16px; }
  .cl-sv-lbl { font-size: 0.56rem; }
}

@media (min-width: 768px) {
  .cl-sv-pair { height: 120px; }
  .cl-sv-bar-track { max-width: 18px; }
}

/* ════════════════════════════════════════════
   PHONE QUICK TOOLS STRIP
════════════════════════════════════════════ */

/* Only visible on mobile */
.cl-qt-wrap {
  display: block;
  padding: 0;
  grid-column: 1; /* left col on desktop */
}

/* Phone: 4-column grid of square pills */
.cl-qt-strip {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 4px 18px 8px;
  scrollbar-width: none;
  align-items: stretch;
}
.cl-qt-strip::-webkit-scrollbar { display: none; }

/* Each pill/tile */
.cl-qt-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  width: 72px;
  padding: 12px 6px 10px;
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 16px;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 2px 6px rgba(26,26,46,0.05);
  transition: transform 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
  font-family: 'DM Sans', sans-serif;
}
.cl-qt-pill:active { transform: scale(0.95); box-shadow: none; }

.cl-qt-pill-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.cl-qt-pill-lbl {
  font-size: 0.6rem;
  font-weight: 700;
  color: #1a1a2e;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The + add pill */
.cl-qt-pill-add {
  border-style: dashed;
  border-color: rgba(18,87,240,0.35);
  background: rgba(18,87,240,0.04);
}
.cl-qt-pill-add .cl-qt-pill-icon {
  background: rgba(18,87,240,0.1);
  color: #1257F0;
  font-size: 1.4rem;
  font-weight: 300;
}
.cl-qt-pill-add .cl-qt-pill-lbl { color: #1257F0; }

/* Hide strip on desktop — sidebar handles it there */
@media (min-width: 768px) {
  .cl-qt-wrap { display: none; }
}

/* ── BOTTOM SHEET OVERLAY ── */
.cl-qt-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 900;
  backdrop-filter: blur(2px);
}
.cl-qt-sheet-overlay.open { display: block; }

/* ── BOTTOM SHEET ── */
.cl-qt-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-radius: 24px 24px 0 0;
  z-index: 901;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.cl-qt-sheet.open { transform: translateY(0); }

.cl-qt-sheet-handle {
  width: 36px; height: 4px;
  background: rgba(26,26,46,0.15);
  border-radius: 2px;
  margin: 12px auto 0;
  flex-shrink: 0;
}

.cl-qt-sheet-header {
  padding: 14px 20px 10px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(26,26,46,0.20);
}
.cl-qt-sheet-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 3px;
}
.cl-qt-sheet-sub {
  font-size: 0.75rem;
  color: #5a6480;
}

/* Scrollable grid of tool options */
.cl-qt-sheet-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px 8px;
  overflow-y: auto;
  flex: 1;
}

/* Each option in the sheet — long tile style */
.cl-qt-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8f9fc;
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  min-height: 52px;
}
.cl-qt-option.selected {
  background: rgba(18,87,240,0.06);
  border-color: #1257F0;
}
.cl-qt-option.selected::after {
  content: '✓';
  position: absolute;
  right: 14px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #1257F0;
}

/* Save button */
.cl-qt-sheet-footer {
  padding: 12px 16px 20px;
  flex-shrink: 0;
  border-top: 1px solid rgba(26,26,46,0.20);
}
.cl-qt-sheet-save {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #1257F0, #0A2466);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.01em;
}
.cl-qt-sheet-save:active { opacity: 0.88; }

/* ════════════════════════════════════════════
   PHONE-SPECIFIC HOME SCREEN CHANGES
════════════════════════════════════════════ */

/* ── Acc bar: visible at all sizes (connection requests appear here) ── */

/* ── Topbar phone layout ──
   Phone: greeting fills center, avatar right, logo+AI btn hidden */


@media (max-width: 767px) {
  /* Hide AI button from topbar — float btn handles it */
  .cl-home-ai-btn { display: none !important; }
  /* Tighter padding on phone */
  .cl-home-flat { padding-top: 12px; }
}

/* ── Floating AI button — phone only ── */
.cl-ai-float-btn {
  display: none; /* hidden by default */
}

@media (max-width: 767px) {
  .cl-ai-float-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: calc(64px + 16px); /* above bottom nav */
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a56db, #7c3aed);
    border: none;
    cursor: pointer;
    z-index: 490; /* below bottom nav (500) but above content */
    box-shadow: 0 4px 16px rgba(26,86,219,0.35), 0 2px 6px rgba(0,0,0,0.12);
    filter: drop-shadow(0 2px 8px rgba(26,86,219,0.3));
    transition: transform 0.15s, box-shadow 0.15s;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .cl-ai-float-btn:active {
    transform: scale(0.92);
    box-shadow: 0 2px 8px rgba(26,86,219,0.25);
  }

  /* Small "AI" badge on the float button */
  .cl-ai-float-btn::after {
    content: 'AI';
    position: absolute;
    top: -2px; right: -2px;
    background: #fbbf24;
    color: #fff;
    font-size: 0.48rem;
    font-weight: 800;
    font-family: 'Plus Jakarta Sans', sans-serif;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
  }
}

/* Hide float btn when AI panel is open */
body.ai-panel-open .cl-ai-float-btn { display: none !important; }

/* ── Phone invoices section (hidden on desktop — right col handles it) ── */
.cl-home-phone-invoices { display: block; grid-column: 1; }
@media (min-width: 768px) {
  .cl-home-phone-invoices { display: none; }
}

/* Section header row with title + see all link */
.cl-home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cl-home-see-all {
  background: none;
  border: none;
  color: #1257F0;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  padding: 0;
}

/* ── TAX PILLS ROW ── */
.cl-tax-pills {
  display: flex;
  gap: 10px;
  grid-column: 1; /* left col on desktop */
}

.cl-tax-pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.cl-tax-pill:active { transform: scale(0.97); }

.cl-tax-st {
  background: #fff8ee;
  border: 1.5px solid #f59e0b;
}
.cl-tax-et {
  background: #fff9e6;
  border: 1.5px solid #eab308;
}

.cl-tax-pill-icon { font-size: 1rem; flex-shrink: 0; }

.cl-tax-pill-lbl {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 1;
}

.cl-tax-pill-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  color: #b45309;
  white-space: nowrap;
}

/* Dim pills when zero owed */
.cl-tax-pill.zero {
  opacity: 0.5;
  border-color: rgba(26,26,46,0.20);
  background: var(--bg2, #f8f9fc);
}
.cl-tax-pill.zero .cl-tax-pill-lbl { color: var(--t2, #5a6480); }
.cl-tax-pill.zero .cl-tax-pill-val { color: var(--t2, #5a6480); }

/* KPI period label + YTD sub */
.cl-kpi-period {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--t3, #9ba3b8);
  text-transform: none;
  letter-spacing: 0;
}
.cl-kpi-sub-lbl {
  font-size: 0.65rem;
  color: var(--t2, #5a6480);
  margin-top: 2px;
}

/* ── DESKTOP SIDEBAR QUICK TOOLS GRID ── */
.cl-nav-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

/* 2-column grid inside sidebar */
.cl-nav-qt-grid {
  display: none; /* hidden on mobile */
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 4px 2px;
}

@media (min-width: 768px) {
  .cl-nav-qt-grid { display: grid; }
}

/* Each tile in the sidebar grid */
.cl-nav-qt-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 13px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(26,26,46,0.04);
  transition: all 0.14s;
  font-family: 'DM Sans', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.cl-nav-qt-tile:hover {
  border-color: rgba(18,87,240,0.28);
  box-shadow: 0 3px 10px rgba(0,48,120,0.08);
  transform: translateY(-1px);
}
.cl-nav-qt-tile:active { transform: scale(0.96); }

.cl-nav-qt-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}

.cl-nav-qt-lbl {
  font-size: 0.6rem;
  font-weight: 700;
  color: #1a1a2e;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/* The + add tile */
.cl-nav-qt-tile-add {
  border-style: dashed;
  border-color: rgba(18,87,240,0.35);
  background: rgba(18,87,240,0.04);
}
.cl-nav-qt-tile-add .cl-nav-qt-icon {
  background: rgba(18,87,240,0.1);
  color: #1257F0;
  font-size: 1.3rem;
  font-weight: 300;
}
.cl-nav-qt-tile-add .cl-nav-qt-lbl { color: #1257F0; }

/* ── Desktop: bottom sheet becomes a centered modal ── */
@media (min-width: 768px) {
  /* Sheet hidden by default on desktop too */
  .cl-qt-sheet {
    display: none;
    position: fixed;
    inset: 0;
    left: auto; right: auto; bottom: auto;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    border-radius: 20px;
    width: 480px;
    max-height: 80vh;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    margin: 0;
    transition: none;
  }
  .cl-qt-sheet.open {
    display: flex;
    transform: translate(-50%, -50%) scale(1);
    animation: qtModalIn 0.22s ease both;
  }
  .cl-qt-sheet-overlay.open {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @keyframes qtModalIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
}

/* ════════════════════════════════════════════
   UNIFIED LONG TILE SYSTEM
   Same tile style for desktop sidebar list
   and phone horizontal strip
════════════════════════════════════════════ */

/* ── Desktop sidebar quick tools list ── */
#clNavQtList {
  display: none;
  flex-direction: column;
  gap: 4px;
}
@media (min-width: 768px) {
  #clNavQtList { display: flex; }
}

/* Long tile — matches existing cl-nav-item style exactly */
.cl-nav-qt-tile-long {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #4a6080;
  background: white;
  border: 1.5px solid #d1d5db;
  box-shadow: 0 1px 3px rgba(26,26,46,0.04);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  min-height: 48px;
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.cl-nav-qt-tile-long:hover {
  border-color: rgba(18,87,240,0.22);
  box-shadow: 0 3px 8px rgba(0,48,120,0.08);
  transform: translateX(2px);
  color: #1a1a2e;
}
.cl-nav-qt-tile-long:active { transform: scale(0.98); }

/* Add tile — dashed */
.cl-nav-qt-tile-long.add {
  border-style: dashed;
  border-color: rgba(18,87,240,0.35);
  background: rgba(18,87,240,0.04);
  color: #1257F0;
}
.cl-nav-qt-tile-long.add:hover {
  background: rgba(18,87,240,0.08);
  transform: translateX(2px);
}

.cl-nav-qt-tile-long .cl-nav-bubble {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.cl-nav-qt-tile-long .cl-nav-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.cl-nav-qt-tile-long .cl-nav-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-nav-qt-tile-long .cl-nav-sub {
  font-size: 0.62rem;
  color: #5a6480;
  font-weight: 400;
  white-space: nowrap;
}
.cl-nav-qt-tile-long.add .cl-nav-title { color: #1257F0; }
.cl-nav-qt-tile-long.add .cl-nav-sub   { color: #5B8DF6; }



/* ── Active state for rendered long tiles ── */
.cl-nav-qt-tile-long.active {
  background: linear-gradient(135deg, rgba(0,200,152,0.07), rgba(18,87,240,0.09));
  border-color: rgba(18,87,240,0.28);
  color: #1a1a2e;
  box-shadow: 0 3px 10px rgba(18,87,240,0.1);
}
.cl-nav-qt-tile-long.active::before {
  content: '';
  position: absolute;
  left: -1.5px; top: 20%; bottom: 20%;
  width: 3px;
  background: linear-gradient(180deg, #0A2466, #1257F0);
  border-radius: 2px;
}
.cl-nav-qt-tile-long.active .cl-nav-title { color: #1a1a2e; }

/* ── Mobile bottom nav bar ── */
.cl-mob-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: #fff;
  border-top: 1px solid #d1d5db;
  z-index: 600;
  align-items: center;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 8px);
  gap: 0;
  overflow: visible;
}
/* Mobile: full-screen panels stop above nav so AI bump stays visible */
@media (max-width: 767px) {
  #cl-projects-panel,
  #cl-calendar-panel,
  #cl-financials-panel,
  #cl-mybooks-panel,
  #cl-transactions-panel,
  #cl-settings-panel,
  #cl-grow-panel,
  #cl-miles-panel,
  #cl-documents-panel,
  #cl-customers-panel,
  #cl-invoice-panel,
  #cl-vault-panel,
  #cl-messages-panel,
  #cl-directory,
  #cl-employees-panel,
  #cl-security-panel,
  #cl-docform-panel {
    bottom: 110px !important;
  }
}

@media (max-width: 767px) {
  .cl-mob-nav { display: flex; }
  /* Hide desktop sidebar on mobile */
  .cl-app-nav { display: none !important; }
}

/* Mobile tab button */
.cl-mob-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border: none;
  background: none;
  cursor: pointer;
  color: #4a5060;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s;
  position: relative;
  min-width: 0;
}
.cl-mob-tab.active { color: #1a1a2e; }
.cl-mob-tab svg { display: block; }
.cl-mob-tab-lbl {
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
/* More tab dots */
.cl-mob-tab-more {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
}
.cl-mob-tab-more span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}

/* ── AI bump button in mobile nav ── */
.cl-mob-ai-bump {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  min-width: 0;
  overflow: visible;
  z-index: 600;
}
.cl-mob-ai-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1257F0 0%, #0A2466 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  bottom: 24px;
  z-index: 601;
  border: none;
  box-shadow: 0 4px 14px rgba(18,87,240,0.25);
  transition: transform 0.15s ease;
  flex-shrink: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.cl-mob-ai-bump:active .cl-mob-ai-circle {
  transform: scale(0.93);
  box-shadow: 0 2px 8px rgba(26,26,46,0.22), 0 0 0 4px #fff, 0 0 0 5px rgba(26,26,46,0.10);
}



/* ── PERMANENT NAV TILES (desktop) ── */
/* Same style as cl-nav-item but always visible */
.cl-nav-perm { display: none; } /* hidden on mobile — mob nav handles it */
@media (min-width: 768px) {
  .cl-nav-perm { display: flex; }
}

/* ── AVATAR ROW at bottom of sidebar ── */
.cl-nav-avatar-wrap {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  border: 1.5px solid #d1d5db;
  background: #fff;
  margin-top: auto; /* push to bottom */
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.cl-nav-avatar-wrap:hover {
  border-color: rgba(18,87,240,0.22);
  box-shadow: 0 3px 8px rgba(0,48,120,0.08);
}
@media (min-width: 768px) {
  .cl-nav-avatar-wrap { display: flex; }
  /* Make sidebar flex-column so avatar pushes to bottom */
  .cl-app-nav { display: flex !important; flex-direction: column; }
  #clNavQtList { flex: 1; overflow-y: auto; }
}

.cl-nav-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1257F0, #0A2466);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── DESKTOP FLOATING AI BUTTON ── */
.cl-ai-desk-float {
  display: none; /* hidden on mobile — phone float handles it */
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a56db, #7c3aed);
  border: none;
  cursor: pointer;
  z-index: 490;
  box-shadow: 0 6px 20px rgba(26,86,219,0.35), 0 2px 8px rgba(0,0,0,0.15);
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.cl-ai-desk-float::after {
  content: 'AI';
  position: absolute;
  top: -2px; right: -2px;
  background: #fbbf24;
  color: #fff;
  font-size: 0.45rem;
  font-weight: 800;
  font-family: 'Plus Jakarta Sans', sans-serif;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.cl-ai-desk-float:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 28px rgba(26,86,219,0.4);
}
.cl-ai-desk-float:active {
  transform: scale(0.95);
}
@media (min-width: 768px) {
  .cl-ai-desk-float { display: flex; }
  /* Hide phone float on desktop */
  .cl-ai-float-btn { display: none !important; }
  /* Hide desktop AI btn from topbar since float handles it */
  .cl-home-ai-btn { display: none !important; }
}

body.ai-panel-open .cl-ai-desk-float { display: none !important; }


/* ── Desktop: hide home topbar avatar ── */
@media (min-width: 768px) {
  .cl-home-avatar { display: none !important; }
}

/* ── Phone avatar dropdown menu ── */
.cl-home-avatar {
  position: relative; /* needed for menu positioning */
  border: none;
  cursor: pointer;
}

.cl-avatar-menu {
  display: none;
  position: fixed;
  top: 70px;
  right: 16px;
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 180px;
  z-index: 1000;
  overflow: hidden;
  animation: avatarMenuIn 0.15s ease;
}
@keyframes avatarMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cl-avatar-menu.open { display: block; }

.cl-avatar-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1a1a2e;
  text-align: left;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.cl-avatar-menu-item:hover { background: #f5f7fa; }
.cl-avatar-menu-item:active { background: #eef0f5; }
.cl-avatar-menu-danger { color: #D85A30; }
.cl-avatar-menu-divider {
  height: 1px;
  background: rgba(26,26,46,0.20);
  margin: 0 12px;
}

/* Only show on phone — desktop uses sidebar avatar */
@media (min-width: 768px) {
  .cl-avatar-menu { display: none !important; }
}

/* ── Pulse-style ranked list (vendors + categories) ── */
.aic-ranked-list { display:flex; flex-direction:column; gap:10px; }
.aic-ranked-row { display:flex; align-items:center; gap:12px; }
.aic-ranked-num { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.72rem; font-weight:800; color:#aab8cc; width:18px; text-align:right; flex-shrink:0; }
.aic-ranked-bar-wrap { flex:1; height:22px; background:#f0f4fa; border-radius:6px; overflow:hidden; }
.aic-ranked-bar-fill { height:100%; border-radius:6px; display:flex; align-items:center; padding:0 8px; font-family:'DM Sans',sans-serif; font-size:0.72rem; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; }
.aic-ranked-val { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.78rem; font-weight:700; color:#1a1a2e; flex-shrink:0; min-width:60px; text-align:right; }

/* ── Pulse monthly grouped bars ── */
.aic-monthly-cols { display:flex; align-items:flex-end; gap:4px; padding-bottom:4px; overflow-x:auto; }
.aic-monthly-col { flex:1; min-width:22px; display:flex; flex-direction:column; align-items:center; }
.aic-monthly-bars { display:flex; gap:2px; align-items:flex-end; width:100%; justify-content:center; }
.aic-monthly-bar { min-width:6px; min-height:2px; border-radius:3px 3px 0 0; }
.aic-monthly-col-label { font-family:'DM Sans',sans-serif; font-size:0.62rem; color:#aab8cc; text-align:center; margin-top:4px; }
.aic-monthly-bar-empty { flex:1; height:40px; border-radius:4px 4px 0 0; background:repeating-linear-gradient(-45deg,#f0f4fa,#f0f4fa 3px,#e4eaf4 3px,#e4eaf4 6px); align-self:flex-end; }
.aic-monthly-legend { display:flex; gap:16px; justify-content:center; margin-top:10px; }
.aic-monthly-legend-item { display:flex; align-items:center; gap:5px; font-family:'DM Sans',sans-serif; font-size:0.72rem; color:#5a6480; }
.aic-monthly-legend-dot { width:8px; height:8px; border-radius:2px; }

/* ── Upload pill — Pulse style, greeting row ── */
.cl-home-greet-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 4px 0;
}
.cl-home-greet-wrap {
  flex: 1;
  min-width: 0;
}
.cl-upload-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #1a1a2e;
  border: 1.5px solid #d1d5db;
  border-radius: 16px;
  padding: 6px 12px 6px 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  transition: background 0.12s ease, color 0.12s ease;
  text-decoration: none;
}
.cl-upload-pill:hover  { background: #1a1a2e; color: #fff; }
.cl-upload-pill:active { background: #1a1a2e; color: #fff; }
.cl-upload-pill-icon { font-size: 0.95rem; line-height: 1; }
.cl-upload-pill-lbl  { white-space: nowrap; }

/* ── Review card — uncategorized transactions alert (Pulse style) ── */
.cl-review-card {
  background: #fffbeb;
  border-radius: 14px;
  padding: 14px 14px 14px 16px;
  border: 1.5px solid #fde68a;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(180,120,0,0.08);
  grid-column: 1;
}
.cl-review-card.hidden { display: none !important; }
.cl-review-card-icon { font-size: 1.4rem; flex-shrink: 0; }
.cl-review-card-body { flex: 1; min-width: 0; }
.cl-review-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem; font-weight: 700;
  color: #92400e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-review-card-sub { font-family: 'DM Sans', sans-serif; font-size: 0.75rem; color: #b45309; margin-top: 2px; }
.cl-review-card-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.cl-review-card-btn {
  background: #f59e0b; color: white;
  border: none; border-radius: 8px;
  padding: 7px 12px;
  font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: background 0.12s;
}
.cl-review-card-btn:hover { background: #d97706; }
.cl-review-card-snooze {
  background: none; border: none;
  font-family: 'DM Sans', sans-serif; font-size: 0.72rem;
  color: #b45309; cursor: pointer; text-align: center; padding: 2px;
}

/* ── Review card positioning ── */
@media (max-width: 767px) {
  .cl-ai-float-btn { display: none !important; }
  .cl-announcements-wrap  { order: 0; }   /* first: news from the accountant */
  .cl-sv-chart-card       { order: 1; }
  .cl-qt-wrap             { order: 2; }
  /* Without an order of its own this sat above the chart on phones,
     while desktop showed it below. Same place on both now. */
  .cl-accounts-wrap       { order: 3; }
  .cl-review-card         { order: 4; }
  .cl-home-phone-invoices { order: 5; }
  .cl-home-tip            { order: 6; }
  .cl-home-flat { display: flex; flex-direction: column; }
}

/* ── Greeting: time greeting small top, business name large below ── */
.cl-home-greeting {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: #5a6480 !important;
  margin-bottom: 2px !important;
}
#cl-home-sub {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #1a1a2e !important;
  margin-bottom: 0 !important;
}


/* ══════════════════════════════════════════════════════
   CLIENT TRANSACTIONS PANEL — clt-* classes
   Mirrors Pulse filter layout, uses Navazia CSS vars
   ══════════════════════════════════════════════════════ */

/* Account bar */
.clt-account-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1.5px solid #d1d5db;
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
}
.clt-account-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--text3);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.clt-account-select {
  flex: 1;
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid #d1d5db;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

/* Filter row — phone-first */
.clt-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  align-items: center;
}
.clt-filter-sel {
  padding: 8px 8px;
  border: 1.5px solid #d1d5db;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  font-family: inherit;
  outline: none;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  min-width: 0;
}
.clt-filter-sel:focus { border-color: var(--blue); }
.clt-filter-row > .clt-filter-sel#cltFilterYear,
.clt-filter-row > .clt-filter-sel#cltFilterMonth {
  flex: 1 1 0;
  min-width: 0;
}

/* ⚙ More filters button (phone) */
.clt-more-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border: 1.5px solid #d1d5db;
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  flex-shrink: 0;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.clt-more-filters-btn.is-active {
  background: var(--blue-light);
  border-color: var(--blue);
  color: var(--blue);
}
.clt-mf-icon { font-size: 13px; line-height: 1; }
.clt-mf-lbl  { white-space: nowrap; }
.clt-mf-badge {
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 16px;
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}
.clt-mf-badge.hidden { display: none; }

/* 🔍 Search toggle button (phone) */
.clt-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px solid #d1d5db;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text2);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.clt-search-toggle.is-active {
  background: var(--blue-light);
  border-color: var(--blue);
  color: var(--blue);
}

/* Secondary filters panel (phone: hidden; toggled open) */
.clt-secondary-filters {
  display: none;
  flex: 1 1 100%;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.clt-secondary-filters.is-open {
  display: flex;
  animation: cltSecSlide 0.16s ease-out;
}
@keyframes cltSecSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.clt-secondary-filters .clt-filter-sel { width: 100%; }

/* Clear filters button */
.clt-clear-filters-btn {
  padding: 8px 12px;
  background: transparent;
  border: 0.5px solid rgba(18,87,240,0.25);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  font-family: inherit;
  align-self: flex-start;
  -webkit-tap-highlight-color: transparent;
}
.clt-clear-filters-btn:active { opacity: 0.7; }

/* Search bar (collapsed on phone, open on desktop) */
.clt-controls {
  display: none;
  margin-bottom: 10px;
}
.clt-controls.is-open {
  display: flex;
  align-items: center;
  gap: 8px;
  animation: cltSecSlide 0.16s ease-out;
}
.clt-search-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg2);
  border: 1.5px solid #d1d5db;
  border-radius: var(--radius);
  padding: 6px 10px;
  transition: border-color 0.15s;
}
.clt-search-wrap:focus-within { border-color: var(--blue); }
.clt-search {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  font-family: inherit;
}
.clt-search::placeholder { color: var(--text3); font-size: 13px; }
.clt-search-close {
  background: transparent;
  border: none;
  font-size: 13px;
  color: var(--text3);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}

/* Summary cards */
.clt-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.clt-sum-card {
  background: var(--bg2);
  border: 1.5px solid #d1d5db;
  border-radius: var(--radius-lg);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.clt-sum-lbl {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.clt-sum-val {
  font-size: 15px;
  font-weight: 800;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.clt-sum-card.grn .clt-sum-val { color: var(--green); }
.clt-sum-card.red .clt-sum-val { color: var(--coral); }
.clt-sum-card.blu .clt-sum-val { color: var(--blue); }

/* ── Desktop overrides (≥768px) ── */
@media (min-width: 768px) {
  .clt-more-filters-btn,
  .clt-search-toggle,
  .clt-search-close { display: none; }

  .clt-filter-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  .clt-filter-row > .clt-filter-sel#cltFilterYear,
  .clt-filter-row > .clt-filter-sel#cltFilterMonth { flex: unset; }

  .clt-secondary-filters,
  .clt-secondary-filters.is-open {
    display: contents;
    flex: unset;
    animation: none;
  }
  .clt-secondary-filters .clt-filter-sel { width: auto; }
  .clt-clear-filters-btn { display: none; }

  .clt-controls,
  .clt-controls.is-open {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

/* ── Statement reading spinner ── */
.stmt-spinner{
  width:42px;height:42px;border-radius:50%;
  border:3px solid rgba(26,26,46,0.12);
  border-top-color:var(--blue);
  animation:stmt-spin 0.9s linear infinite;
}
@keyframes stmt-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){
  .stmt-spinner{animation-duration:2.5s;}
}

/* ── Accountant bookkeeping filters ── */
.bk-filter-sel{
  height:30px;padding:0 8px;border:0.5px solid var(--border2);border-radius:var(--radius);
  background:var(--bg);color:var(--text);font-size:12px;font-family:inherit;max-width:170px;
}

/* ── Reviewing a held statement: side by side, stacked on phones ── */
@media (max-width: 767px) {
  #stmt-review-overlay { padding: 0; }
  #stmt-review-overlay .rv-shell { border-radius: 0; }
  #stmt-review-overlay .rv-body { flex-direction: column; overflow-y: auto; }
  #stmt-review-overlay .rv-pdf-col { flex: none; height: 42vh; border-right: none; border-bottom: 0.5px solid var(--border); }
  #stmt-review-overlay .rv-edit-col { flex: none; }
}

/* ── Accountant side: desktop first, the whole width of the screen ── */
#screen-bk .page { max-width: none !important; padding: 20px 28px !important; }

/* ── Bookkeeping workspace: one left panel ── */
.bk-ws-grid { grid-template-columns: 260px minmax(0, 1fr) !important; gap: 20px !important; }
/* Pinned, and sized to the window so it never has to scroll with the page */
#bk-sidebar-nav {
  position: sticky !important; top: 70px !important;
  max-height: calc(100vh - 86px); overflow-y: auto; scrollbar-width: thin;
}
.bk-panel {
  background: var(--bg); border: 0.5px solid var(--border2);
  border-radius: var(--radius-lg); overflow: hidden;
}
.bk-side-panel { margin: 0; display: block; }
.bk-side-sec { padding: 12px 14px; border-bottom: 0.5px solid var(--border); }
.bk-panel-divider { display: none; }
/* the navigation sits inside the panel instead of in its own box */
.bk-panel .bk-nav-box {
  background: none !important; border: none !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 6px !important; margin: 0 !important;
}
/* client: back link and name on one line, the tax rate beneath */
.bk-client-row { flex-wrap: wrap; gap: 8px !important; margin: 0 !important; }
.bk-client-row > div:nth-of-type(1) { flex: 1; min-width: 0; }
.bk-client-row #bk-workspace-title { font-size: 15px !important; line-height: 1.25; }
.bk-client-row > div:last-child { width: 100%; justify-content: space-between; }
.bk-month-row { margin: 0 !important; }
/* the four figures as rows of one list, not separate boxes */
#bk-summary { display: block !important; margin: 0 !important; padding: 4px 14px 8px !important; border-bottom: 0.5px solid var(--border); }
#bk-summary > div {
  display: flex !important; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: 6px; background: none !important; border: none !important; border-radius: 0 !important;
  padding: 9px 0 !important; text-align: left !important;
}
#bk-summary > div + div { border-top: 0.5px solid var(--border) !important; }
#bk-summary > div > div:first-child { margin: 0 !important; font-size: 13px !important; }
#bk-summary > div > div:nth-child(2) { font-size: 20px !important; margin: 0 !important; }
#bk-summary > div > button { width: 100%; margin-top: 4px !important; }

/* the fixed bar above the transactions: just search and filters now */
#bk-review-sticky { padding-top: 12px; }
.bk-actions { margin-left: 8px; }
.bk-selall {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text2);
  height: 30px; padding: 0 10px; border: 0.5px solid var(--border2); border-radius: var(--radius);
  background: var(--bg); cursor: pointer; user-select: none;
}
.bk-selall input { width: 15px; height: 15px; cursor: pointer; }
.bk-bulk-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 8px 12px; border-radius: var(--radius);
  background: var(--blue-light); border: 0.5px solid var(--blue-mid, #bfd3fb); font-size: 13px; color: var(--text);
}
.bk-bulk-btn {
  height: 30px; padding: 0 12px; border-radius: var(--radius); border: 0.5px solid var(--border2);
  background: var(--bg); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.bk-bulk-post { background: var(--green); border-color: var(--green); color: #fff; }
.bk-bulk-link { background: none; border: none; color: var(--text2); font-size: 12px; cursor: pointer; margin-left: auto; font-family: inherit; }
.bk-sel { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }

/* Phones: no room beside the list — navigation becomes a row, figures a 2×2 */
@media (max-width: 767px) {
  /* minmax(0,…) lets the column be narrower than the row of navigation inside
     it, so that row scrolls sideways instead of stretching the whole page */
  .bk-ws-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #bk-sidebar-nav, .bk-panel, .bk-nav-box { min-width: 0; max-width: 100%; }
  #bk-sidebar-nav { position: static !important; max-height: none; overflow: visible; top: auto !important; }
  .bk-nav-box { display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 6px !important; }
  .bk-nav-box > div:not(.ov-menu-item) { display: none !important; }
  .bk-nav-box .ov-menu-item { flex-shrink: 0; white-space: nowrap; }
  #screen-bk .page { padding: 12px !important; }
  #bk-summary { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
  #bk-summary > div { flex-direction: column; align-items: flex-start; padding: 10px 8px !important; }
  #bk-summary > div + div { border-top: none !important; }
  .bk-actions { margin-left: 0; width: 100%; }
}

/* ── Navazia dialog (replaces the browser's confirm / prompt / alert) ── */
.nav-dlg-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 42, 0.45); align-items: center; justify-content: center; padding: 16px;
  animation: navDlgFade 0.12s ease-out;
}
.nav-dlg {
  width: 100%; max-width: 420px; background: var(--bg); color: var(--text);
  border-radius: 16px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  padding: 20px 22px 18px; font-family: inherit;
}
.nav-dlg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.nav-dlg-logo { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; flex-shrink: 0; }
.nav-dlg-title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.nav-dlg-msg { font-size: 14px; color: var(--text2); line-height: 1.55; white-space: pre-line; margin: 4px 0 2px; }
.nav-dlg-input {
  width: 100%; box-sizing: border-box; height: 40px; margin-top: 12px; padding: 0 12px;
  border: 1px solid var(--border2); border-radius: 10px; font-size: 14px;
  background: var(--bg); color: var(--text); font-family: inherit;
}
.nav-dlg-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,87,240, 0.15); }
.nav-dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.nav-dlg-btn {
  height: 38px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit; border: 1px solid var(--border2); background: var(--bg); color: var(--text2);
}
.nav-dlg-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.nav-dlg-danger  { background: var(--coral); border-color: var(--coral); color: #fff; }
@keyframes navDlgFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Category box on each transaction row ── */
.bk-cat-in {
  width: 100%; box-sizing: border-box; height: 32px; padding: 0 10px;
  border: 0.5px solid var(--border2); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit;
}
.bk-cat-in::placeholder { color: var(--text3); }
.bk-cat-in:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,87,240,0.12); }
.bk-cat-in.bk-cat-bad { border-color: var(--coral); }

/* ── Remembered categories (Vendors) ── */
.bk-rules-card { background: var(--bg); border: 0.5px solid var(--border2); border-radius: var(--radius-lg); overflow: hidden; }
.bk-rules-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 0.5px solid var(--border); }
.bk-rules-count { font-size: 12px; font-weight: 700; color: var(--blue); background: var(--blue-light); border-radius: 12px; padding: 3px 10px; }
.bk-rule-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 0.5px solid var(--border); font-size: 13px; }
.bk-rule-row:last-child { border-bottom: none; }
.bk-rule-vendor { flex: 1; min-width: 0; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-rule-cat { flex: 0 0 220px; color: var(--text2); }
.bk-rule-forget { background: none; border: 0.5px solid var(--border2); border-radius: var(--radius); color: var(--text2); font-size: 12px; padding: 4px 10px; cursor: pointer; font-family: inherit; }

/* ── Custom categories ── */
.cc-card { background: var(--bg); border: 0.5px solid var(--border2); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 14px; }
.cc-copy { padding: 14px 16px; }
.cc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 0.5px solid var(--border); }
.cc-title { font-size: 14px; font-weight: 700; color: var(--text); }
.cc-sub { font-size: 12px; color: var(--text2); margin-top: 2px; }
.cc-add { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 0.5px solid var(--border); }
.cc-copy .cc-add { padding: 10px 0 0; border-bottom: none; }
.cc-input { flex: 1; min-width: 180px; height: 34px; padding: 0 12px; border: 0.5px solid var(--border2); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit; }
.cc-select { min-width: 200px; height: 34px; padding: 0 10px; border: 0.5px solid var(--border2); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit; }
.cc-btn { height: 34px; padding: 0 18px; border: none; border-radius: var(--radius); background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.cc-empty { font-size: 13px; color: var(--text3); padding: 14px 16px; }

/* ── Loans ── */
.ln-form { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.ln-q { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.ln-q .cc-input { max-width: 360px; }
.ln-hint { font-size: 11px; font-weight: 400; color: var(--text3); }
.ln-toggle { display: flex; gap: 8px; flex-wrap: wrap; }
.ln-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 180px; padding: 10px 14px;
  border: 1px solid var(--border2); border-radius: var(--radius); background: var(--bg); color: var(--text);
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; text-align: left; }
.ln-opt span { font-size: 11px; font-weight: 400; color: var(--text2); }
.ln-opt.on { border-color: var(--blue); background: var(--blue-light); box-shadow: 0 0 0 2px rgba(18,87,240,0.15); }
.ln-form .cc-btn { align-self: flex-start; }
.ln-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ln-card { background: var(--bg); border: 0.5px solid var(--border2); border-radius: var(--radius-lg); padding: 16px; }
.ln-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ln-name { font-size: 15px; font-weight: 700; color: var(--text); }
.ln-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 12px; background: rgba(239,100,97,0.12); color: var(--coral); }
.ln-badge.lent { background: rgba(34,197,94,0.12); color: var(--green); }
.ln-bal { font-size: 24px; font-weight: 800; color: var(--coral); margin: 10px 0 2px; }
.ln-bal.lent { color: var(--green); }
.ln-meta { font-size: 12px; color: var(--text3); margin-bottom: 12px; }
.ln-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ln-remove { color: var(--coral); }
.ln-q .cc-input { height: 38px !important; min-height: 38px; padding: 0 12px !important; box-sizing: border-box; font-size: 14px; }

/* ── P&L: the client's own categories inside a tax line ── */
.pl-sub { display: flex; justify-content: space-between; padding: 8px 16px 6px 34px; font-size: 12px; font-weight: 700;
  color: var(--text2); background: var(--bg); border-top: 0.5px solid var(--border); }
.pl-sub-names { font-size: 12px; font-weight: 500; color: var(--text3); }

/* ── Floating message: never moves the page ── */
#bk-status { display: none !important; }
.nav-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1100; max-width: min(560px, calc(100vw - 32px));
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 11px 18px; border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 1.4;
  color: #fff; background: #16a34a; box-shadow: 0 10px 30px rgba(15,23,42,0.22);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.nav-toast.show { opacity: 1; transform: translate(-50%, 0); }
.nav-toast.error { background: var(--coral); }
.nav-toast.info  { background: #0f172a; }

/* ── Posted / Excluded views ── */
.bk-view-on, .bk-view-on:hover { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }
.bk-view-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 8px; border-radius: var(--radius-lg);
  background: var(--blue-light); border: 0.5px solid var(--blue-mid, #bfd3fb); font-size: 13px; color: var(--text);
}
.bk-view-head button { background: none; border: none; color: var(--blue); font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; }
.bk-view-empty { text-align: center; padding: 30px; color: var(--text3); font-size: 13px; }
.bk-row-undo { font-size: 10px; padding: 3px 9px; background: none; border: 0.5px solid var(--border2); border-radius: 20px; color: var(--text2); cursor: pointer; font-family: inherit; }

/* ── Split transaction ── */
.cs-ov { position: fixed; inset: 0; z-index: 900; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cs-ov2 { z-index: 950; background: rgba(15,23,42,0.25); }
.cs { width: 660px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--bg); color: var(--text);
  border-radius: 16px; box-shadow: 0 20px 50px rgba(15,23,42,0.25); padding: 20px 22px; }
.cs-small { width: 420px; }
.cs-top { display: flex; align-items: center; justify-content: space-between; }
.cs-title { font-size: 17px; font-weight: 700; }
.cs-close { width: 30px; height: 30px; border: none; background: none; color: var(--text3); font-size: 16px; cursor: pointer; }
.cs-desc { font-size: 13px; color: var(--text2); margin: 4px 0 12px; }
.cs-in { width: 100%; box-sizing: border-box; height: 38px; padding: 0 11px; border: 1px solid var(--border2); border-radius: 10px;
  font-size: 14px; font-family: inherit; background: var(--bg); color: var(--text); }
.cs-in:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,87,240,0.15); }
.cs-inv { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cs-inv label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.cs-inv .cs-in { max-width: 220px; }
.cs-tot, .cs-bal { display: flex; justify-content: space-between; background: var(--bg2); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--text2); margin-bottom: 14px; }
.cs-hdr, .cs-line { display: grid; grid-template-columns: 1.35fr 110px 1fr 28px; gap: 8px; align-items: start; }
.cs-hdr { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; }
.cs-line { margin-bottom: 8px; }
.cs-dd { position: relative; }
.cs-taxline { font-size: 11px; color: var(--text3); margin: 4px 2px 0; min-height: 14px; }
.cs-taxline b { color: var(--text2); font-weight: 600; }
.cs-menu { position: absolute; left: 0; right: 0; top: 42px; z-index: 5; background: var(--bg); border: 1px solid var(--border2); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15,23,42,0.15); overflow: hidden; max-height: 280px; overflow-y: auto; }
.cs-opt { padding: 8px 12px; font-size: 13px; display: flex; justify-content: space-between; gap: 10px; cursor: pointer; }
.cs-opt span { color: var(--text3); font-size: 12px; white-space: nowrap; }
.cs-opt.hi, .cs-opt:hover { background: var(--blue-light); }
.cs-opt.cs-new { color: var(--blue); font-weight: 600; border-top: 1px solid var(--border); }
.cs-x { width: 28px; height: 28px; margin-top: 5px; border-radius: 50%; border: 1px solid var(--border2); background: none; color: var(--text3); font-size: 12px; cursor: pointer; }
.cs-add { width: 100%; border: 1px dashed var(--border2); border-radius: 10px; background: none; padding: 9px; color: var(--blue); font-size: 13px; font-weight: 600; cursor: pointer; margin: 4px 0 12px; font-family: inherit; }
.cs-acts { display: flex; gap: 10px; }
.cs-apply { flex: 1; height: 42px; border: none; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; }
.cs-cancel { height: 42px; padding: 0 20px; border: 1px solid var(--border2); border-radius: 10px; background: var(--bg); color: var(--text2); font-weight: 600; cursor: pointer; font-family: inherit; }
.cs-lbl { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
.cs-hint { font-size: 11px; color: var(--text3); margin-top: 6px; }
.bk-inv { color: var(--blue); font-weight: 600; }
.bk-memo { color: var(--text3); }
@media (max-width: 640px) { .cs-hdr { display: none; } .cs-line { grid-template-columns: 1fr 90px 28px; } .cs-line .cs-note { grid-column: 1 / 3; } }
.cs-addrow { display: flex; gap: 8px; margin: 4px 0 12px; }
.cs-addrow .cs-add { flex: 1; margin: 0; }

/* ── Transaction rows: steadier layout, bigger buttons ── */
.bk-amt-col { display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-width: 104px; flex-shrink: 0; }
.bk-pen { border: none; background: none; cursor: pointer; color: var(--text3); font-size: 15px; padding: 3px 5px; border-radius: 6px; line-height: 1; }
.bk-pen:hover { background: var(--bg3); color: var(--text); }
.bk-row-undo { font-size: 12px !important; padding: 5px 13px !important; }
.bk-row-box .bk-cat-in { height: 32px; }

/* ══ Customers (22-customers.js) — phone first ══ */
.cu-panel { padding: 0 0 96px; }
.cu-wrap { max-width: 1100px; margin: 0 auto; padding: 14px; }
.cu-title { font-size: 20px; font-weight: 800; margin: 2px 2px 12px; color: var(--text); }
.cu-loading, .cu-empty { text-align: center; color: var(--text3); padding: 36px 16px; font-size: 14px; line-height: 1.6; }
.cu-empty.small { padding: 16px; }
.cu-muted { color: var(--text3); font-size: 12px; font-weight: 500; }
.cu-card { background: var(--bg); border: 0.5px solid var(--border2); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.cu-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.cu-tile { background: var(--bg); border: 0.5px solid var(--border2); border-radius: 14px; padding: 12px 14px; }
.cu-tile .l { font-size: 12px; font-weight: 600; color: var(--text2); }
.cu-tile .v { font-size: 22px; font-weight: 800; color: #0f172a; margin-top: 2px; }
.cu-tile .v.red, .cu-amt.red, .red { color: var(--coral) !important; }
.cu-tile .s { font-size: 11px; color: var(--text3); }
.cu-aging { padding: 12px 14px; }
.cu-aging-h { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.cu-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--bg3); }
.cu-bar div { height: 100%; }
.cu-leg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text2); }
.cu-leg.compact { display: flex; justify-content: space-between; font-size: 11px; }
.cu-leg b { display: block; color: var(--text); font-size: 13px; }
.cu-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.cu-tools { display: flex; gap: 8px; margin: 12px 0 0; }
.cu-search { flex: 1; min-width: 0; height: 44px; border: 0.5px solid var(--border2); border-radius: 12px; padding: 0 14px; font-size: 16px; background: var(--bg); color: var(--text); font-family: inherit; }
.cu-add { height: 44px; padding: 0 18px; border: none; border-radius: 12px; background: var(--blue); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.cu-chips { display: flex; gap: 8px; margin: 10px 0 4px; overflow-x: auto; }
.cu-chip { height: 36px; padding: 0 15px; border-radius: 18px; border: 0.5px solid var(--border2); background: var(--bg); font-size: 13px; font-weight: 600; color: var(--text2); cursor: pointer; white-space: nowrap; font-family: inherit; }
.cu-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.cu-row { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 0.5px solid var(--border2); border-radius: 14px; padding: 12px 14px; margin-top: 10px; cursor: pointer; }
.cu-av { width: 42px; height: 42px; border-radius: 12px; background: var(--blue-light); color: var(--blue); display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.cu-av.big { width: 56px; height: 56px; font-size: 20px; margin: 0 auto 8px; }
.cu-mid { flex: 1; min-width: 0; }
.cu-nm { font-weight: 700; font-size: 15px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-sub { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.cu-amt { font-weight: 800; font-size: 15px; color: #0f172a; white-space: nowrap; }
.cu-bd { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 10px; white-space: nowrap; }
.cu-bd.red { background: rgba(239,100,97,0.12); color: var(--coral); }
.cu-bd.amber { background: rgba(245,158,11,0.15); color: #b45309; }
.cu-bd.green { background: rgba(34,197,94,0.13); color: #15803d; }
.cu-bd.grey { background: var(--bg3); color: var(--text2); }
.cu-fab { position: fixed; right: 16px; bottom: 88px; z-index: 50; height: 52px; padding: 0 20px; border: none; border-radius: 26px; background: var(--blue); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 8px 20px rgba(18,87,240,0.35); cursor: pointer; font-family: inherit; }
.cu-crumb { display: flex; justify-content: space-between; margin-bottom: 10px; }
.cu-crumb button { border: none; background: none; color: var(--blue); font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; padding: 6px 2px; }
.cu-hero { padding: 16px; text-align: center; }
.cu-hero-nm { font-weight: 800; font-size: 18px; color: #0f172a; }
.cu-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.cu-acts a { background: var(--bg2); border-radius: 12px; padding: 10px 4px; font-size: 12px; font-weight: 600; color: var(--text2); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-decoration: none; }
.cu-acts a span { font-size: 19px; }
.cu-acts a.p { background: var(--blue); color: #fff; }
.cu-acts a.off { opacity: 0.4; pointer-events: none; }
.cu-sec { font-size: 13px; font-weight: 800; margin: 16px 2px 2px; color: var(--text); }
.cu-inv { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg); border: 0.5px solid var(--border2); border-radius: 14px; padding: 12px 14px; margin-top: 8px; }
.cu-inv .cu-nm { font-size: 14px; }
.cu-details div { display: flex; gap: 12px; padding: 10px 14px; border-bottom: 0.5px solid var(--border); font-size: 14px; }
.cu-details div:last-child { border-bottom: none; }
.cu-details span { width: 70px; flex-shrink: 0; color: var(--text3); font-size: 13px; }
/* the add / edit sheet: full screen on a phone */
.cu-sheet-ov { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,0.45); align-items: flex-end; justify-content: center; }
.cu-sheet { width: 100%; height: 100%; background: var(--bg2); display: flex; flex-direction: column; }
.cu-sheet-bar { height: 54px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 14px; color: #fff; font-weight: 800; font-size: 17px; background: linear-gradient(135deg,#0B1A3F,#1257F0); }
.cu-sheet-bar button { border: none; background: none; color: #fff; font-size: 20px; cursor: pointer; width: 30px; }
.cu-form { flex: 1; overflow-y: auto; padding: 4px 14px 20px; }
.cu-form label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: var(--text); }
.cu-in { width: 100%; box-sizing: border-box; height: 46px; border: 1px solid var(--border2); border-radius: 12px; padding: 0 13px; font-size: 16px; background: var(--bg); color: var(--text); font-family: inherit; }
.cu-in:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,87,240,0.15); }
.cu-ta { height: 76px; padding-top: 11px; resize: vertical; }
.cu-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cu-2 label { margin-top: 14px; }
.cu-3 { display: grid; grid-template-columns: 1.3fr 0.6fr 1fr; gap: 8px; margin-top: 8px; }
.cu-seg { display: flex; gap: 3px; background: var(--bg3); border-radius: 12px; padding: 3px; }
.cu-seg button { flex: 1; height: 40px; border: none; border-radius: 9px; background: none; font-size: 14px; font-weight: 600; color: var(--text2); cursor: pointer; font-family: inherit; }
.cu-seg button.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.cu-tg { display: flex !important; align-items: center; gap: 12px; margin-top: 16px !important; background: var(--bg); border: 0.5px solid var(--border2); border-radius: 12px; padding: 12px; font-weight: 500 !important; cursor: pointer; }
.cu-tg input { width: 22px; height: 22px; flex-shrink: 0; }
.cu-tg small { color: var(--text3); }
.cu-sheet-save { flex-shrink: 0; padding: 12px 14px 22px; background: var(--bg); border-top: 0.5px solid var(--border2); }
.cu-sheet-save button { width: 100%; height: 52px; border: none; border-radius: 14px; background: var(--blue); color: #fff; font-weight: 800; font-size: 16px; cursor: pointer; font-family: inherit; }
.cu-hide-phone { display: none; }
/* wider screens */
@media (min-width: 768px) {
  .cu-wrap { padding: 20px 24px; }
  .cu-tiles { grid-template-columns: repeat(3, 1fr); }
  .cu-hide-phone { display: initial; }
  .cu-tile.cu-hide-phone { display: block; }
  .cu-fab { display: none; }
  .cu-sheet-ov { align-items: center; padding: 20px; }
  .cu-sheet { width: 560px; height: auto; max-height: calc(100vh - 40px); border-radius: 16px; overflow: hidden; }
  .cu-sheet-bar { border-radius: 16px 16px 0 0; }
  .cu-sheet-save { padding: 12px 14px 14px; }
}
/* the accountant's view of a client's customers */
.cu-acc-title { font-size: 18px; font-weight: 800; margin: 4px 0 12px; }
.cu-acc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); }
.cu-acc-tiles > div { padding: 12px 16px; border-right: 0.5px solid var(--border); }
.cu-acc-tiles > div:last-child { border-right: none; }
.cu-acc-tiles .l { font-size: 12px; font-weight: 600; color: var(--text2); }
.cu-acc-tiles .v { font-size: 21px; font-weight: 800; margin-top: 3px; color: #0f172a; }
.cu-acc-tiles .s { font-size: 11px; color: var(--text3); }
.cu-acc-aging { padding: 12px 16px 14px; border-top: 0.5px solid var(--border); font-size: 13px; }
.cu-acc-aging b { display: block; margin-bottom: 8px; }
.cu-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.cu-tbl th { text-align: left; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); padding: 9px 16px; border-bottom: 0.5px solid var(--border); }
.cu-tbl td { padding: 10px 16px; border-bottom: 0.5px solid var(--border); }
.cu-tbl .cu-nm { font-size: 13px; }
.cu-tbl .r { text-align: right; }
/* the accountant's Billing panel, above Notes */
.cu-bill { background: var(--bg); border: 0.5px solid var(--border2); border-radius: 14px; overflow: hidden; margin-bottom: 12px; }
.cu-bill-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 0.5px solid var(--border); font-size: 14px; }
.cu-bill-b { padding: 12px 14px 4px; }
.cu-bill-b .l { font-size: 12px; font-weight: 600; color: var(--text2); }
.cu-bill-b .v { font-size: 24px; font-weight: 800; color: #0f172a; }
.cu-bill-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.cu-bill-2 span { display: block; font-size: 11px; color: var(--text3); }
.cu-bill-2 b { font-size: 13px; }
.cu-bill-list { padding: 6px 14px 0; }
.cu-bill-list > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 0.5px solid var(--border); font-size: 12px; }
.cu-bill-list span { display: block; color: var(--text3); }
.cu-bill-none { padding: 10px 14px 0; font-size: 12px; color: var(--text3); }
.cu-bill-acts { display: flex; gap: 8px; padding: 10px 14px 14px; }
.cu-bill-acts button { flex: 1; height: 34px; border: none; border-radius: 9px; background: var(--blue); color: #fff; font-weight: 700; font-size: 12px; cursor: pointer; font-family: inherit; }
.cu-bill-acts button.gh { background: var(--bg); color: var(--text); border: 0.5px solid var(--border2); }
.cu-bill-acts button:disabled { opacity: 0.4; cursor: default; }

/* Customers: unlinked invoices, accountant markers */
.cu-unlinked { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 11px 14px; border-radius: 12px; background: #fff7ed; border: 0.5px solid #fed7aa; color: #9a3412; font-size: 13px; cursor: pointer; }
.cu-unlinked b { white-space: nowrap; }
.cu-link-row { background: var(--bg); border: 0.5px solid var(--border2); border-radius: 12px; padding: 12px; margin-top: 10px; }
.cu-link-row b { display: block; font-size: 14px; }
.cu-link-row span { display: block; font-size: 12px; color: var(--text3); margin: 2px 0 8px; }
.cu-byacct { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; color: #7c3aed; background: rgba(124,58,237,0.1); border-radius: 8px; padding: 1px 7px; }
.cu-tbl.cu-click tr:not(:first-child) { cursor: pointer; }
.cu-tbl.cu-click tr:not(:first-child):hover td { background: var(--bg2); }
.cu-acc-cust { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.acc-inv-note { font-size: 11px; color: var(--text3); font-style: italic; }
.cu-attach { margin: 14px 0 2px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 0.5px dashed var(--border2); font-size: 13px; font-weight: 600; color: var(--text2); }
.cu-sheet-save .cu-share { flex: 0 0 110px; background: var(--bg); color: var(--text); border: 0.5px solid var(--border2); }
.cu-sheet-save button:disabled { opacity: 0.6; }
/* the invoice drawn in the send sheet */
.cu-invprev { margin-top: 10px; background: #fff; border: 0.5px solid var(--border2); border-radius: 12px; padding: 14px; color: #0f172a; }
.cu-invprev-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cu-invprev-from { font-weight: 800; font-size: 15px; }
.cu-invprev-total { font-weight: 800; font-size: 20px; }
.cu-invprev-meta { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; margin: 12px 0 4px; font-size: 13px; }
.cu-invprev-meta span, .cu-invprev-lines .cu-muted span { display: block; font-size: 11px; color: var(--text3); }
.cu-invprev-lines { border-top: 0.5px solid var(--border); margin-top: 8px; }
.cu-invprev-lines > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 0.5px solid var(--border); }
.cu-invprev-lines > div:last-child { border-bottom: none; }
.cu-sheet-save .cu-share { flex: 0 0 150px; white-space: nowrap; }
/* invoice actions */
.cl-inv-act { padding: 6px 14px; background: var(--bg2); border: 0.5px solid var(--border2); border-radius: var(--radius); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--text); }
.cl-inv-act.green { background: #f0fdf4; border-color: #16a34a; color: #15803d; }
.cl-inv-act.red { color: var(--coral); border-color: var(--coral); background: #fff5f5; }
.cu-inv { cursor: pointer; }
.cu-actsheet { width: 100%; max-width: 480px; background: var(--bg); border-radius: 18px 18px 0 0; padding: 10px 14px 22px; align-self: flex-end; }
.cu-actsheet-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 12px; font-size: 15px; }
.cu-act { display: block; width: 100%; height: 50px; margin-top: 8px; border: 0.5px solid var(--border2); border-radius: 12px; background: var(--bg2); font-size: 15px; font-weight: 600; color: var(--text); text-align: left; padding: 0 16px; cursor: pointer; font-family: inherit; }
.cu-act.green { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.cu-act.red { color: var(--coral); background: #fff5f5; border-color: #fecaca; }
.cu-act-cancel { text-align: center; background: var(--bg); margin-top: 12px; }
@media (min-width: 768px) { .cu-actsheet { border-radius: 16px; align-self: center; } }
.cu-bill-all { margin-left: auto; margin-right: 8px; font-size: 12px; font-weight: 600; color: var(--blue); cursor: pointer; }
.cu-del-cust { display: block; margin: 0 14px 10px; padding: 10px; border: none; background: none; color: var(--coral); font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit; }
/* loan setup sheet */
.ln-setup-row { display: flex; gap: 12px; align-items: flex-start; border: 0.5px solid var(--border2); border-radius: 12px; padding: 12px; margin-top: 8px; background: var(--bg2); }
.ln-setup-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; background: var(--blue-light); }
.ln-setup-row b { display: block; font-size: 14px; }
.ln-setup-row span { display: block; font-size: 12px; color: var(--text2); line-height: 1.45; margin-top: 2px; }
.ln-setup-row i { display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 700; color: var(--text2); background: var(--bg3); border-radius: 8px; padding: 2px 8px; font-style: normal; }
.cs-auto { background: var(--bg2) !important; border-style: dashed !important; color: var(--text2) !important; }

/* ══ The one invoice form ══ */
.invf { background: var(--bg); border: 0.5px solid var(--border2); border-radius: 16px; overflow: hidden; margin: 10px 0 16px; box-shadow: 0 8px 24px rgba(15,23,42,0.06); }
.invf-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 0.5px solid var(--border); }
.invf-bar b { font-size: 17px; }
.invf-bar small { margin-left: 8px; color: var(--text3); font-size: 12px; font-weight: 600; }
.invf-x { border: none; background: none; font-size: 18px; color: var(--text3); cursor: pointer; }
.invf-body { padding: 16px 18px; background: var(--bg2); }
.invf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.invf-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; }
.invf-in { width: 100%; box-sizing: border-box; height: 40px; border: 1px solid var(--border2); border-radius: 10px; padding: 0 12px; font-size: 14px; background: var(--bg); color: var(--text); font-family: inherit; margin-bottom: 8px; }
.invf-in:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,87,240,0.15); }
.invf-in.r { text-align: right; }
.invf-search { background: var(--blue-light); }
.invf-ta { height: 64px; padding-top: 10px; resize: vertical; }
.invf-dd { position: relative; }
.invf-menu { position: absolute; left: 0; right: 0; top: 42px; z-index: 20; background: var(--bg); border: 1px solid var(--border2); border-radius: 10px; box-shadow: 0 12px 28px rgba(15,23,42,0.15); overflow: hidden; }
.invf-menu div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; font-size: 13px; cursor: pointer; }
.invf-menu div:hover { background: var(--blue-light); }
.invf-menu span { color: var(--text3); font-size: 12px; }
.invf-menu .new { color: var(--blue); font-weight: 700; border-top: 1px solid var(--border); }
.invf-menu .none { color: var(--text3); cursor: default; }
.invf-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 6px; }
.invf-3 label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.invf-lh, .invf-line { display: grid; grid-template-columns: 1fr 76px 110px 100px 26px; gap: 8px; align-items: center; }
.invf-lh { font-size: 11px; color: var(--text3); margin: 10px 0 6px; }
.invf-lh span:nth-child(4) { text-align: right; }
.invf-line .invf-in { margin-bottom: 8px; }
.invf-amt { text-align: right; font-size: 14px; margin-bottom: 8px; }
.invf-rm { border: none; background: none; color: var(--text3); cursor: pointer; margin-bottom: 8px; }
.invf-add { border: none; background: none; color: var(--blue); font-weight: 600; font-size: 13px; cursor: pointer; padding: 2px 0; font-family: inherit; }
.invf-tot { margin-left: auto; width: 300px; max-width: 100%; margin-top: 8px; }
.invf-tot > div { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; }
.invf-tot .invf-tax { width: 90px; margin: 0; text-align: right; }
.invf-tot .t { border-top: 1px solid var(--border2); margin-top: 4px; padding-top: 9px; font-size: 16px; font-weight: 800; }
.invf-tot .t b { color: var(--blue); }
.invf-note { font-size: 12px; color: var(--text3); font-style: italic; background: var(--bg); border: 0.5px dashed var(--border2); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.invf-acts { display: flex; gap: 10px; padding: 12px 18px; border-top: 0.5px solid var(--border); background: var(--bg); }
.invf-btn { height: 42px; border-radius: 10px; border: none; font-weight: 700; font-size: 14px; padding: 0 18px; cursor: pointer; font-family: inherit; }
.invf-btn.p { flex: 1.4; background: var(--blue); color: #fff; }
.invf-btn.g { flex: 1; background: var(--bg); border: 0.5px solid var(--border2); color: var(--text); }
.invf-btn.c { background: none; color: var(--text2); }
@media (max-width: 700px) {
  .invf-cols, .invf-3 { grid-template-columns: 1fr; gap: 6px; }
  .invf-lh { display: none; }
  .invf-line { grid-template-columns: 1fr 64px 90px 26px; }
  .invf-line .invf-in:first-child { grid-column: 1 / -1; }
  .invf-amt { display: none; }
  .invf-tot { width: 100%; }
  .invf-acts { flex-wrap: wrap; }
}

/* ══ Bookkeeping page (batch B) ══ */
.bk-search-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: none; border-radius: 50%; background: var(--bg3); color: var(--text2); font-size: 11px; cursor: pointer; align-items: center; justify-content: center; padding: 0; z-index: 2; }
.bk-search-x:hover { background: var(--border2); color: var(--text); }
#bk-txn-search { padding-right: 32px !important; }
.bk-topost-btn { padding: 8px 16px; background: var(--bg2); border: 0.5px solid var(--border2); border-radius: var(--radius); font-size: 12px; font-weight: 600; color: var(--text2); cursor: pointer; font-family: inherit; }
.bk-report-pdf { height: 30px; padding: 0 12px; margin-left: 6px; background: var(--blue); border: none; border-radius: var(--radius); font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; font-family: inherit; }
.ov-acc-toggle { border: none; background: none; padding: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); cursor: pointer; font-family: inherit; }
.ov-acc-toggle:hover { color: var(--text); }
.ov-acc-count { font-weight: 600; letter-spacing: 0; }
.ov-months-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); }
.ov-open-ws { border: none; background: none; color: var(--blue); font-weight: 700; font-size: 12px; text-transform: none; letter-spacing: 0; cursor: pointer; font-family: inherit; }
.ov-month-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ov-month-card { text-align: left; background: var(--bg); border: 0.5px solid var(--border2); border-radius: 14px; padding: 14px 16px; cursor: pointer; font-family: inherit; color: var(--text); transition: box-shadow 0.15s, border-color 0.15s; }
.ov-month-card:hover { border-color: var(--blue); box-shadow: 0 4px 14px rgba(18,87,240,0.12); }
.ov-mc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 15px; }
.ov-mc-left { font-size: 11px; font-weight: 700; color: #b45309; background: rgba(245,158,11,0.15); border-radius: 10px; padding: 3px 9px; white-space: nowrap; }
.ov-mc-done { font-size: 11px; font-weight: 700; color: #15803d; background: rgba(34,197,94,0.13); border-radius: 10px; padding: 3px 9px; white-space: nowrap; }
.ov-mc-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--text2); }
.ov-mc-row b { color: var(--text); }
.ov-mc-row b.in { color: var(--green); }
.ov-mc-row b.out { color: var(--coral); }
.ov-mc-row.bal { border-top: 0.5px solid var(--border); margin-top: 4px; padding-top: 8px; }
.ov-mc-row i { font-style: normal; font-size: 11px; color: var(--text3); }
.ov-month-empty { padding: 24px; text-align: center; color: var(--text3); background: var(--bg2); border-radius: 14px; font-size: 13px; }
/* the view buttons sit on the right, away from "All" and the batch bar */
#bk-review-sticky .bk-actions { margin-left: auto; justify-content: flex-end; }
/* Billing panel: folded and unfolded */
.cu-bill-sec { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text3); padding: 10px 14px 0; }
.cu-bill-more { font-size: 11px; color: var(--text3); padding: 2px 14px 0; }
.cu-bill-fold { display: block; width: calc(100% - 28px); margin: 8px 14px 0; height: 30px; border: 0.5px dashed var(--border2); border-radius: 8px; background: var(--bg2); color: var(--blue); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.cu-remind-wrap { flex: 1; position: relative; display: flex; }
.cu-remind-wrap > button { flex: 1; }
.cu-remind-menu { position: absolute; bottom: 40px; left: 0; z-index: 30; min-width: 190px; background: var(--bg); border: 0.5px solid var(--border2); border-radius: 10px; box-shadow: 0 10px 26px rgba(15,23,42,0.16); overflow: hidden; }
.cu-remind-menu button { display: block; width: 100%; height: auto; padding: 10px 12px; text-align: left; border: none; border-radius: 0; background: var(--bg); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.cu-remind-menu button:hover { background: var(--bg2); }


/* ══ Navazia brand ══ navy top bar with a gold line, like the logo */
.nav { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%) !important; border-bottom: 2px solid var(--gold) !important; }
.logo-text, .nav-logo-text { background: linear-gradient(135deg, #FFFFFF, #DDE6FA); -webkit-background-clip: text; background-clip: text; }

/* ══ Business report builder ══ */
.rpt-grid { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.rpt-card { background: var(--bg); border: 0.5px solid var(--border2); border-radius: 14px; padding: 16px; }
.rpt-h { font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.rpt-ai { font-size: 11px; font-weight: 700; color: #7c3aed; background: #F1EBFE; border-radius: 10px; padding: 3px 9px; }
.rpt-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); margin: 12px 0 6px; }
.rpt-seg { display: flex; background: var(--bg3); border-radius: 10px; padding: 3px; }
.rpt-seg button { flex: 1; border: none; background: none; padding: 7px 0; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--text2); cursor: pointer; font-family: inherit; }
.rpt-seg button.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(11,26,63,0.15); }
.rpt-sel { width: 100%; height: 36px; border: 1px solid var(--border2); border-radius: 9px; padding: 0 10px; font-size: 13px; background: var(--bg); color: var(--text); font-family: inherit; }
.rpt-k { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 0.5px solid var(--border); }
.rpt-up { color: var(--green); } .rpt-dn { color: var(--coral); }
.rpt-k span.rpt-up, .rpt-k span.rpt-dn { font-size: 11px; margin-left: 4px; }
.rpt-note { font-size: 11.5px; color: var(--text2); background: var(--bg2); border-radius: 9px; padding: 8px 10px; margin-top: 10px; line-height: 1.45; }
.rpt-warn { font-size: 11.5px; color: #8a5a00; background: var(--gold-light); border: 1px solid #F0D9A8; border-radius: 9px; padding: 8px 10px; margin-top: 10px; line-height: 1.45; }
.rpt-text { width: 100%; min-height: 110px; border: 1px solid var(--border2); border-radius: 10px; padding: 11px 12px; font-size: 13.5px; line-height: 1.6; color: var(--text); font-family: inherit; resize: vertical; box-sizing: border-box; }
.rpt-text:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,87,240,0.12); }
.rpt-todo { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--border2); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.rpt-todo em { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 4px; }
.rpt-todo > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.rpt-todo input { border: none; font-size: 13px; font-weight: 700; color: var(--text); font-family: inherit; padding: 3px 2px; background: none; }
.rpt-todo input.d { font-weight: 400; color: var(--text2); font-size: 12.5px; }
.rpt-todo input:focus { outline: none; background: var(--bg2); border-radius: 5px; }
.rpt-todo button { border: none; background: none; color: var(--text3); cursor: pointer; font-size: 13px; }
.rpt-add { border: none; background: none; color: var(--blue); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 2px 0; font-family: inherit; }
.rpt-none { font-size: 12px; color: var(--text3); padding: 4px 0 8px; }
.rpt-acts { display: flex; gap: 10px; margin-top: 14px; }
.rpt-acts button { height: 40px; border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }
.rpt-acts .g { flex: 1; background: var(--bg); border: 0.5px solid var(--border2); color: var(--text); }
.rpt-acts .p { flex: 1.6; background: var(--blue); border: none; color: #fff; }
.rpt-empty { padding: 28px; text-align: center; color: var(--text3); background: var(--bg2); border-radius: 14px; font-size: 13px; }
@media (max-width: 900px) { .rpt-grid { grid-template-columns: 1fr; } }

/* ══ Two-step sign-in ══ */
#mfa-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(11,26,63,0.55); display: none; align-items: center; justify-content: center; padding: 16px; }
.mfa-card { width: 100%; max-width: 400px; background: var(--bg); border-radius: 18px; padding: 24px 22px 18px; box-shadow: 0 24px 60px rgba(11,26,63,0.35); border-top: 4px solid var(--gold); text-align: center; }
.mfa-ic { font-size: 30px; }
.mfa-card h2 { font-size: 19px; margin: 6px 0 6px; color: var(--navy); }
.mfa-card p { font-size: 13px; line-height: 1.55; color: var(--text2); margin: 0 0 12px; }
.mfa-card label { display: block; font-size: 12px; font-weight: 700; color: var(--text2); margin: 12px 0 6px; text-align: left; }
.mfa-card input { width: 100%; box-sizing: border-box; height: 52px; border: 1px solid var(--border2); border-radius: 12px; text-align: center; font-size: 26px; letter-spacing: 0.35em; font-weight: 700; color: var(--navy); font-family: inherit; }
.mfa-card input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,87,240,0.15); }
.mfa-qr { width: 180px; height: 180px; display: block; margin: 4px auto 8px; border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: #fff; }
.mfa-key { font-size: 11.5px; color: var(--text2); background: var(--bg2); border-radius: 8px; padding: 7px 9px; word-break: break-all; }
.mfa-err { min-height: 18px; font-size: 12.5px; color: var(--coral); margin: 8px 0 4px; }
.mfa-p { display: block; width: 100%; height: 46px; border: none; border-radius: 12px; background: var(--blue); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; font-family: inherit; }
.mfa-p:disabled { opacity: 0.6; }
.mfa-g { display: block; width: 100%; height: 38px; border: none; background: none; color: var(--text2); font-weight: 600; font-size: 13px; cursor: pointer; margin-top: 6px; font-family: inherit; }
.mfa-note { font-size: 13px; color: var(--text2); line-height: 1.5; margin: 0 0 10px; }
.mfa-dev { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 0.5px solid var(--border); font-size: 13px; font-weight: 600; }
.mfa-dev i { font-style: normal; font-weight: 400; color: var(--text3); font-size: 12px; margin-left: 8px; }
.mfa-dev button { border: 0.5px solid var(--border2); background: var(--bg); color: var(--coral); border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.mfa-add { margin-top: 10px; border: none; background: none; color: var(--blue); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; font-family: inherit; }

/* ══ Client Management (23-crm.js) ══ */
#crm-root { padding: 4px 0 24px; }
.crm-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 16px; }
.crm-side { background: var(--bg); border: 0.5px solid var(--border2); border-radius: 14px; padding: 8px; height: fit-content; position: sticky; top: 70px; }
.crm-si { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: 9px; color: var(--text2); font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; text-align: left; }
.crm-si:hover { background: var(--bg2); }
.crm-si.on { background: var(--blue-light); color: var(--blue); }
.crm-cnt { margin-left: auto; font-size: 11px; background: var(--gold-light); color: #8a5a00; border-radius: 9px; padding: 1px 7px; }
.crm-cnt.new { background: #E7F6EC; color: #14532d; }
.crm-main { min-width: 0; }
.crm-card { background: var(--bg); border: 0.5px solid var(--border2); border-radius: 14px; }
.crm-pad { padding: 14px 16px; }
.crm-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
.crm-top h2 { margin: 0; font-size: 17px; color: var(--navy); }
.crm-muted { color: var(--text2); font-size: 12.5px; }
.crm-empty { color: var(--text3); font-size: 13px; padding: 14px 0; text-align: center; }
.crm-loading { color: var(--text3); padding: 30px; text-align: center; }
.crm-h { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin: 0 0 8px; }
.crm-link { border: none; background: none; color: var(--blue); font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.crm-red { color: var(--coral) !important; } .crm-green { color: var(--green) !important; } .crm-amber { color: #8a5a00 !important; }
/* today */
.crm-today { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; }
.crm-col { display: flex; flex-direction: column; gap: 14px; }
.crm-it { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #EEF2F8; }
.crm-it:last-child { border: none; }
.crm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.crm-it-t { min-width: 0; flex: 1; } .crm-it-t b { display: block; font-size: 13.5px; } .crm-it-t small { color: var(--text2); font-size: 12px; }
.crm-it-a { display: flex; gap: 6px; flex-shrink: 0; }
.crm-mini { height: 28px; padding: 0 10px; border-radius: 8px; border: 0.5px solid var(--border2); background: var(--bg); color: var(--text); font-weight: 700; font-size: 11.5px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.crm-mini:hover { border-color: var(--blue); color: var(--blue); }
.crm-ap { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid #EEF2F8; }
.crm-ap-t { width: 66px; font-weight: 800; color: var(--blue); flex-shrink: 0; } .crm-ap-t small { display: block; font-weight: 500; color: var(--text3); font-size: 11px; }
.crm-ap b { display: block; font-size: 13px; } .crm-ap small { color: var(--text2); font-size: 12px; }
.crm-new { background: #E7F6EC; color: #14532d; border-radius: 9px; padding: 8px 10px; margin-bottom: 8px; font-weight: 600; font-size: 12.5px; }
.crm-dl { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #EEF2F8; font-size: 13px; gap: 10px; }
.crm-dl small { color: var(--text2); display: block; font-size: 12px; }
.crm-day { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); margin: 14px 0 4px; }
/* clients */
.crm-clients { display: grid; grid-template-columns: 330px 1fr; gap: 14px; align-items: start; }
.crm-list { padding: 12px; max-height: calc(100vh - 110px); overflow: auto; position: sticky; top: 70px; }
.crm-search { width: 100%; box-sizing: border-box; height: 36px; border: 1px solid var(--border2); border-radius: 9px; padding: 0 10px; font-size: 13px; margin-bottom: 10px; font-family: inherit; color: var(--text); }
.crm-chip { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 10px; padding: 3px 9px; margin: 0 4px 4px 0; background: var(--bg2); color: var(--text2); border: none; cursor: pointer; font-family: inherit; }
.crm-chip.on { background: var(--blue); color: #fff; }
.crm-row, .crm-bz { display: flex; gap: 10px; align-items: center; width: 100%; padding: 10px; border-radius: 10px; margin: 2px 0; border: none; background: none; text-align: left; cursor: pointer; font-family: inherit; color: var(--text); }
.crm-row:hover, .crm-bz:hover { background: var(--bg2); } .crm-row.on { background: var(--blue-light); }
.crm-av { width: 34px; height: 34px; border-radius: 50%; background: var(--bg3); color: var(--blue); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.crm-av.big { width: 50px; height: 50px; font-size: 16px; }
.crm-row-t { min-width: 0; flex: 1; } .crm-row-t b { display: block; font-size: 13.5px; } .crm-row-t small { color: var(--text2); font-size: 11.5px; }
.crm-o, .crm-q { font-style: normal; font-size: 11px; font-weight: 700; border-radius: 9px; padding: 2px 8px; white-space: nowrap; }
.crm-o { background: #FDECE7; color: var(--coral); } .crm-q { background: var(--gold-light); color: #8a5a00; }
.crm-hh { padding: 16px 18px; min-height: 300px; }
.crm-hhtop { display: flex; align-items: flex-start; gap: 14px; border-bottom: 0.5px solid var(--border); padding-bottom: 14px; margin-bottom: 14px; }
.crm-hhname { flex: 1; min-width: 0; } .crm-hhname h1 { margin: 0; font-size: 22px; color: var(--navy); }
.crm-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 380px; }
.crm-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; font-weight: 700; font-size: 12.5px; border: 0.5px solid var(--border2); background: var(--bg); color: var(--text); cursor: pointer; font-family: inherit; text-decoration: none; }
.crm-btn.p { background: var(--blue); border: none; color: #fff; }
.crm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.crm-box { border: 0.5px solid var(--border2); border-radius: 12px; padding: 12px; min-width: 0; }
.crm-kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid #EEF2F8; font-size: 12.5px; }
.crm-kv:last-of-type { border-bottom: none; } .crm-kv span { color: var(--text2); } .crm-kv b { text-align: right; }
.crm-flag { background: var(--gold-light); border-radius: 9px; padding: 7px 10px; margin-top: 6px; color: #8a5a00; font-size: 12px; }
.crm-linked { display: block; width: 100%; text-align: left; background: #E7F6EC; border: none; border-radius: 9px; padding: 8px 10px; margin-top: 8px; font-weight: 700; color: #14532d; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.crm-linkpick { margin-top: 8px; font-size: 12px; color: var(--text2); } .crm-linkpick select { display: block; width: 100%; margin-top: 4px; height: 32px; border: 1px solid var(--border2); border-radius: 8px; font-family: inherit; }
.crm-tl { border-left: 2px solid var(--bg3); padding-left: 12px; margin-left: 4px; } .crm-tl div { margin-bottom: 10px; font-size: 12.5px; } .crm-tl b { display: block; } .crm-tl small { color: var(--text3); }
.crm-log { max-width: 460px; } .crm-log label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); margin: 12px 0 5px; }
.crm-log input, .crm-log select, .crm-log textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border2); border-radius: 9px; padding: 9px 10px; font-size: 13px; font-family: inherit; }
.crm-log textarea { min-height: 80px; resize: vertical; }
.crm-note { font-size: 11.5px; color: var(--text3); margin-top: 8px; }
@media (max-width: 1100px) { .crm-grid { grid-template-columns: 1fr 1fr; } .crm-today { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .crm-wrap, .crm-clients { grid-template-columns: 1fr; } .crm-side, .crm-list { position: static; max-height: none; } }
/* calling and emailing from the desk */
.crm-ic { border: none; background: none; cursor: pointer; font-size: 13px; padding: 0 3px; margin-left: 4px; opacity: 0.75; vertical-align: middle; }
.crm-ic:hover { opacity: 1; }
#crm-after { display: none; position: fixed; right: 22px; bottom: 22px; z-index: 950; background: var(--bg); border: 0.5px solid var(--border2); border-top: 3px solid var(--gold); border-radius: 14px; padding: 14px 16px; box-shadow: 0 16px 40px rgba(11,26,63,0.22); min-width: 280px; }
.crm-after-t { font-weight: 800; font-size: 14px; color: var(--navy); margin-bottom: 10px; }
.crm-after-a { display: flex; gap: 8px; justify-content: flex-end; }
/* the household's action bar — every button from the phone CRM */
.crm-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; padding-bottom: 14px; border-bottom: 0.5px solid var(--border); }
.crm-bar button, .crm-bar a { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1 1 0; min-width: 64px; padding: 8px 6px 7px; border-radius: 11px; border: 0.5px solid var(--border2); background: var(--bg); color: var(--text); font-size: 18px; cursor: pointer; text-decoration: none; font-family: inherit; }
.crm-bar button span, .crm-bar a span { font-size: 11px; font-weight: 700; color: var(--text2); white-space: nowrap; }
.crm-bar button:hover, .crm-bar a:hover { border-color: var(--blue); background: var(--blue-light); }
.crm-bar button:hover span, .crm-bar a:hover span { color: var(--blue); }
.crm-bar button:disabled { opacity: 0.35; cursor: default; background: var(--bg); border-color: var(--border2); }
.crm-bar i { flex: 1; }
.crm-rems { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 12px; }
.crm-rems button { border: none; background: var(--gold-light); color: #8a5a00; border-radius: 9px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.crm-brief { border: 0.5px solid var(--border2); border-left: 4px solid #7c3aed; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; background: #FAF7FF; }
.crm-brief-t { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; margin-bottom: 8px; }
.crm-brief pre { font-size: 11px; background: var(--bg); border-radius: 8px; padding: 8px; max-height: 240px; overflow: auto; }
/* sheets */
.crm-sheet-ov { position: fixed; inset: 0; z-index: 960; background: rgba(11,26,63,0.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.crm-sheet { width: 100%; max-width: 480px; max-height: 90vh; overflow: auto; background: var(--bg); border-radius: 16px; padding: 20px 22px 18px; border-top: 4px solid var(--gold); box-shadow: 0 24px 60px rgba(11,26,63,0.3); }
.crm-sheet.wide { max-width: 560px; }
.crm-sh-t { font-size: 18px; font-weight: 800; color: var(--navy); margin: 0 0 4px; }
.crm-sh-s { font-size: 13px; color: var(--text2); margin: 0 0 12px; }
.crm-sheet label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); margin: 12px 0 5px; }
.crm-sheet input, .crm-sheet select, .crm-sheet textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border2); border-radius: 9px; padding: 9px 10px; font-size: 13.5px; font-family: inherit; color: var(--text); background: var(--bg); }
.crm-sheet textarea { min-height: 80px; resize: vertical; }
.crm-sheet input:focus, .crm-sheet select:focus, .crm-sheet textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,87,240,0.12); }
.crm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .crm-row3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.crm-tags, .crm-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.crm-tags button, .crm-slots button { border: 1px solid var(--border2); background: var(--bg); color: var(--text2); border-radius: 18px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.crm-tags button.on, .crm-slots button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.crm-slots { margin-top: 0; }
.crm-sh-a { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.crm-full { width: 100%; justify-content: center; margin-top: 12px; }
.crm-del { color: var(--coral) !important; margin-right: auto; }
.crm-pick-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: none; border-radius: 10px; background: none; text-align: left; cursor: pointer; font-family: inherit; color: var(--text); }
.crm-pick-row:hover { background: var(--bg2); } .crm-pick-row b { display: block; font-size: 14px; } .crm-pick-row small { color: var(--text2); font-size: 12px; }
.crm-lang { width: 100%; border: 1px dashed var(--border2); background: var(--bg2); border-radius: 9px; padding: 8px; font-size: 12.5px; font-weight: 600; color: var(--text2); cursor: pointer; margin: 6px 0 10px; font-family: inherit; }
.crm-lang.es { border-color: var(--gold); background: var(--gold-light); color: #8a5a00; }
.crm-purposes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-purposes button { text-align: left; border: 0.5px solid var(--border2); background: var(--bg); border-radius: 11px; padding: 10px 12px; cursor: pointer; font-family: inherit; color: var(--text); }
.crm-purposes button:hover { border-color: var(--blue); background: var(--blue-light); }
.crm-purposes b { display: block; font-size: 13.5px; } .crm-purposes small { color: var(--text2); font-size: 11.5px; }
.crm-ready { border-left: 4px solid var(--green); background: #F2FAF4; border-radius: 10px; padding: 12px 14px; }
.crm-url { font-size: 12px; color: var(--blue); word-break: break-all; margin: 6px 0; } .crm-msg { font-size: 13px; color: var(--text2); line-height: 1.5; }
/* the side panel for the CRM's own screens */
#crm-panel { display: none; position: fixed; inset: 0; z-index: 940; }
.crm-panel-bg { position: absolute; inset: 0; background: rgba(11,26,63,0.35); }
.crm-panel-box { position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 96vw); background: var(--bg); box-shadow: -20px 0 50px rgba(11,26,63,0.25); display: flex; flex-direction: column; border-left: 3px solid var(--gold); }
.crm-panel-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 0.5px solid var(--border); }
.crm-panel-top b { flex: 1; font-size: 15px; color: var(--navy); }
.crm-panel-box iframe { flex: 1; width: 100%; border: none; background: var(--bg2); }
/* calendar: the month, and the day as a timeline */
.crm-cal { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(360px, 1fr); gap: 14px; align-items: start; }
.crm-cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .crm-cal-head h2 { margin: 0; font-size: 18px; color: var(--navy); min-width: 170px; text-align: center; }
.crm-cal-dow, .crm-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.crm-cal-dow span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); text-align: center; padding-bottom: 4px; }
.crm-cal-day { aspect-ratio: 1 / 0.86; border: 0.5px solid var(--border); border-radius: 10px; background: var(--bg); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: inherit; color: var(--text); font-size: 14px; font-weight: 600; }
.crm-cal-day:hover { border-color: var(--blue); }
.crm-cal-day.outside { color: var(--text3); background: var(--bg2); }
.crm-cal-day.is-today span { background: var(--navy); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.crm-cal-day.is-picked { border: 2px solid var(--blue); background: var(--blue-light); }
.crm-cal-day em { display: flex; gap: 3px; align-items: center; font-style: normal; } .crm-cal-day em i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); } .crm-cal-day em i.theirs { background: var(--green); }
.crm-cal-day em b { font-size: 9.5px; color: var(--text2); }
.crm-tl-day { position: relative; margin-top: 4px; }
.crm-tl-hour { position: absolute; left: 0; right: 0; border-top: 1px solid #EEF2F8; } .crm-tl-hour span { position: absolute; top: -7px; left: 0; font-size: 10.5px; color: var(--text3); background: var(--bg); padding-right: 6px; }
.crm-tl-now { position: absolute; left: 50px; right: 0; border-top: 2px solid var(--coral); } .crm-tl-now::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.crm-tl-appt { position: absolute; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0 8px; text-align: left; overflow: hidden; border: none; border-left: 4px solid var(--blue); background: var(--blue-light); border-radius: 8px; padding: 4px 8px; cursor: pointer; font-family: inherit; color: var(--text); }
.crm-tl-appt.theirs { border-left-color: var(--green); background: #E7F6EC; }
.crm-tl-appt.tall { flex-direction: column; }
.crm-tl-appt .t { font-size: 11px; font-weight: 800; color: var(--blue); } .crm-tl-appt.theirs .t { color: var(--green); }
.crm-tl-appt .w { font-size: 12.5px; font-weight: 700; } .crm-tl-appt .y { font-size: 11.5px; color: var(--text2); } .crm-tl-appt .y.q { color: #7c3aed; }
.crm-newcard { margin-bottom: 14px; border-left: 4px solid var(--green); }
/* work a list */
.crm-wl-group { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin: 16px 0 6px; }
.crm-wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.crm-wl-item { display: flex; align-items: center; gap: 10px; text-align: left; border: 0.5px solid var(--border2); background: var(--bg); border-radius: 11px; padding: 10px 12px; cursor: pointer; font-family: inherit; color: var(--text); font-size: 13px; font-weight: 600; }
.crm-wl-item:hover { border-color: var(--blue); background: var(--blue-light); }
.crm-wl-item .n { min-width: 30px; height: 30px; border-radius: 9px; background: var(--blue); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.crm-wl-item.empty { opacity: 0.45; cursor: default; } .crm-wl-item.empty .n { background: var(--bg3); color: var(--text3); } .crm-wl-item.empty:hover { border-color: var(--border2); background: var(--bg); }
.crm-wl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 2px 2px 10px; border-bottom: 0.5px solid var(--border); margin-bottom: 6px; } .crm-wl-head b { font-size: 14px; }
.crm-wl-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg); border: 0.5px solid var(--border2); border-radius: 14px; padding: 8px 10px; margin-bottom: 10px; font-size: 13px; color: var(--text2); }
.crm-wl-nav b { color: var(--navy); }
.crm-wl-nav .crm-btn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 1100px) { .crm-cal { grid-template-columns: 1fr; } }
/* CRM settings */
.crm-set { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.crm-sheet.crm-inline { max-width: none; padding: 0; border: none; box-shadow: none; max-height: none; overflow: visible; }
.crm-set-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0.5px solid var(--border2); border-radius: 11px; background: var(--bg); margin-bottom: 8px; cursor: pointer; text-align: left; font-family: inherit; color: var(--text2); font-size: 18px; }
.crm-set-row:hover { border-color: var(--blue); background: var(--blue-light); }
.crm-set-row span:nth-child(2) { flex: 1; } .crm-set-row b { display: block; font-size: 14px; color: var(--text); } .crm-set-row small { font-size: 12px; color: var(--text2); }
@media (max-width: 1000px) { .crm-set { grid-template-columns: 1fr; } }
/* edit a family, new client, calculators */
.crm-sheet.xwide { max-width: 860px; }
.crm-row4 { display: grid; grid-template-columns: 2fr 1.3fr 0.6fr 0.9fr; gap: 10px; }
.crm-sec { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin: 18px 0 2px; padding-top: 12px; border-top: 0.5px solid var(--border); }
.crm-pcard { border: 0.5px solid var(--border2); border-radius: 12px; padding: 4px 12px 10px; margin: 10px 0; background: var(--bg2); }
.crm-pcard input, .crm-pcard select { background: var(--bg); }
.crm-pfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.crm-check { display: inline-flex !important; align-items: center; gap: 7px; font-size: 13px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text) !important; margin: 0 !important; cursor: pointer; }
.crm-check input { width: auto !important; margin: 0; }
.crm-danger { margin-top: 18px; border: 1px solid #F3D3C8; background: #FFF8F5; border-radius: 12px; padding: 4px 14px 14px; }
.crm-danger .crm-sec { color: var(--coral); border-top: none; padding-top: 6px; }
.crm-calc { display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px; align-items: start; }
.crm-calc-f > div, .crm-calc-yes { margin-bottom: 4px; } .crm-calc-yes { margin-top: 14px !important; display: flex !important; }
.crm-calc-in { position: relative; } .crm-calc-in.money input { padding-left: 22px; } .crm-calc-in.money::before { content: '$'; position: absolute; left: 10px; top: 9px; color: var(--text3); font-size: 13.5px; }
.crm-calc-o { background: var(--bg2); border-radius: 12px; padding: 14px; min-height: 160px; }
.crm-calc-rows { background: var(--bg); border-radius: 10px; border: 0.5px solid var(--border2); overflow: hidden; }
.crm-calc-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid #EEF2F8; font-size: 13px; }
.crm-calc-row:last-child { border-bottom: none; } .crm-calc-row small { display: block; color: var(--text3); font-size: 11.5px; } .crm-calc-row b { white-space: nowrap; }
.crm-calc-row.key { background: var(--blue-light); } .crm-calc-row.key b { color: var(--blue); font-size: 14.5px; }
.crm-calc-head { font-size: 13.5px; line-height: 1.55; margin: 12px 0 0; color: var(--text); }
.crm-calc-o textarea { min-height: 54px; } .crm-calc-o .crm-full { margin-top: 10px; }
.crm-rule { font-size: 12.5px; line-height: 1.5; color: var(--text2); border-left: 3px solid var(--gold); padding: 4px 10px; margin: 6px 0; background: var(--gold-light); border-radius: 0 6px 6px 0; }
@media (max-width: 900px) { .crm-calc, .crm-row4 { grid-template-columns: 1fr; } }
/* working hours and licenses */
.crm-hday { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 12px; border: 0.5px solid var(--border2); border-radius: 11px; margin: 8px 0; background: var(--bg2); }
.crm-hday.open { background: var(--bg); }
.crm-hname { font-weight: 800 !important; }
.crm-hbody { display: none; gap: 18px; flex-wrap: wrap; } .crm-hday.open .crm-hbody { display: flex; }
.crm-hclosed { font-size: 12.5px; color: var(--text3); } .crm-hday.open .crm-hclosed { display: none; }
.crm-hbody { gap: 6px 22px; }
.crm-hpart { display: flex; align-items: center; gap: 6px; min-width: 0; } .crm-hpart input[type=time] { width: 104px !important; padding: 6px 6px !important; } .crm-hpart span { font-size: 12px; color: var(--text3); }
.crm-hpart .crm-check { min-width: 88px; }
.crm-lic { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 0.5px solid var(--border2); border-radius: 11px; margin: 8px 0; }
.crm-lic-t b { display: block; font-size: 14px; } .crm-lic-t small { font-size: 12px; color: var(--text2); }
.crm-lic-ce label { margin: 0 0 4px !important; } .crm-lic-ce > div { display: flex; align-items: center; gap: 6px; } .crm-lic-ce input { width: 70px !important; padding: 6px 8px !important; } .crm-lic-ce span { font-size: 12px; color: var(--text3); }
.crm-lic-a { display: flex; gap: 6px; }
/* ── Sites tab ── */
.sites-root { padding: 16px 20px; }
.sites-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sites-head h1 { margin: 0; font-size: 22px; } .sites-head p { margin: 3px 0 0; }
.sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.sites-card { background: var(--bg); border: 0.5px solid var(--border2); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.sites-thumb { height: 110px; display: flex; align-items: flex-end; padding: 12px 14px; color: #fff; }
.sites-thumb b { font-size: 19px; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.sites-body { padding: 12px 14px; flex: 1; } .sites-url { display: block; color: var(--blue); font-weight: 600; font-size: 12.5px; margin-bottom: 6px; text-decoration: none; word-break: break-all; }
.sites-foot { display: flex; gap: 8px; padding: 0 14px 14px; } .sites-foot .crm-btn { flex: 1; justify-content: center; text-align: center; text-decoration: none; }
.sites-ask { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg); border: 0.5px solid var(--border2); border-radius: 12px; padding: 12px 14px; margin-top: 12px; font-size: 13.5px; }
.sites-slug { display: flex; flex-direction: row-reverse; align-items: center; } .sites-slug span { font-size: 12px; color: var(--text3); white-space: nowrap; }
.sites-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 4px; }
.sites-types button { border: 0.5px solid var(--border2); background: var(--bg); border-radius: 11px; padding: 10px 4px; font: 600 12px inherit; font-family: inherit; color: var(--text); cursor: pointer; }
.sites-types button i { display: block; font-style: normal; font-size: 20px; margin-bottom: 4px; }
.sites-types button.on { border: 2px solid var(--blue); background: var(--blue-light); color: var(--blue); }
.sites-top { display: flex; align-items: center; gap: 14px; background: var(--bg); border: 0.5px solid var(--border2); border-radius: 12px; padding: 10px 14px; }
.sites-ttl { flex: 1; } .sites-ttl b { display: block; font-size: 17px; } .sites-ttl span { font-size: 12.5px; color: var(--text2); }
.sites-top .crm-btn { text-decoration: none; }
.sites-tabs { display: flex; gap: 4px; margin: 10px 0; border-bottom: 0.5px solid var(--border2); }
.sites-tabs button { border: none; background: none; padding: 10px 14px; font: 700 13.5px inherit; font-family: inherit; color: var(--text2); border-bottom: 2px solid transparent; cursor: pointer; }
.sites-tabs button.on { color: var(--blue); border-bottom-color: var(--blue); }
.sites-main { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
.sites-work { min-width: 0; }
.sites-admin { width: 100%; height: calc(100vh - 230px); min-height: 560px; border: 0.5px solid var(--border2); border-radius: 14px; background: var(--bg); }
.sites-prev { position: sticky; top: 10px; background: var(--bg); border: 0.5px solid var(--border2); border-radius: 14px; padding: 12px; }
.sites-prev-h { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--text2); margin-bottom: 10px; }
.sites-dev button { border: 0.5px solid var(--border2); background: var(--bg); border-radius: 8px; padding: 3px 7px; cursor: pointer; margin-left: 4px; }
.sites-dev button.on { border-color: var(--blue); background: var(--blue-light); }
.sites-frame { margin: 0 auto; overflow: hidden; background: #fff; }
.sites-frame iframe { border: 0; display: block; background: #fff; }
.sites-frame.phone { width: 320px; height: calc(100vh - 330px); min-height: 520px; max-height: 700px; border: 10px solid #0B1A3F; border-radius: 30px; }
.sites-frame.phone iframe { width: 100%; height: 100%; }
.sites-frame.desktop { width: 392px; height: 300px; border: 6px solid #0B1A3F; border-radius: 10px; }
.sites-frame.desktop iframe { width: 1280px; height: 980px; transform: scale(0.297); transform-origin: 0 0; }
.sites-prev-n { font-size: 12px; color: var(--text2); margin-top: 10px; text-align: center; transition: color .3s; }
.sites-prev-n.fresh { color: #1F9D46; font-weight: 700; }
@media (max-width: 1100px) { .sites-main { grid-template-columns: 1fr; } .sites-prev { position: static; } }
.sites-sec { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text2); margin: 18px 0 8px; }
.sites-head + .sites-sec { margin-top: 4px; }
/* ── Business · Sites, for the owner ── */
.cl-topwrap { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--border2); box-shadow: 0 2px 10px rgba(11,26,63,.06); }
/* one pinned row: Navazia · Business | Sites · your accountant · you */
.cl-toprow { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.cl-wordmark { display: flex; align-items: center; flex-shrink: 0; }
.cl-wordmark svg { height: 15px; width: auto; display: block; }
.cl-app-switch { flex: 1; min-width: 0; display: flex; justify-content: center; }
.cl-app-switch[hidden] { display: none; }
.own-seg { display: flex; width: 100%; max-width: 210px; background: #EEF1F7; border-radius: 11px; padding: 2px; }
.own-seg button { flex: 1; border: none; background: none; font: 800 12.5px inherit; font-family: inherit; color: var(--text2); padding: 6px 0; border-radius: 9px; cursor: pointer; }
.own-chip { flex-shrink: 0; border: 1px solid var(--border2); background: #fff; border-radius: 999px; padding: 5px 10px; font: 700 12.5px inherit; font-family: inherit; color: var(--text); cursor: pointer; white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.own-chip.ask { border-color: #C9962B; background: #FBF3E2; color: #7a5200; }
.cl-top-av { position: relative; flex-shrink: 0; }
.cl-top-avatar { width: 40px; height: 40px; border-radius: 50%; border: none; background: linear-gradient(135deg,#2FA84F,#1F9D46); color: #fff; font: 800 14px inherit; font-family: inherit; cursor: pointer; box-shadow: 0 2px 8px rgba(31,157,70,.3); }
/* the pinned row replaces these */
#cl-acc-bar { display: none !important; }
#cl-home .cl-home-topbar { display: none !important; }
@media (min-width: 768px) { .cl-nav-brand { display: none !important; } .cl-wordmark svg { height: 17px; } }
@media (max-width: 360px) { .cl-wordmark svg { height: 12px; } .own-chip { max-width: 92px; padding: 5px 8px; } .cl-top-avatar { width: 36px; height: 36px; } }
/* Sites: a greeting, and a screen that stays still — only the website's admin scrolls */
.own-greet { padding: 10px 16px 6px; background: #F5F7FB; }
.own-greet p { margin: 0; font-size: 13px; color: var(--text2); } .own-greet h1 { margin: 2px 0 0; font-size: 24px; font-weight: 900; color: #0B1A3F; letter-spacing: -.01em; }
body.own-sites { height: 100vh; height: 100dvh; overflow: hidden; }
body.own-sites .cl-sites-pane { display: flex; flex-direction: column; height: calc(100vh - var(--own-top, 60px)); height: calc(100dvh - var(--own-top, 60px)); }
.own-seg button.on.b { background: linear-gradient(135deg,#1E88B7,#4CB86E); color: #fff; }
.own-seg button.on.s { background: linear-gradient(135deg,#7C3AED,#5B4BE0); color: #fff; }
.cl-sites-pane { background: #F5F7FB; }
.own-admin { display: block; width: 100%; flex: 1; min-height: 0; border: 0; background: #F5F7FB; }
.own-wait { padding: 40px; text-align: center; color: var(--text2); }
.own-none { max-width: 460px; margin: 40px auto; padding: 0 20px; text-align: center; }
.own-none-i { font-size: 46px; } .own-none h2 { margin: 8px 0; font-size: 20px; } .own-none p { color: var(--text2); line-height: 1.55; font-size: 14px; }
body.own-sites #clShell, body.own-sites #clMobNav, body.own-sites #clAiDeskFloat, body.own-sites .cl-ai-desk-float { display: none !important; }
@media (min-width: 768px) {
  .cl-topwrap { margin-left: 240px; }
  body.own-sites #clAppNav { display: none !important; }
  body.own-sites .cl-topwrap { margin-left: 0; }
}
.own-ov { position: fixed; inset: 0; background: rgba(11,26,63,.5); z-index: 2000; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 768px) { .own-ov { align-items: center; } }
.own-card { background: #fff; width: 100%; max-width: 460px; max-height: 88vh; overflow: auto; border-radius: 18px 18px 0 0; padding: 18px 18px 14px; }
@media (min-width: 768px) { .own-card { border-radius: 18px; } }
.own-card h2 { margin: 0 0 10px; font-size: 18px; } .own-card h3 { font-size: 14px; margin: 14px 0 4px; }
.own-who { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; } .own-who i { width: 42px; height: 42px; border-radius: 50%; background: #0B1A3F; color: #fff; font-style: normal; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.own-who small, .own-sw small, .own-tick small { display: block; color: var(--text2); font-size: 12px; font-weight: 400; }
.own-sw { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #EEF1F6; }
.own-switch { position: relative; flex-shrink: 0; cursor: pointer; } .own-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.own-switch span { display: block; width: 44px; height: 26px; border-radius: 13px; background: #D5DCE8; position: relative; transition: background .15s; }
.own-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.own-switch input:checked + span { background: var(--blue); } .own-switch input:checked + span::after { transform: translateX(18px); }
.own-switch input:disabled + span { opacity: .45; }
.own-tick { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid #EEF1F6; cursor: pointer; } .own-tick input { margin-top: 3px; width: 18px; height: 18px; }
.own-fee { font-size: 12px; color: var(--text2); line-height: 1.45; background: #F5F7FB; border-radius: 9px; padding: 9px 10px; margin: 10px 0; }
.own-hint { font-size: 13px; color: var(--text2); } .own-asked { background: #FBF3E2; color: #7a5200; border-radius: 9px; padding: 8px 10px; font-size: 13px; margin-bottom: 6px; }
.own-chg { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid #EEF1F6; } .own-chg small { display: block; color: var(--text2); font-size: 11.5px; } .own-chg span { color: var(--text3); font-size: 12px; white-space: nowrap; }
.own-btn { display: block; width: 100%; margin-top: 8px; padding: 12px; border-radius: 11px; border: none; background: var(--blue); color: #fff; font: 700 14px inherit; font-family: inherit; cursor: pointer; }
.own-btn.ghost { background: #fff; color: var(--text); border: 1px solid var(--border2); }
.own-contacts { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 8px; }
.own-contact { color: var(--blue); text-decoration: none; font-size: 14px; font-weight: 600; }
.own-disc { color: var(--coral); border-color: #F3D3C8; }

/* Workstation tabs: always one line, tighter on smaller screens (a MacBook Air is ~1280–1470 wide) */
.bk-module-btn { white-space: nowrap; }
.nav-center { flex-wrap: nowrap; min-width: 0; }
@media (max-width: 1440px) {
  .bk-module-btn { font-size: 13px !important; padding: 8px 14px !important; }
  .bk-module-btn.active-module { font-size: 14px !important; padding: 9px 16px !important; }
}
@media (max-width: 1180px) {
  .bk-module-btn { font-size: 12.5px !important; padding: 7px 10px !important; }
  .bk-module-btn.active-module { font-size: 13px !important; padding: 8px 12px !important; }
  #screen-bk .nav-right button, #screen-bk .nav-right .btn { padding: 6px 9px !important; font-size: 12px !important; }
}
/* Bookkeeping on laptops (a MacBook Air is ~1280–1470 wide): a narrower month
   column with smaller figures, and vendor/category boxes that give way before
   the description does. Phones (≤767px) keep their own layout. */
@media (min-width: 768px) and (max-width: 1500px) {
  .bk-ws-grid { grid-template-columns: 200px minmax(0, 1fr) !important; gap: 14px !important; }
  #bk-summary > div > div:first-child { font-size: 12px !important; }
  #bk-summary > div > div:nth-child(2) { font-size: 15px !important; }
  #bk-summary { padding: 2px 10px 6px !important; }
  .bk-row-box { flex: 0 1 170px !important; min-width: 96px !important; }
  #bk-review [data-desc] > div[style*="flex:1 1 0"] { min-width: 160px !important; }
}
@media (min-width: 768px) and (max-width: 1300px) {
  .bk-ws-grid { grid-template-columns: 180px minmax(0, 1fr) !important; }
  .bk-row-box { flex: 0 1 140px !important; min-width: 90px !important; }
  #bk-review [data-desc] { gap: 6px !important; padding: 9px 10px !important; }
  #bk-review [data-desc] button { padding: 4px 9px !important; font-size: 11.5px !important; }
}
.sites-stop { color: var(--coral) !important; border-color: #F3D3C8 !important; }
/* ── Owner's phone bar: thicker, with coloured icon bubbles ── */
@media (max-width: 767px) {
  .cl-mob-nav { height: 88px; padding-top: 4px; box-shadow: 0 -4px 18px rgba(11,26,63,.07); border-top-color: #e5e9f0; }
  .cl-shell { padding-bottom: 96px; }
  .cl-mob-tab { gap: 4px; padding: 4px 2px; }
  .cl-mob-bub { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; transition: transform .15s, box-shadow .15s; }
  .cl-mob-tab-lbl { font-size: 11px !important; font-weight: 700 !important; color: #56648A; max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
  .cl-mob-tab.active .cl-mob-bub { box-shadow: 0 0 0 2px #1257F0; transform: translateY(-1px); }
  .cl-mob-tab.active .cl-mob-tab-lbl { color: #0B1A3F; }
  .cl-mob-ai-circle { width: 66px !important; height: 66px !important; font-size: 19px !important; }
}
.cl-bar-custom { margin-left: auto; border: 1px solid var(--border2); background: #fff; border-radius: 999px; padding: 6px 12px; font: 700 12.5px inherit; font-family: inherit; color: var(--blue); cursor: pointer; }
#cl-more-screen .cl-home-topbar { display: flex; align-items: center; }
.cl-bar-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 6px; }
.cl-bar-pick button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border: 1.5px solid #E5E9F2; border-radius: 12px; background: #fff; font: 700 11.5px inherit; font-family: inherit; color: #0B1A3F; cursor: pointer; }
.cl-bar-pick button.on { border-color: #1257F0; background: #EAF1FE; }
.cl-bar-pick button b { position: absolute; top: 5px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: #1257F0; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.cl-bar-pick .cl-mob-bub { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.own-btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 767px) { #cl-ai-panel { bottom: 88px !important; } }
/* Business page: greeting on the left, its buttons on the right */
.bk-home-head { align-items: flex-end; }
.bk-greet p { margin: 0; font-size: 13px; color: var(--text2); } .bk-greet h1 { margin: 2px 0 0; font-size: 24px; font-weight: 900; color: #0B1A3F; letter-spacing: -.01em; }
.bk-head-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
/* the white wordmark on the navy bar */
.nav-wordmark { display: flex; align-items: center; }
.nav-wordmark svg { height: 17px; width: auto; display: block; }
/* Laptops up to 1280 wide: the tabs stay in the bar; Alerts, Settings and Sign out fold into ☰ */
@media (min-width: 641px) and (max-width: 1280px) {
  #screen-bk .nav .nav-menu { display: none !important; }
  #screen-bk .hamburger { display: flex; margin-left: 10px; }
  #screen-bk .nav-menu-dropdown { left: auto; right: 12px; top: 54px; width: 230px; border: 0.5px solid var(--border2); border-radius: 12px; box-shadow: 0 12px 30px rgba(11,26,63,.18); overflow: hidden; }
  #screen-bk .nav-menu-dropdown .nav-btn[onclick^="bkModule"] { display: none; }
}
/* Sites tab: slim cards and a search bar */
.sites-search { width: 100%; margin: 0 0 12px; }
.sites-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important; gap: 10px !important; }
.sites-slim { flex-direction: row !important; align-items: center; gap: 10px; padding: 10px 12px; }
.sites-ico { width: 42px; height: 42px; border-radius: 11px; color: #fff; font-weight: 900; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sites-info { flex: 1; min-width: 0; } .sites-info b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sites-info .sites-url { margin: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sites-info small { display: block; font-size: 11.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sites-acts { display: flex; gap: 6px; flex-shrink: 0; } .sites-acts .crm-btn { padding: 6px 10px; text-decoration: none; }
.sites-ask { padding: 9px 12px; margin-top: 8px; }
.remember-note { font-size: 12.5px; color: var(--text2); text-align: center; margin-top: 10px; } .remember-note a { color: var(--blue); font-weight: 700; }
.own-more { margin: 4px 0 2px; border: 1px solid #EEF1F6; border-radius: 10px; padding: 0 10px; }
.own-more summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--blue); padding: 10px 0; list-style: none; display: flex; justify-content: space-between; }
.own-more summary::-webkit-details-marker { display: none; }
.own-more summary::after { content: '\25BE'; color: var(--text3); transition: transform .15s; }
.own-more[open] summary::after { transform: rotate(180deg); }
.own-more[open] { padding-bottom: 6px; }
/* the owner's Accounts: folded until tapped */
.cl-acc-fold { border: 1px solid #E5E9F2; border-radius: 14px; padding: 0 14px; background: #fff; }
.cl-acc-sum { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 13px 0; font-size: 15px; font-weight: 700; color: var(--text); }
.cl-acc-sum::-webkit-details-marker { display: none; }
.cl-acc-count { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--text2); }
.cl-acc-sum::after { content: '\25BE'; color: var(--text3); transition: transform .15s; }
.cl-acc-fold[open] .cl-acc-sum::after { transform: rotate(180deg); }
.cl-acc-fold[open] { padding-bottom: 10px; }
/* Sales Tax and Est. Tax: figures to read, not buttons */
.cl-tax-pill.cl-tax-static { cursor: default; }
.cl-tax-pill.cl-tax-static:active { transform: none; }
.login-wordmark { display: flex; justify-content: center; margin: 6px 0 4px; } .login-wordmark svg { height: 26px; width: auto; display: block; }
body.device-remembered #screen-login .hide-remembered { display: none !important; }
/* Phones: 16px text in every box, so iPhones never zoom in when one is tapped
   (and stay zoomed after signing in). Pinch-zoom stays available. */
@media (max-width: 767px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}
/* The owner's assistant: cards to confirm, and typing dots */
.oa-card { background: #fff; border: 1px solid #DCE3EF; border-radius: 14px; padding: 10px 12px; margin: 4px 0; box-shadow: 0 2px 8px rgba(11,26,63,.06); font-size: 12.5px; }
.oa-t { font-weight: 800; font-size: 13.5px; margin-bottom: 6px; color: #0B1A3F; }
.oa-r { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid #F1F4F9; } .oa-r span { color: var(--text2); } .oa-r b { text-align: right; }
.oa-total b { color: #1257F0; font-size: 13.5px; }
.oa-hint { color: var(--text2); line-height: 1.5; }
.oa-acts { display: flex; gap: 6px; margin-top: 8px; }
.oa-acts button { flex: 1; padding: 8px; border-radius: 20px; border: 1px solid var(--border2); background: #fff; font: 700 12px inherit; font-family: inherit; cursor: pointer; color: var(--text); }
.oa-acts .oa-ok { background: linear-gradient(135deg,#1a56db,#7c3aed); color: #fff; border: none; }
.oa-acts button:disabled { opacity: .6; }
.oa-state { font-weight: 700; color: #1F9D46; font-size: 12px; }
.oa-new { margin-left: 8px; border: 1px solid var(--border2); background: #fff; border-radius: 12px; padding: 2px 8px; font: 700 11px inherit; font-family: inherit; color: var(--blue); cursor: pointer; vertical-align: middle; }
.oa-typing { display: flex; gap: 4px; padding: 8px 12px; } .oa-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9aa6c2; animation: oaDot 1s infinite ease-in-out; }
.oa-typing span:nth-child(2) { animation-delay: .15s; } .oa-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes oaDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.oa-state.muted { color: var(--text3); font-weight: 600; }
/* the owner's employee card: app access */
.emp-access { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; flex-wrap: wrap; }
.emp-badge { font-size: 11.5px; font-weight: 700; border-radius: 20px; padding: 4px 10px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.emp-badge.ok { color: #15803d; background: #f0fdf4; border: 0.5px solid #bbf7d0; }
.emp-badge.wait { color: #92400e; background: #fffbeb; border: 0.5px solid #fde68a; }
.emp-acc-btn { background: none; border: 0.5px solid var(--border2); cursor: pointer; color: var(--text); font: 600 12px inherit; font-family: inherit; padding: 6px 12px; border-radius: var(--radius); }
.emp-acc-btn.go { border-color: var(--green); color: var(--green); }
.emp-acc-btn.danger { color: var(--coral); border-color: #F3D3C8; }
/* the employee card on a phone: app access on its own row under the name */
#cl-emp-detail > div:first-child { flex-wrap: wrap; }
@media (max-width: 600px) { .emp-access { order: 9; flex-basis: 100%; margin: 2px 0 0 44px; } }
/* Employee sign-in */
body.emp-signin #screen-login .hide-emp { display: none !important; }
.lp-emp-link { margin-top: 12px; font-size: 13.5px; color: #5a6b85; }
.lp-emp-link a { color: #1257F0; font-weight: 700; text-decoration: none; }
/* Sites, beside her name: QR codes and pausing online orders */
.own-greet { display: flex; align-items: center; gap: 10px; }
.own-greet-t { flex: 1; min-width: 0; } .own-greet-t h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.own-quick { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.own-qr { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border2); background: #fff; font: 900 12px inherit; font-family: inherit; color: #0B1A3F; cursor: pointer; }
.own-orders { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 12px; font: 800 12.5px inherit; font-family: inherit; cursor: pointer; border: 1.5px solid; white-space: nowrap; }
.own-orders[hidden] { display: none; }
.own-orders.on { background: #ECFDF3; color: #15803D; border-color: #A7F3C5; }
.own-orders.on .dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.own-orders.off { background: #F3F4F6; color: #4B5563; border-color: #D1D5DB; }
/* Clients → Calendar: requests from your website */
.crm-reqcard { border-left: 5px solid #C9962B; margin-bottom: 12px; }
.crm-req { padding: 12px 0; border-top: 1px solid var(--border); }
.crm-req:first-of-type { border-top: none; }
.crm-req-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.crm-req-tag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.crm-req-tag.new { background: #FBF3E2; color: #7a5200; }
.crm-req-tag.known { background: #E8F7EE; color: #15803D; }
.crm-req-when, .crm-req-contact { font-size: 13px; color: var(--text2); margin-top: 3px; }
.crm-req-note { font-size: 13px; color: var(--blue); margin-top: 3px; }
.crm-req-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.crm-req-ok { background: #15803D !important; border-color: #15803D !important; }
.crm-req-no { color: var(--coral); }
.crm-req-held { font-size: 12px; color: #7a5200; margin-top: 6px; }
/* Businesses you run (no owner login) */
.bk-create-biz { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--blue); color: #fff; border: none; border-radius: var(--radius); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.run-by-you { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700; color: #7a5200; background: #FBF3E2; border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.ov-managed { font-size: 12.5px; color: #7a5200; margin: 2px 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-services { display: grid; gap: 8px; margin: 4px 0 10px; }
.cb-svc { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--border2); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.cb-svc input { margin-top: 3px; width: 18px; height: 18px; }
.cb-svc b { display: block; font-size: 14px; }
.cb-svc small { display: block; color: var(--text2); font-size: 12px; margin-top: 2px; }
.cb-svc:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, transparent); }
/* the service choices are cards, not field labels */
.crm-sheet .cb-svc { display: flex; flex-direction: row; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); font-weight: 400; margin: 0; }
.crm-sheet .cb-svc input { flex-shrink: 0; }
.crm-sheet .cb-svc b { color: var(--text); font-weight: 700; }
.crm-sheet .cb-svc small { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Sign-up through an accountant's link */
.join-banner { display: flex; gap: 10px; align-items: flex-start; background: #FBF3E2; border: 1px solid #E9C46A; color: #3b2a00; border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; line-height: 1.45; }
.join-banner[hidden] { display: none; }
.join-ic { font-size: 18px; line-height: 1; }
.join-apps-wrap .join-app { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--border2); border-radius: 12px; padding: 10px 12px; margin: 6px 0 0; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); font-size: 14px; }
.join-apps-wrap .join-app input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.join-apps-wrap .join-app b { display: block; font-size: 14px; }
.join-apps-wrap .join-app small { display: block; color: var(--text2); font-size: 12px; margin-top: 2px; }
.join-apps-wrap .join-app:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, transparent); }
.join-note { font-size: 12px; color: var(--text2); margin: 6px 2px 0; }
/* Invite a client, and who joined through your link */
.bk-invite-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--bg2); color: var(--blue); border: 1px solid var(--blue); border-radius: var(--radius); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.ref-card { display: flex; align-items: center; gap: 12px; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 12px; padding: 10px 14px; margin: 0 0 10px; }
.ref-ic { font-size: 22px; }
.ref-t { flex: 1; min-width: 0; font-size: 14px; }
.ref-t small { display: block; color: var(--text2); font-size: 12px; margin-top: 2px; }
.ref-a { display: flex; gap: 6px; flex-wrap: wrap; }
/* the employee screen's Sign out shows on phones too */
#screen-employee .nav .nav-menu { display: flex !important; }
@media (max-width: 480px) { #emp-nav-name { display: none; } }
/* every household action fits — long labels wrap instead of being clipped */
.crm-bar button span, .crm-bar a span { white-space: normal; text-align: center; line-height: 1.15; }
/* how many appointments need you, on the Clients tab */
.crm-tab-badge { display: inline-block; margin-left: 6px; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: #C2410C; color: #fff; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; animation: crmPulse 1.6s ease-out 2; }
@keyframes crmPulse { 0% { box-shadow: 0 0 0 0 rgba(194,65,12,.6); } 100% { box-shadow: 0 0 0 10px rgba(194,65,12,0); } }
/* an appointment waiting for your answer, inside its editor */
.crm-appt-req { background: #FBF3E2; border: 1px solid #E9C46A; border-radius: 12px; padding: 10px 12px; margin: 4px 0 6px; font-weight: 700; color: #7a5200; }
.crm-appt-req .crm-req-acts { margin-top: 8px; }
/* the household header: Edit and Open in CRM, then Call, Text, Email underneath */
.crm-acts { flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; }
.crm-reach { flex-basis: 100%; display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.crm-reach .crm-btn:disabled { opacity: .4; cursor: default; }
/* ── A household, laid out for a laptop and a big screen ── */
.crm-hhtop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.crm-hhname h1 { font-size: 19px; line-height: 1.25; }
.crm-acts { max-width: none; flex-wrap: nowrap; align-items: center; }
.crm-reach { display: inline-flex; gap: 6px; flex-basis: auto; margin: 0; }
.crm-icbtn { width: 38px; padding-left: 0 !important; padding-right: 0 !important; justify-content: center; font-size: 16px; }
@media (max-width: 760px) { .crm-hhtop { grid-template-columns: auto minmax(0, 1fr); } .crm-acts { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-start; } }
/* the action row: icons only — the name shows on hover */
.crm-bar { justify-content: flex-start; }
.crm-bar button, .crm-bar a { flex: 0 0 auto; width: 46px; min-width: 46px; height: 42px; padding: 0; justify-content: center; font-size: 19px; }
.crm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* boxes: as many columns as fit (2 on a laptop, 3 on a big screen), each its own height */
.crm-hhgrid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); align-items: start; }
.crm-recent .crm-tl { max-height: 320px; overflow-y: auto; padding-right: 6px; }
/* people: one tidy row each */
.crm-person { padding: 8px 0; border-top: 1px solid var(--border); }
.crm-person:first-of-type { border-top: none; padding-top: 2px; }
.crm-person-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.crm-person-name { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.crm-person-ic { display: inline-flex; gap: 2px; }
.crm-person-role { color: var(--text2); font-size: 12.5px; text-transform: capitalize; white-space: nowrap; }
.crm-person-sub { color: var(--text2); font-size: 12.5px; margin-top: 2px; }
.crm-unlink { display: block; margin: 6px 0 0 auto; font-size: 12px; color: var(--text3); }
/* laptops: two boxes across, and the buttons under the name so the name gets the full width */
.crm-hhgrid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 1500px) {
  .crm-hhtop { grid-template-columns: auto minmax(0, 1fr); }
  .crm-acts { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; margin-top: 4px; }
}
/* at most three boxes across, however big the screen */
.crm-hhgrid { grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 24px) / 3)), 1fr)); }
.crm-box .crm-h + .crm-person { border-top: none; padding-top: 2px; }
/* the client list: narrower, so the client's panel gets the room */
.crm-clients { grid-template-columns: 250px minmax(0, 1fr); }
.crm-who { width: 13px; height: 13px; color: var(--text3); margin-right: 5px; vertical-align: -1px; flex-shrink: 0; }
.crm-list .crm-row-t b { display: inline-flex; align-items: center; }
/* the client list: a little dot instead of a badge; each business on its own line */
.crm-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-left: 6px; align-self: center; }
.crm-dot.red { background: #DC2626; } .crm-dot.amber { background: #F59E0B; } .crm-dot.grey { background: #CBD5E1; }
.crm-row-biz { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-list .crm-row-t { min-width: 0; }
/* deadlines, with Done */
.crm-dlrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border); }
.crm-box .crm-h + .crm-dlrow { border-top: none; padding-top: 2px; }
.crm-dlrow b { display: block; font-size: 13px; } .crm-dlrow small { display: block; color: var(--text2); font-size: 12px; }
.crm-dlwhen { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.crm-done { color: var(--green); border-color: #BBF7D0 !important; white-space: nowrap; }
/* sales tax periods and estimated payments */
.crm-period { display: grid; grid-template-columns: minmax(0, 1fr) 92px 92px; gap: 8px; align-items: end; padding: 7px 0; border-top: 1px solid var(--border); }
.crm-box .crm-h + .crm-period { border-top: none; padding-top: 2px; }
.crm-period-t b { display: block; font-size: 13px; } .crm-period-t small { display: block; font-size: 12px; color: var(--text2); }
.crm-period label { font-size: 10.5px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; display: flex; flex-direction: column; gap: 2px; }
.crm-period input { width: 100%; padding: 6px 8px; border: 1px solid var(--border2); border-radius: 8px; font: inherit; font-size: 13px; text-transform: none; }
.crm-period.paid { opacity: .75; }
.crm-period-sub { font-size: 11px; font-weight: 800; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 2px; }
.crm-green { color: var(--green) !important; }
/* the household's one row of actions, beside the name — wraps neatly when narrow */
.crm-acts { flex-wrap: wrap; gap: 6px; }
.crm-acts .crm-icbtn { width: 38px; height: 36px; font-size: 16px; }
@media (max-width: 1500px) { .crm-acts { justify-content: flex-start; } }
/* balance sheet: amounts you can click to see the transactions behind them */
.bs-drill { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.bs-drill:hover { text-decoration-style: solid; }
.bs-drill-body { max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.bs-sum { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; background: var(--bg2); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; }
.bs-sum span:nth-last-child(2), .bs-sum b:last-child { font-weight: 800; border-top: 1px solid var(--border2); padding-top: 4px; }
.bs-dh { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin: 12px 0 4px; }
.bs-dl { padding: 8px 0; border-top: 1px solid var(--border); }
.bs-dl-top { display: flex; justify-content: space-between; gap: 10px; }
.bs-dl-top small { display: block; color: var(--text2); font-size: 12px; }
.bs-split { margin: 6px 0 0 10px; padding: 6px 10px; border-left: 3px solid var(--border2); background: var(--bg2); border-radius: 0 8px 8px 0; font-size: 12.5px; }
.bs-split-h { color: var(--text2); margin-bottom: 4px; }
.bs-split-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.bs-split-row.this { font-weight: 800; color: var(--blue); }
/* Bookkeeping → Sales tax */
.st-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.st-k { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); }
.st-big { font-size: 26px; font-weight: 800; margin: 2px 0; } .st-big.owed { color: var(--coral); }
.st-sub { font-size: 12.5px; color: var(--text2); }
.st-table { border: 1px solid var(--border2); border-radius: 14px; overflow: hidden; }
.st-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1fr 1fr 84px; gap: 8px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--border); font-size: 13px; cursor: pointer; }
.st-row:hover { background: var(--bg2); }
.st-row span:not(:first-child) { text-align: right; }
.st-row small { display: block; color: var(--text3); font-size: 11.5px; }
.st-head { border-top: none; background: var(--bg2); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); cursor: default; }
.st-row em { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.st-ok { color: var(--green); background: #F0FDF4; } .st-late { color: #B91C1C; background: #FEF2F2; } .st-due { color: #92400E; background: #FFFBEB; } .st-none { color: var(--text3); }
.st-detail { padding: 8px 14px 12px 24px; background: var(--bg2); font-size: 12.5px; border-top: 1px dashed var(--border); }
.st-pay { display: flex; justify-content: space-between; padding: 3px 0; }
/* Edu — the Monday brief */
.edu-wrap { max-width: 980px; margin: 0 auto; padding: 4px 4px 40px; }
.edu-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.edu-k { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); }
.edu-head h1 { font-size: 22px; margin: 2px 0 4px; }
.edu-arch { height: 34px; border: 1px solid var(--border2); border-radius: 10px; padding: 0 10px; background: var(--bg); color: var(--text); font-family: inherit; }
.edu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 6px 0; }
.edu-chip { border: 1.5px solid var(--border2); background: var(--bg); color: var(--text2); border-radius: 999px; padding: 6px 12px; font: 600 13px inherit; font-family: inherit; cursor: pointer; }
.edu-chip.on { border-color: var(--blue); background: var(--blue); color: #fff; }
.edu-card { background: var(--bg); border: 1px solid var(--border2); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; }
.edu-ct { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.edu-intro { color: var(--text2); font-size: 13.5px; margin-bottom: 4px; }
.edu-item { padding: 10px 0; border-top: 1px solid var(--border); }
.edu-item:first-of-type { border-top: none; }
.edu-h { font-weight: 800; font-size: 14.5px; }
.edu-when { font-size: 11px; font-weight: 800; color: #92400E; background: #FFFBEB; border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.edu-item p { margin: 4px 0; font-size: 13.5px; line-height: 1.5; }
.edu-why b, .edu-act b { color: var(--text); }
.edu-src { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.edu-src a { font-size: 12px; color: var(--blue); text-decoration: none; background: var(--bg2); border-radius: 999px; padding: 2px 9px; }
.edu-msgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.edu-msg { background: var(--bg2); border-radius: 10px; padding: 8px 10px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.edu-msg small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; color: var(--text3); }
.edu-msg .crm-mini { align-self: flex-start; }
.edu-dlrow { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 13px; }
.edu-dlrow:first-of-type { border-top: none; } .edu-dlrow small { display: block; color: var(--text2); font-size: 12px; }
.edu-note { font-size: 12px; color: var(--text3); text-align: center; margin-top: 8px; }
@media (max-width: 700px) { .edu-msgs { grid-template-columns: 1fr; } .edu-head { flex-direction: column; } }
/* Edu, with colour: a top story, a banner per topic, key numbers, cards */
.edu-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 18px 18px 14px; margin-bottom: 16px; color: #fff;
  background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.18) 0 70px, transparent 71px), radial-gradient(circle at 70% 110%, rgba(255,255,255,.12) 0 120px, transparent 121px), linear-gradient(135deg, var(--c1), var(--c2)); }
.edu-hero-art { position: absolute; right: 18px; top: 10px; font-size: 92px; opacity: .9; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.edu-hero-k { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; opacity: .92; margin-bottom: 8px; }
.edu-hero .edu-tile.big { background: rgba(255,255,255,.96); color: var(--text); border: none; max-width: 78%; }
.edu-tile.big .edu-h { font-size: 19px; }
.edu-topic { margin-bottom: 18px; }
.edu-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; color: #fff; border-radius: 16px; padding: 14px 16px; margin-bottom: 10px;
  background: radial-gradient(circle at 92% 30%, rgba(255,255,255,.18) 0 46px, transparent 47px), radial-gradient(circle at 78% 120%, rgba(255,255,255,.12) 0 70px, transparent 71px), linear-gradient(120deg, var(--c1), var(--c2)); }
.edu-banner-art { font-size: 40px; width: 58px; height: 58px; display: grid; place-items: center; background: rgba(255,255,255,.2); border-radius: 16px; flex-shrink: 0; }
.edu-banner-t { font-size: 18px; font-weight: 800; }
.edu-banner-i { font-size: 13px; opacity: .92; margin-top: 2px; }
.edu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.edu-tile { position: relative; background: var(--bg); border: 1px solid var(--border2); border-left: 5px solid var(--c1); border-radius: 14px; padding: 12px 14px; }
.edu-tile .edu-h { font-weight: 800; font-size: 15px; padding-right: 0; }
.edu-tile p { margin: 5px 0; font-size: 13.5px; line-height: 1.5; }
.edu-stat { float: right; margin: 0 0 6px 10px; text-align: center; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; border-radius: 12px; padding: 6px 10px; min-width: 76px; }
.edu-stat b { display: block; font-size: 20px; line-height: 1.1; }
.edu-stat small { display: block; font-size: 10px; opacity: .92; line-height: 1.2; }
.edu-act { background: var(--bg2); border-radius: 8px; padding: 6px 8px; }
@media (max-width: 700px) { .edu-hero .edu-tile.big { max-width: none; margin-top: 60px; } .edu-hero-art { font-size: 64px; } }
.edu-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* the code to give the owner, and the owner's take-over screen */
.ho-code { font-size: 38px; font-weight: 900; letter-spacing: .12em; text-align: center; background: var(--bg2); border: 2px dashed var(--blue); border-radius: 14px; padding: 14px; margin: 10px 0; color: var(--blue); }
.ov-handover { font-size: 12.5px; margin: 2px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ho-st { color: #92400E; } .ho-st.locked { color: #B91C1C; font-weight: 700; }
.claim-ov { position: fixed; inset: 0; z-index: 9999; background: linear-gradient(160deg, #0B1A3F, #1E3A8A); display: grid; place-items: center; padding: 20px; }
.claim-card { background: #fff; color: #0B1A3F; border-radius: 20px; padding: 26px 22px; width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.claim-logo { font-weight: 900; letter-spacing: .18em; color: #1E3A8A; font-size: 14px; margin-bottom: 10px; }
.claim-card h2 { margin: 0 0 8px; font-size: 22px; } .claim-card p { color: #56648A; font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.claim-card label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #56648A; margin: 10px 0 4px; }
.claim-card input { width: 100%; height: 44px; border: 1.5px solid #DCE3EF; border-radius: 12px; padding: 0 12px; font-size: 17px; font-family: inherit; box-sizing: border-box; }
#claim-code { letter-spacing: .2em; font-weight: 800; text-align: center; font-size: 22px; }
.claim-go { width: 100%; height: 46px; margin-top: 14px; border: none; border-radius: 12px; background: #1257F0; color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; font-family: inherit; }
.claim-go:disabled { opacity: .6; }
.claim-link { width: 100%; margin-top: 8px; background: none; border: none; color: #56648A; font-size: 13px; cursor: pointer; font-family: inherit; }
.claim-err { color: #B91C1C; font-size: 13px; font-weight: 600; min-height: 18px; margin-top: 8px; }
.claim-biz { font-size: 24px; font-weight: 900; color: #1257F0; background: #EEF2F9; border-radius: 12px; padding: 12px; text-align: center; margin: 4px 0 12px; }
/* resources: videos play inside Navazia */
.res-thumb-wrap { position: relative; }
.res-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; display: grid; place-items: center; font-size: 16px; padding-left: 3px; box-sizing: border-box; pointer-events: none; }
.res-player { position: fixed; inset: 0; z-index: 10000; background: rgba(5,10,25,.82); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); }
.res-player-box { width: min(960px, 100%); background: #0B1220; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.res-player-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; color: #fff; font-size: 14px; }
.res-player-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-player-x { background: rgba(255,255,255,.12); color: #fff; border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; cursor: pointer; flex-shrink: 0; }
.res-player-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.res-player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Bookkeeping: By month | Whole year */
.bk-mode { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.bk-mode-seg { display: inline-flex; background: var(--bg2); border: 1px solid var(--border2); border-radius: 999px; padding: 3px; }
.bk-mode-seg button { border: none; background: none; padding: 6px 14px; border-radius: 999px; font: 600 13px inherit; font-family: inherit; color: var(--text2); cursor: pointer; }
.bk-mode-seg button.on { background: var(--blue); color: #fff; }
#bk-year-pick { height: 32px; border: 1px solid var(--border2); border-radius: 10px; padding: 0 10px; background: var(--bg); color: var(--text); font-family: inherit; }
.bky-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg2); border: 1px solid var(--border2); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-size: 13.5px; }
.bky-chips { display: inline-flex; gap: 6px; }
.bky-chips button { border: 1.5px solid var(--border2); background: var(--bg); border-radius: 999px; padding: 4px 11px; font: 600 12.5px inherit; font-family: inherit; cursor: pointer; color: var(--text2); }
.bky-chips button.on { border-color: var(--blue); background: var(--blue); color: #fff; }
.bky-gap { font-style: normal; color: #B45309; font-weight: 700; } .bky-ok { font-style: normal; color: var(--green); font-weight: 700; }
.bky-month { border: 1px solid var(--border2); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.bky-mh { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg2); cursor: pointer; font-size: 13px; position: sticky; top: 0; }
.bky-mh b { font-size: 14px; }
.bky-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto 78px; gap: 8px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--border); font-size: 13px; cursor: pointer; }
.bky-row:hover { background: var(--bg2); }
.bky-row.topost { background: #FFFBEB; } .bky-row.topost:hover { background: #FEF3C7; }
.bky-row.excluded { opacity: .55; }
.bky-d { color: var(--text3); font-size: 12px; }
.bky-t { min-width: 0; } .bky-t b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bky-t small { display: block; color: var(--text3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bky-a { font-weight: 700; white-space: nowrap; } .bky-a.in { color: var(--green); }
.bky-s { font-size: 11px; font-weight: 800; text-align: right; color: var(--text3); }
.bky-row.topost .bky-s { color: #B45309; } .bky-row.posted .bky-s { color: var(--green); }
.bky-flash { animation: bkyFlash 2.2s ease-out; }
@keyframes bkyFlash { 0%, 30% { box-shadow: 0 0 0 3px var(--blue); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 600px) { .bky-row { grid-template-columns: 44px minmax(0, 1fr) auto; } .bky-s { display: none; } }
.bky-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #EEF4FF; border: 1px solid #C7D7FE; color: #1E3A8A; border-radius: 12px; padding: 9px 12px; margin-bottom: 10px; font-size: 13.5px; }
.bky-banner span { font-weight: 800; color: #B45309; }
.bky-banner button { margin-left: auto; border: 1px solid #C7D7FE; background: #fff; color: #1E3A8A; border-radius: 999px; padding: 4px 12px; font: 600 12.5px inherit; font-family: inherit; cursor: pointer; }
/* card ✏️, collapsible deadlines, card forms */
.crm-box .crm-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.crm-box-ed { border: 1px solid var(--border2); background: var(--bg); border-radius: 8px; width: 28px; height: 26px; font-size: 13px; cursor: pointer; display: grid; place-items: center; padding: 0; flex-shrink: 0; }
.crm-box-ed:hover { border-color: var(--blue); }
.crm-addbiz { display: block; margin-top: 8px; font-size: 12.5px; }
.crm-dlbox > summary { list-style: none; cursor: pointer; }
.crm-dlbox > summary::-webkit-details-marker { display: none; }
.crm-dlbox > summary em { font-style: normal; font-weight: 800; }
.crm-dlnext { font-size: 13px; color: var(--text2); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.crm-dlnext b { color: var(--text); }
.crm-dlmore { margin-left: auto; font-size: 12px; color: var(--blue); font-weight: 700; }
.crm-dlbox[open] .crm-dlnext { display: none; }
.crm-dlbox:not([open]) .crm-dlrow { display: none; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.cf { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; }
.cf.half { grid-column: auto; }
.cf label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin: 0; }
.cf input, .cf select, .cf textarea { height: 36px; border: 1px solid var(--border2); border-radius: 9px; padding: 0 10px; font: inherit; font-size: 13.5px; background: var(--bg); color: var(--text); width: 100%; box-sizing: border-box; }
.cf textarea { height: auto; padding: 8px 10px; resize: vertical; }
.cf-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; grid-column: 1 / -1; text-transform: none !important; letter-spacing: 0 !important; color: var(--text) !important; font-weight: 500 !important; margin: 4px 0 !important; }
.cf-check.half { grid-column: auto; }
.cf-check input { width: 17px; height: 17px; }
.cf-picklist { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.cf-pick { display: flex; align-items: center; gap: 6px; text-align: left; border: 1px solid var(--border2); background: var(--bg); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13.5px; cursor: pointer; color: var(--text); }
.cf-pick span { margin-left: auto; color: var(--blue); font-weight: 700; font-size: 12.5px; }
.cf-pick:hover { border-color: var(--blue); }
@media (max-width: 560px) { .cf-grid { grid-template-columns: 1fr; } .cf.half, .cf-check.half { grid-column: 1 / -1; } }
.crm-dlbox > summary .crm-h { margin-bottom: 4px; }
.crm-dlbox[open] > summary .crm-dlnext { display: none; }
.crm-sheet .cf-check { font-size: 13.5px !important; }
/* the CRM's menu: one row across the top, so the panels get the width */
.crm-wrap { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
.crm-side { position: static !important; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px !important; }
.crm-si { width: auto !important; flex: 0 0 auto; padding: 8px 12px !important; }
.crm-si span[id^="crm-n-"]:not(:empty) { margin-left: 4px; }
/* overview cards you can open */
.ov-kpi-link { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ov-kpi-link:hover { border-color: var(--blue) !important; box-shadow: 0 2px 10px rgba(18,87,240,.12); }
.ov-kpi-go { float: right; color: var(--blue); font-weight: 800; }
/* folder tabs for open businesses */
.bk-tabbar { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 0; border-bottom: 1.5px solid var(--border2); padding-bottom: 0; }
.bk-tabbar .cl-back-btn { margin-bottom: 6px; }
.bk-tabs { display: flex; gap: 2px; overflow-x: auto; min-width: 0; scrollbar-width: thin; }
.bk-ftab { display: flex; align-items: center; gap: 7px; max-width: 220px; padding: 8px 8px 8px 10px; border: 1.5px solid var(--border2); border-bottom: none; border-radius: 12px 12px 0 0; background: var(--bg2); color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer; position: relative; top: 1.5px; flex-shrink: 0; }
.bk-ftab:hover { background: var(--bg); }
.bk-ftab.on { background: var(--bg); color: var(--text); border-color: var(--border2); box-shadow: 0 -2px 0 var(--blue) inset; z-index: 1; }
.bk-ftab.on { box-shadow: inset 0 3px 0 var(--blue); }
.bk-ftab-av { width: 22px; height: 22px; border-radius: 50%; background: var(--blue-light); color: var(--blue); font-size: 10px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.bk-ftab-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-ftab-x { border: none; background: none; color: var(--text3); width: 20px; height: 20px; border-radius: 6px; font-size: 11px; cursor: pointer; flex-shrink: 0; padding: 0; }
.bk-ftab-x:hover { background: var(--border); color: var(--text); }
#bk-overview > .bk-tabbar + div { margin-top: 14px; }
/* booking: a client or someone new; the confirmation after booking */
.crm-b-who { display: inline-flex; background: var(--bg2); border: 1px solid var(--border2); border-radius: 999px; padding: 3px; margin: 2px 0 6px; }
.crm-b-who button { border: none; background: none; padding: 6px 14px; border-radius: 999px; font: 600 13px inherit; font-family: inherit; color: var(--text2); cursor: pointer; }
.crm-b-who button.on { background: var(--blue); color: #fff; }
.crm-booked { background: #ECFDF3; color: #166534; border-radius: 12px; padding: 10px 12px; font-weight: 800; font-size: 14.5px; }
.crm-bc-msg { width: 100%; box-sizing: border-box; border: 1px solid var(--border2); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.5; background: var(--bg2); color: var(--text); resize: vertical; }
.crm-bc-share { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.crm-bc-share .crm-btn { justify-content: center; text-align: center; text-decoration: none; }
.crm-bc-text { background: #16A34A !important; color: #fff !important; border-color: #16A34A !important; }
/* booking: open times that day */
.crm-b-slots { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.crm-b-slot { border: 1.5px solid var(--border2); background: var(--bg); color: var(--blue); border-radius: 10px; padding: 6px 12px; font: 600 13px inherit; font-family: inherit; cursor: pointer; }
.crm-b-slot.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ════════════════════════════════════════════════════════════════════════
   NEW LOOK (Oct 2026) — ice white, electric blue, navy, near-black numbers,
   a touch of gold (logo, the main card's edge, the AI ring). Approved
   previews 179–181. A theme layer: colours change here, layouts don't.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --blue:#1F6BFF; --blue-dark:#1557E6; --blue-light:#EAF2FF; --blue-mid:#4C8DFF;
  --navy:#0A2A5E; --navy-2:#0A2A5E;
  --text:#0B1A33; --text2:#5A6A86; --text3:#8D9BB3;
  --bg2:#F5F8FD; --bg3:#EAF0F9;
  --border:#E2EAF6; --border2:#D3DEEE;
  --brand:linear-gradient(135deg,#1F6BFF 0%,#4C8DFF 100%);
  --brand-deep:linear-gradient(135deg,#1F6BFF 0%,#4C8DFF 100%);
  --nl-tint:#F2F7FF; --nl-tint-line:#D6E5FB; --nl-gold:#D4A63A; --nl-gold2:#F2D27A;
  --nl-shadow:0 8px 24px rgba(31,107,255,.08);
}
/* ── The workstation's top bar: white, the wordmark in navy (its gold triangle stays) ── */
.nav{background:#fff !important;border-bottom:1px solid var(--border) !important;box-shadow:0 1px 0 rgba(11,26,51,.02);}
.nav-wordmark svg path[fill="#ffffff"], .nav-wordmark svg [fill="#ffffff"]{fill:var(--navy) !important;}
.nav-user{color:var(--text2) !important;}
.nav-btn{color:var(--text2) !important;border-color:var(--border2) !important;background:#fff !important;}
.nav-btn:hover{background:var(--blue-light) !important;color:var(--blue) !important;border-color:var(--nl-tint-line) !important;}
.nav-btn.blue{background:var(--brand) !important;color:#fff !important;border-color:transparent !important;}
.bk-module-btn{background:transparent !important;color:var(--text2) !important;border:1px solid transparent !important;font-size:14px !important;}
.bk-module-btn:hover{background:var(--nl-tint) !important;color:var(--blue) !important;}
.bk-module-btn.active-module{background:var(--blue-light) !important;color:var(--blue) !important;border-color:var(--nl-tint-line) !important;font-size:14px !important;padding:8px 16px !important;box-shadow:none !important;}
.nav .nav-menu-btn, .nav .hamburger, .nav button[aria-label*="enu"]{color:var(--text) !important;}
/* ── Cards and page ── */
#screen-bk, #screen-client{background:var(--bg2);}
.ov-kpi{background:#fff;border:1px solid var(--border) !important;border-radius:16px !important;box-shadow:none;}
.ov-kpi-link{background:var(--nl-tint) !important;border-color:var(--nl-tint-line) !important;}
.ov-kpi-link:hover{border-color:var(--blue) !important;}
/* ── The owner's main card: white, black numbers, a faint blue glow, a fine gold edge ── */
.cl-net-card{background:#fff !important;color:var(--text) !important;border:1px solid var(--border);border-top:2px solid var(--nl-gold);box-shadow:var(--nl-shadow) !important;}
.cl-net-card::after{background:radial-gradient(circle,rgba(31,107,255,.14),transparent 70%) !important;}
.cl-net-lbl{color:var(--text3) !important;opacity:1 !important;}
.cl-net-val{color:var(--text) !important;}
.cl-net-sub{color:var(--blue) !important;opacity:1 !important;}
/* ── Sales tax and Est. tax: pale blue, no red or amber ── */
.cl-tax-st, .cl-tax-et{background:var(--nl-tint) !important;border:1.5px solid var(--nl-tint-line) !important;}
.cl-tax-pill-icon{width:30px;height:30px;border-radius:10px;background:#fff;border:1px solid var(--nl-tint-line);display:inline-grid;place-items:center;}
.cl-tax-pill-lbl{color:var(--text2) !important;}
.cl-tax-pill-val{color:var(--text) !important;}
/* ── Revenue and expenses: black numbers ── */
.cl-kpi-card{background:#fff;border:1px solid var(--border) !important;}
.cl-kpi-green .cl-kpi-val, .cl-kpi-red .cl-kpi-val{color:var(--text) !important;}
/* ── The chart: blue for revenue, pale blue-grey for expenses ── */
.cl-sv-bar-rev .cl-sv-bar-fill{background:linear-gradient(180deg,#4C8DFF,#1F6BFF) !important;}
.cl-sv-bar-exp .cl-sv-bar-fill{background:#B9CDEB !important;}
/* ── The Business | Sites switch and the avatar: blue, not green ── */
.own-seg{background:var(--nl-tint) !important;border:1px solid var(--border);}
.own-seg button.on.b, .own-seg button.on.s{background:linear-gradient(135deg,#1F6BFF,#4C8DFF) !important;color:#fff !important;box-shadow:0 2px 8px rgba(31,107,255,.35);}
.cl-top-avatar{background:linear-gradient(135deg,#0A2A5E,#1F6BFF) !important;}
.own-greet, .cl-sites-pane, .own-admin{background:var(--bg2) !important;}
/* ── Tiles: white instead of cyan ── */
.cl-tile{background:#fff !important;border:1px solid var(--border) !important;}
.cl-tile:hover{border-color:var(--blue-mid) !important;}
/* ── The AI button: navy to blue, with a thin gold ring ── */
.cl-mob-ai-circle{background:linear-gradient(135deg,#0A2A5E,#1F6BFF) !important;outline:2px solid var(--nl-gold2);outline-offset:2px;box-shadow:0 8px 20px rgba(31,107,255,.4) !important;}
/* ── Main buttons: the blue gradient with a soft blue shadow ── */
.btn.primary, button.primary, .crm-btn.p{background:var(--brand) !important;border-color:transparent !important;box-shadow:0 6px 16px rgba(31,107,255,.25);}
/* the overview's figure cards: white, black numbers (the selected one keeps a blue edge) */
.ov-kpi:not(.ov-kpi-link){background:#fff !important;}
.ov-kpi-val, .ov-kpi-value{color:var(--text) !important;}
.ov-kpi-label{color:var(--text3) !important;}
/* ── Home, refined: no icons on the tax cards, each says how current it is ── */
.cl-tax-pill-icon{display:none !important;}
.cl-tax-pill{padding:12px 14px !important;}
.cl-tax-pill-lbl small{display:block;font-size:.66rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text3);margin-top:2px;}
/* ── A bigger Net card ── */
.cl-net-card{padding:28px 22px 24px !important;border-radius:22px !important;}
.cl-net-val{font-size:3rem !important;line-height:1.05 !important;margin:6px 0 8px !important;}
.cl-net-sub{font-size:.8rem !important;}
/* ── The chart: the last 4 months, month names on a fixed row so the bars line up ── */
.cl-sv-bars{gap:10px !important;padding:0 2px !important;border-left:none !important;border-bottom:none !important;align-items:stretch !important;}
.cl-sv-col{gap:8px !important;}
.cl-sv-pair{height:130px !important;gap:6px !important;border-bottom:1.5px solid var(--border);padding-bottom:0;}
.cl-sv-bar-track{max-width:26px !important;border-radius:7px 7px 0 0 !important;background:#F0F4FB !important;}
.cl-sv-lbl{height:34px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;line-height:1.2;}
.cl-sv-lbl b{font-size:12.5px;font-weight:800;color:var(--text2);}
.cl-sv-lbl small{font-size:10.5px;color:var(--text3);white-space:nowrap;}
.cl-sv-col.is-last .cl-sv-lbl b{color:var(--blue);}
/* ── The AI button: the Navi AI badge, everywhere it appears ── */
.cl-mob-ai-circle, .cl-ai-desk-float, .cl-ai-float-btn, .cl-home-ai-btn{
  background:#fff url('../img/navi-ai.png') center/cover no-repeat !important;
  color:transparent !important;font-size:0 !important;outline:none !important;
  border:none !important;box-shadow:0 8px 22px rgba(31,107,255,.28) !important;
}
.cl-ai-desk-float svg, .cl-ai-float-btn svg, .cl-home-ai-btn svg{display:none !important;}
.cl-ai-desk-float::after{display:none !important;}

/* ── Business screen: Billing and Notes only beside Profile and Overview (Oct 2026) ──
   Every other tab takes the full width, and the profile becomes one row. */
#ov-grid.ov-wide { grid-template-columns: 160px minmax(0, 1fr) !important; }
#ov-grid.ov-wide > #ov-chat-col { display: none !important; }
#ov-section-profile.ov-compact .ov-header { padding: 10px 16px; gap: 12px; margin-bottom: 12px; }
#ov-section-profile.ov-compact .ov-av { width: 34px; height: 34px; font-size: 13px; border-width: 1.5px; }
#ov-section-profile.ov-compact .ov-header > div { display: flex; align-items: center; gap: 14px; min-width: 0; }
#ov-section-profile.ov-compact .ov-name { font-size: 15px; white-space: nowrap; flex-shrink: 0; }
#ov-section-profile.ov-compact .ov-meta { margin-top: 0; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; min-width: 0; }
#ov-section-profile.ov-compact .ov-managed,
#ov-section-profile.ov-compact .ov-handover,
#ov-section-profile.ov-compact .ov-edit-row,
#ov-section-profile.ov-compact .ov-addr { display: none !important; }
/* the books inside a business: room for the transactions */
#ov-bk-ws-host #bk-workspace { margin-top: 2px; }
/* books inside a business: one column — figures and the sales tax rate in a row on top */
#bk-workspace.bk-in-biz .bk-ws-grid { grid-template-columns: minmax(0, 1fr) !important; }
#bk-workspace.bk-in-biz #bk-sidebar-nav { display: none !important; }
#bk-workspace.bk-in-biz #bk-side-panel {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg); border: 0.5px solid var(--border2); border-radius: var(--radius-lg);
  padding: 8px 12px; margin-bottom: 12px;
}
#bk-workspace.bk-in-biz #bk-side-panel > .bk-side-sec { order: 2; border: none; padding: 0; flex: 1 1 auto; }
#bk-workspace.bk-in-biz #bk-side-month:not([style*="none"]) { order: 1; display: flex !important; align-items: center; gap: 12px; flex: 1 1 520px; min-width: 0; }
#bk-workspace.bk-in-biz #bk-side-panel:has(#bk-side-month:not([style*="none"])) > .bk-side-sec { flex: 0 0 auto; }
#bk-workspace.bk-in-biz #bk-side-month .bk-side-sec { border: none; padding: 0; flex-shrink: 0; }
#bk-workspace.bk-in-biz .bk-client-row { flex-wrap: nowrap; gap: 10px !important; padding: 0 !important; }
#bk-workspace.bk-in-biz .bk-client-row > div:last-child { width: auto; }
/* while a month is open its title leads the row, so the workspace's own back and name step aside */
#bk-workspace.bk-in-biz #bk-side-panel:has(#bk-side-month:not([style*="none"])) .bk-client-row > button,
#bk-workspace.bk-in-biz #bk-side-panel:has(#bk-side-month:not([style*="none"])) .bk-client-row > div:nth-of-type(1) { display: none !important; }
#bk-workspace.bk-in-biz #bk-summary { display: flex !important; gap: 8px; padding: 0 !important; border: none !important; flex: 1; min-width: 0; }
#bk-workspace.bk-in-biz #bk-summary > div {
  flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start !important; justify-content: center;
  gap: 2px; padding: 6px 12px !important; background: var(--bg2) !important;
  border: 0.5px solid var(--border) !important; border-radius: 10px !important;
}
#bk-workspace.bk-in-biz #bk-summary > div + div { border-top: 0.5px solid var(--border) !important; }
#bk-workspace.bk-in-biz #bk-summary > div > div:first-child { font-size: 12px !important; }
#bk-workspace.bk-in-biz #bk-summary > div > div:nth-child(2) { font-size: 18px !important; }
/* the bookkeeping items under Bookkeeping in the business menu */
.ov-menu-item.ov-sub { padding-left: 30px !important; font-size: 12.5px; }
.ov-menu-item.ov-sub > span:first-child { font-size: 12px; }
/* on Vendors, Categories, Loans, Statements and Miles the strip only repeated the name — those pages have their own back */
#bk-workspace.bk-in-biz #bk-ws-main:has(> #bk-section-transactions[style*="none"]) > #bk-side-panel { display: none; }
/* ── Bookkeeping page inside a business (Oct 2026, round 2) ── */
/* the sub-items open only while you're in Bookkeeping */
#ov-grid .ov-menu-item.ov-sub { display: none; }
#ov-grid.bk-subs-open .ov-menu-item.ov-sub { display: flex; }
/* ACCOUNTS is a title like MONTHS; the bank accounts sit right under it */
.ov-sec-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); }
/* MONTHS · All transactions · year, on one row */
.ov-months-head3 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.ov-months-head3 > :last-child { justify-self: end; }
.ov-all-txns {
  border: none; cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, #1F6BFF, #4C8DFF); color: #fff;
  font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0;
  padding: 8px 18px; border-radius: 999px; box-shadow: 0 4px 14px rgba(31,107,255,0.28);
  transition: transform 0.12s, box-shadow 0.12s;
}
.ov-all-txns:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(31,107,255,0.36); }
.ov-year-pick { font: inherit; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); background: var(--bg); border: 0.5px solid var(--border2); border-radius: 8px; padding: 5px 8px; }
/* the delete × on a month card, only on hover */
.ov-month-card { position: relative; }
.ov-mc-del {
  position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center; font-size: 14px; line-height: 1; color: var(--text3);
  opacity: 0; transition: opacity 0.12s;
}
.ov-month-card:hover .ov-mc-del, .ov-mc-del:focus { opacity: 1; }
.ov-mc-del:hover { background: var(--border); color: var(--red, #d32f22); }
.ov-month-card:hover .ov-mc-top { padding-right: 22px; }
/* folder tabs: sideways only, no up/down scrollbar */
.bk-tabs { overflow-y: hidden; }
/* the strip above All transactions: no repeated name (it's in the profile row), just ‹ and the rate */
#bk-workspace.bk-in-biz .bk-client-row > div:nth-of-type(1) { display: none !important; }
#bk-workspace.bk-in-biz .bk-client-row > div:last-child { margin-left: auto; }
/* Bookkeeping is a menu that opens: › closed, ⌄ open */
#ov-menu-bookkeeping .ov-chev { margin-left: auto; font-size: 16px; line-height: 1; color: var(--text3); transition: transform 0.15s; }
#ov-grid.bk-subs-open #ov-menu-bookkeeping .ov-chev { transform: rotate(90deg); color: var(--blue); }

/* ── Ask Navi (Oct 2026) — the accountant's assistant ── */
.nv-open { display: none !important; align-items: center; gap: 7px; border: 1px solid #D6E5FB !important; border-radius: 999px !important; padding: 4px 12px 4px 5px !important; color: #0A2A5E !important; font-weight: 600 !important; background: #fff !important; }
body.nv-ready .nv-open { display: inline-flex !important; }
.nv-open:hover { border-color: #1F6BFF !important; box-shadow: 0 2px 10px rgba(31,107,255,0.18); }
.nv-logo { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(212,166,58,0.55); }
.nv-key { font-size: 10px; font-weight: 600; color: #5A6A86; border: 1px solid #E2EAF6; border-radius: 5px; padding: 1px 5px; background: #F5F8FD; }
#nv-fab { display: none; }
#nv-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 34vw); min-width: 340px; z-index: 9000;
  background: #fff; border-left: 1px solid #E2EAF6; box-shadow: -12px 0 40px rgba(10,42,94,0.12);
  display: flex; flex-direction: column; transform: translateX(105%); transition: transform 0.22s ease;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
#nv-panel.open { transform: none; }
.nv-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #EEF3FB; font-weight: 700; color: #0A2A5E; font-size: 15px; }
.nv-head .nv-logo { width: 30px; height: 30px; }
.nv-new { margin-left: auto; border: 1px solid #E2EAF6; background: #fff; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; color: #5A6A86; cursor: pointer; }
.nv-x { border: none; background: none; font-size: 22px; line-height: 1; color: #8D9BB3; cursor: pointer; padding: 0 4px; }
.nv-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #F5F8FD; }
.nv-hi { font-size: 17px; font-weight: 700; color: #0A2A5E; margin: 6px 0 10px; }
.nv-try { display: flex; flex-direction: column; gap: 6px; }
.nv-try button { text-align: left; border: 1px solid #D6E5FB; background: #fff; border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 13px; color: #0B1A33; cursor: pointer; }
.nv-try button:hover { border-color: #1F6BFF; }
.nv-note { font-size: 11.5px; color: #8D9BB3; margin-top: 12px; line-height: 1.45; }
.nv-me { align-self: flex-end; max-width: 85%; background: linear-gradient(135deg, #1F6BFF, #4C8DFF); color: #fff; border-radius: 14px 14px 4px 14px; padding: 8px 12px; font-size: 13.5px; }
.nv-ai { align-self: flex-start; max-width: 92%; background: #fff; border: 1px solid #E2EAF6; border-radius: 14px 14px 14px 4px; padding: 8px 12px; font-size: 13.5px; color: #0B1A33; line-height: 1.45; }
.nv-card > .nv-card { background: #fff; border: 1px solid #E2EAF6; border-radius: 14px; padding: 12px; font-size: 13px; color: #0B1A33; box-shadow: 0 2px 10px rgba(10,42,94,0.05); }
.nv-sub { font-size: 11.5px; color: #8D9BB3; margin: 2px 0 8px; }
span.nv-sub { margin: 0; }
.nv-r { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.nv-r span { color: #5A6A86; }
.nv-tot { border-top: 1px solid #EEF3FB; margin-top: 4px; padding-top: 7px; font-size: 14px; }
.nv-tot span { color: #0B1A33; font-weight: 600; }
.nv-g { color: #0F8A4F; } .nv-c { color: #D9542A; }
.nv-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nv-b { border: 1px solid #D6E5FB; background: #fff; color: #1F6BFF; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.nv-b.p { background: linear-gradient(135deg, #1F6BFF, #4C8DFF); color: #fff; border: none; }
.nv-txs { margin-top: 8px; max-height: 300px; overflow-y: auto; }
.nv-tx { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid #F0F4FA; }
.nv-tx b { display: block; font-size: 12.5px; font-weight: 600; }
.nv-tx small { color: #8D9BB3; font-size: 11px; }
.nv-tx > span { white-space: nowrap; font-weight: 600; font-size: 12.5px; }
.nv-typing { display: flex; gap: 4px; padding: 6px 4px; }
.nv-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9DB8E8; animation: nvDot 1s infinite ease-in-out; }
.nv-typing span:nth-child(2) { animation-delay: 0.15s; } .nv-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes nvDot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.nv-ask { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #EEF3FB; background: #fff; }
.nv-ask input { flex: 1; border: 1px solid #D6E5FB; border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 13.5px; outline: none; }
.nv-ask input:focus { border-color: #1F6BFF; }
.nv-ask button { width: 38px; height: 38px; border-radius: 50%; border: none; background: linear-gradient(135deg, #1F6BFF, #4C8DFF); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }
/* phones: the badge floats in a corner and Navi opens full-screen */
@media (max-width: 860px) {
  body.nv-ready #nv-fab { display: block; position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 8999; width: 56px; height: 56px; border-radius: 50%; border: none; padding: 0; background: #fff; box-shadow: 0 6px 20px rgba(10,42,94,0.25), 0 0 0 1.5px rgba(212,166,58,0.6); cursor: pointer; }
  #nv-fab img { width: 100%; height: 100%; border-radius: 50%; }
  body.nv-on #nv-fab { display: none; }
  #nv-panel { width: 100%; min-width: 0; }
}
@media (max-width: 860px) { body.nv-ready .nv-open { display: none !important; } }   /* phones use the floating badge */

/* ── Top bar fixes (Oct 2026) ── */
/* the ☰ lines were white from the navy bar days — invisible on the white bar */
#screen-bk .hamburger span { background: #0A2A5E !important; }
/* Ask Navi sits on the right, beside Alerts/Settings or beside ☰ when they fold away */
#screen-bk .nav .nv-open { margin-left: auto; }
#screen-bk .nav .nv-open + .nav-menu { margin-left: 8px; }
#screen-bk .nav .nv-open ~ .hamburger { margin-left: 10px; }
.nav-menu-dropdown .nv-menu-item { display: flex; align-items: center; gap: 8px; color: #0A2A5E !important; font-weight: 600 !important; }
.nav-menu-dropdown .nv-menu-item .nv-logo { width: 22px; height: 22px; }
/* phones: Alerts, Settings and Sign out fold into ☰ too, and the tabs move into it */
@media (max-width: 640px) {
  #screen-bk .nav .nav-menu { display: none !important; }
  #screen-bk .nav .nav-center { display: none !important; }
  #screen-bk .hamburger { display: flex; margin-left: auto; }
  #screen-bk .nav-menu-dropdown { left: auto; right: 10px; top: 54px; width: min(260px, calc(100vw - 20px)); border: 0.5px solid var(--border2); border-radius: 12px; box-shadow: 0 12px 30px rgba(11,26,63,.18); overflow: hidden; }
}

/* ── Navi: menu, back to posting, posting card ── */
.nv-burger { display: none; border: none; background: none; font-size: 20px; line-height: 1; color: #0A2A5E; cursor: pointer; padding: 0 4px; }
@media (max-width: 860px) { .nv-burger { display: block; } }
.nv-menu { display: flex; flex-direction: column; border-bottom: 1px solid #EEF3FB; background: #fff; }
.nv-menu[hidden] { display: none; }
.nv-menu button { text-align: left; border: none; border-top: 1px solid #F0F4FA; background: #fff; padding: 12px 18px; font: inherit; font-size: 14px; color: #0B1A33; cursor: pointer; }
.nv-menu button:hover { background: #F2F7FF; }
.nv-resume { margin: 0 12px 8px; align-self: flex-start; border: 1px solid #D6E5FB; background: #EAF2FF; color: #1F6BFF; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.nv-resume[hidden] { display: none; }
#nv-panel { gap: 0; }
.nv-post .nv-post-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.nv-post .nv-post-h span { font-size: 11.5px; color: #D9542A; font-weight: 600; white-space: nowrap; }
.nv-post-t { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0 10px; font-size: 15px; }
.nv-post-t b:first-child { overflow-wrap: anywhere; }
.nv-post-t b:last-child { white-space: nowrap; }
.nv-lab { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8D9BB3; margin-bottom: 4px; }
.nv-lab span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.nv-cat { width: 100%; box-sizing: border-box; border: 1px solid #D6E5FB; border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 14px; outline: none; }
.nv-cat:focus { border-color: #1F6BFF; }
.nv-post-b { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; margin-top: 10px; }
.nv-post-b .nv-b { padding: 9px 0; font-size: 13px; text-align: center; }
.nv-b.nv-ok { background: #0F8A4F; color: #fff; border: none; }
.nv-b.nv-ok:disabled { background: #B8DCC8; cursor: not-allowed; }
.nv-b.nv-link { border: none; padding-left: 0; }
.nv-hint { margin: 6px 0 0; }
.nv-last { font-size: 12px; color: #0F8A4F; background: #EEF8F2; border-radius: 8px; padding: 6px 9px; margin-bottom: 10px; }
.nv-undo { border: none; background: none; color: #1F6BFF; font: inherit; font-weight: 700; cursor: pointer; padding: 0 0 0 4px; }
.nv-post-old { opacity: .6; }

/* the start-up spinner, when the database doesn't answer in 15 seconds (Oct 2026) */
.loading-box.is-slow { flex-direction: column; align-items: center; text-align: center; max-width: min(360px, calc(100vw - 40px)); gap: 10px; }
.loading-slow { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.loading-slow b { font-size: 15px; color: #0A2A5E; }
.loading-slow span { font-size: 13px; color: #5A6A86; line-height: 1.45; }
.loading-slow button { margin-top: 6px; border: none; border-radius: 999px; padding: 9px 22px; font: inherit; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #1F6BFF, #4C8DFF); cursor: pointer; }

/* ── Navi: send a report to the client (step 2) ── */
.nv-send { margin-top: 10px; padding-top: 10px; border-top: 1px solid #EEF3FB; display: flex; flex-direction: column; gap: 8px; }
.nv-send[hidden] { display: none; }
.nv-send-to { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.nv-send-to span { font-size: 12px; color: #5A6A86; }
.nv-send-to i { color: #D9542A; font-style: normal; }
.nv-lang { display: inline-flex; align-self: flex-start; border: 1px solid #D6E5FB; border-radius: 999px; padding: 2px; background: #F5F8FD; }
.nv-lang button { border: none; background: none; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 600; color: #5A6A86; cursor: pointer; }
.nv-lang button.on { background: #1F6BFF; color: #fff; }
.nv-msg { width: 100%; box-sizing: border-box; border: 1px solid #D6E5FB; border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13px; line-height: 1.45; resize: vertical; color: #0B1A33; }
.nv-msg:focus { outline: none; border-color: #1F6BFF; }
.nv-linknote { margin: 0; }
.nv-send-b { display: flex; flex-wrap: wrap; gap: 6px; }
.nv-send-b .nv-b:disabled { opacity: .45; cursor: not-allowed; }
.nv-attach { align-self: flex-start; font-size: 12px; font-weight: 600; color: #0A2A5E; background: #EAF2FF; border: 1px solid #D6E5FB; border-radius: 8px; padding: 5px 9px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the booking box's reminder: past the window clients get */
.crm-b-window { font-size: 12.5px; line-height: 1.4; color: #0A2A5E; background: #EAF2FF; border: 1px solid #D6E5FB; border-radius: 10px; padding: 7px 10px; margin: 2px 0 8px; }
.crm-b-window[hidden] { display: none; }

/* ── Reports: the shared period picker (P&L, Balance Sheet, Cash Flow) — Oct 2026 ── */
.ov-rep-head { flex-wrap: wrap; gap: 10px; }
.ov-rep-head > div:last-child { flex-wrap: wrap; justify-content: flex-end; }
.ov-period { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ov-per-row { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ov-per-year, .ov-per-part, .ov-per-d { height: 32px; border: 1px solid #D6E5FB; border-radius: 9px; padding: 0 9px; font: inherit; font-size: 12.5px; font-weight: 600; color: #0B1A33; background: #fff; }
.ov-per-part { min-width: 150px; }
.ov-per-year:focus, .ov-per-part:focus, .ov-per-d:focus { outline: none; border-color: #1F6BFF; }
.ov-per-to { font-size: 12px; color: #8D9BB3; }
.ov-per-x { border: none; background: #F2F7FF; color: #5A6A86; width: 26px; height: 26px; border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer; }
.ov-per-lab { font-size: 11.5px; color: #5A6A86; }
/* while Navi is open on a computer, boxes it opens (booking, appointment) center in the space beside it */
@media (min-width: 861px) { body.nv-on .crm-sheet-ov { padding-right: calc(max(340px, min(420px, 34vw)) + 16px); } }

/* owner app: the Revenue / Expenses card view on Transactions (Oct 2026) */
.clt-kpi-banner { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; background: #EAF2FF; border: 1px solid #D6E5FB; border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; }
.clt-kpi-banner span { display: flex; flex-direction: column; gap: 2px; }
.clt-kpi-banner b { font-size: 14px; color: #0A2A5E; }
.clt-kpi-banner small { font-size: 12px; color: #5A6A86; line-height: 1.35; }
.clt-kpi-banner button { border: none; background: #fff; color: #5A6A86; width: 26px; height: 26px; border-radius: 50%; font-size: 15px; cursor: pointer; flex-shrink: 0; }

/* ── Top bar: Alerts, Settings and Sign out always live in ☰, at every window size (Oct 2026) ── */
@media (min-width: 641px) {
  #screen-bk .nav .nav-menu { display: none !important; }
  #screen-bk .hamburger { display: flex; }
  #screen-bk .nav-menu-dropdown { left: auto; right: 12px; top: 54px; width: 230px; border: 0.5px solid var(--border2); border-radius: 12px; box-shadow: 0 12px 30px rgba(11,26,63,.18); overflow: hidden; }
  #screen-bk .nav-menu-dropdown .nav-btn[onclick^="bkModule"] { display: none; }   /* the tabs stay in the bar */
}

/* ── Overview: Sales tax / Est. tax shown in the chart's place ── */
.ov-inline { background: var(--bg); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 1rem; }
.ov-inline[hidden] { display: none; }
.ov-inline-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ov-inline-h b { font-size: 14px; color: #0A2A5E; }
.ov-inline-back, .ov-inline-open { border: 1px solid #D6E5FB; background: #fff; color: #1F6BFF; border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ov-inline-open { margin-left: auto; }
.ov-kpi.ov-kpi-on { box-shadow: 0 0 0 2px #1F6BFF inset; }

/* ── Overview resizes with the window: the middle column may shrink (a chart can't hold it wide) ── */
#ov-grid > div { min-width: 0; }
#ov-section-overview, #ov-chart-panel, #ov-kpis { min-width: 0; }
#ov-chart-panel canvas { max-width: 100%; }
#ov-grid:not(.ov-wide) { grid-template-columns: 160px minmax(0, 1fr) 280px !important; }

/* ── The loader over the website editor while it opens (Oct 2026) ── */
.nz-frame { position: relative; }
.nz-frame.nz-own { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nz-frame.nz-solo { flex: 1; min-height: 320px; }
.nz-frame > iframe { display: block; }
.nz-loader { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #F5F8FD; border-radius: inherit; transition: opacity .25s ease; }
.nz-frame:has(> .sites-admin) .nz-loader { border-radius: 14px; }
.nz-loader.gone { opacity: 0; pointer-events: none; }
.nz-ring { position: relative; width: 54px; height: 54px; }
.nz-ring i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #D6E5FB; border-top-color: #1F6BFF; animation: nzSpin .9s linear infinite; }
.nz-ring b { position: absolute; inset: 10px; border-radius: 50%; border: 2px solid transparent; border-bottom-color: #4C8DFF; animation: nzSpin 1.4s linear infinite reverse; }
.nz-ring s { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #D4A63A; box-shadow: 0 0 10px rgba(212,166,58,.7); animation: nzPulse 1.2s ease-in-out infinite; }
.nz-t { font-size: 14px; font-weight: 600; color: #0A2A5E; }
.nz-bar { width: 160px; height: 4px; border-radius: 999px; background: #E2EAF6; overflow: hidden; position: relative; }
.nz-bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 999px; background: linear-gradient(90deg, #1F6BFF, #4C8DFF); animation: nzShine 1.3s ease-in-out infinite; }
@keyframes nzSpin { to { transform: rotate(360deg); } }
@keyframes nzPulse { 0%, 100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes nzShine { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .nz-ring i, .nz-ring b, .nz-ring s, .nz-bar::after { animation: none; } }

/* ── Secure Client Document Portal (Oct 2026) ── */
.crm-cno { font-size: 12px; font-weight: 700; color: #1F6BFF; background: #EAF2FF; border: 1px solid #D6E5FB; border-radius: 999px; padding: 2px 8px; vertical-align: middle; letter-spacing: .02em; }
.crm-cno:empty { display: none; }
.crm-docs { display: flex; flex-direction: column; gap: 10px; }
.crm-doc-req { border: 1px solid #E2EAF6; border-radius: 12px; padding: 10px 12px; background: #FBFCFF; }
.crm-doc-req-h { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; }
.crm-doc-it { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid #F0F4FA; font-size: 13px; align-items: center; }
.crm-doc-acts { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.crm-doc-req-f, .crm-doc-foot { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 6px; }
.crm-pill { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: #F0F4FA; }
.crm-pill.crm-amber { background: #FFF4E5; } .crm-pill.crm-blue { background: #EAF2FF; color: #1F6BFF !important; }
.crm-pill.crm-green { background: #E8F6EE; } .crm-pill.crm-red { background: #FDECE7; }
.crm-doc-year > b { display: block; font-size: 13px; color: #0A2A5E; margin: 2px 0 4px; }
.crm-doc-cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8D9BB3; margin: 6px 0 2px; }
.crm-doc-file { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; }
.crm-dr-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.crm-dr-it { display: grid; grid-template-columns: 1fr 130px auto; gap: 6px; align-items: center; }
.crm-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 10px; }
.crm-doc-code { font-size: 34px; font-weight: 800; letter-spacing: .12em; text-align: center; color: #0A2A5E; background: #F2F7FF; border: 1px dashed #B9CDEB; border-radius: 14px; padding: 10px; margin: 6px 0 12px; font-variant-numeric: tabular-nums; }
.crm-doc-send { border: 1px solid #E2EAF6; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.crm-doc-send b { display: block; font-size: 13px; color: #0A2A5E; margin-bottom: 6px; }
.crm-doc-send textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; border: 1px solid #D6E5FB; border-radius: 10px; padding: 8px; resize: vertical; }
.crm-doc-sb { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.crm-doc-consent { font-size: 12.5px; border-radius: 10px; padding: 7px 10px; background: #FFF4E5; color: #8a5a00; border: 1px solid #F2D27A; }
.crm-doc-consent.ok { background: #E8F6EE; color: #0F8A4F; border-color: #BFE5CF; }

/* ── Tax organizer (062) ── */
.crm-org-sheet { max-width: 980px !important; width: calc(100vw - 40px) !important; }
.crm-org { display: flex; flex-direction: column; gap: 10px; }
.crm-org-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.crm-org-top select { height: 34px; border: 1px solid #D6E5FB; border-radius: 9px; padding: 0 8px; font: inherit; font-weight: 600; }
.crm-org-unread { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #EAF2FF; border: 1px solid #D6E5FB; border-radius: 10px; padding: 8px 10px; font-size: 13px; font-weight: 600; color: #0A2A5E; }
.crm-org-sec { border: 1px solid #E2EAF6; border-radius: 12px; overflow: hidden; }
.crm-org-sh { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1F6BFF; background: #F7FAFF; padding: 7px 12px; }
.crm-org-doc { padding: 8px 12px 4px; font-size: 13px; border-top: 1px solid #EEF3FB; }
.crm-org-iss { font-size: 12px; color: #8a5a00; margin-top: 3px; }
.crm-org-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 120px minmax(0, 1.8fr) 70px 34px; gap: 8px; align-items: center; padding: 5px 12px; font-size: 13px; border-top: 1px solid #F3F6FB; }
.crm-org-row.ok { background: #F4FBF7; }
.crm-org-row.low { background: #FFFAF0; }
.crm-org-row .crm-org-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.crm-org-row input.crm-org-v { width: 100%; box-sizing: border-box; border: 1px solid #D6E5FB; border-radius: 8px; padding: 4px 6px; font: inherit; font-weight: 700; }
.crm-org-path { font-size: 11.5px; color: #5A6A86; }
.crm-org-ok { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #B9C6DA; background: #fff; color: #8D9BB3; font-size: 15px; cursor: pointer; }
.crm-org-row.ok .crm-org-ok { border-color: #0F8A4F; background: #0F8A4F; color: #fff; }
.crm-org-open { background: #FFF4E5; border: 1px solid #F2D27A; border-radius: 12px; padding: 10px 12px; font-size: 13px; color: #5a3d00; }
.crm-org-open b { display: block; margin-bottom: 4px; color: #8a5a00; }
@media (max-width: 760px) { .crm-org-row { grid-template-columns: minmax(0, 1fr) 100px 34px; } .crm-org-row .crm-org-path, .crm-org-row > span:nth-child(4) { display: none; } }
.crm-org-top select { width: auto; flex: 0 0 auto; }
.crm-doc-yh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ── The client's cards: rows of three, equal heights; long cards full width; "See all ›" opens a side panel (Oct 2026) ── */
.crm-hhgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; grid-auto-flow: row dense; }
.crm-hhgrid > .crm-box { height: 236px; overflow: hidden; position: relative; display: flex; flex-direction: column; box-sizing: border-box; }
.crm-hhgrid > [data-box="people"] { order: 1; } .crm-hhgrid > [data-box="business"] { order: 2; } .crm-hhgrid > [data-box="coverage"] { order: 3; }
.crm-hhgrid > [data-box="taxes"] { order: 4; } .crm-hhgrid > [data-box="money"] { order: 5; } .crm-hhgrid > .crm-dlbox { order: 6; }
.crm-hhgrid > [data-box="documents"] { order: 7; grid-column: 1 / -1; height: auto; max-height: 470px; }
.crm-hhgrid > .crm-recent { order: 8; grid-column: 1 / -1; height: auto; max-height: 300px; }
.crm-hhgrid > .crm-box.crm-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(rgba(255,255,255,0), var(--bg, #fff) 70%); pointer-events: none; border-radius: 0 0 12px 12px; }
.crm-seeall { position: absolute; right: 12px; bottom: 9px; z-index: 2; border: 1px solid #D6E5FB; background: #fff; color: #1F6BFF; font: inherit; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 4px 12px; cursor: pointer; box-shadow: 0 2px 8px rgba(10,42,94,.08); }
.crm-panel-ov { position: fixed; inset: 0; z-index: 940; background: rgba(10,26,51,.18); opacity: 0; transition: opacity .2s; }
.crm-panel-ov.on { opacity: 1; }
.crm-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--bg, #fff); box-shadow: -12px 0 40px rgba(10,42,94,.18); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .24s ease; }
.crm-panel-ov.on .crm-panel { transform: none; }
.crm-panel-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid #E2EAF6; padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
.crm-panel-h b { font-size: 16px; color: #0A2A5E; flex: 1; }
.crm-panel-x { border: none; background: #F2F7FF; color: #5A6A86; width: 32px; height: 32px; border-radius: 50%; font-size: 15px; cursor: pointer; }
.crm-panel-b { flex: 1; overflow: auto; padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 1100px) { .crm-hhgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .crm-hhgrid { grid-template-columns: minmax(0, 1fr) !important; } .crm-hhgrid > .crm-box { height: auto; max-height: 300px; } }

/* ── §7216 consent signed in person (locked screen: nothing else on it) ── */
html.uc-lock, html.uc-lock body { overflow: hidden !important; }
.uc-ov { position: fixed; inset: 0; z-index: 2147483000; background: #F5F8FD; overflow: auto; -webkit-overflow-scrolling: touch; padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.uc-card { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid #E2EAF6; border-radius: 18px; padding: 22px 24px; color: #0B1A33; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.uc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: #0A2A5E; border-bottom: 3px solid #D4A63A; padding-bottom: 10px; margin-bottom: 14px; }
.uc-lang { display: inline-flex; border: 1px solid #D6E5FB; border-radius: 999px; padding: 2px; }
.uc-lang button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: #5A6A86; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.uc-lang button.on { background: #1F6BFF; color: #fff; }
.uc-card h1 { font-size: 22px; color: #0A2A5E; margin: 0 0 12px; }
.uc-card p { font-size: 17px; line-height: 1.6; margin: 0 0 12px; }
.uc-auth { font-weight: 700; border-left: 4px solid #1F6BFF; padding-left: 12px; }
.uc-sig { display: block; margin-top: 16px; }
.uc-sig span { display: block; font-size: 15px; font-weight: 700; color: #0A2A5E; margin-bottom: 6px; }
.uc-sig input { width: 100%; box-sizing: border-box; font-size: 24px; padding: 14px; border: 2px solid #D6E5FB; border-radius: 14px; font-family: 'Segoe Script', 'Brush Script MT', cursive, system-ui; }
.uc-sig input:focus { outline: none; border-color: #1F6BFF; }
.uc-draw { margin-top: 12px; }
.uc-draw span { display: flex; justify-content: space-between; font-size: 13px; color: #5A6A86; margin-bottom: 4px; }
.uc-draw button { border: 0; background: none; color: #1F6BFF; font: inherit; font-weight: 700; cursor: pointer; }
.uc-draw canvas { width: 100%; height: 110px; border: 1.5px dashed #B9C6DA; border-radius: 12px; touch-action: none; background: #FBFCFF; }
.uc-date { font-size: 15px !important; color: #5A6A86; margin-top: 10px !important; }
.uc-msg { color: #D9542A; font-size: 15px; min-height: 20px; margin: 4px 0; }
.uc-b { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 8px; }
.uc-yes, .uc-no { font: inherit; font-size: 18px; font-weight: 700; border-radius: 14px; padding: 16px; cursor: pointer; }
.uc-yes { border: 0; color: #fff; background: linear-gradient(135deg, #1F6BFF, #4C8DFF); }
.uc-yes:disabled { opacity: .5; }
.uc-no { border: 1.5px solid #D6E5FB; background: #fff; color: #1F6BFF; }
.uc-thanks { text-align: center; padding: 48px 24px; }
.uc-thanks p { font-size: 22px; font-weight: 700; color: #0F8A4F; margin-bottom: 24px; }
.uc-thanks .uc-yes { max-width: 320px; width: 100%; }