*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --blue:#00A8E8;--blue-dark:#0080b8;--blue-light:#e6f7fd;--blue-mid:#5cc8f0;
  --amber:#EF9F27;--coral:#D85A30;--coral-light:#FAECE7;--green:#7AC943;--green-light:#edf7e0;
  --bg:#ffffff;--bg2:#f7f9fc;--bg3:#eef2f8;
  --text:#1a1a2e;--text2:#5a6480;--text3:#9ba3b8;
  --border:rgba(26,26,46,0.14);--border2:rgba(26,26,46,0.24);
  --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:#e2e8f0;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(0,168,232,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,#00A8E8,#7AC943);-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(0,168,232,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,#00A8E8,#7AC943);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(0,168,232,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(0,168,232,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(0,168,232,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(0,168,232,0.08),0 1px 3px rgba(0,168,232,0.06);text-align:center;min-height:120px;}
.cl-tile:hover{border-color:#5cc8f0;box-shadow:0 8px 24px rgba(0,168,232,0.14),0 2px 6px rgba(0,168,232,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(0,168,232,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(0,168,232,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:#7AC943;color:#7AC943;}
#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:#7AC943;}
.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(0,168,232,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: #00A8E8 (blue), #7AC943 (green), gradient: #00A8E8 → #7AC943 */
  .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(0,168,232,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,#00A8E8,#7AC943);-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,#00A8E8,#7AC943);-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(0,168,232,0.07);color:#00A8E8;}
  .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(0,168,232,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(0,168,232,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:#00A8E8;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(0,168,232,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(0,168,232,0.05);border:1px solid rgba(0,168,232,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(0,168,232,0.12);border-color:rgba(0,168,232,0.3);color:#00A8E8;}
  .lp-drop-divider{height:1px;background:rgba(0,168,232,0.1);margin:10px 0;}
  .lp-btn-ghost{padding:7px 16px;background:transparent;border:1.5px solid rgba(0,168,232,0.35);border-radius:8px;color:#00A8E8;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s;}
  .lp-btn-ghost:hover{background:rgba(0,168,232,0.07);border-color:#00A8E8;}
  .lp-btn-primary{padding:7px 18px;background:linear-gradient(135deg,#00A8E8,#7AC943);border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(0,168,232,0.3);transition:all 0.2s;}
  .lp-btn-primary:hover{box-shadow:0 6px 20px rgba(0,168,232,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(0,168,232,0.09);border:1px solid rgba(0,168,232,0.22);border-radius:100px;padding:5px 16px;margin-bottom:28px;}
  .lp-badge-dot{width:6px;height:6px;border-radius:50%;background:#00A8E8;box-shadow:0 0 8px #00A8E8;animation:pulse 2s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
  .lp-badge-text{font-size:11px;font-weight:600;color:#00A8E8;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,#00A8E8,#7AC943);-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,#00A8E8,#7AC943);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,#00A8E8,#7AC943);border:none;border-radius:10px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 6px 24px rgba(0,168,232,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(0,168,232,0.45);}
  .lp-hero-sec{padding:14px 32px;background:#fff;border:1.5px solid rgba(0,168,232,0.25);border-radius:10px;color:#00A8E8;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s;}
  .lp-hero-sec:hover{background:rgba(0,168,232,0.05);border-color:#00A8E8;}
  .lp-stats{display:flex;gap:0;justify-content:center;border:1.5px solid rgba(0,168,232,0.15);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 4px 24px rgba(0,168,232,0.08);}
  .lp-stat{padding:20px 40px;text-align:center;border-right:1px solid rgba(0,168,232,0.12);flex:1;}
  .lp-stat:last-child{border-right:none;}
  .lp-stat-num{font-size:28px;font-weight:800;background:linear-gradient(135deg,#00A8E8,#7AC943);-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:#00A8E8;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(0,168,232,0.12);border-radius:20px;padding:36px;position:relative;overflow:hidden;transition:all 0.3s;box-shadow:0 4px 24px rgba(0,168,232,0.06);}
  .lp-card:hover{border-color:rgba(0,168,232,0.35);transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,168,232,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(0,168,232,0.12);border-radius:16px;padding:28px;transition:all 0.2s;box-shadow:0 2px 12px rgba(0,168,232,0.05);}
  .lp-price-card:hover{border-color:rgba(0,168,232,0.35);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,168,232,0.12);}
  .lp-price-card.featured{background:linear-gradient(160deg,#f0fbff,#f8fff2);border-color:rgba(0,168,232,0.4);box-shadow:0 8px 32px rgba(0,168,232,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:#00A8E8;}
  .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(0,168,232,0.06),rgba(122,201,67,0.06));border:1.5px solid rgba(0,168,232,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(0,168,232,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(0,168,232,0.08);cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
  .lp-mobile-menu-item:hover{color:#00A8E8;}
  .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:#00A8E8;}
  .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(0,168,232,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, #00A8E8 0%, #7AC943 100%);
  --brand-deep: linear-gradient(135deg, #0080b8 0%, #5fa830 100%);
}

/* ── 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: #00A8E8; }

/* 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(0,168,232,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(0,168,232,0.09));
    border-color: rgba(0,168,232,0.28);
    color: var(--navy);
    box-shadow: 0 3px 10px rgba(0,168,232,0.1);
  }

  .cl-nav-item.active::before {
    content: '';
    position: absolute;
    left: -1.5px; top: 20%; bottom: 20%;
    width: 3px;
    background: linear-gradient(180deg, #7AC943, #00A8E8);
    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(0,168,232,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: #5a9a28; }
.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(0,168,232,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: #0080b8;
  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-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-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, #7AC943, #00A8E8); 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: #5a9a28; }

/* Empty state */
.cl-empty-msg  { font-size: 0.8rem; color: var(--t2); padding: 8px 0; }
.cl-link-btn   { background: none; border: none; color: #00A8E8; 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, #7AC943, #00A8E8); }
.cl-sv-dot-exp { background: #e0e0ea; }

.cl-sv-see-all {
  background: none;
  border: none;
  color: #00A8E8;
  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(0,168,232,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(0,168,232,0.35);
  background: rgba(0,168,232,0.04);
}
.cl-qt-pill-add .cl-qt-pill-icon {
  background: rgba(0,168,232,0.1);
  color: #00A8E8;
  font-size: 1.4rem;
  font-weight: 300;
}
.cl-qt-pill-add .cl-qt-pill-lbl { color: #00A8E8; }

/* 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(0,168,232,0.06);
  border-color: #00A8E8;
}
.cl-qt-option.selected::after {
  content: '✓';
  position: absolute;
  right: 14px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #00A8E8;
}

/* 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, #00A8E8, #7AC943);
  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: #00A8E8;
  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(0,168,232,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(0,168,232,0.35);
  background: rgba(0,168,232,0.04);
}
.cl-nav-qt-tile-add .cl-nav-qt-icon {
  background: rgba(0,168,232,0.1);
  color: #00A8E8;
  font-size: 1.3rem;
  font-weight: 300;
}
.cl-nav-qt-tile-add .cl-nav-qt-lbl { color: #00A8E8; }

/* ── 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(0,168,232,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(0,168,232,0.35);
  background: rgba(0,168,232,0.04);
  color: #00A8E8;
}
.cl-nav-qt-tile-long.add:hover {
  background: rgba(0,168,232,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: #00A8E8; }
.cl-nav-qt-tile-long.add .cl-nav-sub   { color: #5cc8f0; }



/* ── Active state for rendered long tiles ── */
.cl-nav-qt-tile-long.active {
  background: linear-gradient(135deg, rgba(0,200,152,0.07), rgba(0,168,232,0.09));
  border-color: rgba(0,168,232,0.28);
  color: #1a1a2e;
  box-shadow: 0 3px 10px rgba(0,168,232,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, #7AC943, #00A8E8);
  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-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, #00A8E8 0%, #7AC943 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(0,168,232,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(0,168,232,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, #00A8E8, #7AC943);
  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(0,168,232,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; }
}