/* App shell: light collapsible sidebar + top bar (search, create, wallet, notifications, account).
   Built on the Clearwave tokens (--cw-*) so light and dark themes both work. */
:root {
  --sb-side: 256px; --sb-side-folded: 70px; --sb-top: 64px;
  --sb-hover: rgba(15, 118, 110, .07); --sb-active: var(--cw-seafoam-soft);
  --svc-web: #db2777; --svc-domain: #0f766e; --svc-mail: #7c3aed; --svc-inbox: #0369a1; --svc-leads: #d97706;
  --svc-email: #8b5cf6; --svc-sms: #0ea5e9; --svc-wa: #16a34a; --svc-smm: #14b8a6;
  --tone-info: #0369a1; --tone-info-bg: #e0f2fe; --tone-success: #047857; --tone-success-bg: #d1fae5;
  --tone-warning: #b45309; --tone-warning-bg: #fef3c7; --tone-danger: #b91c1c; --tone-danger-bg: #fee2e2;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
[data-theme="dark"] {
  --sb-hover: rgba(45, 212, 191, .08);
  --svc-web: #f472b6; --svc-domain: #2dd4bf; --svc-mail: #a78bfa; --svc-inbox: #7dd3fc; --svc-leads: #fbbf24;
  --svc-email: #c4b5fd; --svc-sms: #38bdf8; --svc-wa: #4ade80; --svc-smm: #5eead4;
  --tone-info: #7dd3fc; --tone-info-bg: #0b2e42; --tone-success: #6ee7b7; --tone-success-bg: #0b3b2c;
  --tone-warning: #fbbf24; --tone-warning-bg: #3b2a0a; --tone-danger: #fca5a5; --tone-danger-bg: #3d1414;
}

.sb-app { display: grid; grid-template-columns: var(--sb-side) minmax(0, 1fr); min-height: 100vh; background: var(--cw-bg); transition: grid-template-columns .2s ease; }
.sb-app.folded { grid-template-columns: var(--sb-side-folded) minmax(0, 1fr); }
.sb-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ---------------- sidebar ---------------- */
.sb-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--cw-surface); border-right: 1px solid var(--cw-line); z-index: 1030; }
.sb-brand { display: flex; align-items: center; gap: 8px; height: var(--sb-top); padding: 0 10px 0 14px; border-bottom: 1px solid var(--cw-line); flex: none; }
.sb-brand a { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: var(--cw-ink); text-decoration: none; }
.sb-brand img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.sb-brand b { font-size: 15.5px; font-weight: 700; white-space: nowrap; letter-spacing: -.01em; }
.sb-brand b em { font-style: normal; color: var(--cw-teal); }
.sb-fold { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--cw-ink-faint); border: 1px solid transparent; background: none; flex: none; }
.sb-fold:hover { background: var(--sb-hover); color: var(--cw-ink); border-color: var(--cw-line); }
.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 10px 14px; scrollbar-width: thin; }
.sb-sec { margin-top: 14px; }
.sb-sec-h { padding: 0 10px; margin: 0 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cw-ink-faint); white-space: nowrap; }
.sb-link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 0; background: none; color: var(--cw-ink-soft); font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap; text-align: left; position: relative; }
.sb-link:hover { background: var(--sb-hover); color: var(--cw-ink); }
.sb-link.active { background: var(--sb-active); color: var(--cw-teal); font-weight: 600; }
.sb-link > .bi { font-size: 17px; width: 20px; text-align: center; flex: none; }
.sb-link .sb-l { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sb-link .sb-chev { font-size: 11px; transition: transform .15s; color: var(--cw-ink-faint); }
.sb-link[aria-expanded="true"] .sb-chev { transform: rotate(90deg); }
.sb-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--cw-teal); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
[data-theme="dark"] .sb-count { color: #05221d; }
.sb-count.warn { background: var(--tone-warning-bg); color: var(--tone-warning); }
.sb-tag { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--tone-success-bg); color: var(--tone-success); }
.sb-sub { padding: 2px 0 6px 41px; }
.sb-sub a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; border-radius: 8px; color: var(--cw-ink-soft); font-size: 13px; text-decoration: none; white-space: nowrap; }
.sb-sub a:hover { background: var(--sb-hover); color: var(--cw-ink); }
.sb-sub a.active { color: var(--cw-teal); font-weight: 600; background: var(--sb-hover); }
.sb-sub .sb-subh { padding: 8px 10px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--cw-ink-faint); }
.sb-recent a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; color: var(--cw-ink-soft); font-size: 13px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-recent a:hover { background: var(--sb-hover); color: var(--cw-ink); }
.sb-foot { border-top: 1px solid var(--cw-line); padding: 8px 10px; flex: none; }

.sb-app.folded .sb-l, .sb-app.folded .sb-sec-h, .sb-app.folded .sb-brand b, .sb-app.folded .sb-chev,
.sb-app.folded .sb-tag, .sb-app.folded .sb-sub, .sb-app.folded .sb-recent-wrap { display: none !important; }
.sb-app.folded .sb-brand { flex-direction: column; justify-content: center; height: auto; padding: 10px 0; gap: 6px; }
.sb-app.folded .sb-brand a { flex: none; }
.sb-app.folded .sb-fold .bi { transform: rotate(180deg); }
.sb-app.folded .sb-link { justify-content: center; }
.sb-app.folded .sb-count { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; font-size: 9.5px; padding: 0 4px; }
.sb-app.folded .sb-nav { overflow: visible; }
.sb-app.folded .sb-link:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--cw-ink); color: var(--cw-bg); padding: 4px 10px; border-radius: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; z-index: 2000; box-shadow: var(--cw-shadow-md); }

/* ---------------- top bar ---------------- */
.sb-main { min-width: 0; display: flex; flex-direction: column; }
.sb-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1020; height: var(--sb-top); display: flex; align-items: center; gap: 12px; padding: 0 24px; background: color-mix(in srgb, var(--cw-bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cw-line); }
.sb-icon.sb-burger { display: none; }
.sb-title { min-width: 0; }
.sb-title h1 { margin: 0; font-size: 17px; font-weight: 700; color: var(--cw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-search { flex: 1; max-width: 440px; margin-left: auto; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--cw-line); border-radius: 12px; background: var(--cw-surface); color: var(--cw-ink-faint); text-align: left; }
.sb-search:hover { border-color: var(--cw-accent); }
.sb-search span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.sb-kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--cw-line); border-bottom-width: 2px; border-radius: 6px; color: var(--cw-ink-faint); background: var(--cw-bg); }
.sb-right { display: flex; align-items: center; gap: 8px; }
.sb-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 11px; font-weight: 600; font-size: 14px; border: 1px solid var(--cw-line); background: var(--cw-surface); color: var(--cw-ink); white-space: nowrap; text-decoration: none; }
.sb-btn:hover { border-color: var(--cw-accent); color: var(--cw-ink); }
.sb-btn-primary { background: var(--cw-teal); border-color: var(--cw-teal); color: #fff; }
.sb-btn-primary:hover { filter: brightness(1.08); color: #fff; }
[data-theme="dark"] .sb-btn-primary, [data-theme="dark"] .sb-btn-primary:hover { color: #05221d; }
.sb-wallet { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 5px 0 12px; border-radius: 11px; border: 1px solid var(--cw-line); background: var(--cw-surface); color: var(--cw-ink); font-weight: 600; text-decoration: none; }
.sb-wallet:hover { border-color: var(--cw-accent); color: var(--cw-ink); }
.sb-wallet.low { border-color: var(--tone-warning); }
.sb-wallet .sb-fund { height: 28px; padding: 0 10px; border-radius: 8px; background: var(--sb-active); color: var(--cw-teal); font-size: 12.5px; font-weight: 700; display: grid; place-items: center; }
.sb-icon { position: relative; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--cw-line); background: var(--cw-surface); color: var(--cw-ink); }
.sb-icon:hover { border-color: var(--cw-accent); }
.sb-badge { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--cw-danger); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--cw-bg); }
.sb-avatar { width: 38px; height: 38px; border-radius: 50%; border: 0; background: linear-gradient(140deg, var(--cw-teal), var(--cw-accent)); color: #fff; font-weight: 700; display: grid; place-items: center; }

/* dropdowns (Bootstrap) */
.sb-menu { border: 1px solid var(--cw-line); border-radius: 14px; box-shadow: var(--cw-shadow-lg); padding: 8px; background: var(--cw-surface); min-width: 270px; }
.sb-menu .dropdown-header { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cw-ink-faint); font-weight: 700; padding: 6px 10px; }
.sb-menu .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 9px; padding: 8px 10px; color: var(--cw-ink); font-size: 14px; white-space: normal; }
.sb-menu .dropdown-item:hover, .sb-menu .dropdown-item:focus { background: var(--sb-hover); color: var(--cw-ink); }
.sb-menu .dropdown-item small { display: block; color: var(--cw-ink-faint); font-size: 12px; }
.sb-menu .dropdown-divider { border-color: var(--cw-line); }
.sb-mi { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: 15px; background: color-mix(in srgb, var(--c, var(--cw-teal)) 14%, transparent); color: var(--c, var(--cw-teal)); }
.sb-seg { display: flex; gap: 4px; padding: 3px; margin: 2px 8px 8px; border-radius: 10px; background: var(--cw-bg); border: 1px solid var(--cw-line); }
.sb-seg button, .sb-seg a { flex: 1; padding: 5px 6px; border: 0; border-radius: 8px; background: none; font-size: 12.5px; color: var(--cw-ink-soft); text-align: center; text-decoration: none; }
.sb-seg .on { background: var(--cw-surface); color: var(--cw-ink); font-weight: 600; box-shadow: var(--cw-shadow-sm); }
.sb-bell-menu { width: 360px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.sb-bell-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--cw-line); }
.sb-bell-h b { font-size: 14px; }
.sb-bell-h button { border: 0; background: none; color: var(--cw-teal); font-size: 12.5px; font-weight: 600; }
.sb-bell-list { max-height: 380px; overflow-y: auto; }
.sb-note { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--cw-line); color: var(--cw-ink); text-decoration: none; }
.sb-note:hover { background: var(--sb-hover); color: var(--cw-ink); }
.sb-note.unread { background: color-mix(in srgb, var(--cw-accent) 6%, transparent); }
.sb-note .t { flex: 1; min-width: 0; font-size: 13px; }
.sb-note .t b { display: block; font-weight: 600; }
.sb-note .t span { color: var(--cw-ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sb-note .t small { color: var(--cw-ink-faint); font-size: 11.5px; }
.sb-note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cw-teal); margin-top: 6px; flex: none; }
.sb-bell-f { display: block; text-align: center; padding: 10px; font-weight: 600; font-size: 13px; color: var(--cw-teal); text-decoration: none; }
.tone { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; flex: none; font-size: 15px; }
.tone-info { background: var(--tone-info-bg); color: var(--tone-info); }
.tone-success { background: var(--tone-success-bg); color: var(--tone-success); }
.tone-warning { background: var(--tone-warning-bg); color: var(--tone-warning); }
.tone-danger { background: var(--tone-danger-bg); color: var(--tone-danger); }

/* content */
.db-main { padding: 22px 24px 40px; flex: 1; min-width: 0; }

/* search palette */
.sb-scrim { position: fixed; inset: 0; z-index: 2000; background: rgba(5, 30, 26, .4); display: grid; place-items: start center; padding: 12vh 16px 16px; }
.sb-palette { width: min(640px, 100%); background: var(--cw-surface); border: 1px solid var(--cw-line); border-radius: 16px; box-shadow: var(--cw-shadow-lg); overflow: hidden; }
.sb-palette .in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cw-line); color: var(--cw-ink-faint); }
.sb-palette input { flex: 1; border: 0; outline: 0; background: none; font-size: 16px; color: var(--cw-ink); }
.sb-palette ul { list-style: none; margin: 0; padding: 8px; max-height: 55vh; overflow: auto; }
.sb-palette .grp { padding: 8px 10px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cw-ink-faint); font-weight: 700; }
.sb-palette a.opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--cw-ink); text-decoration: none; }
.sb-palette a.opt.sel, .sb-palette a.opt:hover { background: var(--sb-active); }
.sb-palette a.opt small { margin-left: auto; color: var(--cw-ink-faint); font-size: 12px; }
.sb-palette .empty { padding: 16px; color: var(--cw-ink-faint); font-size: 13px; }

/* responsive */
@media (max-width: 991.98px) {
  .sb-app, .sb-app.folded { grid-template-columns: minmax(0, 1fr); }
  .sb-side { position: fixed; left: 0; top: 0; bottom: 0; width: min(290px, 86vw); height: auto; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--cw-shadow-lg); }
  .sb-app.mobile-open .sb-side { transform: none; }
  .sb-app.folded .sb-l, .sb-app.folded .sb-sec-h, .sb-app.folded .sb-brand b, .sb-app.folded .sb-chev, .sb-app.folded .sb-tag, .sb-app.folded .sb-recent-wrap { display: revert !important; }
  .sb-app.folded .sb-sub { display: block !important; }
  .sb-app.folded .sb-sub.collapse:not(.show) { display: none !important; }
  .sb-app.folded .sb-brand { flex-direction: row; height: var(--sb-top); padding: 0 10px 0 14px; }
  .sb-app.folded .sb-link { justify-content: flex-start; }
  .sb-fold { display: none; }
  .sb-icon.sb-burger { display: grid; }
  .sb-search { flex: 0 0 38px; width: 38px; height: 38px; padding: 0; justify-content: center; margin-left: auto; }
  .sb-search span, .sb-search .sb-kbd { display: none; }
  .sb-create-l { display: none; }
}
@media (max-width: 575.98px) {
  .sb-top { padding: 0 14px; gap: 8px; }
  .db-main { padding: 16px 16px 32px; }
  .sb-wallet .sb-amt { display: none; }
  .sb-title h1 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .sb-app, .sb-side, .sb-link .sb-chev { transition: none !important; } }