/* ═══════════════════════════════════════════════════════════════════
   KRONOS GLASS — premium iOS-glass skin over the Tabler shell
   Loads LAST (after tabler.min.css + whatsjet-overrides.css).
   Every rule scoped to body.lw-tabler-ui — remove the file, nothing breaks.
   Approved reference: kronos-engine/panel/mockup-glass-dashboard.html
   ═══════════════════════════════════════════════════════════════════ */

body.lw-tabler-ui {
  --kg-ink: #0b1220;
  --kg-mut: #5b6472;
  --kg-soft: #8a93a3;
  --kg-wa: #25D366;
  --kg-wa-deep: #128C7E;
  --kg-blue: #0A84FF;
  --kg-glass: rgba(255, 255, 255, 0.66);
  --kg-glass-strong: rgba(255, 255, 255, 0.78);
  --kg-stroke: rgba(255, 255, 255, 0.65);
  --kg-stroke-soft: rgba(15, 23, 42, 0.06);
  --kg-shadow: 0 20px 50px rgba(15, 23, 42, 0.10), 0 4px 14px rgba(15, 23, 42, 0.05);
  --kg-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(15, 23, 42, 0.04);
  --kg-r: 18px;
  --kg-blur: 26px;
  --kg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif !important;
  color: var(--kg-ink);
}

/* ── ambient mesh background — pure gradients, zero GPU blur cost ── */
body.lw-tabler-ui {
  background:
    radial-gradient(42vw 42vw at 8% -8%,  rgba(167, 243, 208, 0.55), transparent 62%),
    radial-gradient(38vw 38vw at 96% 2%,  rgba(191, 219, 254, 0.55), transparent 62%),
    radial-gradient(36vw 36vw at 52% 108%, rgba(233, 213, 255, 0.45), transparent 62%),
    radial-gradient(26vw 26vw at 88% 92%, rgba(253, 230, 138, 0.35), transparent 62%),
    linear-gradient(180deg, #eef2f7 0%, #e9edf4 100%) !important;
  background-attachment: fixed !important;
}
body.lw-tabler-ui .page,
body.lw-tabler-ui .page-wrapper,
body.lw-tabler-ui .main-content {
  background: transparent !important;
}

/* ═══ SIDEBAR — full-height frosted panel ═══ */
body.lw-tabler-ui aside.navbar-vertical {
  background: var(--kg-glass) !important;
  -webkit-backdrop-filter: blur(var(--kg-blur)) saturate(1.6);
  backdrop-filter: blur(var(--kg-blur)) saturate(1.6);
  border: 0 !important;
  border-right: 1px solid var(--kg-stroke-soft) !important;
  box-shadow: 12px 0 40px rgba(15, 23, 42, 0.06);
}
body.lw-tabler-ui aside.navbar-vertical .navbar-brand {
  padding: 14px 8px 12px;
}
body.lw-tabler-ui aside.navbar-vertical .nav-link {
  border-radius: 12px;
  margin: 2px 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-weight: 560;
  color: #37404d;
  transition: background .18s var(--kg-ease), color .18s var(--kg-ease), transform .18s var(--kg-ease);
}
body.lw-tabler-ui aside.navbar-vertical .nav-link:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--kg-ink);
  transform: translateX(2px);
}
body.lw-tabler-ui aside.navbar-vertical .nav-link.active,
body.lw-tabler-ui aside.navbar-vertical .nav-item.active > .nav-link {
  background: linear-gradient(135deg, var(--kg-wa), var(--kg-wa-deep)) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(18, 140, 126, 0.35);
}
body.lw-tabler-ui aside.navbar-vertical .nav-link.active .nav-link-icon,
body.lw-tabler-ui aside.navbar-vertical .nav-item.active > .nav-link .nav-link-icon {
  color: #fff !important;
}
body.lw-tabler-ui aside.navbar-vertical .nav-link-icon {
  color: #6b7482;
}
/* unread badge on sidebar items — centered pill, not an absolute corner dot */
body.lw-tabler-ui aside.navbar-vertical .nav-link {
  display: flex; align-items: center;
}
body.lw-tabler-ui aside.navbar-vertical .nav-link .badge {
  position: static !important;
  transform: none !important;
  margin-left: auto !important;
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px !important;
  font-size: 11px; font-weight: 700; line-height: 1;
  background: #25D366 !important; color: #fff !important;
}
/* sidebar dropdown pane */
body.lw-tabler-ui aside.navbar-vertical .dropdown-menu {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  margin: 2px 10px 6px 26px;
  border: 1px solid var(--kg-stroke-soft);
  box-shadow: none;
}

/* ═══ TOP NAVBAR — frosted sticky bar ═══ */
body.lw-tabler-ui header.navbar {
  background: var(--kg-glass) !important;
  -webkit-backdrop-filter: blur(var(--kg-blur)) saturate(1.6);
  backdrop-filter: blur(var(--kg-blur)) saturate(1.6);
  border-bottom: 1px solid var(--kg-stroke-soft) !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  min-height: 58px;
}
body.lw-tabler-ui header.navbar .navbar-brand {
  letter-spacing: -0.02em;
}
body.lw-tabler-ui header.navbar .nav-link {
  border-radius: 12px;
  transition: transform .15s var(--kg-ease);
}
body.lw-tabler-ui header.navbar .nav-link:hover { transform: translateY(-1px); }
body.lw-tabler-ui header.navbar .avatar {
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

/* ═══ PAGE HEADER — big welcoming greeting ═══ */
body.lw-tabler-ui .page-header .page-pretitle {
  color: var(--kg-mut);
  font-size: 13px;
  font-weight: 620;
  letter-spacing: .01em;
  text-transform: none;
}
body.lw-tabler-ui .page-header .page-title {
  font-size: 25px;
  font-weight: 740;
  letter-spacing: -0.03em;
  color: var(--kg-ink);
}

/* ═══ CARDS — the glass surface ═══ */
body.lw-tabler-ui .card {
  background: var(--kg-glass-strong) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--kg-stroke) !important;
  border-radius: var(--kg-r) !important;
  box-shadow: var(--kg-shadow-sm) !important;
}
body.lw-tabler-ui .card .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--kg-stroke-soft);
  border-radius: var(--kg-r) var(--kg-r) 0 0 !important;
}
body.lw-tabler-ui .card .card-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* free-plan upgrade banner keeps its brand gradient (beats the glass card bg) */
body.lw-tabler-ui .card.kg-upgrade {
  background: linear-gradient(100deg, #075E54, #128C7E) !important;
  border: 0 !important;
}
/* clickable stat tiles lift */
body.lw-tabler-ui a.card {
  transition: transform .2s var(--kg-ease), box-shadow .2s var(--kg-ease);
}
body.lw-tabler-ui a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--kg-shadow) !important;
}
/* stat numbers */
body.lw-tabler-ui .card-sm .card-body [style*="font-size:24px"] {
  font-size: 26px !important;
  letter-spacing: -0.03em;
}

/* avatar chips inside cards — richer gradient pastels */
body.lw-tabler-ui .card .avatar { border-radius: 12px; font-weight: 700; }
body.lw-tabler-ui .avatar.bg-red-lt    { background: linear-gradient(135deg, #fecaca, #fca5a5) !important; color: #b91c1c !important; }
body.lw-tabler-ui .avatar.bg-yellow-lt { background: linear-gradient(135deg, #fef08a, #fde047) !important; color: #a16207 !important; }
body.lw-tabler-ui .avatar.bg-orange-lt { background: linear-gradient(135deg, #fed7aa, #fdba74) !important; color: #c2410c !important; }
body.lw-tabler-ui .avatar.bg-blue-lt   { background: linear-gradient(135deg, #bfdbfe, #93c5fd) !important; color: #1d4ed8 !important; }
body.lw-tabler-ui .avatar.bg-green-lt  { background: linear-gradient(135deg, #bbf7d0, #86efac) !important; color: #15803d !important; }

/* ═══ BUTTONS ═══ */
body.lw-tabler-ui .btn {
  border-radius: 12px;
  font-weight: 640;
  transition: transform .18s var(--kg-ease), box-shadow .18s var(--kg-ease);
}
body.lw-tabler-ui .btn-primary {
  background: linear-gradient(135deg, var(--kg-wa), var(--kg-wa-deep)) !important;
  border: 0 !important;
  box-shadow: 0 10px 26px rgba(18, 140, 126, 0.32);
}
body.lw-tabler-ui .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(18, 140, 126, 0.42);
}
body.lw-tabler-ui .btn-outline-primary {
  color: var(--kg-wa-deep) !important;
  border-color: rgba(18, 140, 126, 0.4) !important;
  background: rgba(255, 255, 255, 0.6) !important;
}
body.lw-tabler-ui .btn-outline-primary:hover {
  background: rgba(18, 140, 126, 0.08) !important;
  transform: translateY(-1px);
}

/* ═══ LISTS / TABLES / FORMS ═══ */
body.lw-tabler-ui .list-group-item {
  background: transparent;
  border-color: var(--kg-stroke-soft);
  transition: background .15s var(--kg-ease);
}
body.lw-tabler-ui .list-group-hoverable .list-group-item:hover {
  background: rgba(255, 255, 255, 0.85) !important;
}
body.lw-tabler-ui .table thead th {
  background: rgba(15, 23, 42, 0.035) !important;
  color: var(--kg-mut);
  font-weight: 680;
  letter-spacing: .04em;
  border-bottom: 0;
}
body.lw-tabler-ui .table tbody tr { transition: background .12s; }
body.lw-tabler-ui .table tbody tr:hover { background: rgba(255, 255, 255, 0.7); }
body.lw-tabler-ui .form-control,
body.lw-tabler-ui .form-select {
  border-radius: 11px;
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.85);
  transition: border-color .15s, box-shadow .15s;
}
body.lw-tabler-ui .form-control:focus,
body.lw-tabler-ui .form-select:focus {
  border-color: var(--kg-wa);
  box-shadow: 0 0 0 3.5px rgba(37, 211, 102, 0.18);
}
body.lw-tabler-ui .badge { border-radius: 999px; font-weight: 650; }

/* ═══ DROPDOWNS + MODALS — frosted pop layers ═══ */
body.lw-tabler-ui .dropdown-menu:not(aside .dropdown-menu) {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--kg-stroke);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}
body.lw-tabler-ui .dropdown-item { border-radius: 9px; margin: 1px 5px; width: auto; }
body.lw-tabler-ui .modal-content {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--kg-stroke);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.22);
}
body.lw-tabler-ui .modal-header { border-bottom-color: var(--kg-stroke-soft); }
body.lw-tabler-ui .modal-footer { border-top-color: var(--kg-stroke-soft); }
body.lw-tabler-ui .modal-backdrop.show { opacity: .32; }

/* alerts as tinted glass */
body.lw-tabler-ui .alert {
  border-radius: 14px;
  border: 1px solid var(--kg-stroke);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* pagination + misc chrome */
body.lw-tabler-ui .page-link { border-radius: 10px; margin: 0 2px; border-color: var(--kg-stroke-soft); }
body.lw-tabler-ui .page-item.active .page-link {
  background: linear-gradient(135deg, var(--kg-wa), var(--kg-wa-deep));
  border-color: transparent;
}

/* ═══ LOGIN / GUEST PAGES — welcoming first touch ═══ */
body.lw-tabler-ui.lw-guest-page .card {
  max-width: 100%;
  box-shadow: var(--kg-shadow) !important;
  border-radius: 24px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   WHATSAPP-EXACT CHAT — WA Web visual language, pixel-true colors
   sent #d9fdd3 · received #fff · thread #efeae2 · accent #00a884
   ═══════════════════════════════════════════════════════════════════ */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container {
  border-radius: var(--kg-r) !important;
  overflow: hidden;
}

/* thread backdrop — WA wallpaper tone */
body.lw-tabler-ui .lw-whatsapp-chat-block-container .conversation,
body.lw-tabler-ui .lw-whatsapp-chat-block-container .conversation-container {
  background: #efeae2 !important;
}

/* bubbles */
body.lw-tabler-ui .lw-whatsapp-chat-block-container .message {
  position: relative;
  max-width: 65%;
  padding: 6px 7px 8px 9px;
  border-radius: 7.5px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13) !important;
  border: 0 !important;
  font-size: 14.2px;
  line-height: 19px;
  color: #111b21 !important;
}
body.lw-tabler-ui .lw-whatsapp-chat-block-container .message.received {
  background: #ffffff !important;
  border-top-left-radius: 0;
}
body.lw-tabler-ui .lw-whatsapp-chat-block-container .message.sent {
  background: #d9fdd3 !important;
  border-top-right-radius: 0;
}
/* bubble tails */
body.lw-tabler-ui .lw-whatsapp-chat-block-container .message.received::before,
body.lw-tabler-ui .lw-whatsapp-chat-block-container .message.sent::before {
  content: "";
  position: absolute;
  top: 0;
  width: 0; height: 0;
  border-top: 8px solid;
  z-index: 0;
}
body.lw-tabler-ui .lw-whatsapp-chat-block-container .message.received::before {
  left: -8px;
  border-top-color: #ffffff;
  border-left: 8px solid transparent;
}
body.lw-tabler-ui .lw-whatsapp-chat-block-container .message.sent::before {
  right: -8px;
  border-top-color: #d9fdd3;
  border-right: 8px solid transparent;
}
body.lw-tabler-ui .lw-whatsapp-chat-block-container .message .lw-plain-message-text,
body.lw-tabler-ui .lw-whatsapp-chat-block-container .message .lw-whatsapp-body {
  color: #111b21 !important;
  font-size: 14.2px !important;
}
/* timestamps / metadata inside bubbles */
body.lw-tabler-ui .lw-whatsapp-chat-block-container .message .metadata,
body.lw-tabler-ui .lw-whatsapp-chat-block-container .message time,
body.lw-tabler-ui .lw-whatsapp-chat-block-container .message small {
  color: #667781 !important;
  font-size: 11px !important;
}

/* contact list — WA Web left pane */
body.lw-tabler-ui .lw-whatsapp-chat-block-container .lw-contact-list-block {
  background: #ffffff !important;
}
body.lw-tabler-ui .lw-whatsapp-chat-block-container .lw-contact {
  border-bottom: 1px solid #f0f2f5 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  transition: background .12s;
}
body.lw-tabler-ui .lw-whatsapp-chat-block-container .lw-contact:hover {
  background: #f5f6f6 !important;
}
body.lw-tabler-ui .lw-whatsapp-chat-block-container .lw-contact.lw-contact-list-item-selected,
body.lw-tabler-ui .lw-whatsapp-chat-block-container .lw-contact-list-item-selected {
  background: #f0f2f5 !important;
  border-left: 0 !important;
}
body.lw-tabler-ui .lw-whatsapp-chat-block-container .lw-contact-avatar {
  border-radius: 50% !important;
}
body.lw-tabler-ui .lw-whatsapp-chat-block-container .lw-contact h3,
body.lw-tabler-ui .lw-whatsapp-chat-block-container .lw-contact h3 span {
  color: #111b21 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
body.lw-tabler-ui .lw-whatsapp-chat-block-container .lw-last-message-at {
  color: #667781 !important;
  font-size: 11.5px !important;
}
/* search input — WA style */
body.lw-tabler-ui .lw-whatsapp-chat-block-container .lw-chat-search-input,
body.lw-tabler-ui .lw-whatsapp-chat-block-container input[type="search"] {
  background: #f0f2f5 !important;
  border: 0 !important;
  border-radius: 9px !important;
  font-size: 13px;
  color: #111b21;
}

/* composer — WA bottom bar */
body.lw-tabler-ui .lw-whatsapp-chat-block-container .conversation-compose {
  background: #f0f2f5 !important;
  border-top: 1px solid #e4e7ea !important;
  padding: 7px 10px !important;
}
body.lw-tabler-ui .lw-whatsapp-chat-block-container .conversation-compose .input-msg,
body.lw-tabler-ui .lw-whatsapp-chat-block-container .conversation-compose .lw-input-emoji,
body.lw-tabler-ui .lw-whatsapp-chat-block-container .emojionearea,
body.lw-tabler-ui .lw-whatsapp-chat-block-container .emojionearea .emojionearea-editor {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: #111b21 !important;
  font-size: 14.2px !important;
}
body.lw-tabler-ui .lw-whatsapp-chat-block-container .conversation-compose button[type="submit"],
body.lw-tabler-ui .lw-whatsapp-chat-block-container .conversation-compose .send {
  background: #00a884 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}
body.lw-tabler-ui .lw-whatsapp-chat-block-container .lw-whatsapp-bar-icon-btn {
  color: #54656f !important;
}

/* chat header strip (contact name bar) — WA header tone */
body.lw-tabler-ui .lw-whatsapp-chat-block-container .lw-user-new-actions,
body.lw-tabler-ui .lw-whatsapp-chat-block-container .lw-contacts-header {
  background: #f0f2f5 !important;
  color: #111b21 !important;
}

/* ═══ WA-EXACT v2 — margins, paddings, list rows, header, edge-to-edge ═══ */

/* chat fills its card edge-to-edge like WhatsApp Web (no widget-in-a-box inset) */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .card-body.lw-whatsapp-chat-window {
  padding: 0 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .marvel-device,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .marvel-device .screen {
  margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; width: 100% !important; height: 100% !important;
  background: transparent !important;
}

/* CRM drawer — kill the dark 0.4-alpha halo (the "black bar") + gold border
   + the royal gradient smuggled in as background-IMAGE on inner divs */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block {
  box-shadow: -1px 0 6px rgba(11, 20, 26, 0.05) !important;
  border-top: 0 !important;
  border-radius: 0 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block div,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block fieldset,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .col-12.text-right,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block > .row > .col-12:first-child {
  background: transparent !important;
  background-image: none !important;
}

/* chat header — WA proportions */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar {
  min-height: 59px !important;
  padding: 8px 16px !important;
  font-size: 15px !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .user-bar .name {
  font-size: 16px !important; font-weight: 500 !important; color: #111b21 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .user-bar .name small,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .user-bar .status {
  background: transparent !important;
  color: #667781 !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .user-bar .avatar,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .user-bar .lw-contact-avatar {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
}

/* contact list rows — WA layout: 49px round avatar, clean name, grey sub-line */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact {
  padding: 8px 13px !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact .lw-contact-avatar {
  width: 49px !important; height: 49px !important;
  border-radius: 50% !important;
  font-size: 17px !important;
  line-height: 49px !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact h3 {
  margin: 0 !important;
  font-size: 15.5px !important; font-weight: 450 !important; color: #111b21 !important;
  line-height: 1.25 !important;
}
/* hide the " - " separator; phone number becomes a small grey second line */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact h3 span:nth-of-type(2) {
  display: none !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact h3 span:last-child {
  display: block !important;
  font-size: 12.5px !important; font-weight: 400 !important; color: #667781 !important;
  margin-top: 1px;
}
/* verbose humanized timestamp → one truncated small grey line */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact .lw-last-message-at {
  display: block !important;
  max-width: 130px;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  font-size: 11px !important; color: #667781 !important; line-height: 1.3 !important;
}

/* list top controls — WA filter chips */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block .nav-tabs {
  border: 0 !important; padding: 4px 10px !important; gap: 6px;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block .nav-tabs .nav-link {
  border: 0 !important; border-radius: 999px !important;
  background: #f0f2f5 !important; color: #54656f !important;
  font-size: 13px !important; font-weight: 500 !important;
  padding: 4px 13px !important; margin-right: 6px;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-list-block .nav-tabs .nav-link.active {
  background: #e7fce3 !important; color: #008069 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-labels-filter-fieldset {
  border: 0 !important; padding: 2px 10px !important; margin: 0 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-labels-filter-fieldset legend {
  font-size: 11px !important; color: #667781 !important; margin: 0 !important;
}

/* thread — WA gutters + bubble rhythm */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .conversation-container {
  padding: 12px 7% 12px 7% !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .message {
  margin: 2px 0 !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .message.received + .message.sent,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .message.sent + .message.received {
  margin-top: 12px !important;
}
/* template previews render flat inside the bubble — no white box-in-box */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .message .lw-template-message,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .message .lw-whatsapp-preview,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .message .lw-whatsapp-preview-message-container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* status ticks — WA size */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .message img[title="Sent"],
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .message img[title="Delivered"],
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .message img[title="Read"] {
  width: 15px !important; height: 15px !important; opacity: .85;
}
/* thin WA scrollbars inside the chat */
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container ::-webkit-scrollbar { width: 6px; height: 6px; }
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container ::-webkit-scrollbar-thumb { background: rgba(11,20,26,.18); border-radius: 3px; }
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container ::-webkit-scrollbar-track { background: transparent; }

/* ═══════════════════════════════════════════════════════════════════
   V2 — MOCKUP PARITY: floating shell + hero + tiles + chart + grid
   ═══════════════════════════════════════════════════════════════════ */

/* floating sidebar panel — right edge stays EXACTLY at 15rem so the
   chat page's fixed left:15rem geometry is untouched */
@media (min-width: 992px) {
  body.lw-tabler-ui aside.navbar-vertical {
    top: 0; bottom: 0; height: auto !important;
    margin: 14px 0 14px 14px;
    width: calc(15rem - 14px) !important;
    border-radius: 26px;
    border: 1px solid var(--kg-stroke) !important;
    box-shadow: var(--kg-shadow);
    overflow: hidden;
  }
  body.lw-tabler-ui aside.navbar-vertical > .container-fluid {
    display: flex; flex-direction: column; height: 100%;
    overflow-y: auto; scrollbar-width: none;
  }
  body.lw-tabler-ui aside.navbar-vertical > .container-fluid::-webkit-scrollbar { width: 0; }
  /* floating top bar (owner prefers the airy gap — keep) */
  body.lw-tabler-ui header.navbar {
    margin: 14px 18px 0;
    border-radius: 18px;
    border: 1px solid var(--kg-stroke) !important;
    box-shadow: var(--kg-shadow-sm);
  }
  /* chat page exception: restore original geometry (chat is position:fixed to top:60px/left:15rem)
     — also undo sticky/z-raise so the navbar can't cover the chat's fixed top strip */
  /* classic chat pins itself fixed at top:60px/left:15rem — pin the navbar to match exactly */
  body.lw-tabler-ui:has(.lw-whatsapp-chat-block-container) header.navbar {
    margin: 0 !important; border-radius: 0;
    position: fixed !important;
    top: 0; left: 15rem; right: 0;
    z-index: 40;
    height: 60px !important;
    min-height: 60px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center;
    overflow: hidden;
  }
  /* Chat 2 measures the navbar itself — it gets the floating bar like every other page */
  body.lw-tabler-ui:has(#kchat) header.navbar {
    top: 14px;
    left: calc(15rem + 18px);
    right: 18px;
    border-radius: 18px !important;
    border: 1px solid var(--kg-stroke) !important;
    box-shadow: var(--kg-shadow-sm);
    height: 58px !important;
    min-height: 58px !important;
    /* Chat 2's container carries BOTH #kchat and .lw-whatsapp-chat-block-container, so the
       classic-chat rule above also matches here and applied overflow:hidden + z-index:40.
       overflow:hidden clipped the profile dropdown, and z-index:40 let nothing sit above
       #kchat cleanly. Restore both for Chat 2. */
    overflow: visible !important;
    z-index: 1030;
  }
}

/* sidebar section labels */
body.lw-tabler-ui .kg-sec {
  font-size: 10.5px; font-weight: 750; letter-spacing: .1em;
  text-transform: uppercase; color: var(--kg-soft);
  padding: 16px 22px 4px; list-style: none;
}
/* sidebar icon chips — display needs !important to beat Tabler's .d-lg-inline-block utility */
body.lw-tabler-ui aside.navbar-vertical .nav-link-icon {
  width: 27px; height: 27px; border-radius: 9px;
  background: rgba(15, 23, 42, 0.05);
  display: inline-flex !important;
  align-items: center; justify-content: center;
  margin-right: 4px; transition: background .18s var(--kg-ease);
}
body.lw-tabler-ui aside.navbar-vertical .nav-link.active .nav-link-icon,
body.lw-tabler-ui aside.navbar-vertical .nav-item.active > .nav-link .nav-link-icon {
  background: rgba(255, 255, 255, 0.22);
}
/* sidebar profile card */
body.lw-tabler-ui .kg-me {
  margin: 12px 12px 12px; padding: 11px 12px;
  display: flex; align-items: center; gap: 10px; flex: none;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--kg-stroke-soft); border-radius: 15px;
}
body.lw-tabler-ui .kg-me-av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff; font-weight: 750; font-size: 14px;
}
body.lw-tabler-ui .kg-me-tx { min-width: 0; line-height: 1.25; }
body.lw-tabler-ui .kg-me-tx b { font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.lw-tabler-ui .kg-me-tx small { color: var(--kg-soft); font-size: 10.5px; font-weight: 620; }

/* ═══ BUG-FIX PACK (owner testing 2026-09-18) ═══ */
/* #5: profile dropdown must float ABOVE glass cards (backdrop-filter stacking) */
body.lw-tabler-ui header.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
}
/* #1: nothing may squeeze the sidebar on desktop */
@media (min-width: 992px) {
  body.lw-tabler-ui aside.navbar-vertical {
    min-width: calc(15rem - 14px) !important;
    max-width: calc(15rem - 14px) !important;
  }
}
body.lw-tabler-ui .kg-sec { white-space: nowrap; overflow: hidden; }
/* #3: kill every "Royal Dark" remnant — selectize + CRM drawer + chat user bar */
body.lw-tabler-ui .selectize-input,
body.lw-tabler-ui .selectize-input.full,
body.lw-tabler-ui .selectize-input.has-items {
  background: #ffffff !important;
  color: #111b21 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
body.lw-tabler-ui .selectize-input input,
body.lw-tabler-ui .selectize-input .item {
  color: #111b21 !important;
}
body.lw-tabler-ui .selectize-dropdown {
  background: #ffffff !important;
  color: #111b21 !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 10px !important;
}
body.lw-tabler-ui .selectize-dropdown .option { color: #111b21 !important; }
body.lw-tabler-ui .selectize-dropdown .option.active { background: #f0f2f5 !important; }
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block {
  background: #ffffff !important;
  color: #111b21 !important;
  border-left: 1px solid #e4e7ea !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block dt { color: #667781 !important; }
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block dd,
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-contact-crm-block legend { color: #111b21 !important; }
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar {
  background: #f0f2f5 !important;
  color: #111b21 !important;
  border-bottom: 1px solid #e4e7ea !important;
  box-shadow: none !important;
}
body.lw-tabler-ui .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar * { color: #111b21 !important; }

/* navbar search pill */
body.lw-tabler-ui .kg-search {
  flex: 1; max-width: 420px; align-items: center; gap: 8px;
  background: rgba(15, 23, 42, 0.055); border-radius: 12px;
  padding: 8px 14px; margin: 0 14px;
  color: var(--kg-soft); font-size: 13px; font-weight: 550;
  text-decoration: none; transition: background .15s;
}
body.lw-tabler-ui .kg-search:hover { background: rgba(15, 23, 42, 0.085); color: var(--kg-mut); }
body.lw-tabler-ui .kg-search input {
  border: 0; background: transparent; outline: none; flex: 1;
  font: inherit; color: var(--kg-ink); min-width: 0;
}
body.lw-tabler-ui .kg-search input::placeholder { color: var(--kg-soft); }

/* hero */
body.lw-tabler-ui .kg-hero-title { font-size: 26px !important; font-weight: 750 !important; letter-spacing: -0.03em; }
body.lw-tabler-ui .kg-hero-sub { color: var(--kg-mut); font-size: 13.5px; margin-top: 4px; font-weight: 550; }
body.lw-tabler-ui .kg-ok { color: #0f9d58; font-weight: 700; }
body.lw-tabler-ui .kg-btn-white {
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid var(--kg-stroke-soft) !important;
  color: var(--kg-ink) !important; font-weight: 650;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body.lw-tabler-ui .kg-btn-white:hover { transform: translateY(-1px); box-shadow: var(--kg-shadow-sm); }

/* stat tiles — mockup structure */
body.lw-tabler-ui .kg-tile { text-decoration: none; color: inherit; }
body.lw-tabler-ui .kg-tile .card-body { position: relative; padding: 16px 16px 14px; }
body.lw-tabler-ui .kg-tile-lab {
  display: flex; align-items: center; gap: 9px;
  color: var(--kg-mut); font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
body.lw-tabler-ui .kg-tile-ic {
  width: 30px; height: 30px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px;
}
body.lw-tabler-ui .kg-tile-num { font-size: 27px; font-weight: 760; letter-spacing: -0.03em; margin-top: 9px; line-height: 1.1; }
body.lw-tabler-ui .kg-tile-sub { font-size: 11.5px; margin-top: 3px; font-weight: 620; color: var(--kg-soft); }
body.lw-tabler-ui .kg-up { color: #0f9d58; }
body.lw-tabler-ui .kg-dn { color: #e11d48; }
body.lw-tabler-ui .kg-spark { position: absolute; right: 12px; bottom: 12px; opacity: .9; }

/* activity chart */
body.lw-tabler-ui .kg-chart { display: block; }
body.lw-tabler-ui .kg-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 11.5px; color: var(--kg-mut); font-weight: 640; }
body.lw-tabler-ui .kg-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }

/* quick-action grid */
body.lw-tabler-ui .kg-qgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
body.lw-tabler-ui .kg-qa {
  border-radius: 14px; padding: 12px 6px; text-align: center;
  background: rgba(255, 255, 255, 0.7); border: 1px solid var(--kg-stroke-soft);
  font-weight: 640; font-size: 11px; color: #37404d; text-decoration: none;
  transition: transform .18s var(--kg-ease), box-shadow .18s var(--kg-ease);
}
body.lw-tabler-ui .kg-qa span { font-size: 19px; display: block; margin-bottom: 5px; }
body.lw-tabler-ui .kg-qa:hover { transform: translateY(-2px); box-shadow: var(--kg-shadow-sm); color: var(--kg-ink); }

@media (max-width: 991.98px) {
  body.lw-tabler-ui .kg-qgrid { grid-template-columns: repeat(2, 1fr); }
  /* stack hero: greeting full-width, buttons below — fonts stay IDENTICAL to desktop */
  body.lw-tabler-ui .page-header .row.g-2 > .col { flex: 0 0 100%; max-width: 100%; }
  body.lw-tabler-ui .page-header .row.g-2 > .col-auto { flex: 0 0 100%; max-width: 100%; margin-left: 0 !important; margin-top: 6px; }
}

/* icon centering — chips must hold their glyph dead-center */
body.lw-tabler-ui aside.navbar-vertical .nav-link-icon i,
body.lw-tabler-ui .kg-tile-ic i,
body.lw-tabler-ui .avatar i {
  line-height: 1 !important;
  display: block;
  margin: 0 !important;
}
body.lw-tabler-ui aside.navbar-vertical .nav-link-icon i { font-size: 15px; }
body.lw-tabler-ui .kg-tile-ic i { font-size: 15px; }
body.lw-tabler-ui .card .avatar {
  display: inline-flex; align-items: center; justify-content: center;
}

/* ═══ MOBILE + PERFORMANCE ═══ */
@media (max-width: 991.98px) {
  /* ═══ MOBILE SHELL v2 — one top bar + solid full-screen drawer ═══ */
  /* aside sheds its own chrome; the header.navbar becomes THE bar */
  body.lw-tabler-ui aside.navbar-vertical {
    background: transparent !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 0 !important; box-shadow: none !important;
    height: 0 !important; min-height: 0 !important;
    padding: 0 !important; margin: 0 !important; overflow: visible !important;
  }
  body.lw-tabler-ui aside.navbar-vertical > .container-fluid { padding: 0; }
  body.lw-tabler-ui aside.navbar-vertical > .container-fluid > .navbar-toggler,
  body.lw-tabler-ui aside.navbar-vertical > .container-fluid > .navbar-brand {
    display: none !important;
  }
  body.lw-tabler-ui header.navbar {
    position: fixed !important; top: 0; left: 0; right: 0; z-index: 1040;
    margin: 0 !important; border-radius: 0 !important;
    height: 58px !important; min-height: 58px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  }
  body.lw-tabler-ui header.navbar .navbar-toggler {
    display: inline-flex !important; align-items: center; justify-content: center;
    border: 0 !important; box-shadow: none !important;
  }
  body.lw-tabler-ui .main-content { padding-top: 62px !important; margin-top: 0 !important; }
  /* the drawer: solid white sheet under the bar */
  body.lw-tabler-ui aside.navbar-vertical #sidebar-menu {
    position: fixed !important; top: 58px; left: 0; right: 0; bottom: 0;
    width: 100% !important; margin: 0 !important;
    background: #ffffff !important; z-index: 1035;
    overflow-y: auto; padding: 8px 10px 40px;
    display: none;
  }
  body.lw-tabler-ui aside.navbar-vertical #sidebar-menu.show { display: block !important; }
  body.lw-tabler-ui aside.navbar-vertical #sidebar-menu .navbar-nav {
    width: 100%; flex-direction: column;
  }
  body.lw-tabler-ui aside.navbar-vertical #sidebar-menu .nav-link {
    padding-top: 12px; padding-bottom: 12px; font-size: 15px;
  }
  body.lw-tabler-ui #sidebar-menu .kg-me { display: flex; margin: 14px 8px; }
  /* chat2 = fullscreen app on phone (its own header/back nav) */
  body.lw-tabler-ui:has(.lw-whatsapp-chat-block-container) header.navbar { display: none !important; }
  /* stat/admin cards: natural height, no stretched emptiness */
  body.lw-tabler-ui .card .card-body { min-height: 0 !important; height: auto !important; }
  body.lw-tabler-ui .card.card-stats { min-height: 0 !important; height: auto !important; }
  /* classic Argon page headers carried pt-5 to clear the old navbar — not needed now */
  body.lw-tabler-ui .header.pb-0 { padding-top: 0.4rem !important; }
  body.lw-tabler-ui .header .lw-page-title { margin-top: 0 !important; }
}
/* browsers without backdrop-filter: solid surfaces, same design */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  body.lw-tabler-ui aside.navbar-vertical,
  body.lw-tabler-ui header.navbar { background: rgba(255, 255, 255, 0.94) !important; }
  body.lw-tabler-ui .card { background: rgba(255, 255, 255, 0.96) !important; }
  body.lw-tabler-ui .dropdown-menu,
  body.lw-tabler-ui .modal-content { background: #fff !important; }
}
/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.lw-tabler-ui * { transition: none !important; }
}