/* =====================================================================
   CEPOS Invoice Manager – Crown EPOS admin layout (dark sidebar, rounded cards)
   Accent colour = your brand colour (Settings → Company), default Crown EPOS blue
   ===================================================================== */
:root{--brand:#1553c7;--brand-dark:color-mix(in srgb,var(--brand) 78%,#000);--brand-50:color-mix(in srgb,var(--brand) 7%,#fff);--brand-100:color-mix(in srgb,var(--brand) 16%,#fff);--brand-300:color-mix(in srgb,var(--brand) 40%,#fff);--brand-700:color-mix(in srgb,var(--brand) 80%,#000);--ring:color-mix(in srgb,var(--brand) 28%,transparent);
  --sb-bg:#111827;--sb-line:#1f2937;--sb-text:#9ca3af;--sb-ico:#6b7280;--page:#e8edf3;--ink:#111827;--muted:#6b7280}
html,body{-webkit-tap-highlight-color:transparent}
body{background:#f4f6f9;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#1f2937}
body.admin{background:var(--page)}
.bg-brand{background:var(--brand)!important}
.border-brand{border-color:var(--brand)!important}
.text-brand{color:var(--brand)!important}

/* ---------------------------------------------------------------- Bootstrap → admin theme */
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark);text-decoration:underline}
.btn:hover,.list-group-item-action:hover,.kpi:hover,.sidebar-link:hover,.topbar-btn:hover,a.stat-card:hover,.nav-link:hover,.dropdown-item:hover{text-decoration:none}
.btn{border-radius:.75rem;font-weight:500}
.btn-sm{border-radius:.6rem}
.btn-lg{border-radius:.9rem}
.btn-brand,.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.btn-brand:hover,.btn-brand:focus,.btn-brand:active,.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:var(--brand-dark)!important;border-color:var(--brand-dark)!important;color:#fff!important}
.btn-outline-primary{color:var(--brand);border-color:var(--brand-300);background:#fff}
.btn-outline-primary:hover,.btn-outline-primary:focus,.btn-outline-primary:active{background:var(--brand-50)!important;color:var(--brand-700)!important;border-color:var(--brand)!important}
.btn-outline-secondary{color:#374151;border-color:#e5e7eb;background:#fff}
.btn-outline-secondary:hover,.btn-outline-secondary:active{background:#f3f4f6!important;color:#111827!important;border-color:#d1d5db!important}
.btn-light{background:#f3f4f6;border-color:#f3f4f6;color:#1f2937}
.btn-light:hover{background:#e5e7eb;border-color:#e5e7eb}
.btn-dark{background:#111827;border-color:#111827}
.btn-dark:hover{background:#000;border-color:#000}
.btn-success{background:#16a34a;border-color:#16a34a}
.btn-outline-success{color:#15803d;border-color:#bbf7d0;background:#fff}
.btn-outline-success:hover,.btn-outline-success:active{background:#f0fdf4!important;color:#166534!important;border-color:#22c55e!important}
.btn-outline-danger{color:#b91c1c;border-color:#fecaca;background:#fff5f5}
.btn-outline-danger:hover,.btn-outline-danger:active{background:#fee2e2!important;color:#991b1b!important;border-color:#fca5a5!important}
.btn-link{color:var(--brand);text-decoration:none}
button:not(:disabled):active,.btn:not(:disabled):active{transform:scale(.97)}

.card{border:0;border-radius:1rem;box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.card-header{background:#fff;font-weight:700;color:#111827;border-bottom:1px solid #f3f4f6;padding:.9rem 1.25rem}
.card-header:first-child{border-radius:1rem 1rem 0 0}
.card-body{padding:1.25rem}
.list-group-item{border-color:#f3f4f6}
.card>.list-group:last-child>.list-group-item:last-child{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}
.list-group-item-action:hover{background:#f9fafb}
.list-group-item.active{background:var(--brand);border-color:var(--brand)}

.form-control,.form-select{border-color:#e5e7eb;border-radius:.75rem;font-size:.9rem;padding:.6rem .8rem}
.form-control-sm,.form-select-sm{border-radius:.6rem;padding:.35rem .6rem}
/* drop-downs keep room on the right for their arrow, so the text never runs under it */
.form-select{padding-right:2.4rem;background-position:right .8rem center}
.form-select-sm{padding-right:2.1rem;background-position:right .6rem center}
.form-control:focus,.form-select:focus{border-color:var(--brand-300);box-shadow:0 0 0 .2rem var(--ring)}
.input-group>.form-control,.input-group>.btn{border-radius:.75rem}
.input-group>:not(:first-child){border-top-left-radius:0!important;border-bottom-left-radius:0!important}
.input-group>:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important}
.form-label{font-size:.85rem;font-weight:500;color:#374151;margin-bottom:.3rem}
.form-text{color:#6b7280}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
.form-check-input:focus{border-color:var(--brand-300);box-shadow:0 0 0 .2rem var(--ring)}

.table{--bs-table-hover-bg:#f9fafb;font-size:.875rem}
.table>thead th,.table-light th{background:#f9fafb!important;color:#9ca3af;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600;border-bottom-color:#f3f4f6}
.table td{border-color:#f3f4f6}
.table td,.table th{vertical-align:middle}
tr[data-href]{cursor:pointer}

/* Status pills – soft tints like the admin panel */
.badge{font-weight:700;border-radius:999px;padding:.32em .7em;font-size:.7rem;letter-spacing:.02em}
.pill-draft{background:#f3f4f6;color:#4b5563}
.pill-unpaid{background:#dbeafe;color:#1e40af}
.pill-partial{background:#ffedd5;color:#9a3412}
.pill-paid{background:#dcfce7;color:#166534}
.pill-overdue{background:#fee2e2;color:#b91c1c}
.pill-cancelled{background:#e5e7eb;color:#374151}
.pill-vip{background:#fef3c7;color:#92400e}
.pill-danger{background:#fee2e2;color:#b91c1c}
.pill-muted{background:#f3f4f6;color:#4b5563}
.text-bg-light{background:#f3f4f6!important;color:#374151!important}

.alert{border-radius:.85rem;font-size:.9rem;border-width:1px}
.alert-success{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.alert-danger{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert-warning{background:#fffbeb;border-color:#fde68a;color:#92400e}
.alert-info,.alert-primary{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.alert-amber{background:linear-gradient(90deg,var(--brand-50),#fff);border:1px solid var(--brand-100);color:var(--brand-700);border-radius:1rem}
.alert-light{background:#fff;border-color:#e5e7eb}

.modal-content{border:0;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.modal-header,.modal-footer{border-color:#f3f4f6}
.modal-title{font-weight:700;font-size:1.1rem}
.modal-backdrop.show{opacity:.55;background:#0f172a}
.dropdown-menu{border:0;border-radius:.9rem;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:.4rem}
.dropdown-item{border-radius:.55rem;font-size:.9rem;padding:.45rem .7rem}
.dropdown-item:active{background:var(--brand)}
.pagination .page-link{border-radius:.6rem!important;margin:0 2px;border-color:#e5e7eb;color:#374151}
.pagination .page-item.active .page-link{background:var(--brand);border-color:var(--brand);color:#fff}

/* Tabs / pills like the admin settings tabs */
.nav-pills .nav-link{border-radius:.75rem;color:#4b5563;background:#fff;margin-right:.4rem;font-weight:500;font-size:.9rem}
.nav-pills .nav-link.active{background:var(--brand);color:#fff}
.nav-tabs{border-bottom:0;gap:.4rem}
.nav-tabs .nav-link{border:0;border-radius:.75rem .75rem 0 0;background:#fff;color:#4b5563;font-weight:500}
.nav-tabs .nav-link.active{background:var(--brand);color:#fff}
.nav-tabs .nav-link.active .badge{background:rgba(255,255,255,.3)!important;color:#fff!important}
/* Page tabs (Subscriptions, Call log): the page you're on is unmistakable – filled, bold, with a thick underline; the rest are quieter */
.sub-tabs{border-bottom:3px solid var(--brand)!important;gap:.35rem}
.sub-tabs .nav-link{opacity:.75;font-weight:500;border:1px solid rgba(0,0,0,.06)!important;border-bottom:0!important}
.sub-tabs .nav-link:hover{opacity:1}
.sub-tabs .nav-link.active{opacity:1;font-weight:700;box-shadow:0 -2px 8px rgba(0,0,0,.12)}
.sub-tabs .nav-link.active .badge.text-bg-danger{background:#fff!important;color:#b91c1c!important}
.sub-page-title{font-size:1.05rem;font-weight:700;margin:0 0 .75rem}

/* ---------------------------------------------------------------- Sidebar */
.sb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1039;display:none}
body.sb-open .sb-backdrop{display:block}
.sb-aside{position:fixed;top:0;left:0;height:100%;width:16rem;z-index:1040;display:flex;flex-direction:column;background:var(--sb-bg);border-right:1px solid var(--sb-line);
  overflow:hidden;transition:width .22s cubic-bezier(.22,.61,.36,1),transform .3s}
.sb-no-anim .sb-aside,.sb-no-anim .sb-main{transition:none!important}
.sb-brand{display:flex;align-items:center;gap:10px;padding:18px 14px 14px 16px}
.sb-brand-logo{flex-shrink:0;display:block;line-height:0}
.sb-brand-logo img{height:42px;width:42px;object-fit:contain;border-radius:10px}
.sb-brand-text{flex:1;min-width:0}
.sb-brand-text .t1{font-size:13.5px;font-weight:700;color:#f9fafb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-brand-text .t2{font-size:11px;color:var(--sb-text)}
.sb-collapse-btn{width:30px;height:30px;border-radius:9px;background:var(--sb-line);color:var(--sb-text);border:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.sb-collapse-btn:hover{color:#fff;background:#374151}
.sb-search{position:relative;margin:0 12px 8px}
.sb-search input{width:100%;background:var(--sb-line);border:1px solid #273244;color:#e5e7eb;border-radius:12px;padding:8px 30px 8px 34px;font-size:13px;outline:0}
.sb-search input::placeholder{color:var(--sb-ico)}
.sb-search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.sb-search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--sb-ico);font-size:13px}
.sb-search-kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:10.5px;color:var(--sb-ico);border:1px solid #374151;border-radius:5px;padding:0 5px;line-height:16px}
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:#374151 transparent}
.sb-section{display:flex;align-items:center;width:100%;background:none;border:0;padding:14px 22px 6px;color:var(--sb-ico);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.sb-section-label{flex:1;text-align:left}
.sb-section-chev{font-size:10px;transition:transform .2s}
.sb-section.is-collapsed .sb-section-chev{transform:rotate(-90deg)}
.sb-group.is-collapsed{display:none}
.sidebar-link{position:relative;display:flex;align-items:center;gap:12px;padding:9px 12px;margin:1px 10px;border-radius:11px;color:var(--sb-text);text-decoration:none;font-size:13.5px;font-weight:500;
  transition:background .12s,color .12s;white-space:nowrap;overflow:hidden;background:none;border:0;width:calc(100% - 20px);text-align:left}
.sidebar-link .nav-ico{width:18px;text-align:center;font-size:15px;color:var(--sb-ico);flex-shrink:0;transition:color .12s}
.sidebar-link .nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.02em;font-size:12.5px}
.sidebar-link:hover{background:var(--sb-line);color:#fff}
.sidebar-link:hover .nav-ico{color:#fff}
.sidebar-link.active{background:var(--brand);color:#fff}
.sidebar-link.active .nav-ico{color:#fff}
.sidebar-link.sb-hidden,.sb-section.sb-hidden{display:none}
.sb-user{display:flex;align-items:center;gap:6px;margin:8px 12px 14px;padding:8px 10px;border-radius:14px;background:#0f172a;border:1px solid var(--sb-line)}
.sb-user-me{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none}
.sb-user-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sb-user-body{min-width:0}
.sb-user-body .n1{color:#f9fafb;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-body .n2{color:var(--sb-ico);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-action{width:32px;height:32px;border-radius:9px;border:0;background:var(--sb-line);color:var(--sb-text);display:inline-flex;align-items:center;justify-content:center}
.sb-user-logout:hover{background:#7f1d1d;color:#fff}

.sb-main{min-height:100vh;display:flex;flex-direction:column;margin-left:16rem;transition:margin-left .22s cubic-bezier(.22,.61,.36,1)}

/* Collapsed (icons only) – desktop */
@media (min-width:1024px){
  .sb-collapsed .sb-aside{width:76px}
  .sb-collapsed .sb-main{margin-left:76px}
  .sb-collapsed .sb-brand{flex-direction:column;padding:16px 8px 10px;gap:8px}
  .sb-collapsed .sb-brand-text,.sb-collapsed .sb-search,.sb-collapsed .nav-label,.sb-collapsed .sb-section-label,.sb-collapsed .sb-section-chev,.sb-collapsed .sb-user-body{display:none}
  .sb-collapsed .sb-collapse-btn i{transform:rotate(180deg)}
  .sb-collapsed .sb-section{padding:8px 0 4px;margin:6px 16px 0;width:calc(100% - 32px);border-top:1px solid var(--sb-line)}
  .sb-collapsed .sb-group.is-collapsed{display:block}
  .sb-collapsed .sidebar-link{justify-content:center;padding:10px 0;margin:2px 12px;width:calc(100% - 24px)}
  .sb-collapsed .sb-user{flex-direction:column;margin:8px;padding:8px 4px}
  .sb-collapsed .sb-user-me{flex:none}
}
@media (min-width:1024px) and (max-width:1400px) and (orientation:landscape){
  .sb-aside{width:14.25rem}
  .sb-main{margin-left:14.25rem}
  .sb-brand-logo img{height:36px;width:36px}
}
/* Mobile / tablet: off-canvas drawer */
@media (max-width:1023.98px){
  .sb-aside{transform:translateX(-100%);width:17rem;box-shadow:none}
  body.sb-open .sb-aside{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.4)}
  .sb-main{margin-left:0!important}
  .sb-collapse-btn{display:none}
}

/* ---------------------------------------------------------------- Top bar */
.topbar{position:sticky;top:0;z-index:1020;background:#fff;border-bottom:1px solid #e5e7eb;padding:14px 24px;display:flex;align-items:center;gap:10px}
.topbar-title{flex:1;min-width:0;margin:0;font-size:1.125rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-burger{display:none;border:0;background:none;color:#6b7280;font-size:1.5rem;line-height:1;padding:0 4px}
.topbar-burger:hover{color:#374151}
@media (max-width:1023.98px){.topbar-burger{display:inline-block}.topbar{padding:12px 14px}}
.topbar-btn{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-height:2rem;min-width:2rem;padding:.35rem .65rem;border-radius:.55rem;border:1px solid transparent;
  font-size:.72rem;line-height:1;font-weight:800;white-space:nowrap;box-shadow:0 1px 2px rgba(15,23,42,.08);text-transform:uppercase;text-decoration:none;cursor:pointer}
.topbar-btn i{font-size:.9rem}
.topbar-btn-new{background:var(--brand);color:#fff;border-color:var(--brand)}
.topbar-btn-new:hover{background:var(--brand-dark);color:#fff}
.topbar-btn-paid{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.topbar-btn-paid:hover{background:#d1fae5;color:#065f46}
.topbar-btn-caller{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-100)}
.topbar-btn-caller:hover{background:var(--brand-100)}
.topbar-btn-refresh{background:#f8fafc;color:#0f766e;border-color:#e2e8f0}
.topbar-btn-refresh:hover{background:#f1f5f9}
.topbar-btn-lock{background:#fdf2f8;color:#be185d;border-color:#fbcfe8}
.topbar-btn-lock:hover{background:#fce7f3;color:#9d174d}
/* phones: two rows – the menu and the page title on top; ALL the buttons underneath in one even row, the same width
   each (a mixed split – some buttons top right, Calculator and + alone underneath on the left – looked untidy) */
@media (max-width:767.98px){
  .topbar{flex-wrap:wrap;gap:0 6px;padding:10px 12px}
  .topbar>*{order:3;margin-top:8px}
  .topbar>.topbar-burger,.topbar>.topbar-title{order:1;margin-top:0}
  .topbar::after{content:"";order:2;flex-basis:100%;height:0}
  .topbar-title{min-width:0}
  .topbar>.topbar-btn:not(.d-none){flex:1 1 0;min-width:0;max-width:4.5rem}
  .topbar>.topbar-btn>span:not(.caller-dot){display:none!important}   /* icons only in this row (an unfolded Fold is wide enough for "New invoice" to spill out) */
  .topbar>.conn-dots{flex:0 0 auto}
  .topbar{justify-content:space-between}
}
@media (max-width:399.98px){.topbar>.topbar-btn{padding:.3rem .4rem}.topbar>[data-fullscreen]{display:none!important}}

.app-main{flex:1;padding:24px}
@media (max-width:575.98px){.app-main{padding:14px}}
/* The page title lives in the top bar; plain in-page titles are hidden (kept where they carry badges). */
.app-main h1.h4:not(.keep-title){display:none}
.app-main .justify-content-between:has(> h1.h4:not(.keep-title)){justify-content:flex-end!important}
.app-main .justify-content-between:has(> div > h1.h4:not(.keep-title)) > div:first-child{display:flex;flex-direction:column;gap:2px}
/* Footer: one centred, vertically aligned row that wraps neatly on small screens */
.app-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:.5rem;row-gap:.25rem;
  padding:16px 24px;font-size:.78rem;line-height:1.4;color:#6b7280;border-top:1px solid #dbe4ef;background:#f8fafc;text-align:center}
.app-footer a{color:#6b7280;text-decoration:none}
.app-footer a:hover{color:var(--brand);text-decoration:none}
.app-footer .footer-brand{display:inline-flex;align-items:center;gap:.4rem;color:#111827;letter-spacing:.04em}
.app-footer .footer-brand img{display:block;border-radius:5px}
.app-footer .footer-brand strong{font-weight:800}
.app-footer .footer-slogan{color:#4b5563}
.app-footer .footer-sep{color:#cbd5e1}
@media (max-width:575.98px){.app-footer .footer-sep:nth-of-type(-n+2){display:none}.app-footer .footer-slogan{flex-basis:100%}}

/* In-place tab loading: slim progress bar under the top bar, content dims slightly */
/* Switching tabs: the page stays exactly as it is until the next one is ready (no dimming – that flashed on every
   tab); only the thin bar under the top bar shows that it's loading. */
/* Room for the scrollbar is always kept, so short and long pages are the same width – no sideways jump between tabs */
html{scrollbar-gutter:stable}
body.soft-loading .topbar::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:40%;background:var(--brand);border-radius:2px;animation:softbar 1s ease-in-out infinite}
@keyframes softbar{0%{left:-40%}100%{left:100%}}
.topbar{overflow:hidden}

/* Call bar (call in progress via the phone relay) */
.call-bar{position:fixed;left:50%;bottom:20px;transform:translate(-50%,140%);z-index:2050;display:flex;align-items:center;gap:.8rem;
  background:#0b1220;color:#fff;border:1px solid #1f2937;border-radius:12px;padding:.55rem .6rem .55rem .7rem;box-shadow:0 18px 40px rgba(0,0,0,.35);min-width:min(92vw,360px);max-width:94vw;transition:transform .25s ease}
.call-bar.show{transform:translate(-50%,0)}
.call-bar-ico{width:40px;height:40px;border-radius:50%;background:#16a34a;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.call-bar[data-state="pending"] .call-bar-ico{background:var(--brand);animation:callpulse 1.2s ease-in-out infinite}
.call-bar[data-state="ended"] .call-bar-ico,.call-bar[data-state="failed"] .call-bar-ico{background:#6b7280;animation:none}
.call-bar[data-state="failed"] .call-bar-ico{background:#dc2626}
@keyframes callpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}50%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
.call-bar-body{flex:1;min-width:0}
.call-bar-num{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.call-bar-status{font-size:.75rem;color:#cbd5e1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-bar-hang{border-radius:.5rem;font-weight:700;padding:.45rem .9rem;white-space:nowrap}
.call-bar-close{filter:invert(1);opacity:.6}
@media (max-width:575.98px){.call-bar{bottom:12px}.call-bar-hang{padding:.45rem .7rem}}
.call-bar-keys{border-radius:.5rem;padding:.4rem .65rem;background:rgba(255,255,255,.12);border:0;color:#fff}
.call-bar-keys:hover{background:rgba(255,255,255,.22);color:#fff}
/* Call controls (mute · speaker · volume · hold) – call bar (second row) and caller window; only when the phone supports them */
.call-bar{flex-wrap:wrap}
.call-ctl{display:none;gap:.4rem;align-items:center;flex-wrap:wrap}
body.has-call-controls .call-ctl-caller{display:flex}
body.has-call-controls .call-bar.show[data-state="active"]:not(.mini) .call-ctl-bar{display:flex;flex-basis:100%;padding-top:.45rem;border-top:1px solid #1f2937}
body.has-call-controls .call-bar.show[data-state="active"]:not(.mini){min-width:min(94vw,600px)}   /* room for the number next to the buttons */
body:not(.has-call-hold) .call-ctl .ctl-hold{display:none}
.call-ctl-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-width:3.6rem;padding:.35rem .5rem;border-radius:.6rem;border:1px solid #334155;background:#1e293b;color:#e5e7eb;font-size:.68rem;font-weight:600;line-height:1.1}
.call-ctl-btn i{font-size:1.05rem}
.call-ctl-btn:hover{background:#273449;color:#fff}
.call-ctl-btn[aria-pressed="true"]{background:#f8fafc;color:#0b1220;border-color:#f8fafc}
.call-ctl-btn[data-ctl="mute"][aria-pressed="true"]{background:#dc2626;border-color:#dc2626;color:#fff}
.call-ctl-btn:disabled{opacity:.6}
.call-ctl-vol{font-size:.72rem;color:#94a3b8;margin-left:auto;font-variant-numeric:tabular-nums}
.call-ctl-caller .call-ctl-btn{flex:1 1 0}
.call-ctl-caller .call-ctl-vol{flex-basis:100%;text-align:right;margin:0}
:root:not([data-bs-theme="dark"]) .caller-dark .call-ctl-btn{background:#f1f5f9;border-color:#e2e8f0;color:#0f172a}
:root:not([data-bs-theme="dark"]) .caller-dark .call-ctl-btn:hover{background:#e2e8f0}
:root:not([data-bs-theme="dark"]) .caller-dark .call-ctl-btn[aria-pressed="true"]{background:#0f172a;border-color:#0f172a;color:#fff}
:root:not([data-bs-theme="dark"]) .caller-dark .call-ctl-btn[data-ctl="mute"][aria-pressed="true"]{background:#dc2626;border-color:#dc2626;color:#fff}
:root:not([data-bs-theme="dark"]) .caller-dark .call-ctl-vol{color:#64748b}
.call-timer-badge{font-variant-numeric:tabular-nums;font-weight:600}
.decline-menu{max-width:min(22rem,90vw)}
.decline-menu .dropdown-item{white-space:normal;font-size:.85rem}
.call-note-text{color:inherit;opacity:.85;white-space:normal}
.caller-chip[data-state="missed"] .call-bar-ico{background:#dc2626;animation:none}
.caller-chip .caller-chip-back{padding:.3rem .55rem}
.dialler-sim{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.75rem;margin:-.2rem 0 .5rem;color:#94a3b8}
.dialler-sim select{background:#1e293b;color:#e5e7eb;border:1px solid #334155;border-radius:.4rem;font-size:.75rem;padding:.15rem .4rem;max-width:14rem}

/* Live caller ID: dot on "Last caller" when auto pop-up is off; pulse while ringing */
.topbar-btn-caller{position:relative}
.caller-dot{display:none;position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;background:#dc2626;box-shadow:0 0 0 2px #fff}
.topbar-btn-caller.has-call .caller-dot{display:block;animation:dotpulse 1.4s ease-in-out infinite}
@keyframes dotpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.ringing-pulse{animation:ringpulse 1.1s ease-in-out infinite}
@keyframes ringpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 45%,transparent)}50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--brand) 0%,transparent)}}

/* Dialler */
/* Follows the light / dark theme (colours in --dk-* below) */
.dialler-dialog{max-width:350px}
.modal-content.dialler{background:var(--dk-bg);color:var(--dk-text);border:1px solid var(--dk-line);border-radius:.9rem;box-shadow:var(--dk-shadow);overflow:hidden}
.dialler .modal-header{border-bottom:1px solid var(--dk-line);padding:.7rem 1rem;background:var(--dk-head);gap:.5rem}
.dialler .modal-title{font-size:1rem;font-weight:700;letter-spacing:.02em;color:var(--dk-title)}
.dialler .modal-title i{color:var(--dk-accent)}
.dialler-min{border:1px solid var(--dk-edge);background:var(--dk-btn);color:var(--dk-text);border-radius:.45rem;font-size:.78rem;font-weight:600;padding:.25rem .6rem;line-height:1.3}
.dialler-min:hover{background:var(--dk-btn-h);color:var(--dk-strong)}
.dialler .modal-header .btn-close{margin:0 0 0 auto}
.dialler .modal-header .dialler-min:not(.d-none)+.btn-close{margin-left:.35rem}
.dialler .modal-body{padding:.85rem 1rem 1rem}
.dialler-state{font-size:.74rem;color:var(--dk-mut2);text-align:center;min-height:1.2em;margin-bottom:.55rem}
#diallerModal.on-call .dialler-state{color:var(--dk-ok);font-weight:600}
.dialler-display{position:relative;margin-bottom:.85rem;background:var(--dk-panel);border:1px solid var(--dk-line2);border-radius:.6rem}
.dialler-display input{width:100%;border:0;text-align:center;font-size:1.6rem;font-weight:600;letter-spacing:.06em;color:var(--dk-title);
  font-variant-numeric:tabular-nums;padding:.55rem 2.6rem;background:transparent;outline:none;border-radius:.6rem}
.dialler-display input::placeholder{color:var(--dk-dim);font-weight:500;letter-spacing:.02em;font-size:1.25rem}
.dialler-display:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.dialler-back{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--dk-mut);font-size:1.25rem;padding:.25rem .45rem;border-radius:.4rem}
.dialler-back:hover{color:var(--dk-text);background:var(--dk-btn)}
.dialler-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-bottom:.6rem}
.dialler-key{border:1px solid var(--dk-line2);border-radius:.55rem;background:var(--dk-key);color:var(--dk-strong);height:3.6rem;display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:1;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:background .1s,border-color .1s}
.dialler-key:hover{background:var(--dk-key-h);border-color:var(--dk-line-h)}
.dialler-key:active{background:#2563eb;border-color:#2563eb;color:#fff}
.dialler-key .k{font-size:1.35rem;font-weight:600}
.dialler-key .l{font-size:.56rem;letter-spacing:.14em;color:var(--dk-mut);margin-top:.2rem}
.dialler-key:active .l{color:rgba(255,255,255,.85)}
.dialler-actions{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:.45rem;align-items:stretch}
.dialler-actions .btn{border-radius:.55rem;font-weight:600;white-space:nowrap;font-size:.85rem}
.dialler-pause,.dialler-tones{background:var(--dk-btn);border:1px solid var(--dk-edge);color:var(--dk-soft)}
.dialler-pause:hover,.dialler-tones:hover{background:var(--dk-btn-h);border-color:var(--dk-dim);color:var(--dk-strong)}
.dialler-pause:disabled{background:var(--dk-btn);border-color:var(--dk-line2);color:var(--dk-dim)}
.dialler-call,.dialler-hang{padding:.65rem .5rem;font-size:1rem!important}
.dialler-call{background:#16a34a;border-color:#16a34a}
.dialler-call:hover{background:#15803d;border-color:#15803d}
.dialler-help{text-align:center;margin-top:.7rem;font-size:.7rem;color:var(--dk-mut)}
.dialler-help strong{color:var(--dk-mut2)}

/* Call bar minimised: a small chip in the corner while you use the rest of the app (tap it to expand) */
.call-bar-min{border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:.5rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.call-bar-min:hover{background:rgba(255,255,255,.22)}
.call-bar.mini{left:auto;right:16px;bottom:16px;transform:translateY(140%);min-width:0;width:auto;max-width:min(300px,92vw);gap:.5rem;padding:.4rem .45rem .4rem .45rem;border-radius:12px;cursor:pointer}
.call-bar.mini.show{transform:translateY(0)}
.call-bar.mini .call-bar-ico{width:32px;height:32px;font-size:.95rem}
.call-bar.mini .call-bar-num{font-size:.8rem;max-width:150px}
.call-bar.mini .call-bar-status{font-size:.7rem;max-width:150px}
.call-bar.mini .call-bar-keys,.call-bar.mini .call-bar-close{display:none}
.call-bar.mini .call-bar-hang{padding:.3rem .55rem;border-radius:.5rem}
.call-bar.mini .call-bar-hang .lbl{display:none}
body.dialler-open .call-bar{visibility:hidden}
body:has(.call-bar.show) #toast-container{bottom:84px}
/* Caller chip (minimised caller ID) – same look as the minimised call bar; sits above the call bar if both show */
.caller-chip .caller-chip-close{width:.6em;height:.6em;padding:.35rem;flex-shrink:0}
body:has(#callBar.show) .caller-chip{bottom:76px}
.caller-chip:not(.show){visibility:hidden;transition:transform .25s ease,visibility 0s .25s}   /* closed = gone, even when raised above the call bar */
.caller-chip[data-state="active"] .call-bar-ico{background:#16a34a}
/* Last caller header: Pop-up switch, Refresh, Minimise and ✕ on one line */
.caller-popup-switch{display:flex;align-items:center;gap:.35rem;padding-left:2.5em;white-space:nowrap}
.caller-popup-switch .form-check-label{font-weight:600}

/* Phones: no call features (Dialler, Last caller, call bar) – they're for tablets and computers */
@media (pointer:coarse) and (max-width:599.98px),(pointer:coarse) and (max-height:599.98px){
  .topbar-btn-caller,.call-bar,#diallerModal,#lastCallerModal{display:none!important}
}

#toast-container{position:fixed;bottom:16px;right:16px;z-index:2000;display:flex;flex-direction:column;gap:8px}

/* ---------------------------------------------------------------- KPI tiles (dashboard) */
.kpi{background:#fff;border-radius:1rem;padding:1.25rem;box-shadow:0 1px 2px rgba(0,0,0,.05);height:100%;display:block;color:inherit;text-decoration:none;transition:box-shadow .15s,transform .15s}
a.kpi:hover{box-shadow:0 6px 18px rgba(15,23,42,.10);transform:translateY(-1px);color:inherit}
.kpi-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.kpi-label{color:#6b7280;font-size:.875rem;margin:0}
.kpi-icon{width:2.25rem;height:2.25rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;flex-shrink:0}
.kpi-value{font-size:1.5rem;font-weight:700;color:#111827;margin:0;line-height:1.2}
.kpi-sub{font-size:.75rem;color:#6b7280;margin:.25rem 0 0}
.bg-amber{background:#f59e0b}.bg-brand-solid{background:var(--brand)}.bg-green{background:#22c55e}.bg-red{background:#ef4444}.bg-blue{background:#3b82f6}.bg-gray{background:#9ca3af}
/* Older stat-card markup (customer profile etc.) */
.stat-card{color:inherit;border-radius:1rem}
.stat-card .value{font-size:1.5rem;font-weight:700;line-height:1.2;color:#111827}
.stat-card .label{font-size:.8rem;color:#6b7280;margin-bottom:.25rem}
a.stat-card:hover{box-shadow:0 6px 18px rgba(15,23,42,.10)}
.border-start.border-4{border-left-width:4px!important}

.payout-pill{min-width:6.5rem;padding:.45em .9em;font-size:.75rem}
.payout-pill.pill-paid{background:#5cb26b;color:#fff}

/* Ryft page: tabs + subtle account label on one line */
.ryft-bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}
.ryft-bar-meta{margin-left:auto;display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:#6b7280}
.acct-chip{display:inline-flex;align-items:center;gap:.35rem;color:#4b5563;font-weight:500;white-space:nowrap}
.acct-chip .bi{color:#9ca3af}
.acct-env{font-size:.62rem;font-weight:800;letter-spacing:.06em;padding:.15em .5em;border-radius:999px;background:#dcfce7;color:#166534}
.acct-env.is-sandbox{background:#ffedd5;color:#9a3412}
.ryft-back{color:#6b7280;white-space:nowrap}
.ryft-back:hover{color:var(--brand);text-decoration:none}
@media (max-width:767.98px){.ryft-bar-meta{margin-left:0;width:100%;justify-content:space-between}}

/* Ryft balance tiles */
.rp-tile{background:linear-gradient(160deg,#fff 40%,var(--kt,#fff));border-left:4px solid var(--k,#e5e7eb);border-radius:1rem;padding:1.1rem 1.25rem;box-shadow:0 1px 2px rgba(0,0,0,.05);height:100%}
.rp-tile .rp-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--k,#6b7280)}
.rp-tile .rp-value{font-size:1.6rem;font-weight:800;color:#111827;margin-top:.25rem}
.rp-tile .rp-sub{font-size:.75rem;color:#6b7280}

/* Ageing bars (single hue, value labels shown as text) */
.age-track{height:10px;background:#eef1f5;border-radius:5px;overflow:hidden}
.age-bar{height:100%;background:var(--brand);border-radius:0 4px 4px 0;min-width:0}

.doc-preview{background:#fff;overflow-x:auto}
.dl-compact dt,.dl-compact dd{margin-bottom:.25rem}

/* Horizontal scrolling chips / tabs */
.chip-scroll{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:none}
.chip-scroll::-webkit-scrollbar{display:none}
.chip-scroll .btn{white-space:nowrap;border-radius:.75rem}
.chip-scroll .btn-light{background:#fff;border-color:#fff;color:#4b5563}
.chip-scroll .btn-light:hover{background:#f9fafb}
.nav-scroll{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-scroll .nav-link{white-space:nowrap}

.timeline .tl-icon{width:32px;height:32px;border-radius:50%;background:var(--brand-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--brand-700)}

/* Settings tabs (like the admin settings page) */
.settings-tabs{display:flex;flex-wrap:wrap;gap:.5rem}
.settings-tab{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:.75rem;background:#fff;color:#4b5563;font-size:.875rem;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.05);white-space:nowrap}
.settings-tab:hover{background:#f9fafb;color:#111827;text-decoration:none}
.settings-tab.active{background:var(--brand);color:#fff}
@media (max-width:767.98px){.settings-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.settings-tabs::-webkit-scrollbar{display:none}}

/* Settings sub-navigation (legacy) */
.settings-nav{background:#fff;border-radius:1rem;padding:.4rem;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.settings-nav .list-group-item{border:0;border-radius:.7rem!important;margin:1px 0;font-size:.9rem;color:#374151}
.settings-nav .list-group-item.active{background:var(--brand);color:#fff}
@media (max-width:991.98px){
  .settings-nav{display:flex;flex-direction:row;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;scrollbar-width:none;background:none;box-shadow:none;padding:0;gap:.4rem}
  .settings-nav .list-group-item{background:#fff;padding:.45rem .9rem;flex-shrink:0}
}

/* ---------------------------------------------------------------- Login (dark, like the admin) */
body.auth-dark{min-height:100vh;background:linear-gradient(135deg,#111827 0%,#1f2937 100%)}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{width:100%;max-width:24rem}
.login-brand-logo{height:5.5rem;width:auto;margin-bottom:1rem;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.auth-title{font-size:1.5rem;font-weight:700;color:#fff;margin:0}
.auth-sub{color:#9ca3af;font-size:.875rem;margin-top:.25rem}
.auth-panel{background:#fff;border-radius:1rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);padding:2rem}
.auth-panel h1{font-size:1.1rem;font-weight:700}
.input-icon{position:relative}
.input-icon>i{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:.95rem;pointer-events:none}
.input-icon>.form-control{padding-left:2.3rem}
.btn-passkey{width:100%;background:#111827;color:#fff;font-weight:600;padding:.75rem;border-radius:.85rem;border:0;display:flex;align-items:center;justify-content:center;gap:.5rem}
.btn-passkey:hover{background:#000;color:#fff}
.or-divider{display:flex;align-items:center;gap:.75rem;color:#9ca3af;font-size:.75rem;margin:1rem 0}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:#e5e7eb}
.auth-foot{color:#6b7280;font-size:.75rem}
.auth-foot a{color:#9ca3af}

/* Public (customer-facing) pages keep the company's own brand colour */
.public-wrap{max-width:520px;margin:0 auto;padding:24px 14px 40px}
.auth-logo{max-height:70px;max-width:240px}
.pay-card{border-radius:1rem}
.footer-vendor-logo{width:56px;height:auto;margin-bottom:4px}

/* ---------------------------------------------------------------- Forms & mobile ergonomics */
.sticky-actions{position:sticky;bottom:0;background:rgba(232,237,243,.95);padding:.75rem 0;z-index:5;backdrop-filter:blur(4px)}
@media (max-width:575.98px){
  .sticky-actions{flex-wrap:nowrap!important}
  .sticky-actions .btn{flex:1 1 0;font-size:.9rem;padding:.55rem .4rem;line-height:1.2}
}
@media (pointer:coarse){
  .btn{min-height:40px}
  .btn-sm{min-height:34px}
  .form-control,.form-select{min-height:44px;font-size:16px}  /* 16px stops iOS zooming into fields */
  .form-control-sm,.form-select-sm{min-height:38px}
  .list-group-item{padding-top:.8rem;padding-bottom:.8rem}
}

/* Invoice line items: table on desktop, stacked cards on phones */
.items-table textarea{resize:vertical;min-height:42px}
@media (max-width:767.98px){
  .items-table thead{display:none}
  .items-table,.items-table tbody,.items-table tr,.items-table td{display:block;width:100%}
  .items-table tr.item-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;padding:.75rem;border-bottom:1px solid #f3f4f6;position:relative}
  .items-table td{border:0;padding:0!important}
  .items-table td[data-label="Description"]{grid-column:1 / -1;padding-right:44px!important}
  .items-table td[data-label]::before{content:attr(data-label);display:block;font-size:.72rem;color:#6b7280;margin-bottom:2px}
  .items-table td.js-line{grid-column:1 / -1;text-align:right!important}
  .items-table td:last-child{position:absolute;top:.75rem;right:.75rem;width:auto}
}

/* Share fallback sheet */
.share-sheet .btn{display:flex;align-items:center;gap:.6rem;justify-content:flex-start}
.share-sheet .btn i{font-size:1.3rem}

.placeholder-list code{white-space:nowrap}
.js-bio-prompt.d-flex{display:flex!important}
@media print{.sb-aside,.topbar,.app-footer,.invoice-actions,.sb-backdrop{display:none!important}.sb-main{margin:0!important}}

/* ===== Sidebar count badge ===== */
.nav-badge{background:#dc2626;color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;margin-left:auto}
.sb-collapsed .nav-badge{position:absolute;top:4px;right:6px;min-width:8px;height:8px;padding:0;font-size:0}
.sidebar-link{position:relative}

/* ===== Client sign-up form (public) ===== */
.public-wrap.public-wide{max-width:860px}
.signup-narrow{max-width:560px;margin:0 auto}
.signup-steps{display:inline-flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
.signup-steps span{font-size:.8rem;padding:.3rem .8rem;border-radius:999px;background:#fff;color:#6b7280;border:1px solid #e5e7eb}
.signup-steps span.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.signup-steps span.done{color:#16a34a;border-color:#bbf7d0;background:#f0fdf4}
.signup-intro{border-left:4px solid var(--brand);background:var(--brand-50)}
.signup-card{border:0;border-radius:1rem;box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:1rem}
.signup-title{font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem}
.signup-title span{width:1.8rem;height:1.8rem;border-radius:50%;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}
.signup .form-label{font-weight:500;font-size:.9rem;margin-bottom:.25rem}
.signup .req{color:#dc2626}
.signup .form-control,.signup .form-select{border-radius:.6rem}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.5rem}
.choice-grid.choice-2{grid-template-columns:repeat(2,1fr)}
.choice-grid.choice-3{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.choice{position:relative;margin:0;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{display:flex;align-items:center;gap:.5rem;padding:.65rem .85rem;border:1.5px solid #e5e7eb;border-radius:.7rem;background:#fff;font-size:.9rem;height:100%;transition:border-color .12s,background .12s}
.choice span:hover{border-color:var(--brand-300)}
.choice input:checked + span{border-color:var(--brand);background:var(--brand-50);font-weight:600}
.choice input:focus-visible + span{box-shadow:0 0 0 3px var(--ring)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.doc-tips{list-style:none;padding:0;margin:0 0 .9rem;display:flex;flex-wrap:wrap;gap:.4rem 1rem;color:#4b5563}
.doc-tips i{color:var(--brand)}
.doc-preview{display:flex;flex-direction:column;gap:.35rem;margin-top:.4rem}
.doc-item{display:flex;align-items:center;gap:.5rem;font-size:.8rem;background:#f9fafb;border:1px solid #eef0f3;border-radius:.5rem;padding:.3rem .5rem}
.doc-item img{width:40px;height:40px;object-fit:cover;border-radius:.35rem}
.doc-item i{font-size:1.5rem;color:#dc2626}
.doc-item.bad{border-color:#fecaca;background:#fef2f2;color:#b91c1c}
.terms-box{background:#f9fafb;border:1px solid #e5e7eb;border-radius:.7rem;padding:1rem;max-height:260px;overflow:auto;line-height:1.55}
.terms-check{background:var(--brand-50);border-radius:.7rem;padding:.75rem .75rem .75rem 2.4rem}
@media (max-width:575.98px){.choice-grid.choice-2{grid-template-columns:1fr}}

/* ===== Sign-up review (staff) ===== */
.kv-list .kv{display:flex;gap:1rem;padding:.4rem 0;border-bottom:1px solid #f1f3f5;font-size:.9rem}
.kv-list .kv:last-child{border-bottom:0}
.kv-list .k{width:38%;max-width:200px;color:#6b7280;flex-shrink:0}
.kv-list .v{flex:1;min-width:0;word-break:break-word}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1rem}
.doc-thumb{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:#f3f4f6;border-radius:.6rem;overflow:hidden;border:1px solid #e5e7eb}
.doc-thumb img{width:100%;height:100%;object-fit:cover}
.doc-thumb i{font-size:2.6rem;color:#dc2626}
.popup-device .btn{white-space:nowrap}
/* Answer / Decline in the caller pop-up */
.answer-bar .btn{border-radius:999px;font-weight:700;padding:.7rem 1rem}
.answer-bar [data-answer]{animation:callpulse 1.2s ease-in-out infinite}

/* ===== Coloured summary cards ===== */
.kpi[class*="kpi-c-"]{border-left:4px solid var(--kc);background:linear-gradient(135deg,var(--kb) 0%,#fff 75%)}
.kpi[class*="kpi-c-"] .kpi-icon{background:var(--kc)!important;color:#fff}
.kpi[class*="kpi-c-"] .kpi-label{color:var(--kt);font-weight:600}
.kpi-c-blue{--kc:#2563eb;--kb:#eff6ff;--kt:#1e40af}
.kpi-c-red{--kc:#dc2626;--kb:#fef2f2;--kt:#991b1b}
.kpi-c-amber{--kc:#d97706;--kb:#fffbeb;--kt:#92400e}
.kpi-c-green{--kc:#16a34a;--kb:#f0fdf4;--kt:#166534}
.kpi-c-purple{--kc:#7c3aed;--kb:#f5f3ff;--kt:#5b21b6}
.kpi-c-rose{--kc:#e11d48;--kb:#fff1f2;--kt:#9f1239}
.kpi-c-teal{--kc:#0d9488;--kb:#f0fdfa;--kt:#115e59}
.stat-tint{border:0;border-left:4px solid var(--kc);background:linear-gradient(135deg,var(--kb) 0%,#fff 80%)}
.stat-tint .text-muted,.stat-tint .small.text-muted{color:var(--kt)!important;font-weight:600}
.stat-blue{--kc:#2563eb;--kb:#eff6ff;--kt:#1e40af}
.stat-green{--kc:#16a34a;--kb:#f0fdf4;--kt:#166534}
.stat-red{--kc:#dc2626;--kb:#fef2f2;--kt:#991b1b}
.stat-amber{--kc:#d97706;--kb:#fffbeb;--kt:#92400e}
.stat-purple{--kc:#7c3aed;--kb:#f5f3ff;--kt:#5b21b6}

/* ===== Zebra rows on every list and table (each line easy to see and tap) ===== */
.app-main .card > .list-group-flush > .list-group-item:nth-child(even){background-color:#edf1f8}
.app-main .card > .list-group-flush > .list-group-item{transition:background-color .12s,box-shadow .12s}
.app-main .card > .list-group-flush > .list-group-item-action:hover,
.app-main .card > .list-group-flush > .list-group-item-action:focus-visible{background-color:color-mix(in srgb,var(--brand) 10%,#fff)!important;box-shadow:inset 4px 0 0 var(--brand)}
.app-main .table:not(.items-table):not(.plan-table) > tbody > tr:nth-child(even) > *{--bs-table-bg-type:#edf1f8}
.app-main .table:not(.items-table):not(.plan-table) > tbody > tr:hover > *{--bs-table-bg-state:color-mix(in srgb,var(--brand) 10%,#fff)}
.app-main .table:not(.items-table):not(.plan-table) > tbody > tr:hover > :first-child{box-shadow:inset 4px 0 0 var(--brand),inset 0 0 0 9999px var(--bs-table-bg-state)}
/* ===== Local payment methods (customer pay page) ===== */
.pay-methods{display:flex;flex-direction:column;gap:.5rem}
.pay-method{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border:1.5px solid #e5e7eb;border-radius:.8rem;background:#fff;color:inherit;text-decoration:none;font-weight:600;transition:border-color .12s,background .12s}
.pay-method:hover{border-color:var(--brand);background:var(--brand-50);color:inherit}
.pm-logo{width:2.2rem;height:2.2rem;border-radius:.6rem;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1rem;flex-shrink:0}
/* Bangla QR on the payment page: big enough to scan from another phone, white behind it in dark mode too */
.bangla-qr-img{width:min(15rem,70vw);aspect-ratio:1;object-fit:contain;background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:.5rem}
/* Email setup help */
.help-box{border:1px solid #e5e7eb;border-radius:.8rem;padding:.75rem 1rem;margin-bottom:.6rem;background:#fff}
.help-box summary{cursor:pointer;font-weight:600}
.help-box[open] summary{margin-bottom:.5rem}
.help-box ol,.help-box ul{padding-left:1.2rem}
.help-box li{margin-bottom:.3rem}
.js-smtp-tip{background:#f8fafc;border-left:3px solid var(--brand);padding:.5rem .7rem;border-radius:.4rem;margin-bottom:.5rem}

/* Superadmin */
.pill-purple{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe}
.superadmin-card{background:linear-gradient(135deg,#f5f3ff,#fff 70%);border-left:4px solid #7c3aed!important}

/* ===== Dashboard cards on phones: all the same size, a little more compact ===== */
@media (max-width:767.98px){
  .kpi{padding:.8rem .85rem;border-radius:.85rem;display:flex;flex-direction:column;min-width:0}
  .kpi>*{min-width:0;max-width:100%}
  .kpi-head{align-items:flex-start;gap:.4rem;margin-bottom:.4rem}
  .kpi-label{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-size:.78rem;line-height:1.25;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .kpi-icon{width:1.8rem;height:1.8rem;border-radius:.55rem;font-size:.85rem}
  .kpi-value{font-size:1.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kpi-sub{overflow-wrap:anywhere;font-size:.68rem;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.2rem}
}
/* ===== Ryft balances on phones: three equal, compact cards on one line ===== */
@media (max-width:767.98px){
  .rp-row{--bs-gutter-x:.5rem;--bs-gutter-y:.5rem}
  .rp-row .rp-tile{padding:.6rem .55rem;border-radius:.75rem;border-left-width:3px;min-width:0;display:flex;flex-direction:column}
  .rp-row .rp-label{font-size:.62rem;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rp-row .rp-value{font-size:clamp(.82rem,3.9vw,1.05rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:.15rem 0}
  .rp-row .rp-sub{font-size:.6rem;line-height:1.25;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* Tab / chip strips scroll instantly and never drag the page sideways */
.nav-scroll,.chip-scroll,.settings-tabs,.settings-nav{scroll-behavior:auto;overscroll-behavior-x:contain}

/* ===== Summary cards (Invoices totals, Subscriptions) on phones: equal size, compact, no broken words ===== */
@media (max-width:767.98px){
  .stat-tint{height:100%;padding:.65rem .7rem!important;border-radius:.85rem;border-left-width:3px;display:flex;flex-direction:column;min-width:0}
  .stat-tint>*{display:block;min-width:0;max-width:100%}
  .stat-tint>.text-muted:first-child{font-size:.74rem;line-height:1.25;word-break:normal;overflow-wrap:normal;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .stat-tint>:last-child{font-size:1.15rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.15rem}
  /* three across (Invoices): one-line labels and smaller amounts */
  .col-4>.stat-tint{padding:.55rem .55rem!important}
  .col-4>.stat-tint>.text-muted:first-child{font-size:.68rem;min-height:0;display:block;white-space:nowrap;text-overflow:ellipsis}
  .col-4>.stat-tint>:last-child{font-size:clamp(.8rem,3.8vw,1rem)!important}
}

/* ===== Phone vs tablet/computer helpers (same test as the call features) ===== */
.only-phone{display:none!important}
@media (pointer:coarse) and (max-width:599.98px),(pointer:coarse) and (max-height:599.98px){
  .no-phone{display:none!important}
  .only-phone{display:inline-flex!important}
}

/* ===== Calculator (dark, squared keys like the dialler; centred on every screen) ===== */
.topbar-btn-calc{background:#0f172a;color:#e5e7eb;border-color:#1f2937}
.topbar-btn-calc:hover{background:#1e293b;color:#fff}
.calc-dialog{max-width:340px;margin-left:auto;margin-right:auto}
@media (max-width:575.98px){.calc-dialog{max-width:min(340px,calc(100vw - 1.5rem));margin:.75rem auto}}
.calc-display{background:var(--dk-panel);border:1px solid var(--dk-line2);border-radius:.6rem;padding:.55rem .85rem .6rem;margin-bottom:.8rem;text-align:right;min-height:5.1rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.calc-expr{font-size:.82rem;color:var(--dk-mut);min-height:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.calc-value{font-size:clamp(1.5rem,7vw,2.1rem);font-weight:600;color:var(--dk-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.calc-key{border:1px solid var(--dk-line2);border-radius:.55rem;background:var(--dk-key);color:var(--dk-strong);height:3.4rem;font-size:1.3rem;font-weight:600;display:flex;align-items:center;justify-content:center;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:background .1s,border-color .1s}
.calc-key:hover{background:var(--dk-key-h);border-color:var(--dk-line-h)}
.calc-key:active,.calc-key.pressed{background:#2563eb;border-color:#2563eb;color:#fff}
.calc-fn{background:var(--dk-btn);border-color:var(--dk-edge);color:var(--dk-soft);font-size:1.05rem}
.calc-op{background:var(--dk-op);border-color:var(--dk-op-h);color:var(--dk-op-t)}
.calc-op:hover{background:var(--dk-op-h)}
.calc-op.active{background:var(--dk-op-t);border-color:var(--dk-op-t);color:var(--dk-op)}
.calc-eq{background:#16a34a;border-color:#16a34a;color:#fff}
.calc-eq:hover{background:#15803d;border-color:#15803d}
.calc .dialler-help{margin-top:.65rem}

/* Calculator button → which tool (Calculator / Cash count) – same look as the calculator */
.tool-pick-dialog{max-width:330px;margin-left:auto;margin-right:auto}
.tool-pick{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;padding:.85rem;border-radius:.6rem;border:1px solid var(--dk-line2);background:var(--dk-key);color:var(--dk-strong);font-weight:600;font-size:1rem}
.tool-pick:hover{background:var(--dk-key-h);border-color:var(--dk-line-h)}
.tool-pick i{color:var(--dk-accent);font-size:1.2rem}
.tool-pick-cash i{color:#16a34a}

/* Cash count – compact cards (label + amount on one line, a big number box underneath) at their natural height; the
   window is only as tall as it needs to be. On a screen too short for that, the rows share the height that's left
   (minmax(0, max-content)), so the cards shrink instead of scrolling – NO scrolling on phones, tablets or computers. */
.cash-dialog{max-width:min(52rem,96vw)}
.modal-content.cash{max-height:calc(100vh - 3.6rem);max-height:calc(100dvh - 3.6rem);display:flex;flex-direction:column}
.cash-body{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:.55rem;padding:.6rem .75rem;position:relative}
.cash-grid{flex:0 1 auto;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,max-content));gap:.45rem}
.cash-card{min-height:0;margin:0;display:flex;flex-direction:column;justify-content:center;gap:.3rem;padding:.4rem .55rem .5rem;border:1px solid var(--dk-line2);border-left:4px solid var(--cash-c);border-radius:.6rem;background:var(--dk-key);overflow:hidden;cursor:text}
.cash-note{--cash-c:var(--dk-accent)}
.cash-coin{--cash-c:#d97706}
.cash-card:focus-within{border-color:var(--cash-c);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.cash-card-top{display:flex;justify-content:space-between;align-items:baseline;gap:.3rem;min-width:0}
.cash-lab{font-weight:700;font-size:1.1rem;color:var(--cash-c);white-space:nowrap}
.cash-sub{font-size:1rem;font-weight:700;color:var(--dk-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cash-in{width:100%;min-width:0;height:2.9rem;min-height:2rem;flex-shrink:1;border:1px solid var(--dk-edge);border-radius:.5rem;background:var(--dk-bg);color:var(--dk-title);text-align:center;font-size:1.45rem;font-weight:700;font-variant-numeric:tabular-nums;padding:0 .3rem}
.cash-in:focus{outline:none;border-color:var(--cash-c)}
.cash-extra{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:.5rem;flex-shrink:0}
.cash-extra label{font-size:.72rem;font-weight:600;color:var(--dk-mut2);margin:0;min-width:0;white-space:nowrap}
.cash-extra .opt{font-weight:400}
.cash-extra input{display:block;width:100%;margin-top:.15rem;border:1px solid var(--dk-edge);border-radius:.5rem;background:var(--dk-bg);color:var(--dk-title);padding:.35rem .55rem;font-size:.9rem}
.cash-extra input:focus{outline:none;border-color:var(--dk-accent)}
.cash-foot{display:flex;align-items:center;gap:.45rem .9rem;flex-wrap:wrap;padding:.55rem .75rem;border-top:1px solid var(--dk-line);background:var(--dk-head);flex-shrink:0}
.cash-stats{display:flex;align-items:center;gap:.3rem 1.1rem;flex-wrap:wrap;min-width:0}
.cash-stat small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dk-mut)}
.cash-stat b{font-size:1.2rem;font-weight:700;color:var(--dk-title);white-space:nowrap;font-variant-numeric:tabular-nums}
.cash-diff{padding:.2rem .6rem;border-radius:.5rem;font-weight:700;font-size:.85rem;border:1.5px solid currentColor;white-space:nowrap}
.cash-diff.exact{color:#16a34a}.cash-diff.short{color:#dc2626}.cash-diff.over{color:#2563eb}
.cash-actions{display:flex;gap:.45rem;margin-left:auto}
.cash-actions .btn{border-radius:.55rem;font-weight:600;padding:.5rem 1.1rem;white-space:nowrap}
.cash-reset{background:var(--dk-btn);border:1px solid var(--dk-edge);color:var(--dk-soft)}
.cash-actions .btn.cash-copy{flex:0 0 auto;padding-left:.8rem;padding-right:.8rem}
.cash-reset:hover{background:var(--dk-btn-h);border-color:var(--dk-dim);color:var(--dk-strong)}
.cash-hist{position:absolute;inset:.6rem .75rem;background:var(--dk-bg);border:1px solid var(--dk-line);border-radius:.7rem;box-shadow:var(--dk-shadow);padding:.75rem;overflow:auto;z-index:2}
.cash-hist table{width:100%;font-size:.8rem;border-collapse:collapse}
.cash-hist th{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--dk-mut);font-weight:700}
.cash-hist td,.cash-hist th{padding:.35rem .4rem;border-bottom:1px solid var(--dk-line);vertical-align:top;color:var(--dk-text);text-align:left}
.cash-hist .num{text-align:right;white-space:nowrap}
@media (max-width:575.98px){
  .cash-dialog{margin:.5rem auto;max-width:calc(100vw - 1rem)}
  .modal-content.cash{max-height:calc(100vh - 1rem);max-height:calc(100dvh - 1rem)}
  .cash-body{padding:.45rem .5rem;gap:.4rem}
  .cash-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--rows-sm),minmax(0,max-content));gap:.35rem}
  .cash-card{padding:.3rem .4rem .4rem;gap:.2rem;border-radius:.5rem}
  .cash-lab{font-size:.95rem}
  .cash-sub{font-size:.8rem}
  .cash-in{font-size:1.25rem;height:2.6rem;min-height:1.8rem}
  .cash-extra{grid-template-columns:1fr 1fr;gap:.35rem .4rem}
  .cash-extra .cash-note-wrap{grid-column:1 / -1}
  .cash-stat b{font-size:1.05rem}
  .cash-foot{padding:.45rem .55rem}
  .cash-actions{width:100%}
  .cash-actions .btn{flex:1}
}
/* short screens (landscape phones, small laptops): tighten */
@media (max-height:620px){
  .cash .modal-header{padding:.4rem .8rem}
  .cash-lab{font-size:.92rem}
  .cash-in{font-size:1.15rem;min-height:1.7rem}
  .cash-extra input{padding:.2rem .45rem}
  .cash-foot{padding:.35rem .7rem}
  .cash-stat b{font-size:1rem}
  .cash-actions .btn{padding:.3rem .8rem}
}

/* ===== Messages (SMS) ===== */
.sms-panes{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:1rem;height:calc(100vh - 230px);min-height:430px}
.sms-list,.sms-thread{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.sms-new{padding:.6rem;border-bottom:1px solid var(--bs-border-color)}
.sms-convs{flex:1;overflow-y:auto}
.sms-empty{padding:2rem 1rem;text-align:center;color:var(--bs-secondary-color);font-size:.88rem}
.sms-conv{display:flex;gap:.65rem;align-items:center;width:100%;border:0;background:none;text-align:left;padding:.65rem .75rem;border-bottom:1px solid #f1f3f6}
.sms-conv:nth-child(even){background:#fafbfd}
.sms-conv:hover{background:var(--brand-50)}
.sms-conv.active{background:var(--brand-100)}
.sms-av{width:38px;height:38px;border-radius:.6rem;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.sms-conv-body{flex:1;min-width:0}
.sms-conv-top{display:flex;align-items:center;gap:.4rem}
.sms-conv-name{font-weight:600;font-size:.9rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sms-conv-time{font-size:.7rem;color:var(--bs-secondary-color);white-space:nowrap}
.sms-conv-prev{font-size:.8rem;color:var(--bs-secondary-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sms-conv.unread .sms-conv-prev{color:var(--bs-body-color);font-weight:600}
.sms-unread{background:var(--brand);color:#fff;border-radius:.4rem;font-size:.66rem;font-weight:700;padding:.05rem .4rem}
.sms-thread-head{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-bottom:1px solid var(--bs-border-color)}
.sms-back{display:none}
.sms-msgs{flex:1;overflow-y:auto;padding:1rem;background:#f6f8fb;display:flex;flex-direction:column;gap:.35rem}
.sms-older{align-self:center;border-radius:999px;margin:.15rem 0 .5rem;font-size:.8rem;max-width:100%;white-space:normal}
.sms-day{align-self:center;font-size:.7rem;color:var(--bs-secondary-color);background:#e9edf3;border-radius:.45rem;padding:.12rem .55rem;margin:.5rem 0}
.sms-row{display:flex;flex-direction:column;max-width:78%}
.sms-row.in{align-self:flex-start}
.sms-row.out{align-self:flex-end;align-items:flex-end}
.sms-bubble{padding:.5rem .75rem;border-radius:.75rem;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.92rem;line-height:1.35}
.sms-row.in .sms-bubble{background:#fff;border:1px solid #e5e9f0;border-bottom-left-radius:.25rem}
.sms-row.out .sms-bubble{background:var(--brand);color:#fff;border-bottom-right-radius:.25rem}
.sms-row.failed .sms-bubble{background:#fee2e2;color:#991b1b}
.sms-meta{font-size:.68rem;color:var(--bs-secondary-color);margin-top:.1rem}
.sms-row.failed .sms-meta{color:#b91c1c}
.sms-compose{display:grid;grid-template-columns:1fr auto;gap:.5rem;padding:.6rem;border-top:1px solid var(--bs-border-color);background:#fff}
.sms-compose textarea{resize:none;border-radius:.6rem;max-height:140px;overflow-y:hidden}
.sms-send{border-radius:.6rem;width:46px}
.sms-count{grid-column:1/-1;min-height:1em;font-size:.7rem}
@media (max-width:767.98px){
  .sms-panes{grid-template-columns:1fr;height:calc(100vh - 210px)}
  .sms-panes .sms-thread{display:none}
  .sms-panes.show-thread .sms-list{display:none}
  .sms-panes.show-thread .sms-thread{display:flex}
  .sms-back{display:inline-flex}
}
.phone-contact{background:linear-gradient(135deg,#eff6ff,#fff 70%);border-left:4px solid #2563eb!important}

/* ===== Sign-up documents: review status, re-upload, in-app viewer ===== */
.doc-thumb{position:relative;width:100%;padding:0;cursor:zoom-in}
.doc-status{position:absolute;left:.4rem;top:.4rem;font-size:.66rem}
.doc-new{position:absolute;right:.4rem;top:.4rem;font-size:.66rem}
.doc-tile.doc-rejected .doc-thumb{border-color:#fca5a5;box-shadow:0 0 0 2px #fee2e2}
.doc-tile.doc-approved .doc-thumb{border-color:#86efac}
.doc-reason{line-height:1.3;margin-top:.15rem}
.doc-actions{display:flex;gap:.3rem;flex-wrap:wrap}
.doc-actions .btn{padding:.15rem .5rem;font-size:.75rem;border-radius:.45rem}
.reupload-box{background:#fff7ed;border:1px solid #fed7aa;border-left:4px solid #f97316;border-radius:.75rem;padding:.8rem 1rem}
.reason-list{display:flex;flex-direction:column;gap:.3rem}
.reason-opt{display:flex;gap:.5rem;align-items:flex-start;border:1px solid var(--bs-border-color);border-radius:.55rem;padding:.4rem .6rem;cursor:pointer;font-size:.88rem}
.reason-opt:has(input:checked){border-color:#dc2626;background:#fef2f2}
.reason-opt input{margin-top:.2rem}
.doc-viewer-dialog{max-width:min(1100px,96vw)}
.doc-viewer .modal-header{gap:.75rem;flex-wrap:nowrap}
.doc-viewer-tools{display:flex;gap:.35rem;flex-shrink:0}
.doc-viewer-tools .btn{border-radius:.5rem}
.doc-viewer-body{height:min(78vh,820px);display:flex;align-items:center;justify-content:center;background:#0f172a;overflow:hidden;padding:12px;border-radius:0 0 var(--bs-modal-inner-border-radius) var(--bs-modal-inner-border-radius)}
.doc-viewer-body img{display:block;transition:transform .2s ease;box-shadow:0 8px 30px rgba(0,0,0,.4);background:#fff}
.doc-viewer-body iframe{width:100%;height:100%;border:0;background:#fff;border-radius:.4rem;transition:transform .2s ease}
.doc-viewer-note:empty{display:none}
.doc-viewer-note{padding:.4rem 1rem;text-align:center}
@media (max-width:575.98px){.doc-viewer-body{height:70vh}.doc-viewer-tools .btn{padding:.25rem .45rem}}
/* client re-upload page */
.reupload-item{border:1px solid var(--bs-border-color);border-radius:.8rem;padding:.9rem 1rem;margin-bottom:.75rem}
.reupload-reason{background:#fef2f2;color:#991b1b;border-radius:.5rem;padding:.4rem .6rem;font-size:.88rem;margin-top:.35rem}

/* ===== Call / SMS / Email next to every phone number and email ===== */
.contact-row{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .9rem}
.contact-line{display:inline-flex;align-items:center;gap:.3rem;flex-wrap:wrap;max-width:100%;position:relative;z-index:2;vertical-align:middle}
.contact-val{color:inherit;text-decoration:none;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.contact-val:hover{text-decoration:underline}
.contact-btn{display:inline-flex;align-items:center;gap:.25rem;border:1px solid transparent;border-radius:.45rem;padding:.1rem .45rem;font-size:.75rem;font-weight:600;line-height:1.5;text-decoration:none;white-space:nowrap;cursor:pointer;background:none}
.contact-btn i{font-size:.85em}
.contact-btn.c-call{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.contact-btn.c-call:hover{background:#d1fae5}
.contact-btn.c-sms{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-100)}
.contact-btn.c-sms:hover{background:var(--brand-100)}
.contact-btn.c-mail{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe}
.contact-btn.c-mail:hover{background:#ede9fe}
.contact-line.compact .contact-btn{padding:0;width:1.6rem;height:1.45rem;justify-content:center}
@media (pointer:coarse){.contact-line.compact .contact-btn{width:2rem;height:1.8rem}.contact-btn{padding:.2rem .55rem}}

/* ===== Products list: name | price | Edit + Delete lined up ===== */
.product-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.5rem 1rem;padding:.85rem 1rem}
.product-main{min-width:0}
.product-name{overflow-wrap:anywhere}
.product-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-price{text-align:right;white-space:nowrap}
.product-actions{display:flex;gap:.4rem;align-items:center}
.product-actions form{margin:0}
.product-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-width:5.6rem;height:2rem;border-radius:.5rem;font-weight:600}
@media (max-width:575.98px){
  .product-row{grid-template-columns:1fr auto;grid-template-areas:"main price" "actions actions"}
  .product-main{grid-area:main}.product-price{grid-area:price}
  .product-actions{grid-area:actions;justify-content:flex-end}
  .product-actions .btn{flex:0 0 auto}
}

/* ===== Dashboard headline cards: one line of identical cards on desktop ===== */
.kpi-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.kpi-strip>.kpi{height:100%;min-width:0;display:flex;flex-direction:column}
@media (min-width:768px){.kpi-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.kpi-strip[data-n="1"]{grid-template-columns:repeat(1,minmax(0,1fr))}.kpi-strip[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi-strip[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){
  .kpi-strip,.kpi-strip[data-n]{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
  .kpi-strip>.kpi{padding:1rem 1.05rem}
  .kpi-strip .kpi-head{align-items:flex-start;gap:.5rem;margin-bottom:.55rem}
  .kpi-strip .kpi-label{flex:1 1 auto;min-width:0;font-size:.84rem;line-height:1.25;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .kpi-strip .kpi-value{font-size:clamp(1.1rem,1.45vw,1.5rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kpi-strip .kpi-sub{font-size:.72rem;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* 5–7 cards: a little more compact so everything still fits */
  .kpi-strip[data-n="5"] .kpi-value,.kpi-strip[data-n="6"] .kpi-value,.kpi-strip[data-n="7"] .kpi-value{font-size:clamp(1rem,1.2vw,1.3rem)}
  .kpi-strip[data-n="6"]>.kpi,.kpi-strip[data-n="7"]>.kpi{padding:.85rem .85rem}
  .kpi-strip[data-n="6"] .kpi-label,.kpi-strip[data-n="7"] .kpi-label{font-size:.78rem}
  .kpi-strip[data-n="6"] .kpi-icon,.kpi-strip[data-n="7"] .kpi-icon{width:1.9rem;height:1.9rem;font-size:.85rem}
  .kpi-strip[data-n="6"] .kpi-sub,.kpi-strip[data-n="7"] .kpi-sub{font-size:.68rem}
}

/* ===== Bengali (বাংলা) – fonts and spacing so labels sit neatly inside buttons and cards =====
 * English letters keep the system font; Bengali letters use Hind Siliguri.
 * Bengali vowel signs reach above and below the line, so lines get a little more height,
 * letter-spacing is switched off (it breaks joined letters) and text is never forced to UPPER CASE. */
html[lang="bn"] body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Hind Siliguri","Noto Sans Bengali",Arial,sans-serif}
html[lang="bn"] body *{letter-spacing:0!important}
html[lang="bn"] body{line-height:1.6}
html[lang="bn"] .btn,html[lang="bn"] .topbar-btn,html[lang="bn"] .nav-link,html[lang="bn"] .badge,html[lang="bn"] .contact-btn,
html[lang="bn"] .sidebar-link .nav-label,html[lang="bn"] .sb-section,html[lang="bn"] .form-label,html[lang="bn"] .kpi-label,html[lang="bn"] .rp-label,
html[lang="bn"] .table>thead th{text-transform:none!important}
html[lang="bn"] .btn{line-height:1.45;padding-top:calc(var(--bs-btn-padding-y) + .06rem);padding-bottom:calc(var(--bs-btn-padding-y) + .02rem)}
html[lang="bn"] .btn-sm{font-size:.84rem}
html[lang="bn"] .topbar-btn{font-size:.8rem;line-height:1.35;font-weight:700}
html[lang="bn"] .badge{font-size:.74rem;line-height:1.35;padding:.28em .7em .24em;font-weight:600}
html[lang="bn"] .sidebar-link .nav-label{font-size:14px;line-height:1.5}
html[lang="bn"] .sb-section{font-size:12px}
html[lang="bn"] .nav-link{line-height:1.45}
html[lang="bn"] .settings-tab{line-height:1.45}
html[lang="bn"] .form-text,html[lang="bn"] .small,html[lang="bn"] small{line-height:1.55}
html[lang="bn"] .kpi-label{line-height:1.4}
html[lang="bn"] .kpi-value,html[lang="bn"] .rp-value{line-height:1.3}
html[lang="bn"] .table>thead th{font-size:.78rem}
html[lang="bn"] .dialler-key .l{letter-spacing:0}
/* Buttons that hold a short label never squash it into the edge: let them grow, and wrap only as a last resort */
html[lang="bn"] .btn:not(.btn-close){white-space:normal;overflow-wrap:anywhere;text-align:center}
html[lang="bn"] .topbar-btn,html[lang="bn"] .contact-btn,html[lang="bn"] .nav-link,html[lang="bn"] .badge,html[lang="bn"] .chip-scroll .btn{white-space:nowrap}

/* ===== Users page: one button per form (each opens a pop-up) ===== */
.user-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
.user-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;border:1px solid #e5e7eb;background:#fff;border-radius:.8rem;
  padding:.9rem .6rem;font-weight:600;font-size:.88rem;color:#1f2937;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:box-shadow .15s,border-color .15s;min-height:5.2rem;text-align:center}
.user-action i{font-size:1.4rem;color:var(--brand)}
.user-action:hover{border-color:var(--brand-100);box-shadow:0 4px 14px rgba(15,23,42,.08)}
.user-row-actions form{margin:0}
.user-row-actions .btn{display:inline-flex;align-items:center;gap:.3rem;border-radius:.5rem}
/* permissions */
.perm-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;border-bottom:1px solid var(--bs-border-color);padding-bottom:.35rem;margin-bottom:.5rem}
.perm-all{font-size:.78rem}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.35rem .9rem}
.perm-item{margin:0;padding:.3rem .2rem .3rem 2.6em;font-size:.88rem}
.perm-item .bi{color:#6b7280;margin-right:.15rem}
@media (max-width:575.98px){.user-actions{grid-template-columns:repeat(2,1fr)}}

/* ===== Pop-ups: the page behind can't scroll while one is open ===== */
html.modal-locked,html.modal-locked body{overflow:hidden!important;overscroll-behavior:none}
/* Sidebar open on a phone / tablet: the page behind stays put; the menu list scrolls on its own and never hands the swipe on */
@media (max-width:1023.98px){
  html:has(body.sb-open),body.sb-open{overflow:hidden!important;overscroll-behavior:none}
  body.sb-open .sb-backdrop{touch-action:none}
}
.sb-nav{overscroll-behavior:contain}
html.modal-locked body{position:fixed;left:0;right:0;width:100%}
html.modal-locked .sb-nav,html.modal-locked .app-main{overscroll-behavior:none}
.modal{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.modal-body,.modal-dialog-scrollable .modal-content{overscroll-behavior:contain}
.modal-x{position:absolute;top:.85rem;right:.85rem;z-index:5}
.modal-header .modal-x{position:static;margin-left:auto}
/* a "static" pop-up gives a small bounce when you click outside – keep it subtle */
.modal.modal-static .modal-dialog{transform:scale(1.01)}

/* ===== Sales report ===== */
.report-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.report-range{margin-left:auto}
.report-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.report-actions .btn{display:inline-flex;align-items:center;gap:.35rem;border-radius:.6rem;font-weight:600}
.report-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.report-tiles .kpi{display:flex;flex-direction:column}
.report-tiles .kpi-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.report-table td,.report-table th{white-space:nowrap}
.rep-bar{position:relative;height:.55rem;border-radius:.3rem;background:#f1f3f6;overflow:hidden}
.rep-bar span{position:absolute;left:0;top:0;height:100%;background:var(--brand);opacity:.85;border-radius:.3rem}
.rep-bar span.rec{top:auto;bottom:0;height:40%;background:#16a34a;opacity:1}
.qrm-dp-trigger{font-family:inherit}
@media (max-width:991.98px){.report-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}}
@media (max-width:575.98px){.report-range{margin-left:0;width:100%}.report-range .qrm-dp-wrap,.report-range .qrm-dp-trigger{width:100%;justify-content:center}.report-actions{width:100%}.report-actions .btn{flex:1;justify-content:center}}

/* ===== Staff chat (same design as the Crown EPOS admin chat, in the Invoice Manager's brand colour) ===== */
.chat-strip{position:fixed;left:0;top:var(--chat-top,62%);transform:translateY(-50%);z-index:1041;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-700) 100%);color:#fff;border:0;border-radius:0 1rem 1rem 0;
  padding:1rem .55rem;box-shadow:6px 6px 18px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;gap:.45rem;
  font-weight:700;font-size:.7rem;cursor:pointer;touch-action:none;transition:left .12s cubic-bezier(.25,.46,.45,.94),box-shadow .12s}
.chat-strip:hover{box-shadow:8px 8px 22px rgba(0,0,0,.25)}
.chat-strip>*{pointer-events:none}
.chat-strip .bi{font-size:16px}
.chat-strip-arrow{font-size:14px;font-weight:900;line-height:1}
.chat-strip-badge{min-width:17px;height:17px;padding:0 3px;border-radius:999px;background:#fff;color:var(--brand-700);font-size:10px;font-weight:800;line-height:17px;text-align:center}
.chat-strip.has-unread{animation:chatPulse 1.8s ease-in-out infinite}
@keyframes chatPulse{0%,100%{box-shadow:6px 6px 18px rgba(0,0,0,.18),0 0 0 0 color-mix(in srgb,var(--brand) 0%,transparent)}50%{box-shadow:8px 8px 22px rgba(0,0,0,.25),0 0 0 12px color-mix(in srgb,var(--brand) 30%,transparent)}}
@media (prefers-reduced-motion:reduce){.chat-strip.has-unread{animation:none}}
.chat-panel{position:fixed;left:-400px;top:96px;width:330px;max-width:calc(100vw - 60px);z-index:1040;background:#fff;border:1px solid #cbd5e1;
  border-radius:0 14px 14px 0;box-shadow:8px 0 34px rgba(15,23,42,.26);flex-direction:column;overflow:hidden;font-size:13px;transition:left .12s cubic-bezier(.25,.46,.45,.94)}
.chat-head{display:flex;align-items:center;gap:8px;padding:9px 10px;background:#0f172a;color:#fff;user-select:none;cursor:grab;touch-action:none}
.chat-head strong{font-size:12.5px;letter-spacing:.02em}
.chat-head-btn{background:transparent;border:1px solid #475569;color:#cbd5e1;border-radius:7px;padding:2px 8px;font-size:11px;cursor:pointer}
.chat-close{background:transparent;border:0;color:#f04438;font-size:23px;font-weight:900;line-height:1;padding:0 6px;cursor:pointer;border-radius:7px}
.chat-body{padding:10px;overflow-y:auto;height:min(40vh,300px);   /* fixed height: the tray opens at its final size, so it never moves when messages load */background:#dfe6ef;box-shadow:inset 0 1px 3px rgba(15,23,42,.10);overscroll-behavior:contain}
.chat-empty{color:#64748b;text-align:center;padding:22px 6px;font-size:12.5px}
.chat-msg{margin:0 0 9px;padding:7px 9px;border-radius:9px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.10)}
.chat-msg.is-super{background:#f5f3ff;border-left:4px solid #7c3aed}
.chat-msg.is-mine:not(.is-super){border-left:3px solid var(--brand)}
.chat-msg-head{display:flex;gap:6px;align-items:baseline;margin-bottom:2px}
.chat-msg-head strong{font-size:12px;color:#0f172a}
.chat-role{font-size:9.5px;text-transform:uppercase;font-weight:800;color:#6d28d9}
.chat-time{font-size:10.5px;color:#94a3b8}
.chat-del{border:0;background:transparent;cursor:pointer;padding:0 0 0 4px;font-size:13px;line-height:1;color:#cbd5e1}
.chat-del:hover{color:#e11d48}
.chat-text{color:#1f2937;white-space:pre-wrap;word-break:break-word}
.chat-foot{border-top:1px solid #cbd5e1;padding:8px 10px;background:#eef2f7}
.chat-quick{display:flex;gap:5px;margin:0 0 7px}
.chat-quick button{flex:1 1 0;min-width:0;font-size:19px;line-height:1.15;border-radius:9px;padding:5px 4px;cursor:pointer}
.chat-quick .q-emergency{background:#fee2e2;border:1px solid #dc2626}
.chat-quick .q-attention{background:#fef3c7;border:1px solid #d97706}
.chat-quick .q-ack{background:#dcfce7;border:1px solid #16a34a}
.chat-quick .q-thanks{background:#e0e7ff;border:1px solid #4f46e5}
.chat-quick button.on{box-shadow:inset 0 0 0 2px #0f172a}
.chat-pop{width:100%;margin:0 0 7px;background:var(--brand-50);border:1px solid var(--brand);color:var(--brand-700);font-weight:800;font-size:11.5px;border-radius:9px;padding:7px 9px;cursor:pointer}
.chat-compose{display:flex;gap:7px;align-items:flex-end;min-width:0}
#chatInput{flex:1 1 auto;-webkit-appearance:none;appearance:none;box-sizing:border-box;width:100%;min-width:0;resize:none;padding:7px 9px;border:1px solid #cbd5e1;border-radius:9px;font:inherit;line-height:1.35;max-height:88px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
#chatInput::-webkit-scrollbar{width:0;height:0}
.chat-send{flex:0 0 auto;white-space:nowrap;background:var(--brand);border:1px solid var(--brand-700);color:#fff;font-weight:700;border-radius:9px;padding:8px 13px;cursor:pointer}
.chat-send:disabled,.chat-pop:disabled,.chat-quick button:disabled{opacity:.6}
.chat-note{color:#94a3b8;font-size:11px;margin-top:6px}
.chat-note.bad{color:#be123c}
.sb-user-chat{position:relative}
.sb-chat-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#dc2626;color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center}
.sb-user-chat.has-unread{color:#fff;background:var(--brand)}

/* ---------------------------------------------------------------- Appointments */
.appt-day{background:var(--bs-tertiary-bg,#f6f8fb);font-weight:600;font-size:.82rem;color:#475569;padding-top:.45rem;padding-bottom:.45rem}
.appt-day.is-today{color:var(--brand,#1553c7)}
.appt-row{display:grid;grid-template-columns:4.2rem 1fr auto;gap:.9rem;align-items:start;padding-top:.8rem;padding-bottom:.8rem}
.appt-time{border-left:3px solid var(--brand,#1553c7);padding-left:.55rem;line-height:1.15}
.appt-start{font-weight:700;font-size:1.02rem}
.appt-end{font-size:.78rem;color:#64748b}
.appt-main{min-width:0}
.appt-title{overflow-wrap:anywhere}
.appt-meta{display:flex;flex-wrap:wrap;gap:.25rem .9rem;margin-top:.2rem}
.appt-private{margin-top:.3rem;background:#fff8e6;border-radius:.5rem;padding:.25rem .5rem;color:#7a5a00}
.appt-actions{display:flex;gap:.35rem;align-items:center}
.appt-row.is-cancelled .appt-time{border-left-color:#cbd5e1}
.appt-row.is-cancelled .appt-title{text-decoration:line-through;color:#64748b}
@media (max-width:575.98px){
  .appt-row{grid-template-columns:3.6rem 1fr;gap:.6rem}
  .appt-actions{grid-column:1/-1;justify-content:flex-end}
}

/* ---------------------------------------------------------------- Pop-ups: always fit the screen, red close buttons */
/* Scrollable pop-ups whose header / body / buttons sit inside a <form>: the form takes the height so the body scrolls and the buttons stay visible */
.modal-dialog-scrollable .modal-content>form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;max-height:100%;overflow:hidden}
.modal-dialog-scrollable .modal-content>form>.modal-body{overflow-y:auto;min-height:0;flex:1 1 auto}
.modal-header,.modal-footer{flex-shrink:0}
.modal-footer{flex-wrap:wrap;gap:.5rem}
.modal-footer>*{margin:0}
/* Close (✕) buttons: red everywhere, light and dark pop-ups alike */
.btn-close,.btn-close-white{--bs-btn-close-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc2626'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  --bs-btn-close-opacity:1;--bs-btn-close-hover-opacity:1;--bs-btn-close-focus-shadow:0 0 0 .2rem rgba(220,38,38,.25);filter:none!important;border-radius:.5rem}
.btn-close:hover{background-color:rgba(220,38,38,.1)}
.call-bar-close{filter:none!important;opacity:1}
/* Cancel / Close buttons: red (pop-up buttons that just close it, and the Cancel links on forms) */
.btn-cancel,.modal [data-bs-dismiss="modal"].btn:not(.btn-close){--bs-btn-color:#fff;--bs-btn-bg:#dc2626;--bs-btn-border-color:#dc2626;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#b91c1c;--bs-btn-hover-border-color:#b91c1c;
  --bs-btn-active-color:#fff;--bs-btn-active-bg:#991b1b;--bs-btn-active-border-color:#991b1b;--bs-btn-focus-shadow-rgb:220,38,38}
.btn-cancel,.modal [data-bs-dismiss="modal"].btn:not(.btn-close){background:#dc2626;border-color:#dc2626;color:#fff}
.btn-cancel:hover,.btn-cancel:focus-visible,.modal [data-bs-dismiss="modal"].btn:not(.btn-close):hover{background:#b91c1c;border-color:#b91c1c;color:#fff}

/* ---------------------------------------------------------------- Narrow screens: nothing past the edges */
.features-list .flex-grow-1{min-width:0}
.features-list .badge,.list-group-item .badge.text-bg-light{white-space:normal;text-align:left;overflow-wrap:anywhere}
.row>.col-12.form-check.ms-2{width:calc(100% - .5rem)}                 /* indented switches inside a row */
#productPicker{max-width:100%;min-width:0;text-overflow:ellipsis}
.call-row{flex-wrap:wrap}
.call-row>.flex-grow-1{min-width:0;flex:1 1 12rem}
.call-row-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-left:auto}
.bio-row{display:flex;flex-wrap:wrap;gap:.5rem}
.bio-row>.form-control{flex:1 1 12rem;min-width:0}
.bio-row>.btn{flex:0 0 auto}
.popup-device{flex-wrap:wrap}
.popup-device .btn{flex:1 1 auto}
@media (max-width:575.98px){
  .chat-strip{transform:translateY(-50%) scale(.82);transform-origin:left center;opacity:.92}  .mine-strip{transform-origin:right center}   /* staff chat tab: smaller on phones so it covers less of the form */
}

/* Text page: customer search with results under the box */
.sms-search{position:relative}
.sms-search>.bi-search{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none;font-size:.85rem}
.sms-search>.form-control{padding-left:2rem}
.sms-pick-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;box-shadow:0 12px 30px rgba(15,23,42,.14);max-height:min(60vh,22rem);overflow-y:auto;padding:.25rem}
.sms-pick-item{display:flex;align-items:center;gap:.6rem;width:100%;border:0;background:transparent;text-align:left;padding:.45rem .55rem;border-radius:.55rem;color:inherit}
.sms-pick-item.active,.sms-pick-item:hover{background:var(--brand-50)}
.sms-pick-item .sms-av{flex:0 0 auto}
.sms-pick-text{display:flex;flex-direction:column;min-width:0}
.sms-pick-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sms-pick-sub{font-size:.8rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sms-pick-none{padding:.6rem .7rem;color:#64748b;font-size:.875rem}
/* "Type to find a customer" boxes (New invoice, subscriptions, appointments, Send form) – same look as the Text page search */
.cpick{position:relative;flex:1 1 auto;min-width:0}
.cpick-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:1070;background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;box-shadow:0 12px 30px rgba(15,23,42,.14);max-height:min(50vh,20rem);overflow-y:auto;padding:.25rem}
.cpick-item{display:flex;flex-direction:column;width:100%;border:0;background:transparent;text-align:left;padding:.45rem .6rem;border-radius:.55rem;color:inherit;min-width:0}
.cpick-item.active,.cpick-item:hover{background:var(--brand-50)}
.cpick-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cpick-sub{font-size:.8rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cpick-sub:empty{display:none}
.cpick-none{padding:.6rem .7rem;color:#64748b;font-size:.875rem}
[data-bs-theme="dark"] .cpick-list{background:var(--pop);border-color:var(--pop-edge);box-shadow:var(--pop-ring)}
[data-bs-theme="dark"] .cpick-item{color:var(--tx)}
[data-bs-theme="dark"] .cpick-item.active,[data-bs-theme="dark"] .cpick-item:hover{background:var(--sf3)}
[data-bs-theme="dark"] .cpick-sub,[data-bs-theme="dark"] .cpick-none{color:#94a3b8}
.sms-fix{margin-top:.35rem;max-width:30rem;margin-left:auto;font-size:.8rem;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:.6rem;padding:.4rem .6rem;text-align:left}
.topbar-btn{position:relative}
.topbar-btn .nav-badge{position:absolute;top:-4px;right:-4px;min-width:11px;height:11px;padding:0;font-size:0;border:2px solid #fff}

/* ---------------------------------------------------------------- Caller ID pop-up – dark theme (light theme uses the normal look) */
.caller-dialog{max-width:520px}
[data-bs-theme="dark"] .caller-dark{color:#e5e7eb}
.caller-dark .modal-body{padding:1rem}
[data-bs-theme="dark"] .caller-dark .modal-footer{background:#0f172a;border-top:1px solid #1f2937}
[data-bs-theme="dark"] .caller-dark .text-muted,[data-bs-theme="dark"] .caller-dark .form-check-label{color:#94a3b8!important}
[data-bs-theme="dark"] .caller-dark .fw-bold,[data-bs-theme="dark"] .caller-dark .fs-4,[data-bs-theme="dark"] .caller-dark .fs-5{color:#f9fafb}
[data-bs-theme="dark"] .caller-dark .border{border-color:#1f2a44!important}
[data-bs-theme="dark"] .caller-dark .border-top{border-color:#1f2937!important}
[data-bs-theme="dark"] .caller-dark .rounded-4.border,[data-bs-theme="dark"] .caller-dark .phone-contact{background:#111a2e}
[data-bs-theme="dark"] .caller-dark .alert-light{background:#111a2e;border-color:#1f2a44!important;color:#cbd5e1}
[data-bs-theme="dark"] .caller-dark a:not(.btn){color:#93c5fd}
[data-bs-theme="dark"] .caller-dark .contact-val{color:#e5e7eb}
[data-bs-theme="dark"] .caller-dark .text-danger{color:#f87171!important}
[data-bs-theme="dark"] .caller-dark .text-success{color:#4ade80!important}
[data-bs-theme="dark"] .caller-dark .btn-outline-secondary{color:#cbd5e1;border-color:#334155;background:#1e293b}
[data-bs-theme="dark"] .caller-dark .btn-outline-secondary:hover{background:#273449;color:#fff;border-color:#475569}
[data-bs-theme="dark"] .caller-dark .btn-outline-primary{color:#93c5fd;border-color:#1e3a8a;background:#172554}
[data-bs-theme="dark"] .caller-dark .btn-outline-primary:hover{background:#1e3a8a;color:#fff}
[data-bs-theme="dark"] .caller-dark .btn-outline-success{color:#86efac;border-color:#14532d;background:#052e16}
[data-bs-theme="dark"] .caller-dark .btn-outline-success:hover{background:#166534;color:#fff}
[data-bs-theme="dark"] .caller-dark .btn-outline-danger{color:#fca5a5;border-color:#7f1d1d;background:#2a0f12}
[data-bs-theme="dark"] .caller-dark .btn-outline-danger:hover{background:#991b1b;color:#fff}
[data-bs-theme="dark"] .caller-dark .btn-link{color:#93c5fd}
[data-bs-theme="dark"] .caller-dark .contact-btn{background:#1e293b;border-color:#334155;color:#cbd5e1}
[data-bs-theme="dark"] .caller-dark .spinner-border{color:#60a5fa!important}
[data-bs-theme="dark"] .caller-dark .form-check-input:not(:checked){background-color:#1e293b;border-color:#475569}

/* ---------------------------------------------------------------- Text page conversation panel – dark theme */
[data-bs-theme="dark"] .sms-thread{background:#0b1220;border-color:#1f2937;color:#e5e7eb}
[data-bs-theme="dark"] .sms-thread-head{background:#0f172a;border-bottom-color:#1f2937}
[data-bs-theme="dark"] .sms-thread-head .fw-bold{color:#f9fafb}
[data-bs-theme="dark"] .sms-thread-head .text-muted{color:#94a3b8!important}
[data-bs-theme="dark"] .sms-thread-head .btn-light{background:#1e293b;border-color:#334155;color:#e5e7eb}
[data-bs-theme="dark"] .sms-thread-head .btn-outline-success{color:#86efac;border-color:#14532d;background:#052e16}
[data-bs-theme="dark"] .sms-msgs{background:#0b1220}
[data-bs-theme="dark"] .sms-msgs .sms-empty{color:#94a3b8}
[data-bs-theme="dark"] .sms-day{background:#162036;color:#94a3b8}
[data-bs-theme="dark"] .sms-row.in .sms-bubble{background:#1e293b;border-color:#273449;color:#f1f5f9}
[data-bs-theme="dark"] .sms-row.out .sms-bubble{background:#2563eb;color:#fff}
[data-bs-theme="dark"] .sms-row.failed .sms-bubble{background:#450a0a;color:#fecaca}
[data-bs-theme="dark"] .sms-meta{color:#64748b}
[data-bs-theme="dark"] .sms-row.failed .sms-meta{color:#f87171}
[data-bs-theme="dark"] .sms-row.pending .sms-meta{color:#fbbf24}
[data-bs-theme="dark"] .sms-fix{background:#2a1a06;border-color:#78350f;color:#fcd34d}
[data-bs-theme="dark"] .sms-compose{background:#0f172a;border-top-color:#1f2937}
[data-bs-theme="dark"] .sms-compose textarea{background:#111a2e;border-color:#1f2a44;color:#f1f5f9}
[data-bs-theme="dark"] .sms-compose textarea::placeholder{color:#64748b}
[data-bs-theme="dark"] .sms-compose textarea:focus{background:#111a2e;color:#fff;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.18)}
[data-bs-theme="dark"] .sms-compose textarea:disabled{background:#0f172a;color:#475569}
[data-bs-theme="dark"] .sms-count{color:#64748b!important}
[data-bs-theme="dark"] .sms-send:disabled{background:#1e293b;border-color:#334155;color:#64748b}
[data-bs-theme="dark"] .sms-thread.card{--bs-card-bg:#0b1220;--bs-card-border-color:#1f2937}

/* Top bar: Dialler, Text and Last caller each have their own colour */
.topbar-btn-dial{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe}
.topbar-btn-dial:hover{background:#ede9fe;color:#5b21b6}
.topbar-btn-text{background:#ecfeff;color:#0e7490;border-color:#a5f3fc}
.topbar-btn-text:hover{background:#cffafe;color:#155e75}
.topbar-btn-last{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
.topbar-btn-last:hover{background:#ffedd5;color:#9a3412}

/* ---------------------------------------------------------------- Tabs: every tab has its own colour (light when not chosen, solid when chosen) */
:is(.chip-scroll,.settings-tabs,.nav-scroll)>:nth-child(12n+1){--tab-c:#2563eb;--tab-t:#1d4ed8;--tab-bg:#eff6ff;--tab-bd:#bfdbfe}
:is(.chip-scroll,.settings-tabs,.nav-scroll)>:nth-child(12n+2){--tab-c:#7c3aed;--tab-t:#6d28d9;--tab-bg:#f5f3ff;--tab-bd:#ddd6fe}
:is(.chip-scroll,.settings-tabs,.nav-scroll)>:nth-child(12n+3){--tab-c:#0d9488;--tab-t:#0f766e;--tab-bg:#f0fdfa;--tab-bd:#99f6e4}
:is(.chip-scroll,.settings-tabs,.nav-scroll)>:nth-child(12n+4){--tab-c:#ea580c;--tab-t:#c2410c;--tab-bg:#fff7ed;--tab-bd:#fed7aa}
:is(.chip-scroll,.settings-tabs,.nav-scroll)>:nth-child(12n+5){--tab-c:#db2777;--tab-t:#be185d;--tab-bg:#fdf2f8;--tab-bd:#fbcfe8}
:is(.chip-scroll,.settings-tabs,.nav-scroll)>:nth-child(12n+6){--tab-c:#16a34a;--tab-t:#15803d;--tab-bg:#f0fdf4;--tab-bd:#bbf7d0}
:is(.chip-scroll,.settings-tabs,.nav-scroll)>:nth-child(12n+7){--tab-c:#0891b2;--tab-t:#0e7490;--tab-bg:#ecfeff;--tab-bd:#a5f3fc}
:is(.chip-scroll,.settings-tabs,.nav-scroll)>:nth-child(12n+8){--tab-c:#d97706;--tab-t:#b45309;--tab-bg:#fffbeb;--tab-bd:#fde68a}
:is(.chip-scroll,.settings-tabs,.nav-scroll)>:nth-child(12n+9){--tab-c:#4f46e5;--tab-t:#4338ca;--tab-bg:#eef2ff;--tab-bd:#c7d2fe}
:is(.chip-scroll,.settings-tabs,.nav-scroll)>:nth-child(12n+10){--tab-c:#e11d48;--tab-t:#be123c;--tab-bg:#fff1f2;--tab-bd:#fecdd3}
:is(.chip-scroll,.settings-tabs,.nav-scroll)>:nth-child(12n+11){--tab-c:#65a30d;--tab-t:#4d7c0f;--tab-bg:#f7fee7;--tab-bd:#d9f99d}
:is(.chip-scroll,.settings-tabs,.nav-scroll)>:nth-child(12n+12){--tab-c:#475569;--tab-t:#334155;--tab-bg:#f8fafc;--tab-bd:#cbd5e1}
.chip-scroll>.btn:not(.btn-brand),.settings-tabs>.settings-tab:not(.active),.nav-scroll .nav-link:not(.active){background:var(--tab-bg,#fff);color:var(--tab-t,#4b5563);border:1px solid var(--tab-bd,#e5e7eb)}
.chip-scroll>.btn:not(.btn-brand):hover,.settings-tabs>.settings-tab:not(.active):hover,.nav-scroll .nav-link:not(.active):hover{background:var(--tab-bd,#f3f4f6);color:var(--tab-t,#111827)}
.chip-scroll>.btn.btn-brand,.settings-tabs>.settings-tab.active,.nav-scroll .nav-link.active{background:var(--tab-c,var(--brand));border:1px solid var(--tab-c,var(--brand));color:#fff}
/* The tab / filter you're on keeps its colour under the mouse too – only the others react to hover
   (the general .btn-brand:hover used to darken it, so it looked dimmed right after clicking) */
.chip-scroll>.btn.btn-brand:hover,.chip-scroll>.btn.btn-brand:focus,.chip-scroll>.btn.btn-brand:active{background:var(--tab-c,var(--brand))!important;border-color:var(--tab-c,var(--brand))!important;color:#fff!important}
.chip-scroll>.btn .badge.text-bg-light{background:rgba(255,255,255,.75)!important;color:var(--tab-t,#374151)!important}
.chip-scroll>.btn.btn-brand .badge.text-bg-light{background:rgba(255,255,255,.28)!important;color:#fff!important}
.nav-scroll .nav-link .badge{background:rgba(255,255,255,.7)!important;color:var(--tab-t,#374151)!important}

/* Connection lights next to the Dialler: phone relay + web app (green ok · yellow weak · red no connection) */
.conn-dots.topbar-btn-caller{display:inline-flex;align-items:center;gap:.55rem;padding:.3rem .6rem;border-radius:.75rem;background:#f8fafc;border:1px solid #e2e8f0;color:#64748b;cursor:default}
.conn-dot{display:inline-flex;align-items:center;gap:.25rem;font-size:.85rem;line-height:1}
.conn-dot b{width:10px;height:10px;border-radius:50%;background:#cbd5e1;box-shadow:0 0 0 2px #fff;display:inline-block}
.conn-dot[data-state="ok"] b{background:#22c55e;box-shadow:0 0 0 2px #fff,0 0 6px rgba(34,197,94,.7)}
.conn-dot[data-state="weak"] b{background:#eab308;animation:connpulse 1.6s ease-in-out infinite}
.conn-dot[data-state="down"] b{background:#ef4444;box-shadow:0 0 0 2px #fff,0 0 6px rgba(239,68,68,.7);animation:connpulse 1.1s ease-in-out infinite}
@keyframes connpulse{50%{opacity:.45}}

/* ---------------------------------------------------------------- Expenses */
.exp-row{display:grid;grid-template-columns:3.4rem 1fr auto auto;gap:.85rem;align-items:center;padding-top:.75rem;padding-bottom:.75rem}
.exp-date{text-align:center;border-radius:.6rem;background:var(--brand-50);color:var(--brand-700);padding:.3rem 0;line-height:1.1}
.exp-date .d{font-size:1.15rem;font-weight:700}
.exp-date .m{font-size:.68rem}
.exp-main{min-width:0}
.exp-supplier{overflow-wrap:anywhere}
.exp-meta{display:flex;flex-wrap:wrap;gap:.2rem .7rem;align-items:center;margin-top:.15rem}
.exp-meta .badge{white-space:normal;text-align:left}
.exp-desc{overflow-wrap:anywhere;margin-top:.15rem}
.exp-amount{text-align:right;white-space:nowrap}
.exp-add{font-weight:600}
@media (max-width:575.98px){
  .exp-row{grid-template-columns:3rem 1fr auto}
  .exp-actions{grid-column:2/-1;justify-self:end}
  .exp-add{width:100%}
}
.exp-receipts{border:1px dashed #cbd5e1;border-radius:.9rem;padding:.8rem;background:#f8fafc}
.exp-pick{display:flex;flex-wrap:wrap;gap:.5rem}
.exp-pick-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.75rem;padding:.45rem 1.1rem;font-weight:600;border-radius:.65rem;flex:1 1 9rem;max-width:16rem}
.touch-only{display:none!important}
@media (pointer:coarse){.touch-only{display:inline-flex!important}}
.exp-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}
.exp-chips:empty{display:none}
.exp-chip{display:inline-flex;align-items:center;gap:.35rem;max-width:100%;background:#fff;border:1px solid #e2e8f0;border-radius:.55rem;padding:.25rem .3rem .25rem .55rem;font-size:.8rem}
.exp-chip .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.exp-chip.open .t{color:var(--brand-700);cursor:pointer;text-decoration:underline}
.exp-chip .x{border:0;background:#fee2e2;color:#b91c1c;border-radius:.4rem;width:1.5rem;height:1.5rem;line-height:1;font-size:1.05rem;flex-shrink:0}
.exp-chip .x:hover{background:#fecaca}
.rv-frame{width:100%;height:75vh;border:0;display:block;background:#fff}
.rv-img{display:flex;align-items:center;justify-content:center;background:#0b1220;min-height:50vh;max-height:78vh;overflow:auto}
.rv-img img{max-width:100%;max-height:78vh;object-fit:contain}
/* accountant page (public link) */
.acc-page{max-width:980px;margin:0 auto}
.acc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.acc-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.acc-actions .btn{white-space:nowrap}
.acc-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:.75rem}
.acc-tile{background:#fff;border:1px solid #e5e7eb;border-radius:.8rem;padding:.6rem .8rem}
.acc-tile .l{font-size:.75rem;color:#64748b}
.acc-tile .v{font-weight:700;font-size:1.05rem}
.acc-list{background:#fff;border:1px solid #e5e7eb;border-radius:1rem;overflow:hidden}
.acc-row{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid #f1f5f9}
.acc-row:last-child{border-bottom:0}
.acc-main{min-width:0}
.acc-amt{text-align:right;white-space:nowrap}
.acc-files{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.35rem}
.acc-file{font-size:.78rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;padding:.15rem .5rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:767.98px){.acc-tiles{grid-template-columns:repeat(2,1fr)}.acc-actions{width:100%}.acc-actions .btn{flex:1 1 auto}}
.report-tiles.report-tiles-2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* tablets: keep the page title readable – connection lights show dots only */
@media (max-width:1199.98px){.conn-dots.topbar-btn-caller{gap:.35rem;padding:.3rem .45rem}.conn-dot i{display:none}}
.topbar-title{min-width:5.5rem}

/* ---------------------------------------------------------------- Dark theme: automatic counterparts of the light colours above
   (the hand-tuned dark styles further down take priority) */
[data-bs-theme="dark"] body{color:#e5e7eb;background-color:var(--sf2)}
[data-bs-theme="dark"] .card-header{color:#e5e7eb;background-color:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .list-group-item{border-color:var(--ln2)}
[data-bs-theme="dark"] .list-group-item-action:hover{background-color:var(--sf2)}
[data-bs-theme="dark"] .form-control,[data-bs-theme="dark"] .form-select{border-color:var(--ln2)}
[data-bs-theme="dark"] .form-label{color:#e5e7eb}
[data-bs-theme="dark"] .form-text{color:#94a3b8}
[data-bs-theme="dark"] .table>thead th,[data-bs-theme="dark"] .table-light th{color:#94a3b8;background-color:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .table td{border-color:var(--ln2)}
[data-bs-theme="dark"] .modal-header,[data-bs-theme="dark"] .modal-footer{border-color:var(--ln2)}
[data-bs-theme="dark"] .pagination .page-link{color:#e5e7eb;border-color:var(--ln2)}
[data-bs-theme="dark"] .nav-tabs .nav-link{color:#94a3b8;background-color:var(--sf2)}
[data-bs-theme="dark"] .topbar{background-color:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .topbar-burger{color:#94a3b8}
[data-bs-theme="dark"] .topbar-burger:hover{color:#e5e7eb}
[data-bs-theme="dark"] .app-footer a{color:#94a3b8}
[data-bs-theme="dark"] .app-footer .footer-brand{color:#e5e7eb}
[data-bs-theme="dark"] .app-footer .footer-slogan{color:#94a3b8}
[data-bs-theme="dark"] .kpi{background-color:var(--sf2)}
[data-bs-theme="dark"] .kpi-label{color:#94a3b8}
[data-bs-theme="dark"] .kpi-value{color:#e5e7eb}
[data-bs-theme="dark"] .kpi-sub{color:#94a3b8}
[data-bs-theme="dark"] .stat-card .value{color:#e5e7eb}
[data-bs-theme="dark"] .stat-card .label{color:#94a3b8}
[data-bs-theme="dark"] .ryft-bar-meta{color:#94a3b8}
[data-bs-theme="dark"] .acct-chip{color:#94a3b8}
[data-bs-theme="dark"] .acct-chip .bi{color:#94a3b8}
[data-bs-theme="dark"] .ryft-back{color:#94a3b8}
[data-bs-theme="dark"] .rp-tile{border-color:var(--ln2)}
[data-bs-theme="dark"] .rp-tile .rp-value{color:#e5e7eb}
[data-bs-theme="dark"] .rp-tile .rp-sub{color:#94a3b8}
[data-bs-theme="dark"] .age-track{background-color:var(--sf2)}
[data-bs-theme="dark"] .doc-preview{background-color:var(--sf2)}
[data-bs-theme="dark"] .settings-tab{color:#94a3b8;background-color:var(--sf2)}
[data-bs-theme="dark"] .settings-tab:not(.active):hover{color:#e5e7eb;background-color:var(--sf2)}
[data-bs-theme="dark"] .settings-nav{background-color:var(--sf2)}
[data-bs-theme="dark"] .settings-nav .list-group-item{color:#e5e7eb}
[data-bs-theme="dark"] .settings-nav .list-group-item{background-color:var(--sf2)}
[data-bs-theme="dark"] .input-icon>i{color:#94a3b8}
[data-bs-theme="dark"] .or-divider{color:#94a3b8}
[data-bs-theme="dark"] .sticky-actions{background-color:var(--sf2)}
[data-bs-theme="dark"] .items-table tr.item-row{border-color:var(--ln2)}
[data-bs-theme="dark"] .signup-steps span{color:#94a3b8;background-color:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .choice span{background-color:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .doc-tips{color:#94a3b8}
[data-bs-theme="dark"] .doc-item{background-color:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .terms-box{background-color:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .kv-list .k{color:#94a3b8}
[data-bs-theme="dark"] .doc-thumb{background-color:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .app-main .card > .list-group-flush > .list-group-item:nth-child(even){background-color:var(--sf2)}
[data-bs-theme="dark"] .pay-method{background-color:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .help-box{background-color:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .js-smtp-tip{background-color:var(--sf2)}
[data-bs-theme="dark"] .sms-conv:nth-child(even){background-color:var(--sf2)}
[data-bs-theme="dark"] .sms-msgs{background-color:var(--sf2)}
[data-bs-theme="dark"] .sms-day{background-color:var(--sf2)}
[data-bs-theme="dark"] .sms-row.in .sms-bubble{background-color:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .sms-compose{background-color:var(--sf2)}
[data-bs-theme="dark"] .perm-item .bi{color:#94a3b8}
[data-bs-theme="dark"] .rep-bar{background-color:var(--sf2)}
[data-bs-theme="dark"] .chat-body{background-color:var(--sf2)}
[data-bs-theme="dark"] .chat-msg{background-color:var(--sf2)}
[data-bs-theme="dark"] .chat-msg-head strong{color:#e5e7eb}
[data-bs-theme="dark"] .chat-text{color:#e5e7eb}
[data-bs-theme="dark"] .chat-foot{background-color:var(--sf2)}
[data-bs-theme="dark"] .sms-pick-list{background-color:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .exp-receipts{background-color:var(--sf2)}
[data-bs-theme="dark"] .exp-chip{background-color:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .rv-frame{background-color:var(--sf2)}
[data-bs-theme="dark"] .acc-tile{background-color:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .acc-list{background-color:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .acc-file{background-color:var(--sf2);border-color:var(--ln2)}

/* ================================================================ Light / dark theme (☀ / 🌙 button in the top bar)
   Dialler, Calculator, Last caller and the Text conversation follow the theme through the --dk-* colours. */
:root{
  --dk-bg:#ffffff;--dk-head:#f8fafc;--dk-panel:#f1f5f9;--dk-key:#f8fafc;--dk-key-h:#eef2ff;--dk-btn:#f1f5f9;--dk-btn-h:#e2e8f0;
  --dk-line:#e5e7eb;--dk-line2:#e2e8f0;--dk-line-h:#c7d2fe;--dk-edge:#cbd5e1;--dk-dim:#94a3b8;--dk-mut:#64748b;--dk-mut2:#64748b;--dk-soft:#334155;
  --dk-text:#1f2937;--dk-strong:#0f172a;--dk-title:#0f172a;--dk-accent:#2563eb;--dk-ok:#16a34a;--dk-op:#dbeafe;--dk-op-h:#bfdbfe;--dk-op-t:#1e3a8a;
  --dk-shadow:0 24px 60px rgba(15,23,42,.28)
}
[data-bs-theme="dark"]{
  --dk-bg:#0b1220;--dk-head:#0f172a;--dk-panel:#111a2e;--dk-key:#162036;--dk-key-h:#1d2a45;--dk-btn:#1e293b;--dk-btn-h:#273449;
  --dk-line:#334155;--dk-line2:#1f2a44;--dk-line-h:#2c3c5e;--dk-edge:#334155;--dk-dim:#475569;--dk-mut:#64748b;--dk-mut2:#94a3b8;--dk-soft:#cbd5e1;
  --dk-text:#e5e7eb;--dk-strong:#f1f5f9;--dk-title:#f9fafb;--dk-accent:#60a5fa;--dk-ok:#4ade80;--dk-op:#1e3a8a;--dk-op-h:#1e40af;--dk-op-t:#dbeafe;
  --dk-shadow:0 0 0 1px rgba(148,163,184,.28),0 30px 70px rgba(0,0,0,.65);
  /* page and surfaces */
  --pg:#0b1220;--sf:#111827;--sf2:#172033;--sf3:#1e293b;--ln:#273449;--ln2:#334155;--tx:#e5e7eb;--tx2:#94a3b8;--tx3:#cbd5e1;
  --pop:#172033;--pop-edge:#475569;--pop-ring:0 0 0 1px rgba(148,163,184,.35),0 24px 60px rgba(0,0,0,.7);
  --brand-50:color-mix(in srgb,var(--brand) 18%,#111827);--brand-100:color-mix(in srgb,var(--brand) 30%,#111827);--brand-300:color-mix(in srgb,var(--brand) 55%,#111827);
  --brand-700:color-mix(in srgb,var(--brand) 45%,#fff);
  --bs-body-bg:var(--pg);--bs-body-color:var(--tx);--bs-secondary-color:var(--tx2);--bs-tertiary-bg:var(--sf2);--bs-secondary-bg:var(--sf3);
  --bs-border-color:var(--ln);--bs-emphasis-color:#f8fafc;--bs-heading-color:#f1f5f9;--bs-link-color:#93c5fd;--bs-link-hover-color:#bfdbfe;--bs-link-color-rgb:147,197,253;
  color-scheme:dark
}
[data-bs-theme="dark"] body{background:var(--pg);color:var(--tx)}
[data-bs-theme="dark"] .card,[data-bs-theme="dark"] .kpi,[data-bs-theme="dark"] .rp-tile,[data-bs-theme="dark"] .settings-nav,[data-bs-theme="dark"] .acc-tile,[data-bs-theme="dark"] .acc-list{background:var(--sf);border-color:var(--ln);color:var(--tx)}
[data-bs-theme="dark"] .card{--bs-card-bg:var(--sf);--bs-card-border-color:var(--ln);--bs-card-cap-bg:var(--sf)}
[data-bs-theme="dark"] .card-header{background:var(--sf);color:#f1f5f9;border-bottom-color:var(--ln)}
[data-bs-theme="dark"] .card-footer{background:var(--sf2);border-top-color:var(--ln)}
[data-bs-theme="dark"] .list-group{--bs-list-group-bg:var(--sf);--bs-list-group-border-color:var(--ln);--bs-list-group-color:var(--tx);--bs-list-group-action-hover-bg:var(--sf3);--bs-list-group-action-hover-color:#fff}
[data-bs-theme="dark"] .list-group-item-action:hover{background:var(--sf3)}
[data-bs-theme="dark"] .table{--bs-table-bg:transparent;--bs-table-color:var(--tx);--bs-table-border-color:var(--ln);--bs-table-striped-bg:rgba(255,255,255,.03);--bs-table-hover-bg:rgba(255,255,255,.05)}
[data-bs-theme="dark"] .table>thead th,[data-bs-theme="dark"] .table-light th{background:var(--sf2)!important;color:var(--tx2)}
[data-bs-theme="dark"] .topbar{background:var(--sf);border-bottom-color:var(--ln)}
[data-bs-theme="dark"] .topbar-title,[data-bs-theme="dark"] .kpi-value,[data-bs-theme="dark"] h1,[data-bs-theme="dark"] .h4,[data-bs-theme="dark"] .h5,[data-bs-theme="dark"] .h6{color:#f1f5f9}
[data-bs-theme="dark"] .kpi-label,[data-bs-theme="dark"] .kpi-sub{color:var(--tx2)}
[data-bs-theme="dark"] .app-footer,[data-bs-theme="dark"] footer{background:var(--sf);border-top-color:var(--ln);color:var(--tx2)}
[data-bs-theme="dark"] .text-muted{color:var(--tx2)!important}
[data-bs-theme="dark"] .text-dark{color:var(--tx)!important}
[data-bs-theme="dark"] .bg-light{background:var(--sf2)!important}
[data-bs-theme="dark"] .bg-white{background:var(--sf)!important}
[data-bs-theme="dark"] .border{border-color:var(--ln)!important}
/* coloured tiles */
[data-bs-theme="dark"] .kpi[class*="kpi-c-"],[data-bs-theme="dark"] .stat-tint{--kb:color-mix(in srgb,var(--kc) 22%,#111827);--kt:color-mix(in srgb,var(--kc) 45%,#fff);background:linear-gradient(135deg,var(--kb) 0%,var(--sf) 75%)}
[data-bs-theme="dark"] .rp-tile{background:linear-gradient(160deg,var(--sf) 40%,color-mix(in srgb,var(--k,#334155) 22%,#111827))}
/* tabs keep their own colours, as dark tints */
[data-bs-theme="dark"] :is(.chip-scroll,.settings-tabs,.nav-scroll)>*{--tab-bg:color-mix(in srgb,var(--tab-c,#475569) 18%,#111827);--tab-bd:color-mix(in srgb,var(--tab-c,#475569) 45%,#111827);--tab-t:color-mix(in srgb,var(--tab-c,#94a3b8) 40%,#fff)}
/* buttons */
[data-bs-theme="dark"] .btn-light{background:var(--sf3);border-color:var(--ln2);color:var(--tx)}
[data-bs-theme="dark"] .btn-light:hover{background:#273449;border-color:#475569;color:#fff}
[data-bs-theme="dark"] .btn-outline-primary{background:transparent;color:#93c5fd;border-color:color-mix(in srgb,var(--brand) 60%,#111827)}
[data-bs-theme="dark"] .btn-outline-primary:hover,[data-bs-theme="dark"] .btn-outline-primary:focus{background:color-mix(in srgb,var(--brand) 30%,#111827)!important;color:#fff!important}
[data-bs-theme="dark"] .btn-outline-secondary{background:transparent;color:var(--tx3);border-color:var(--ln2)}
[data-bs-theme="dark"] .btn-outline-secondary:hover,[data-bs-theme="dark"] .btn-outline-secondary:active{background:var(--sf3)!important;color:#fff!important;border-color:#475569!important}
[data-bs-theme="dark"] .btn-outline-success{background:transparent;color:#86efac;border-color:#166534}
[data-bs-theme="dark"] .btn-outline-success:hover{background:#14532d!important;color:#fff!important;border-color:#22c55e!important}
[data-bs-theme="dark"] .btn-outline-danger{background:transparent;color:#fca5a5;border-color:#7f1d1d}
[data-bs-theme="dark"] .btn-outline-danger:hover{background:#7f1d1d!important;color:#fff!important;border-color:#ef4444!important}
[data-bs-theme="dark"] .btn-link{color:#93c5fd}
/* pills, badges, alerts */
[data-bs-theme="dark"] .pill-draft,[data-bs-theme="dark"] .pill-muted,[data-bs-theme="dark"] .pill-cancelled,[data-bs-theme="dark"] .text-bg-light{background:#273449!important;color:#cbd5e1!important}
[data-bs-theme="dark"] .pill-unpaid{background:#172554;color:#93c5fd}
[data-bs-theme="dark"] .pill-paid{background:#052e16;color:#86efac}
[data-bs-theme="dark"] .pill-partial{background:#431407;color:#fdba74}
[data-bs-theme="dark"] .pill-overdue,[data-bs-theme="dark"] .pill-danger{background:#450a0a;color:#fca5a5}
[data-bs-theme="dark"] .pill-vip{background:#422006;color:#fcd34d}
[data-bs-theme="dark"] .pill-purple{background:#2e1065;color:#c4b5fd;border-color:#4c1d95}
[data-bs-theme="dark"] .alert-success{background:#052e16;border-color:#166534;color:#bbf7d0}
[data-bs-theme="dark"] .alert-danger{background:#2a0a0a;border-color:#7f1d1d;color:#fecaca}
[data-bs-theme="dark"] .alert-warning,[data-bs-theme="dark"] .alert-amber{background:#2a1a06;border-color:#78350f;color:#fde68a}
[data-bs-theme="dark"] .alert-info,[data-bs-theme="dark"] .alert-primary{background:#0c1a3a;border-color:#1e3a8a;color:#bfdbfe}
[data-bs-theme="dark"] .alert-light{background:var(--sf2);border-color:var(--ln2)!important;color:var(--tx)}
/* top bar buttons: same colours, dark tints */
[data-bs-theme="dark"] .topbar-btn{background:var(--sf3);border-color:var(--ln2);color:var(--tx)}
[data-bs-theme="dark"] .topbar-btn-dial{background:#2e1065;color:#c4b5fd;border-color:#4c1d95}
[data-bs-theme="dark"] .topbar-btn-text{background:#083344;color:#67e8f9;border-color:#155e75}
[data-bs-theme="dark"] .topbar-btn-last{background:#431407;color:#fdba74;border-color:#7c2d12}
[data-bs-theme="dark"] .topbar-btn-paid{background:#052e16;color:#86efac;border-color:#166534}
[data-bs-theme="dark"] .topbar-btn-new{background:var(--brand);color:#fff;border-color:var(--brand)}
[data-bs-theme="dark"] .topbar-btn-calc{background:#020617;color:#e5e7eb;border-color:#475569}
[data-bs-theme="dark"] .topbar-btn-refresh{background:var(--sf3);color:#5eead4;border-color:var(--ln2)}
[data-bs-theme="dark"] .topbar-btn-lock{background:#3b0d24;color:#f9a8d4;border-color:#831843}
[data-bs-theme="dark"] .conn-dots.topbar-btn-caller{background:var(--sf3);border-color:var(--ln2);color:var(--tx2)}
[data-bs-theme="dark"] .conn-dot b{box-shadow:0 0 0 2px var(--sf3)}
[data-bs-theme="dark"] .contact-btn.c-call{background:#052e16;color:#86efac;border-color:#166534}
[data-bs-theme="dark"] .contact-btn.c-sms{background:#172554;color:#93c5fd;border-color:#1e3a8a}
[data-bs-theme="dark"] .contact-btn.c-mail{background:#2e1065;color:#c4b5fd;border-color:#4c1d95}
[data-bs-theme="dark"] .nav-pills .nav-link,[data-bs-theme="dark"] .nav-tabs .nav-link,[data-bs-theme="dark"] .settings-tab{background:var(--sf3);color:var(--tx3)}
/* …but the tab you're on keeps its brand colour in dark mode too (the rule above used to override it) */
[data-bs-theme="dark"] .nav-pills .nav-link.active,[data-bs-theme="dark"] .nav-tabs .nav-link.active{background:var(--brand);color:#fff}
/* forms */
[data-bs-theme="dark"] .form-control,[data-bs-theme="dark"] .form-select{background-color:var(--sf2);border-color:var(--ln2);color:var(--tx)}
[data-bs-theme="dark"] .form-control:focus,[data-bs-theme="dark"] .form-select:focus{background-color:var(--sf2);color:#fff}
[data-bs-theme="dark"] .form-control::placeholder{color:#64748b}
[data-bs-theme="dark"] .input-group-text{background:var(--sf3);border-color:var(--ln2);color:var(--tx2)}
[data-bs-theme="dark"] .form-check-input{background-color:var(--sf3);border-color:#475569}
[data-bs-theme="dark"] .form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
/* page parts with light backgrounds */
[data-bs-theme="dark"] .age-track,[data-bs-theme="dark"] .rep-bar{background:var(--sf3)}
[data-bs-theme="dark"] .doc-item,[data-bs-theme="dark"] .terms-box,[data-bs-theme="dark"] .help-box,[data-bs-theme="dark"] .js-smtp-tip,[data-bs-theme="dark"] .exp-receipts,[data-bs-theme="dark"] .acc-file,[data-bs-theme="dark"] .user-action,[data-bs-theme="dark"] .choice span,[data-bs-theme="dark"] .pay-method,[data-bs-theme="dark"] .signup-steps span,[data-bs-theme="dark"] .doc-thumb,[data-bs-theme="dark"] .rcs-help{background:var(--sf2);border-color:var(--ln2);color:var(--tx)}
[data-bs-theme="dark"] .appt-day{background:var(--sf2);color:var(--tx2)}
[data-bs-theme="dark"] .appt-private,[data-bs-theme="dark"] .reupload-box,[data-bs-theme="dark"] .sms-fix{background:#2a1a06;border-color:#78350f;color:#fde68a}
[data-bs-theme="dark"] .reupload-reason,[data-bs-theme="dark"] .doc-item.bad{background:#2a0a0a;color:#fecaca;border-color:#7f1d1d}
[data-bs-theme="dark"] .exp-chip{background:var(--sf3);border-color:var(--ln2);color:var(--tx)}
[data-bs-theme="dark"] .exp-chip .x{background:#450a0a;color:#fca5a5}
/* Text page: both panels dark, same tones */
[data-bs-theme="dark"] .sms-list{background:var(--sf)}
[data-bs-theme="dark"] .sms-conv{border-bottom-color:var(--ln);color:var(--tx)}
[data-bs-theme="dark"] .sms-conv:nth-child(even){background:rgba(255,255,255,.02)}
[data-bs-theme="dark"] .sms-conv:hover{background:var(--sf3)}
[data-bs-theme="dark"] .sms-conv.active{background:color-mix(in srgb,var(--brand) 30%,#111827)}
[data-bs-theme="dark"] .sms-new{border-bottom-color:var(--ln)}
/* staff chat panel */
[data-bs-theme="dark"] .chat-panel{background:var(--pop);border-color:var(--pop-edge);box-shadow:var(--pop-ring)}
[data-bs-theme="dark"] .chat-body{background:var(--pg)}
[data-bs-theme="dark"] .chat-msg{background:var(--sf3);color:var(--tx)}
[data-bs-theme="dark"] .chat-msg.is-super{background:#2e1065}
[data-bs-theme="dark"] .chat-foot{background:var(--sf2);border-top-color:var(--ln2)}
[data-bs-theme="dark"] .chat-compose textarea{background:var(--sf);border-color:var(--ln2);color:var(--tx)}

/* ---------------------------------------------------------------- Dark theme: every pop-up stands out from the page
   (lighter surface + clear light edge + glow, darker backdrop) */
[data-bs-theme="dark"] .modal-backdrop.show{opacity:.75;background:#000}
[data-bs-theme="dark"] .modal-content{background:var(--pop);border:1px solid var(--pop-edge);box-shadow:var(--pop-ring);color:var(--tx)}
[data-bs-theme="dark"] .modal-content.dialler{background:var(--dk-bg);border:1px solid var(--pop-edge)}
[data-bs-theme="dark"] .modal-header,[data-bs-theme="dark"] .modal-footer{border-color:var(--ln2)}
[data-bs-theme="dark"] .dropdown-menu{--bs-dropdown-bg:var(--pop);--bs-dropdown-border-color:var(--pop-edge);--bs-dropdown-link-color:var(--tx);--bs-dropdown-link-hover-bg:var(--sf3);--bs-dropdown-link-hover-color:#fff;--bs-dropdown-divider-bg:var(--ln2);box-shadow:var(--pop-ring)}
[data-bs-theme="dark"] .sms-pick-list{background:var(--pop);border-color:var(--pop-edge);box-shadow:var(--pop-ring)}
[data-bs-theme="dark"] .sms-pick-item{color:var(--tx)}
[data-bs-theme="dark"] .sms-pick-item.active,[data-bs-theme="dark"] .sms-pick-item:hover{background:var(--sf3)}
[data-bs-theme="dark"] .popover,[data-bs-theme="dark"] .toast{border:1px solid var(--pop-edge);box-shadow:var(--pop-ring)}
[data-bs-theme="dark"] #toast-container>*{box-shadow:0 0 0 1px rgba(255,255,255,.25),0 10px 30px rgba(0,0,0,.6)!important}
[data-bs-theme="dark"] .call-bar{box-shadow:0 0 0 1px rgba(148,163,184,.4),0 18px 45px rgba(0,0,0,.7)}

/* theme button */
.theme-btn i{font-size:1rem}
/* dark theme: striped rows, labels and hints */
[data-bs-theme="dark"] .app-main .card > .list-group-flush > .list-group-item:nth-child(even){background-color:#141d2e}
[data-bs-theme="dark"] .app-main .table:not(.items-table):not(.plan-table) > tbody > tr:nth-child(even) > *{--bs-table-bg-type:#141d2e}
[data-bs-theme="dark"] .form-label,[data-bs-theme="dark"] .form-check-label{color:var(--tx3)}
[data-bs-theme="dark"] .form-text,[data-bs-theme="dark"] .stat-card .label{color:var(--tx2)}
[data-bs-theme="dark"] .list-group-item{color:var(--tx)}
[data-bs-theme="dark"] .sb-aside{box-shadow:1px 0 0 var(--ln)}
/* ---------------------------------------------------------------- dark theme: hovers, badges, save bar, footer, links */
[data-bs-theme="dark"] .app-main .card > .list-group-flush > .list-group-item-action:hover,
[data-bs-theme="dark"] .app-main .card > .list-group-flush > .list-group-item-action:focus-visible{background-color:color-mix(in srgb,var(--brand) 24%,#111827)!important;box-shadow:inset 4px 0 0 var(--brand)}
[data-bs-theme="dark"] .app-main .table{--bs-table-hover-bg:color-mix(in srgb,var(--brand) 20%,#111827);--bs-table-bg-state:transparent}
[data-bs-theme="dark"] .app-main .table:not(.items-table):not(.plan-table) > tbody > tr:hover > *{--bs-table-bg-state:color-mix(in srgb,var(--brand) 20%,#111827);color:#fff}
/* count badges on tabs: readable on both the tinted and the solid tab */
[data-bs-theme="dark"] .chip-scroll>.btn .badge.text-bg-light,[data-bs-theme="dark"] .nav-scroll .nav-link .badge{background:rgba(255,255,255,.16)!important;color:#fff!important;border:1px solid rgba(255,255,255,.25)}
[data-bs-theme="dark"] .chip-scroll>.btn.btn-brand .badge.text-bg-light,[data-bs-theme="dark"] .nav-scroll .nav-link.active .badge{background:rgba(0,0,0,.28)!important;color:#fff!important}
/* sticky save bar at the bottom of forms */
[data-bs-theme="dark"] .sticky-actions{background:rgba(11,18,32,.92);border-top:1px solid var(--ln)}
/* footer */
[data-bs-theme="dark"] .app-footer .footer-brand,[data-bs-theme="dark"] .app-footer .footer-brand strong{color:#f1f5f9}
[data-bs-theme="dark"] .app-footer .footer-slogan,[data-bs-theme="dark"] .app-footer{color:var(--tx2)}
[data-bs-theme="dark"] .app-footer a{color:#93c5fd}
/* links and numbers */
[data-bs-theme="dark"] .app-main a:not([class*="btn"]):not(.list-group-item):not(.nav-link):not(.settings-tab):not(.dropdown-item):not(.kpi):not(.stat-card):not(.sidebar-link):not(.contact-val){color:#93c5fd}
[data-bs-theme="dark"] .app-main a:not([class*="btn"]):not(.list-group-item):not(.nav-link):not(.settings-tab):not(.dropdown-item):not(.kpi):not(.stat-card):not(.sidebar-link):not(.contact-val):hover{color:#bfdbfe}
[data-bs-theme="dark"] .stat-card .value{color:#f1f5f9}
[data-bs-theme="dark"] .contact-val{color:var(--tx)}
/* hovers on coloured buttons stay in their own colour */
[data-bs-theme="dark"] .topbar-btn-dial:hover{background:#3b0f80;color:#ddd6fe}
[data-bs-theme="dark"] .topbar-btn-text:hover{background:#0b4a5e;color:#a5f3fc}
[data-bs-theme="dark"] .topbar-btn-last:hover{background:#5a1d0a;color:#fed7aa}
[data-bs-theme="dark"] .topbar-btn-paid:hover{background:#064e25;color:#bbf7d0}
[data-bs-theme="dark"] .topbar-btn-refresh:hover,[data-bs-theme="dark"] .topbar-btn:hover{background:#273449;color:#fff}
[data-bs-theme="dark"] .topbar-btn-calc:hover{background:#0f172a;color:#fff}
[data-bs-theme="dark"] .topbar-btn-new:hover{background:var(--brand-dark);color:#fff}
[data-bs-theme="dark"] .contact-btn.c-call:hover{background:#064e25}
[data-bs-theme="dark"] .contact-btn.c-sms:hover{background:#1e3a8a}
[data-bs-theme="dark"] .contact-btn.c-mail:hover{background:#3b0f80}
/* sign-up: reject reasons */
[data-bs-theme="dark"] .reason-opt{background:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .reason-opt:has(input:checked){background:#2a0a0a;border-color:#ef4444}
/* dark theme: tab strips keep their own colours (selected = solid) */
[data-bs-theme="dark"] .nav-scroll .nav-link:not(.active){background:var(--tab-bg);color:var(--tab-t);border:1px solid var(--tab-bd)}
[data-bs-theme="dark"] .nav-scroll .nav-link.active{background:var(--tab-c,var(--brand));color:#fff;border:1px solid var(--tab-c,var(--brand))}

/* ---------------------------------------------------------------- dark theme: chat quick buttons, Ryft tiles, account label */
[data-bs-theme="dark"] .chat-quick .q-emergency{background:#3a0d0d;border-color:#b91c1c}
[data-bs-theme="dark"] .chat-quick .q-attention{background:#3a2a06;border-color:#b45309}
[data-bs-theme="dark"] .chat-quick .q-ack{background:#062e17;border-color:#15803d}
[data-bs-theme="dark"] .chat-quick .q-thanks{background:#1b1f4b;border-color:#4f46e5}
[data-bs-theme="dark"] .chat-quick button.on{box-shadow:inset 0 0 0 2px #f1f5f9}
[data-bs-theme="dark"] .rp-tile{background:linear-gradient(160deg,var(--sf) 40%,color-mix(in srgb,var(--k,#334155) 20%,#111827))}
[data-bs-theme="dark"] .rp-tile .rp-value{color:#f1f5f9}
[data-bs-theme="dark"] .rp-tile .rp-sub{color:var(--tx2)}
[data-bs-theme="dark"] .acct-chip{color:var(--tx2)}
[data-bs-theme="dark"] .acct-chip .bi{color:#64748b}
[data-bs-theme="dark"] .acct-env{background:#052e16;color:#86efac}
[data-bs-theme="dark"] .acct-env.is-sandbox{background:#431407;color:#fdba74}
/* screen lock */
.lock-avatar{width:3.5rem;height:3.5rem;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 8px 24px color-mix(in srgb,var(--brand) 40%,transparent)}
/* the moment it locks, a solid cover hides the page (nothing visible behind, no scrolling) until the lock screen loads */
html.locking,html.locking body{overflow:hidden!important;overscroll-behavior:none;touch-action:none}
html.locking body>*{visibility:hidden!important}
html.locking body::after{content:"";position:fixed;inset:0;z-index:2147483647;background:#0b1220 radial-gradient(circle at 50% 40%,#1e293b,#0b1220 70%);visibility:visible}
/* the lock screen itself: fixed, solid, cannot be scrolled */
html.is-lock,html.is-lock body{height:100%;overflow:hidden;overscroll-behavior:none}
html.is-lock .auth-wrap{position:fixed;inset:0;overflow-y:auto;overscroll-behavior:contain}
kbd{background:#0f172a;color:#fff;border-radius:.3rem;padding:.05rem .35rem;font-size:.8em}
/* invoice pay page: Apple Pay / Google Pay above the card form */
.pay-wallet:empty{display:none}.pay-wallet{margin-bottom:.5rem}
.pay-or{display:flex;align-items:center;gap:.6rem;color:var(--bs-secondary-color);font-size:.8rem;margin:.75rem 0}.pay-or::before,.pay-or::after{content:"";flex:1;border-top:1px solid var(--bs-border-color)}

/* ===== My tasks & notepad – private per user (right-hand tray, same build as the staff chat tray) ===== */
.mine-strip{left:auto;right:0;top:var(--mine-top,38%);background:linear-gradient(135deg,#14b8a6 0%,#0f766e 100%);border-radius:1rem 0 0 1rem;box-shadow:-6px 6px 18px rgba(0,0,0,.18);transition:right .12s cubic-bezier(.25,.46,.45,.94),box-shadow .12s}
.mine-strip:hover{box-shadow:-8px 8px 22px rgba(0,0,0,.25)}
.mine-strip .chat-strip-badge{color:#0f766e}
.mine-panel{left:auto;right:-430px;width:370px;max-height:calc(100vh - 16px);border-radius:14px 0 0 14px;box-shadow:-8px 0 34px rgba(15,23,42,.26);transition:right .12s cubic-bezier(.25,.46,.45,.94)}
.mine-private{font-size:10.5px;color:#99f6e4;background:rgba(20,184,166,.18);border:1px solid rgba(45,212,191,.35);border-radius:999px;padding:1px 8px;white-space:nowrap}
.mine-tabs{display:flex;gap:6px;padding:8px 10px;background:#eef2f7;border-bottom:1px solid #cbd5e1}
.mine-tab{flex:1;border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:9px;padding:7px 8px;font-weight:700;font-size:12.5px;cursor:pointer}
.mine-tab.active{background:#0f766e;border-color:#0f766e;color:#fff}
.mine-count{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;background:rgba(15,23,42,.08);font-size:10.5px;line-height:17px}
.mine-tab.active .mine-count{background:rgba(255,255,255,.25)}
.mine-count:empty{display:none}
.mine-view{display:flex;flex-direction:column;min-height:0}
.mine-view[hidden]{display:none}
.mine-add{padding:9px 10px;border-bottom:1px solid #e2e8f0;display:flex;flex-direction:column;gap:6px}
.mine-add input[type=text],.mine-add textarea,.mine-filters input,.mine-filters select,.mine-add-row select,.mine-add-row input,.mine-note-new input{border:1px solid #cbd5e1;border-radius:8px;padding:6px 8px;font:inherit;font-size:12.5px;background:#fff;color:#0f172a;min-width:0}
.mine-add textarea{resize:vertical}
.mine-add-row{display:flex;gap:6px;align-items:center}
.mine-add-row input[type=date]{flex:1}
.mine-icon-btn{border:1px solid #cbd5e1;background:#fff;border-radius:8px;padding:5px 8px;cursor:pointer;color:#475569}
.mine-icon-btn.on{background:#ccfbf1;border-color:#14b8a6;color:#0f766e}
.mine-add-btn{border:0;background:#0f766e;color:#fff;border-radius:8px;padding:6px 12px;font-weight:700;font-size:12.5px;cursor:pointer;white-space:nowrap}
.mine-add-btn:hover{background:#115e59}
.mine-filters{display:flex;gap:6px;padding:8px 10px;align-items:center;flex-wrap:wrap}
.mine-filters input{flex:1 1 90px}
.mine-seg{display:inline-flex;border:1px solid #cbd5e1;border-radius:8px;overflow:hidden}
.mine-seg button{border:0;background:#fff;padding:5px 9px;font-size:12px;font-weight:600;color:#475569;cursor:pointer}
.mine-seg button+button{border-left:1px solid #cbd5e1}
.mine-seg button.on{background:#0f766e;color:#fff}
.mine-body{overflow-y:auto;height:min(46vh,380px);   /* fixed height: the tray opens at its final size, so it never moves when tasks / notes load */background:#dfe6ef;box-shadow:inset 0 1px 3px rgba(15,23,42,.10);padding:8px 10px;overscroll-behavior:contain}
.mine-empty{color:#64748b;text-align:center;padding:22px 6px;font-size:12.5px}
.mine-list{list-style:none;margin:0;padding:0}
.mine-task{display:flex;gap:8px;align-items:flex-start;background:#fff;border-radius:9px;padding:8px 9px;margin-bottom:7px;box-shadow:0 1px 2px rgba(15,23,42,.10);border-left:4px solid #f59e0b}
.mine-task.p-high{border-left-color:#dc2626}
.mine-task.p-low{border-left-color:#94a3b8}
.mine-task.is-done{opacity:.6}
.mine-task.is-done .mine-task-title{text-decoration:line-through}
.mine-check{width:20px;height:20px;flex:0 0 20px;margin-top:1px;border:2px solid #94a3b8;border-radius:6px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;padding:0}
.mine-task.is-done .mine-check{background:#16a34a;border-color:#16a34a}
.mine-task-main{flex:1;min-width:0}
.mine-task-title{font-weight:600;color:#0f172a;word-break:break-word}
.mine-task-notes{font-size:12px;color:#475569;white-space:pre-wrap;word-break:break-word;margin-top:2px}
.mine-badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.mine-badge{font-size:10px;font-weight:800;letter-spacing:.03em;border-radius:999px;padding:1px 7px;background:#f1f5f9;color:#475569;border:1px solid #e2e8f0}
.mine-badge.b-high{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.mine-badge.b-medium{background:#fef3c7;color:#b45309;border-color:#fde68a}
.mine-badge.b-low{background:#f1f5f9;color:#475569}
.mine-badge.b-overdue{background:#dc2626;color:#fff;border-color:#dc2626}
.mine-badge.b-today{background:#0f766e;color:#fff;border-color:#0f766e}
.mine-task-acts{display:flex;flex-direction:column;gap:2px}
.mine-task-acts button{border:0;background:transparent;color:#94a3b8;cursor:pointer;padding:2px 4px;border-radius:6px;font-size:13px}
.mine-task-acts button:hover{color:#0f766e;background:#f0fdfa}
.mine-task-acts .del:hover{color:#dc2626;background:#fef2f2}
.mine-edit{display:flex;flex-direction:column;gap:6px;width:100%}
.mine-edit input,.mine-edit textarea,.mine-edit select{border:1px solid #cbd5e1;border-radius:8px;padding:5px 7px;font:inherit;font-size:12.5px;min-width:0}
.mine-edit .row-btns{display:flex;gap:6px;justify-content:flex-end}
.mine-btn-cancel{border:1px solid #fecaca;background:#fee2e2;color:#b91c1c;border-radius:8px;padding:5px 10px;font-weight:700;font-size:12px;cursor:pointer}
.mine-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;background:#eef2f7;border-top:1px solid #cbd5e1;font-size:11.5px;color:#64748b}
.mine-link{border:0;background:transparent;color:#dc2626;font-weight:700;font-size:11.5px;cursor:pointer;padding:0}
.mine-note-new{display:flex;gap:6px;padding:9px 10px;border-bottom:1px solid #e2e8f0}
.mine-note-new input{flex:1}
.mine-notes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mine-note{position:relative;border-radius:4px 4px 4px 14px;padding:8px 8px 6px;min-height:118px;display:flex;flex-direction:column;box-shadow:0 2px 6px rgba(15,23,42,.18);color:#1f2937}
.mine-note.c-yellow{background:#fef08a}.mine-note.c-pink{background:#fbcfe8}.mine-note.c-blue{background:#bfdbfe}.mine-note.c-green{background:#bbf7d0}.mine-note.c-purple{background:#ddd6fe}
.mine-note textarea{flex:1;border:0;background:transparent;resize:none;font:inherit;font-size:12.5px;line-height:1.35;color:#1f2937;min-height:74px;outline:none;padding:0}
.mine-note-bar{display:flex;align-items:center;gap:3px;margin-top:4px}
.mine-dot{width:13px;height:13px;border-radius:50%;border:1px solid rgba(15,23,42,.25);cursor:pointer;padding:0}
.mine-dot.c-yellow{background:#fde047}.mine-dot.c-pink{background:#f472b6}.mine-dot.c-blue{background:#60a5fa}.mine-dot.c-green{background:#4ade80}.mine-dot.c-purple{background:#a78bfa}
.mine-note-bar .sp{flex:1}
.mine-note-bar button.ic{border:0;background:transparent;cursor:pointer;color:rgba(15,23,42,.55);padding:1px 3px;font-size:12px;border-radius:5px}
.mine-note-bar button.ic:hover{color:#0f172a;background:rgba(255,255,255,.45)}
.mine-note-bar button.ic.on{color:#0f766e}
.mine-note-time{font-size:9.5px;color:rgba(15,23,42,.5)}
.mine-msg{font-size:11.5px;padding:0 10px;color:#b91c1c;min-height:0}
.mine-msg:not(:empty){padding:5px 10px;background:#fef2f2;border-top:1px solid #fecaca}
@media (max-width:420px){.mine-notes{grid-template-columns:1fr}}
[data-bs-theme="dark"] .mine-tabs,[data-bs-theme="dark"] .mine-foot{background:var(--sf2);border-color:var(--ln2)}
[data-bs-theme="dark"] .mine-tab,[data-bs-theme="dark"] .mine-seg button,[data-bs-theme="dark"] .mine-icon-btn{background:var(--sf3);border-color:var(--ln2);color:var(--tx)}
[data-bs-theme="dark"] .mine-tab.active,[data-bs-theme="dark"] .mine-seg button.on{background:#0f766e;border-color:#14b8a6;color:#fff}
[data-bs-theme="dark"] .mine-add,[data-bs-theme="dark"] .mine-note-new{border-color:var(--ln2)}
[data-bs-theme="dark"] .mine-add input[type=text],[data-bs-theme="dark"] .mine-add textarea,[data-bs-theme="dark"] .mine-filters input,[data-bs-theme="dark"] .mine-filters select,[data-bs-theme="dark"] .mine-add-row select,[data-bs-theme="dark"] .mine-add-row input,[data-bs-theme="dark"] .mine-note-new input,[data-bs-theme="dark"] .mine-edit input,[data-bs-theme="dark"] .mine-edit textarea,[data-bs-theme="dark"] .mine-edit select{background:var(--sf3);border-color:var(--ln2);color:var(--tx);color-scheme:dark}
[data-bs-theme="dark"] .mine-body{background:var(--sf);box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
[data-bs-theme="dark"] .mine-task{background:var(--sf3);box-shadow:0 1px 2px rgba(0,0,0,.4)}
[data-bs-theme="dark"] .mine-task-title{color:var(--tx)}
[data-bs-theme="dark"] .mine-task-notes,[data-bs-theme="dark"] .mine-empty,[data-bs-theme="dark"] .mine-foot{color:#94a3b8}
[data-bs-theme="dark"] .mine-check{background:var(--sf2);border-color:#64748b}
[data-bs-theme="dark"] .mine-badge{background:#1e293b;border-color:#334155;color:#cbd5e1}
[data-bs-theme="dark"] .mine-badge.b-high{background:#450a0a;border-color:#7f1d1d;color:#fca5a5}
[data-bs-theme="dark"] .mine-badge.b-medium{background:#451a03;border-color:#78350f;color:#fcd34d}
[data-bs-theme="dark"] .mine-task-acts button:hover{background:#134e4a;color:#5eead4}
[data-bs-theme="dark"] .mine-msg:not(:empty){background:#450a0a;border-color:#7f1d1d;color:#fca5a5}
/* appointments inside the to-do list, and the day headings */
.mine-day{list-style:none;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#475569;margin:8px 2px 5px}
.mine-day:first-child{margin-top:0}
.mine-task.is-appt{border-left-color:#7c3aed;background:#faf5ff}
.mine-appt-ic{width:20px;flex:0 0 20px;color:#7c3aed;font-size:15px;line-height:1;margin-top:1px;text-align:center}
.mine-badge.b-appt{background:#ede9fe;color:#6d28d9;border-color:#ddd6fe}
.mine-task-acts a{color:#94a3b8;padding:2px 4px;border-radius:6px;font-size:13px}
.mine-task-acts a:hover{color:#7c3aed;background:#f5f3ff}
[data-bs-theme="dark"] .mine-day{color:#94a3b8}
[data-bs-theme="dark"] .mine-task.is-appt{background:#1e1b2e}
[data-bs-theme="dark"] .mine-appt-ic{color:#a78bfa}
[data-bs-theme="dark"] .mine-badge.b-appt{background:#2e1065;color:#c4b5fd;border-color:#4c1d95}
/* ===== Forms (builder, list, public form) ===== */
.form-card{border-top:4px solid #7c3aed}
.fb-head-card{border-top:6px solid var(--brand)}
.fb-q{border-left:4px solid var(--brand)}
.fb-q.is-heading{border-left-color:#7c3aed;background:#faf5ff}
.fb-q .fb-num{min-width:2.4rem}
.public-form .pf-heading{border-bottom:2px solid #e2e8f0;padding-bottom:4px}
[data-bs-theme="dark"] .fb-q.is-heading{background:#1e1b2e}
[data-bs-theme="dark"] .public-form .pf-heading{border-color:var(--ln2)}
/* anti-spam field: invisible to people, bots fill it in */
.hp,.public-form .hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
/* pay page: paying to a personal bKash / Nagad / Rocket / Upay number */
.pay-manual{display:block;cursor:default}.pay-manual>summary{list-style:none;cursor:pointer}.pay-manual>summary::-webkit-details-marker{display:none}
.pay-manual[open]>summary .bi-chevron-down{transform:rotate(180deg)}.pm-number{font-family:ui-monospace,monospace;font-weight:800;font-size:1.05rem;letter-spacing:.03em}

/* Invoice form – "How can the customer pay?": tap tiles to tick one or more ways to pay */
/* every tile the same size whatever is written in it: equal columns, one fixed height, the name on one line and the
   description on at most two (cut with "…" – the full text shows on hover) */
.payways{display:grid;grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));grid-auto-rows:4.6rem;gap:.5rem}
.payway{position:relative;display:flex;align-items:center;gap:.65rem;margin:0;height:100%;min-width:0;overflow:hidden;padding:.55rem 2rem .55rem .75rem;border:1.5px solid var(--bs-border-color);border-radius:.85rem;background:var(--bs-body-bg);cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s;user-select:none}
.payway:hover{border-color:var(--brand-300,#93c5fd)}
.payway .pw-icon{font-size:1.3rem;width:1.5rem;text-align:center;color:var(--bs-secondary-color);flex-shrink:0}
.payway .pw-text{display:flex;flex-direction:column;justify-content:center;gap:.1rem;min-width:0;flex:1;line-height:1.25}
.payway .pw-name{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.payway .pw-hint{font-size:.72rem;color:var(--bs-secondary-color);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal;word-break:break-word}
.payway .pw-tick{position:absolute;top:.45rem;right:.5rem;font-size:1rem;color:var(--brand);opacity:0;transform:scale(.6);transition:opacity .12s,transform .12s}
.btn-check:checked+.payway{border-color:var(--brand);background:var(--brand-50,#eff6ff);box-shadow:0 0 0 1px var(--brand) inset}
.btn-check:checked+.payway .pw-icon{color:var(--brand)}
.btn-check:checked+.payway .pw-tick{opacity:1;transform:none}
.btn-check:focus-visible+.payway{box-shadow:0 0 0 .2rem var(--ring)}
#payWaysCard.payways-empty .payway{border-color:#fca5a5}
[data-bs-theme="dark"] .btn-check:checked+.payway{background:rgba(59,130,246,.14)}
@media (max-width:575.98px){.payways{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(7rem,max-content)}.payway{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.25rem;padding:.6rem 1.7rem .55rem .65rem}.payway .pw-icon{font-size:1.15rem;width:auto}.payway .pw-text{flex:0 1 auto;width:100%}}

/* Customer finder: customers who are only in Stripe / Ryft (added here when chosen) */
.cpick-group{padding:.45rem .75rem .25rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--bs-secondary-color);border-top:1px solid var(--bs-border-color)}
.cpick-item.cpick-remote .cpick-name::after{content:"+";display:inline-block;margin-left:.4rem;padding:0 .35rem;border-radius:.4rem;font-size:.7rem;font-weight:700;background:var(--brand-50,#eff6ff);color:var(--brand)}

/* Client's appointment page (appt/{token}) */
.appt-public .appt-facts{display:flex;flex-direction:column;gap:.85rem}
.appt-public .appt-fact{display:flex;gap:.75rem;align-items:flex-start;line-height:1.35}
.appt-public .appt-fact>i{font-size:1.2rem;color:var(--brand);width:1.4rem;flex-shrink:0;margin-top:.05rem}
.appt-public .appt-cal-main{font-weight:600;border-radius:.85rem;padding:.8rem 1rem}
.appt-public .appt-cal .btn-outline-secondary{border-radius:.75rem}

/* Pay page: choose Ryft or Stripe when the invoice offers both */
.pay-method>span small{display:block;font-weight:400;font-size:.78rem;color:var(--bs-secondary-color)}
.pay-method>i:first-child{font-size:1.35rem;color:var(--brand)}

/* Digital access (customer page) */
.vault-field { min-height: 1.6rem; }
.vault-field .vault-name { flex: 0 0 6.5rem; }
.vault-field .vault-val { letter-spacing: .05em; white-space: pre-wrap; }
.vault-field .vault-val.vault-shown { background: rgba(250, 204, 21, .18); border-radius: .25rem; padding: 0 .3rem; letter-spacing: 0; user-select: all; }
.vault-field .vault-timer { font-variant-numeric: tabular-nums; min-width: 2rem; text-align: right; }
.vault-field .btn-link { line-height: 1; }

/* Customer page: every section in one set of tabs – a row of equal buttons (icon above the name), four per row on phones */
.cust-tabs{display:grid;grid-template-columns:repeat(var(--ct-n),minmax(0,1fr));gap:.4rem;border-bottom:0;margin-bottom:.5rem !important}
.cust-tabs .nav-item{min-width:0}
.cust-tabs .nav-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;width:100%;height:100%;padding:.55rem .3rem;border:1px solid var(--bs-border-color) !important;border-radius:.65rem !important;background:var(--bs-body-bg);font-size:.82rem;line-height:1.3;text-align:center;position:relative;color:var(--bs-body-color)}
.cust-tabs .nav-link{--ct:var(--ct-c,var(--brand));--ctb:color-mix(in srgb,var(--ct) 9%,#fff);border-color:color-mix(in srgb,var(--ct) 35%,#fff) !important;background:linear-gradient(135deg,var(--ctb) 0%,var(--bs-body-bg) 90%)}
/* dark theme: the same idea as the Dashboard tiles – a deep tint of the colour on the dark surface, light text */
[data-bs-theme="dark"] .cust-tabs .nav-link{--ctb:color-mix(in srgb,var(--ct) 22%,#111827);border-color:color-mix(in srgb,var(--ct) 45%,#111827) !important;background:linear-gradient(135deg,var(--ctb) 0%,var(--sf) 90%);color:var(--tx)}
[data-bs-theme="dark"] .cust-tabs .nav-link .bi{color:color-mix(in srgb,var(--ct) 55%,#fff)}
.cust-tabs .nav-link .bi{color:var(--ct)}
.cust-tabs .nav-link:hover{border-color:var(--ct) !important}
.cust-tabs .nav-link .bi{font-size:1.2rem}
.cust-tabs .nav-link.active,[data-bs-theme="dark"] .cust-tabs .nav-link.active{background:var(--ct) !important;border-color:var(--ct) !important;color:#fff !important;font-weight:600;box-shadow:0 4px 12px color-mix(in srgb,var(--ct) 35%,transparent)}
.cust-tabs .nav-link.active .bi,[data-bs-theme="dark"] .cust-tabs .nav-link.active .bi{color:#fff}
.cust-tabs .badge{position:absolute;top:.2rem;right:.3rem;font-size:.68rem;padding:.2em .45em;font-weight:700;border-radius:1rem;background:var(--ct) !important;color:#fff !important}
.cust-tabs .nav-link.active .badge{background:#fff !important;color:var(--ct) !important}
.cust-tabs .ct-label{display:none}
.cust-tabs .ct-short{display:block;max-width:100%;overflow-wrap:anywhere}
.cust-panes{border-top:3px solid var(--cp-c,var(--bs-border-color)) !important;border-radius:var(--bs-card-border-radius) !important}
.cust-panes > .tab-pane > .card{border:0;margin:0 !important;box-shadow:none;background:transparent}
.cust-panes > .tab-pane > .card > .card-header{background:transparent}
@media (min-width:1200px){
  .cust-tabs .ct-label{display:block;max-width:100%}
  .cust-tabs .ct-short{display:none}
}
@media (max-width:575.98px){
  .cust-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cust-tabs .nav-link{font-size:.78rem;padding:.5rem .2rem}
}

/* Document viewer (every page): previous / next, crop box */
#ceposViewer .doc-viewer-body{position:relative;padding:12px 56px}
#ceposViewer .cv-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
#ceposViewer .cv-stage img{display:block;transition:transform .2s ease;box-shadow:0 8px 30px rgba(0,0,0,.4);background:#fff;user-select:none;-webkit-user-drag:none}
#ceposViewer .cv-stage iframe{width:100%;height:100%;border:0;background:#fff;border-radius:.4rem;transition:transform .2s ease}
#ceposViewer .cv-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#0f172a;font-size:1.25rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.35)}
#ceposViewer .cv-nav:disabled{opacity:.3}
#ceposViewer .cv-nav[hidden]{display:none}
#ceposViewer .cv-prev{left:8px}
#ceposViewer .cv-next{right:8px}
#ceposViewer .cv-foot{display:flex;align-items:center;gap:.75rem;padding:.45rem 1rem;min-height:2.6rem}
#ceposViewer .cv-count{font-weight:600;font-variant-numeric:tabular-nums;min-width:3rem}
#ceposViewer [data-cv="crop"][hidden]{display:none}
.cv-crop-area{position:absolute;z-index:2;cursor:crosshair;touch-action:none}
.cv-crop-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.55);cursor:move;outline:1px dashed rgba(0,0,0,.6)}
.cv-crop-box i{position:absolute;width:18px;height:18px;background:#fff;border:2px solid var(--brand);border-radius:4px}
.cv-crop-box i[data-h="nw"]{left:-9px;top:-9px;cursor:nwse-resize}
.cv-crop-box i[data-h="ne"]{right:-9px;top:-9px;cursor:nesw-resize}
.cv-crop-box i[data-h="sw"]{left:-9px;bottom:-9px;cursor:nesw-resize}
.cv-crop-box i[data-h="se"]{right:-9px;bottom:-9px;cursor:nwse-resize}
@media (max-width:575.98px){
  #ceposViewer .doc-viewer-body{padding:8px 8px 56px}
  #ceposViewer .cv-nav{top:auto;bottom:8px;transform:none}
  #ceposViewer .cv-prev{left:calc(50% - 50px)}
  #ceposViewer .cv-next{right:calc(50% - 50px)}
  .cv-crop-box i{width:24px;height:24px}
  .cv-crop-box i[data-h="nw"],.cv-crop-box i[data-h="sw"]{left:-12px}
  .cv-crop-box i[data-h="ne"],.cv-crop-box i[data-h="se"]{right:-12px}
  .cv-crop-box i[data-h="nw"],.cv-crop-box i[data-h="ne"]{top:-12px}
  .cv-crop-box i[data-h="sw"],.cv-crop-box i[data-h="se"]{bottom:-12px}
}

/* Expenses: bills to pay later */
.exp-row.exp-late{background:color-mix(in srgb,#dc2626 6%,transparent)}
.exp-files{text-decoration:none;font-weight:600}
.exp-status .btn{font-weight:600}
.exp-paidbill,.exp-paidnote{color:var(--bs-secondary-color);margin-top:.15rem}
.exp-paidnote{white-space:pre-wrap}
@media (min-width:992px){.report-tiles.exp-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:991.98px){.report-tiles.exp-tiles>.kpi:last-child{grid-column:1 / -1}}
@media (max-width:575.98px){
  #ceposViewer .modal-header{flex-wrap:wrap;row-gap:.5rem}
  #ceposViewer .modal-header .min-w-0{flex:1 1 0;order:1}
  #ceposViewer .modal-header .btn-close{order:2}
  #ceposViewer .doc-viewer-tools{order:3;width:100%;justify-content:center}
  #ceposViewer .doc-viewer-tools .btn{flex:1 1 0;padding:.4rem}
}


/* flex children that may shrink below their content (long names, emails) instead of widening the page */
.min-w-0{min-width:0 !important}

/* Invoice form: extra charges & payment fees */
.extra-opt{border:1px solid var(--bs-border-color);border-radius:.6rem;padding:.4rem .7rem .4rem 2rem;background:var(--bs-body-bg)}
.extra-opt:has(input:checked){border-color:var(--brand);background:var(--brand-50)}
.fee-table td{min-width:5rem}

/* Invoice form: add a product by typing (Enter adds the highlighted one) */
.pfind{position:relative;width:min(26rem,100%)}
.pfind-list{position:absolute;z-index:1060;top:calc(100% + 4px);left:0;right:0;max-height:min(22rem,55vh);overflow-y:auto;background:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:.6rem;box-shadow:0 10px 30px rgba(15,23,42,.18)}
.pfind-item{display:flex;justify-content:space-between;gap:.75rem;padding:.5rem .75rem;cursor:pointer;font-size:.9rem;border-bottom:1px solid var(--bs-border-color-translucent)}
.pfind-item:last-child{border-bottom:0}
.pfind-item.active,.pfind-item:hover{background:var(--brand-50)}
.pfind-name{min-width:0;overflow-wrap:anywhere}
.pfind-price{font-weight:600;white-space:nowrap}
.pfind-none{padding:.5rem .75rem;font-size:.85rem;color:var(--bs-secondary-color)}
.item-row.pfind-flash>td{background:color-mix(in srgb,#16a34a 14%,transparent) !important;transition:background .3s}
@media (max-width:575.98px){.pfind{width:100%}}

/* Barcode camera (assets/scanner.js) */
.scan-modal .modal-dialog{max-width:min(560px,96vw)}
.scan-stage{position:relative;background:#000;aspect-ratio:4/3;overflow:hidden}
.scan-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;left:12%;right:12%;top:30%;bottom:30%;border:3px solid rgba(255,255,255,.9);border-radius:.75rem;box-shadow:0 0 0 9999px rgba(0,0,0,.35);pointer-events:none}
.scan-frame::after{content:"";position:absolute;left:6%;right:6%;top:50%;height:2px;background:#ef4444;box-shadow:0 0 8px #ef4444;animation:scanline 1.6s ease-in-out infinite alternate}
@keyframes scanline{from{transform:translateY(-38px)}to{transform:translateY(38px)}}
.scan-msg{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);max-width:92%;padding:.35rem .8rem;border-radius:2rem;background:rgba(15,23,42,.8);color:#fff;font-size:.9rem;text-align:center}
.scan-msg:empty{display:none}
.scan-msg.good{background:rgba(22,163,74,.92)}
.scan-msg.bad{background:rgba(220,38,38,.92)}
@media (prefers-reduced-motion:reduce){.scan-frame::after{animation:none}}

/* Settings → Features → Barcodes: compatible scanners */
.scanner-compat summary{cursor:pointer;list-style:none;display:inline-block}
.scanner-compat summary::-webkit-details-marker{display:none}
.scanner-compat[open] summary{margin-bottom:.25rem}
.scanner-compat li{margin-bottom:.2rem}

/* Support tickets */
.ticket-st,.ticket-pr{font-weight:600}
.ticket-st-new{background:#2563eb;color:#fff}
.ticket-st-open{background:#0891b2;color:#fff}
.ticket-st-waiting{background:#d97706;color:#fff}
.ticket-st-on_hold{background:#6b7280;color:#fff}
.ticket-st-resolved{background:#16a34a;color:#fff}
.ticket-st-closed{background:#334155;color:#fff}
.ticket-pr-low{background:color-mix(in srgb,#64748b 16%,var(--bs-body-bg));color:var(--bs-body-color)}
.ticket-pr-normal{background:color-mix(in srgb,#2563eb 14%,var(--bs-body-bg));color:var(--bs-body-color)}
.ticket-pr-high{background:color-mix(in srgb,#d97706 22%,var(--bs-body-bg));color:var(--bs-body-color)}
.ticket-pr-urgent{background:#dc2626;color:#fff}
.ticket-row.ticket-late{box-shadow:inset 4px 0 0 #dc2626;background:color-mix(in srgb,#dc2626 6%,transparent)}
.ticket-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:#2563eb;margin-right:.4rem;vertical-align:middle}
.ticket-target-late{color:#dc2626;font-weight:600}
.ticket-target-due{color:var(--bs-secondary-color)}
.ticket-target-ok{color:#16a34a}
.ticket-thread{display:flex;flex-direction:column;gap:.75rem}
.tmsg{max-width:88%;border-radius:.9rem;padding:.6rem .85rem;border:1px solid var(--bs-border-color)}
.tmsg-client{align-self:flex-start;background:var(--bs-tertiary-bg)}
.tmsg-staff{align-self:flex-end;background:color-mix(in srgb,var(--brand) 9%,var(--bs-body-bg));border-color:color-mix(in srgb,var(--brand) 30%,var(--bs-body-bg))}
.tmsg-note{align-self:flex-end;background:color-mix(in srgb,#eab308 14%,var(--bs-body-bg));border-color:color-mix(in srgb,#eab308 45%,var(--bs-body-bg));border-style:dashed}
.tmsg-head{color:var(--bs-secondary-color);margin-bottom:.2rem}
.tmsg-body{white-space:normal;overflow-wrap:anywhere}
.tmsg-file{display:inline-flex;align-items:center;gap:.35rem;margin:.35rem .4rem 0 0;padding:.2rem .55rem;border:1px solid var(--bs-border-color);border-radius:2rem;font-size:.85rem;text-decoration:none;background:var(--bs-body-bg)}
#reply.ticket-note-mode{border-color:color-mix(in srgb,#eab308 55%,var(--bs-body-bg))}
.support-urgent{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.support-urgent .btn{padding:.7rem .5rem;font-weight:600}
@media (max-width:575.98px){.support-urgent{grid-template-columns:1fr}.tmsg{max-width:100%}}
/* Support ticket – Time & parts (tints mix with the page background, so they read in light and dark theme) */
.work-badge{font-weight:600;text-decoration:none;color:var(--bs-body-color)}
.work-badge-open{background:color-mix(in srgb,#d97706 22%,var(--bs-body-bg))}
.work-badge-invoiced{background:color-mix(in srgb,#4f46e5 20%,var(--bs-body-bg))}
.work-badge-waived{background:color-mix(in srgb,#16a34a 20%,var(--bs-body-bg))}
.work-line.work-waived{background:color-mix(in srgb,#16a34a 4%,transparent)}
.ticket-bill{background:color-mix(in srgb,#4f46e5 5%,var(--bs-body-bg))}
.ticket-bill .bill-line{padding:.35rem 0;border-bottom:1px dashed var(--bs-border-color);cursor:pointer}
.ticket-bill .bill-line:last-of-type{border-bottom:0}
.js-ticket-timer .js-timer-label{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- Support pages for clients (layouts/support.php)
   Website-style: white top bar, banner in your colours with an accent line, cards, dark footer. Always light theme. */
body.sp{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;background:#f3f6fc;color:#1e2a3e;min-height:100vh;display:flex;flex-direction:column}
.sp-container{max-width:1280px;margin:0 auto;padding:0 32px;width:100%}
.sp-narrow{max-width:900px}
.sp-top{background:#fff;border-bottom:1px solid #dce4f2}
.sp-top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:96px;padding-top:10px;padding-bottom:10px}
.sp-logo{height:72px;width:auto;object-fit:contain}
.sp-logo-text{font-weight:700;font-size:1.35rem;color:var(--sp-dark)}
.sp-logo-link{text-decoration:none}
.sp-top-nav{display:flex;align-items:center;gap:24px}
.sp .sp-top-nav a{display:inline-flex;align-items:center;gap:8px;color:var(--sp-dark);text-decoration:none;font-weight:500}
.sp-top-nav a:hover{color:var(--sp-primary)}
.sp-hero{color:#fff;text-align:center;padding:56px 0 48px;border-bottom:4px solid var(--sp-accent);
  background:radial-gradient(ellipse at top right,color-mix(in srgb,var(--sp-primary) 85%,#fff 15%),transparent 65%),linear-gradient(120deg,var(--sp-dark),color-mix(in srgb,var(--sp-primary) 70%,var(--sp-dark)))}
.sp-hero h1{font-weight:700;letter-spacing:-.02em;font-size:clamp(1.8rem,4.2vw,2.6rem);margin:0 0 .6rem;overflow-wrap:anywhere}
.sp-kicker{text-transform:uppercase;letter-spacing:1px;font-size:.8rem;font-weight:600;color:var(--sp-accent);margin-bottom:.5rem}
.sp-hero-text{color:#e1e9f8;font-size:1.05rem;max-width:640px;margin:0 auto 1.1rem}
.sp-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.sp-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:500;font-size:.92rem;text-decoration:none}
.sp a.sp-chip{color:#fff}
.sp a.sp-chip:hover{background:rgba(255,255,255,.24);color:#fff}
.sp-main{flex:1;padding:40px 0 56px}
.sp .pay-card{border:1px solid #dce4f2;border-radius:16px;box-shadow:0 18px 60px rgba(7,30,80,.08);background:#fff}
.sp .pay-card.sp-card-main{border-top:4px solid var(--sp-accent)}
.sp .sp-intro{border-left:4px solid var(--sp-accent);background:#f3f6fc;border-radius:12px;padding:14px 18px;color:#334155;margin-bottom:1.25rem}
.sp h2,.sp .h5{color:var(--sp-dark);font-weight:700}
.sp .form-label{font-weight:600;color:var(--sp-dark)}
.sp .form-control,.sp .form-select{border-radius:10px;border-color:#cfd9ea;padding:.65rem .85rem}
.sp .form-control:focus,.sp .form-select:focus{border-color:var(--sp-primary);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--sp-primary) 22%,transparent)}
.sp .btn-brand{background:var(--sp-primary);border-color:var(--sp-primary);color:#fff;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:.75rem 1.6rem}
.sp .btn-brand:hover{background:color-mix(in srgb,var(--sp-primary) 82%,#000);border-color:color-mix(in srgb,var(--sp-primary) 82%,#000);transform:translateY(-1px);box-shadow:0 10px 20px -5px color-mix(in srgb,var(--sp-primary) 40%,transparent)}
.sp .support-urgent .btn{border-radius:12px;border-width:2px;padding:.9rem .6rem}
.sp .list-group-item{border-color:#dce4f2}
.sp .list-group-item-action:hover{background:#f3f6fc}
.sp .tmsg-staff{background:color-mix(in srgb,var(--sp-primary) 8%,#fff);border-color:color-mix(in srgb,var(--sp-primary) 28%,#fff)}
.sp .tmsg-client{background:#f3f6fc;border-color:#dce4f2}
.sp a{color:var(--sp-primary)}
.sp-foot{background:color-mix(in srgb,var(--sp-dark) 92%,#000);color:#e1e9f8;padding:44px 0 24px;font-size:.95rem}
.sp-has-wa .sp-foot{padding-bottom:96px}   /* room for the floating WhatsApp button */
.sp .sp-foot a{color:#d5e1f7;text-decoration:none;display:block;margin-bottom:6px}
.sp .sp-foot a:hover{color:var(--sp-accent)}
.sp-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.sp-foot-logo{height:56px;width:auto;object-fit:contain;margin-bottom:10px}
.sp-foot-name{font-weight:700;color:#fff}
.sp-foot-muted{color:#a9bad8;font-size:.88rem}
.sp-foot-h{font-weight:700;color:#fff;margin-bottom:10px}
.sp-foot-addr{display:block;margin-top:8px;color:#d5e1f7}
.sp-foot-bottom{border-top:1px solid rgba(213,225,247,.18);margin-top:28px;padding-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;color:#a9bad8;font-size:.85rem}
.sp .sp-foot-bottom a{display:inline;margin:0;color:#a9bad8}
.sp-wa-float{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:50;text-decoration:none}
.sp-wa-float:hover{color:#fff;transform:translateY(-2px)}
@media (max-width:991.98px){.sp-foot-grid{grid-template-columns:1fr 1fr}.sp-foot-brand{grid-column:1/-1}}
@media (max-width:600px){
  .sp-container{padding:0 18px}
  .sp-top-in{min-height:72px}
  .sp-logo{height:56px}
  .sp-top-nav{gap:14px}
  .sp-top-phone span{display:none}
  .sp-top-phone{font-size:1.15rem}
  .sp-hero{padding:36px 0 32px}
  .sp-hero-text{font-size:.98rem}
  .sp-chip{padding:7px 12px;font-size:.85rem}
  .sp-main{padding:24px 0 80px}
  .sp .pay-card .card-body{padding:1.15rem!important}
  .sp-foot-grid{grid-template-columns:1fr;gap:20px}
  .sp-foot-bottom{flex-direction:column}
}