/* Mario AI mobile navigation and comfortable scrolling layer. */

body,
button,
input,
select,
textarea {
  font-family: 'Plus Jakarta Sans', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
}

.mobile-menu {
  display: none;
}

.panel-actions-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px;
}

.action-btn {
  min-height: 50px;
  padding: 10px 12px;
  font-size: 0.84rem;
  font-weight: 800;
}

.action-btn > svg,
.action-btn > i {
  width: 19px;
  height: 19px;
}

.whatsapp-brand-icon {
  flex: 0 0 auto;
}

.btn-call {
  color: #ffffff;
  border-color: #f97316;
  background: #f97316;
  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.2);
}

.btn-call:hover {
  color: #ffffff;
  background: #ea580c;
}

.btn-wa {
  color: #ffffff;
  border-color: #25d366;
  background: #25d366;
  box-shadow: 0 6px 14px rgba(37, 211, 102, 0.22);
}

.btn-wa:hover {
  color: #ffffff;
  border-color: #1fbd5a;
  background: #1fbd5a;
}

@media (max-width: 720px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-layout {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .workspace-container {
    flex: none;
    overflow: visible;
  }

  .table-pane {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .grid-table-container {
    flex: none;
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
  }

  .db-table thead {
    position: static;
  }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 76px 12px 12px;
    background: rgba(23, 32, 51, 0.24);
  }

  .mobile-menu.open {
    display: flex;
  }

  .mobile-menu-card {
    width: min(100%, 360px);
    padding: 18px;
    border: 1px solid #dce3ed;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(23, 32, 51, 0.2);
  }

  .mobile-menu-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
  }

  .mobile-menu-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--primary-hover);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
  }

  .mobile-menu-header h2 {
    color: var(--text-main);
    font-size: 1.06rem;
    line-height: 1.25;
  }

  .mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    background: #ffffff;
  }

  .mobile-menu-actions {
    display: grid;
    gap: 8px;
    padding-top: 12px;
  }

  .mobile-menu-action {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid #e0e6ee;
    border-radius: 12px;
    color: var(--text-main);
    text-align: left;
    background: #f8fafc;
  }

  .mobile-menu-action:hover,
  .mobile-menu-action:focus-visible {
    border-color: var(--primary-border);
    background: var(--primary-light);
  }

  .mobile-menu-action > i {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--primary);
  }

  .mobile-menu-action span {
    display: grid;
    gap: 2px;
  }

  .mobile-menu-action strong {
    font-size: 0.9rem;
  }

  .mobile-menu-action small {
    color: var(--text-secondary);
    font-size: 0.76rem;
  }
}

/* Guided filters keep the most useful views visible without hiding the
   spreadsheet-style column filters. */
.suggested-filters {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface, #ffffff);
}

.suggested-filters-heading {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  color: var(--text-main);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
}

.suggested-filters-heading small {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 650;
}

.suggested-filter-list {
  display: flex;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.suggested-filter-list::-webkit-scrollbar {
  display: none;
}

.suggested-filter {
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--bg-surface, #ffffff);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.suggested-filter:hover,
.suggested-filter:focus-visible,
.suggested-filter.active {
  border-color: #fdba74;
  color: #c2410c;
  background: #fff7ed;
  outline: none;
}

.page-button-label {
  display: none;
}

@media (max-width: 720px) {
  /* The Dashboard menu now has a visible destination: these compact KPI
     cards keep totals readable without taking over the lead list. */
  .header-metrics {
    display: flex !important;
    grid-column: 1 / -1;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin-right: -16px;
    padding-top: 10px;
    padding-right: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .header-metrics::-webkit-scrollbar {
    display: none;
  }

  .metric-item {
    flex: 0 0 132px;
    min-width: 132px;
    min-height: 64px;
  }

  /* The page owns vertical scrolling; the grid owns horizontal scrolling.
     This lets the two-row heading become sticky when it reaches the top. */
  .grid-table-container {
    position: relative;
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
  }

  .db-table thead {
    position: sticky !important;
    top: 0;
    z-index: 30;
    display: table-header-group;
  }

  .header-row-titles th {
    background: var(--bg-table-header, #f8fafc);
  }

  .header-row-filters th {
    background: var(--bg-table-filter, #f1f5f9);
  }

  .suggested-filters {
    display: grid;
    gap: 8px;
    padding: 11px 14px;
  }

  .suggested-filters-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

  .suggested-filter-list {
    width: 100%;
    padding-bottom: 2px;
  }

  .pagination-bar {
    position: sticky;
    bottom: 0;
    z-index: 35;
    min-height: 66px;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    background: var(--bg-surface, #ffffff);
    box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.1);
  }

  .pagination-controls {
    gap: 4px;
  }

  .btn-page {
    width: auto;
    min-width: 43px;
    height: 40px;
    padding: 0 8px;
    gap: 3px;
    font-size: 0.72rem;
  }

  .btn-page > svg {
    display: none;
  }

  .page-button-label {
    display: inline;
    font-size: 0.7rem;
    font-weight: 800;
  }

  .pagination-info {
    font-size: 0.8rem;
  }
}

/* Theme tokens plus explicit surfaces for the original stylesheet's white
   panels. Call and WhatsApp keep their familiar colors in both themes. */
html[data-theme="dark"] {
  --primary: #fb923c;
  --primary-hover: #f97316;
  --primary-light: #3b2415;
  --primary-border: #9a3412;
  --bg-app: #0b1220;
  --bg-surface: #111c2e;
  --bg-table-header: #1b293b;
  --bg-table-filter: #152235;
  --border-color: #334155;
  --border-subtle: #263449;
  --text-main: #f8fafc;
  --text-secondary: #c3cfdf;
  --text-muted: #94a3b8;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .app-layout,
html[data-theme="dark"] .workspace-container {
  background: var(--bg-app);
  color: var(--text-main);
}

html[data-theme="dark"] .app-layout,
html[data-theme="dark"] .app-header,
html[data-theme="dark"] .table-pane,
html[data-theme="dark"] .table-meta-bar,
html[data-theme="dark"] .grid-table-container,
html[data-theme="dark"] .pagination-bar,
html[data-theme="dark"] .side-panel,
html[data-theme="dark"] .panel-header,
html[data-theme="dark"] .panel-actions-strip,
html[data-theme="dark"] .panel-tabs,
html[data-theme="dark"] .card-box,
html[data-theme="dark"] .timeline-bottom-box,
html[data-theme="dark"] .timeline-chat-bubble {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-main);
}

html[data-theme="dark"] .header-row-titles th,
html[data-theme="dark"] .header-row-filters th {
  background: var(--bg-table-header);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

html[data-theme="dark"] .header-row-filters th {
  background: var(--bg-table-filter);
}

html[data-theme="dark"] .db-table tbody tr,
html[data-theme="dark"] .db-table td {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-main);
}

html[data-theme="dark"] .db-table tbody tr:hover,
html[data-theme="dark"] .db-table tbody tr.row-active {
  background: #223249 !important;
}

html[data-theme="dark"] .brand-text h1,
html[data-theme="dark"] .collection-title,
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .card-box-header h3,
html[data-theme="dark"] .mobile-menu-header h2 {
  color: #f8fafc;
}

html[data-theme="dark"] .global-search-wrap input,
html[data-theme="dark"] .col-filter-input,
html[data-theme="dark"] .col-filter-select,
html[data-theme="dark"] .per-page-select,
html[data-theme="dark"] .form-input-control,
html[data-theme="dark"] .timeline-chat-form textarea,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-page,
html[data-theme="dark"] .btn-open-direct,
html[data-theme="dark"] .suggested-filter {
  color: var(--text-main);
  background: #0f1928;
  border-color: #475569;
}

html[data-theme="dark"] .global-search-wrap input::placeholder,
html[data-theme="dark"] .col-filter-input::placeholder,
html[data-theme="dark"] .timeline-chat-form textarea::placeholder {
  color: #94a3b8;
}

html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .btn-page:hover:not(:disabled),
html[data-theme="dark"] .btn-open-direct:hover {
  background: #223249;
  color: #f8fafc;
}

html[data-theme="dark"] .suggested-filters {
  background: var(--bg-surface);
  border-color: var(--border-color);
}

html[data-theme="dark"] .suggested-filter:hover,
html[data-theme="dark"] .suggested-filter:focus-visible,
html[data-theme="dark"] .suggested-filter.active {
  color: #fed7aa;
  background: #3b2415;
  border-color: #c2410c;
}

html[data-theme="dark"] .mobile-swipe-hint {
  color: #fdba74;
  background: #2b2118;
  border-color: #713f12;
}

html[data-theme="dark"] .mobile-menu {
  background: rgba(2, 6, 23, 0.72);
}

html[data-theme="dark"] .mobile-menu-card,
html[data-theme="dark"] .mobile-menu-close {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-main);
}

html[data-theme="dark"] .mobile-menu-action {
  color: var(--text-main);
  background: #0f1928;
  border-color: var(--border-color);
}

html[data-theme="dark"] .mobile-menu-action small {
  color: var(--text-secondary);
}

html[data-theme="dark"] .mobile-menu-action:hover,
html[data-theme="dark"] .mobile-menu-action:focus-visible {
  background: #3b2415;
  border-color: #c2410c;
}

/* Desktop already has a bounded grid. Keeping pagination inside that grid
   makes its bottom edge stay in view while rows are scrolled. */
.grid-table-container > .pagination-bar {
  position: sticky;
  bottom: 0;
  z-index: 35;
  width: 100%;
  background: var(--bg-surface, #ffffff);
  box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.08);
}

@media (max-width: 720px) {
  /* A generous, independently scrollable list prevents the home screen from
     becoming a tiny scroll strip while preserving sticky headings/actions. */
  .table-pane {
    min-height: 0;
  }

  .grid-table-container {
    height: min(62dvh, 620px);
    min-height: 360px;
    max-height: min(62dvh, 620px);
    overflow: auto;
    padding-bottom: 0;
    position: relative;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .grid-table-container > .pagination-bar {
    min-width: 100%;
    box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.12);
  }

  .pagination-bar {
    gap: 6px;
    padding-inline: 8px;
  }

  .pagination-info {
    min-width: 54px;
    font-size: 0.74rem;
  }

  .pagination-controls {
    gap: 2px;
  }

  .btn-page {
    min-width: 34px;
    height: 38px;
    padding-inline: 4px;
  }

  .page-button-label {
    font-size: 0.62rem;
  }
}

/* Warm patterned surfaces inspired by the supplied direction. */
body {
  background: radial-gradient(circle at 88% 5%, rgba(255, 143, 51, .26), transparent 25%), radial-gradient(circle at 8% 2%, rgba(207, 190, 255, .25), transparent 24%), repeating-radial-gradient(ellipse at 104% 55%, rgba(255, 122, 24, .1) 0 1px, transparent 1px 19px), #fffdfb;
}
.app-header { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 94% 18%,rgba(255,112,35,.58),transparent 24%),radial-gradient(circle at 72% 64%,rgba(255,205,120,.58),transparent 30%),radial-gradient(circle at 12% 0,rgba(216,197,255,.45),transparent 27%),linear-gradient(128deg,#fff 27%,#fff4e9 65%,#ffd5c5); }
.app-header::before { content:""; position:absolute; z-index:0; width:760px; height:440px; right:-315px; bottom:-310px; border-radius:50%; border:1px solid rgba(255,255,255,.9); box-shadow:0 0 0 18px rgba(255,255,255,.11),0 0 0 38px rgba(255,255,255,.1),0 0 0 61px rgba(255,255,255,.09),0 0 0 87px rgba(255,255,255,.08),0 0 0 116px rgba(255,255,255,.07); transform:rotate(-8deg); }
.app-header::after { content:""; position:absolute; z-index:0; inset:0; opacity:.32; background:repeating-linear-gradient(118deg,transparent 0 22px,rgba(255,255,255,.6) 23px,transparent 24px 46px); mask-image:linear-gradient(90deg,transparent 20%,#000); }
.app-header > * { position: relative; z-index: 1; }
.hero-visual { display: none; }
.mobile-hero-copy .hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-hover);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}
.mobile-hero-copy .hero-kicker svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: inherit;
  stroke-width: 2.25;
}
.table-action-row { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:9px 16px; border-bottom:1px solid var(--border-color); background:rgba(255,250,245,.8); }
.table-action-row small { color:var(--text-secondary); }
.table-clear-button { gap:7px; min-height:40px; }
.mobile-menu-action { text-decoration:none; }
.lead-guidance-banner { display:flex; align-items:center; gap:12px; margin:14px; padding:15px; border:1px solid #fed7aa; border-radius:16px; color:#9a4210; background:linear-gradient(110deg,#fff8ed,#fff); font-weight:700; }
.lead-guidance-banner span { flex:1; }
.side-panel { background:radial-gradient(circle at 100% 8%,rgba(255,145,52,.2),transparent 25%),repeating-radial-gradient(ellipse at 105% 45%,rgba(255,122,24,.08) 0 1px,transparent 1px 18px),var(--bg-main); }
.panel-header,.card-box,.panel-tabs { border-radius:20px; box-shadow:0 12px 30px rgba(20,31,48,.08); }
.action-call { background:linear-gradient(135deg,#ff6411,#ff941f)!important; color:white!important; }
.action-whatsapp { background:linear-gradient(135deg,#13bd61,#25dc70)!important; color:white!important; }

@media (max-width:720px) {
  .app-header {
    position:relative!important;
    top:auto!important;
    grid-template-columns:minmax(0,1fr) 42px 42px 42px!important;
    grid-template-areas:'brand theme dashboard menu' 'hero hero hero hero' 'search search search search'!important;
    column-gap:8px!important;
    row-gap:18px!important;
    padding:16px!important;
  }
  .header-metrics { display:none!important; }
  body { margin:0!important; padding:0!important; }
  .app-layout { width:100%!important; min-height:100dvh!important; margin:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; }
  .workspace-container,.table-pane { width:100%!important; margin:0!important; border-radius:0!important; }
  .mobile-hero-copy { position:relative; padding-top:4px!important; padding-right:105px!important; }
  .hero-visual { display:block; position:absolute; right:-8px; top:7px; width:108px; height:auto; filter:drop-shadow(0 14px 15px rgba(133,70,12,.18)); }
  .header-controls > #btnDashboard { grid-area:dashboard; width:42px!important; min-width:42px!important; min-height:44px; padding:0!important; gap:0!important; justify-content:center; text-decoration:none; }
  .header-controls > #btnDashboard span { display:none!important; }
  .header-controls > #btnDashboard svg { width:17px;height:17px; }
  .header-controls > #btnTopTheme { grid-area:theme; display:inline-flex!important; width:42px!important; min-width:42px!important; min-height:44px; padding:0!important; align-items:center; justify-content:center; }
  .table-action-row { justify-content:space-between; }
  .table-clear-button span { display:inline!important; }
  /* Let the table travel with the page. The heading enters sticky mode only
     when it physically reaches the top of the phone screen. */
  /* One native vertical scroll for the whole page. The heading alone sticks
     when it reaches the top, and releases immediately when scrolling back. */
  .grid-table-container {
    position:relative!important;
    top:auto!important;
    z-index:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:0!important;
    overflow:visible!important;
    background:#fff!important;
  }
  .table-horizontal-scroll {
    width:100%;
    min-height:0;
    overflow-x:auto;
    overflow-y:clip;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .db-table thead { position:static!important; }
  .db-table thead th { position:static!important; background:var(--bg-surface,#fff); }
  .mobile-sticky-table-header { display:none; position:fixed; top:0; left:0; right:0; z-index:70; overflow:hidden; background:#fff; box-shadow:0 8px 18px rgba(15,23,42,.13); }
  .mobile-sticky-table-header.is-visible { display:block; }
  .mobile-sticky-table-header .db-table { margin:0; }
  .mobile-sticky-table-header .db-table thead { display:table-header-group!important; }
  .mobile-sticky-table-header .db-table thead th { position:static!important; }
  .grid-table-container > .pagination-bar { position:sticky!important; left:0!important; bottom:0!important; width:100%!important; min-width:0!important; max-width:none!important; margin:0!important; padding:8px 10px max(8px,env(safe-area-inset-bottom))!important; display:grid!important; grid-template-columns:1fr!important; justify-items:center!important; gap:7px!important; overflow:hidden!important; z-index:40!important; }
  .grid-table-container > .pagination-bar.is-mobile-sticky { position:fixed!important; left:0!important; right:0!important; bottom:0!important; width:100vw!important; box-shadow:0 -10px 25px rgba(15,23,42,.16)!important; }
  .pagination-info { display:block!important; width:auto!important; min-width:0!important; text-align:center!important; font-size:.78rem!important; }
  .pagination-controls { width:100%!important; min-width:0!important; display:flex!important; justify-content:center!important; align-items:center!important; gap:3px!important; overflow:hidden!important; }
  .page-numbers-list { display:flex!important; justify-content:center!important; gap:3px!important; }
  .btn-page { flex:0 0 auto; }

  .table-clear-button { white-space:nowrap!important; flex:0 0 auto; }
  .table-clear-button span { white-space:nowrap!important; }
  .table-action-row { justify-content:flex-start!important; }
  .table-clear-button:disabled { opacity:.42; cursor:not-allowed; background:#f8fafc; color:#94a3b8; }
  .mobile-menu-action:disabled { opacity:.45; cursor:not-allowed; }
  .header-brand { text-decoration:none; color:inherit; }
  #btnMenu,#btnDashboard,#btnTopTheme,.global-search-wrap { position:relative; z-index:10; pointer-events:auto; }
  .mobile-swipe-hint { min-height:0!important; justify-content:flex-start!important; gap:7px!important; padding:7px 16px!important; border:0!important; background:transparent!important; color:#64748b!important; font-size:.72rem!important; font-weight:600!important; line-height:1.35!important; }
  .mobile-swipe-hint svg { width:14px!important;height:14px!important;flex:0 0 14px; }

  /* Reference-style luminous peach/orange/lavender field with flowing bands. */
  .app-header {
    background:
      radial-gradient(ellipse at 104% 2%,rgba(142,155,232,.7) 0%,rgba(205,191,241,.6) 20%,transparent 47%),
      radial-gradient(ellipse at 92% 24%,rgba(231,187,237,.58) 0%,transparent 39%),
      radial-gradient(ellipse at 105% 43%,rgba(255,174,81,.92) 0%,rgba(255,207,128,.67) 25%,transparent 54%),
      radial-gradient(ellipse at 105% 66%,rgba(255,123,76,.86) 0%,rgba(255,154,116,.7) 27%,transparent 55%),
      radial-gradient(ellipse at 100% 88%,rgba(245,134,179,.7) 0%,rgba(249,185,205,.5) 27%,transparent 55%),
      radial-gradient(ellipse at 61% 54%,rgba(255,247,231,.8) 0%,transparent 36%),
      #ffffff!important;
  }
  .app-header::before {
    inset:0!important; width:auto!important; height:auto!important; right:0!important; bottom:0!important;
    border:0!important; border-radius:0!important; box-shadow:none!important; transform:none!important; opacity:1;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 840 520' preserveAspectRatio='none'%3E%3Cpath d='M-35 350 C160 265 330 274 485 228 C632 184 733 186 890 228 L890 335 C725 286 638 273 505 310 C321 362 167 324 -35 422Z' fill='%23ffffff' fill-opacity='.25'/%3E%3Cpath d='M-30 374 C166 279 325 301 495 250 C637 207 753 213 885 252' fill='none' stroke='%23ffffff' stroke-opacity='.88' stroke-width='2'/%3E%3Cpath d='M-25 429 C180 336 342 376 520 322 C659 280 757 295 890 351' fill='none' stroke='%23ffffff' stroke-opacity='.58' stroke-width='2'/%3E%3Cpath d='M165 470 C340 394 469 409 610 367 C721 334 796 346 886 386' fill='none' stroke='%23ffffff' stroke-opacity='.32' stroke-width='18'/%3E%3C/svg%3E");
    background-size:100% 100%; background-repeat:no-repeat;
  }
  .app-header::after { opacity:.12!important; background:linear-gradient(110deg,rgba(255,255,255,.55),transparent 38%,rgba(255,255,255,.18))!important; mask-image:none!important; }

  /* Contact details is a proper opaque, independently scrolling mobile page. */
  .side-panel { position:fixed!important; inset:0!important; z-index:100!important; width:100%!important; max-width:100%!important; height:100dvh!important; overflow:hidden!important; background-color:#fff!important; background-image:radial-gradient(circle at 98% 3%,rgba(255,157,72,.2),transparent 25%),radial-gradient(circle at 0 40%,rgba(255,221,190,.24),transparent 30%)!important; }
  .side-panel,.side-panel * { box-sizing:border-box; }
  .panel-header-left,.panel-tag-row,.rating-strip,.panel-tabs,.panel-tab,.panel-body,.tab-pane,.card-box,.card-box-header,.form-grid-2,.form-item,.detail-props,.prop-row { min-width:0!important; max-width:100%; }
  .panel-tag-row,.rating-strip { flex-wrap:wrap; }
  .panel-header { width:calc(100% - 28px); margin:14px 14px 0; padding:20px!important; border:1px solid #f2e7dc!important; border-radius:24px 24px 0 0!important; background:rgba(255,255,255,.96)!important; box-shadow:0 12px 30px rgba(89,55,28,.08)!important; }
  .panel-title { margin-top:12px!important; font-size:1.38rem!important; line-height:1.24!important; overflow-wrap:anywhere; }
  .rating-strip { margin-top:12px!important; }
  .btn-close-panel { width:48px;height:48px;align-items:center;justify-content:center;border:1px solid #d8e0e9!important;border-radius:14px!important;background:#fff!important; }
  .panel-actions-strip { display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px!important; width:calc(100% - 28px); margin:0 14px; padding:14px 20px 20px!important; border:1px solid #f2e7dc!important; border-top:0!important; border-radius:0 0 24px 24px!important; background:rgba(255,255,255,.96)!important; }
  .action-btn { min-height:58px!important; font-size:.95rem!important; border-radius:14px!important; gap:8px!important; }
  .action-btn svg { width:22px!important; height:22px!important; }
  .panel-tabs { width:calc(100% - 28px); margin:12px 14px 0; padding:0!important; border:1px solid #e8edf3!important; border-radius:20px!important; overflow:hidden; background:#fff!important; box-shadow:0 10px 24px rgba(25,39,61,.07)!important; }
  .panel-tab { min-height:62px!important; font-size:.88rem!important; }
  .panel-tab { min-width:0!important; padding-inline:6px!important; overflow:hidden; }
  .panel-tab .tab-badge { flex:0 0 auto; }
  .panel-body { width:100%!important; min-width:0!important; min-height:0!important; overflow-x:hidden!important; overflow-y:auto!important; padding-bottom:max(20px,env(safe-area-inset-bottom)); }
  .tab-pane { padding:16px 14px 28px!important; }
  .lead-guidance-banner { min-height:0!important; margin:0 2px 10px!important; padding:5px 4px!important; gap:7px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:#64748b!important; font-size:.72rem!important; font-weight:600!important; line-height:1.3!important; }
  .lead-guidance-banner svg { width:14px!important;height:14px!important;flex:0 0 14px; }
  .card-box { width:100%!important; min-width:0!important; padding:18px!important; border-radius:20px!important; background:#fff!important; box-shadow:0 10px 26px rgba(24,38,60,.07)!important; }
  .card-box-header { margin-bottom:18px!important; padding-bottom:14px!important; }
  .card-box-header h3 { font-size:1rem!important; }
  .form-item { gap:8px!important; }
  .form-item label { font-size:.76rem!important; }
  .form-input-control { min-height:54px!important; padding:0 14px!important; font-size:.95rem!important; }
  .form-input-control,select,textarea { width:100%!important; max-width:100%!important; }
  .textarea-notes { min-height:142px!important; padding-top:14px!important; }
  .form-grid-2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:10px!important; }

  .detail-props { display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px!important; }
  .detail-props .prop-row { min-width:0!important; margin:0!important; padding:12px!important; border:1px solid #e8edf3!important; border-radius:14px!important; background:#f9fbfd!important; }
  .detail-props .prop-row:nth-child(5),.detail-props .prop-row:nth-child(6),.detail-props .prop-row:nth-child(8) { grid-column:1 / -1; }
  .detail-props .prop-label,.detail-props .prop-val { width:100%!important; min-width:0!important; overflow-wrap:anywhere; }
  .detail-props .prop-val { margin-top:5px; }
  .card-footer-actions { width:100%; }
  .card-footer-actions .btn { max-width:100%; }
}

@media (max-width:360px) {
  .app-header { grid-template-columns:minmax(0,1fr) 40px 40px 40px!important; column-gap:7px!important; row-gap:16px!important; padding:12px!important; }
  .header-brand { width:auto!important; min-width:0!important; gap:7px!important; }
  .header-brand .brand-logo { width:36px!important;height:36px!important; }
  .header-brand .brand-text { display:block!important; }
  .header-controls > #btnDashboard { width:40px!important; min-width:40px!important; min-height:40px!important; padding:0!important; }
  .header-controls > #btnTopTheme,#btnMenu { width:40px!important; min-width:40px!important; min-height:40px!important; }
  .panel-header { margin-inline:8px!important; padding:16px!important; }
  .panel-actions-strip { width:calc(100% - 16px); margin-inline:8px; padding:12px!important; gap:8px!important; }
  .panel-tabs { margin-inline:8px!important; }
  .tab-pane { padding-inline:8px!important; }
  .action-btn { min-height:52px!important; padding-inline:6px!important; font-size:.8rem!important; }
  .panel-title { font-size:1.2rem!important; }
  .panel-tab { font-size:.76rem!important; }
  .panel-tab svg { width:17px!important;height:17px!important; }
  .brand-text h1 { white-space:nowrap!important; font-size:.92rem!important; }
  .detail-props { grid-template-columns:1fr!important; }
  .form-grid-2 { grid-template-columns:1fr!important; }
  .detail-props .prop-row { grid-column:1!important; }
}

@media (max-width:330px) {
  .action-btn { padding-inline:3px!important; gap:4px!important; font-size:.72rem!important; }
  .action-btn svg,.action-btn i { width:17px!important;height:17px!important; }
}

html[data-theme="dark"] body { background:radial-gradient(circle at 90% 4%,#532713,transparent 25%),repeating-radial-gradient(ellipse at 105% 55%,rgba(251,146,60,.1) 0 1px,transparent 1px 19px),#07101f; }
html[data-theme="dark"] .table-action-row { background:#101b2c; border-color:#4b3527; color:#fdba74; }
html[data-theme="dark"] .lead-guidance-banner { background:transparent!important; border:0; color:#cbd5e1!important; }

/* Search keeps identical dimensions when focused; the halo is purely visual. */
.global-search-wrap input:focus { width:100%!important; transform:none!important; box-shadow:0 0 0 3px rgba(249,115,22,.2),0 0 24px rgba(124,92,210,.2)!important; }
@media (max-width:720px) {
  .global-search-wrap,.global-search-wrap input { width:100%!important; min-width:0!important; max-width:100%!important; }
  .global-search-wrap input { height:48px!important; min-height:48px!important; max-height:48px!important; box-sizing:border-box!important; font-size:16px!important; transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease!important; }
html[data-theme="dark"] .global-search-wrap input:focus { box-shadow:0 0 0 3px rgba(251,146,60,.26),0 0 26px rgba(139,112,220,.3)!important; }
}

/* Keep the same three primary actions visible on every viewport. Refresh is
   intentionally available from the menu so the header stays calm and
   predictable: theme, dashboard/home, then menu. */
.header-brand { color: inherit; text-decoration: none; }
.header-controls > #btnRefresh { display: none !important; }
.header-controls > #btnTopTheme,
.header-controls > #btnDashboard,
.header-controls > #btnMenu {
  display: inline-flex !important;
  width: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
}
.header-controls > #btnTopTheme,
.header-controls > #btnDashboard,
.header-controls > #btnMenu,
.header-controls > .global-search-wrap {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}
.header-controls > #btnDashboard span { display: none !important; }
.header-controls > #btnTopTheme { order: 2; }
.header-controls > #btnDashboard { order: 3; }
.header-controls > #btnMenu { order: 4; }
.header-controls > .global-search-wrap { order: 1; }

/* Desktop uses the same document scroll as mobile. This lets the page start
   at the top of the hero and lets the table heading become sticky only after
   it reaches the viewport edge, instead of trapping the user in a tiny pane. */
@media (min-width: 721px) {
  html, body {
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .app-layout {
    width: 100%;
    min-height: 100vh;
    height: auto;
    overflow: visible;
  }
  .workspace-container {
    display: flex !important;
    flex-direction: row !important;
    flex: none;
    min-height: 0;
    height: auto !important;
    overflow: visible;
  }
  .table-pane {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    overflow: visible;
  }
  .grid-table-container {
    display: block !important;
    flex: none;
    min-height: 0;
    height: auto !important;
    overflow: visible;
  }
  .table-horizontal-scroll {
    display: block !important;
    width: 100%;
    min-height: 0;
    overflow-x: auto;
    overflow-y: visible;
  }
  .db-table thead { position: static !important; }
  .mobile-sticky-table-header { display: none !important; }
  .mobile-sticky-table-header.desktop-sticky-table-header.is-desktop-visible {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 70 !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .13) !important;
  }
  .desktop-sticky-table-header .db-table { margin: 0 !important; }
  .desktop-sticky-table-header .db-table thead { display: table-header-group !important; }
  .desktop-sticky-table-header .db-table thead th { position: static !important; }
  .grid-table-container > .pagination-bar.is-desktop-sticky {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    z-index: 80 !important;
    box-shadow: 0 -10px 28px rgba(15, 23, 42, .14) !important;
  }

  /* The wide layout follows the same hierarchy as the phone: brand and the
     three primary actions first, the useful context/search area next, and the
     spreadsheet below. The only difference is the extra horizontal room. */
  .app-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px 48px 48px;
    grid-template-areas:
      'brand theme dashboard menu'
      'hero hero hero hero'
      'search search search search';
    align-items: start;
    column-gap: 12px;
    row-gap: 22px;
    height: auto;
    padding: 22px clamp(22px, 5vw, 72px) 30px;
  }
  .header-controls { display: contents; }
  .header-brand { grid-area: brand; align-self: center; }
  .header-brand .brand-logo { width: 56px !important; height: 56px !important; border-radius: 16px !important; }
  .header-brand .brand-text h1 { font-size: 1.28rem !important; }
  .header-brand { gap: 11px !important; }
  .header-metrics { display: none !important; }
  .mobile-hero-copy {
    display: block;
    grid-area: hero;
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 150px;
    padding: 8px 170px 4px 0;
  }
  .mobile-hero-copy h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
  .mobile-hero-copy p { font-size: 1rem; }
  .hero-visual {
    display: block;
    position: absolute;
    top: 0;
    right: clamp(16px, 4vw, 64px);
    width: 190px;
    height: auto;
    filter: drop-shadow(0 14px 15px rgba(133, 70, 12, .18));
  }
  .header-controls > .global-search-wrap {
    grid-area: search;
    width: 100%;
    max-width: none;
  }
  .header-controls > #btnTopTheme { grid-area: theme; }
  .header-controls > #btnDashboard { grid-area: dashboard; }
  .header-controls > #btnMenu { grid-area: menu; }
  .global-search-wrap input { height: 48px; font-size: 1rem; }
  .header-controls > #btnTopTheme,
  .header-controls > #btnDashboard,
  .header-controls > #btnMenu {
    width: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 14px;
  }
}

/* Complete mobile dark theme. These rules intentionally come last so every
   mobile surface—including the full-screen contact view—uses dark tokens. */
@media (max-width:720px) {
  html[data-theme="dark"] body,
  html[data-theme="dark"] .app-layout,
  html[data-theme="dark"] .workspace-container,
  html[data-theme="dark"] .table-pane { background:#07101f!important; color:#f8fafc!important; }
  html[data-theme="dark"] .app-header {
    background:radial-gradient(ellipse at 104% 2%,rgba(109,95,190,.72),transparent 45%),radial-gradient(ellipse at 104% 42%,rgba(191,83,35,.7),transparent 50%),radial-gradient(ellipse at 102% 78%,rgba(143,45,87,.55),transparent 48%),radial-gradient(ellipse at 55% 50%,rgba(16,27,45,.75),transparent 55%),#08111f!important;
    border-color:#26354a!important;
  }
  html[data-theme="dark"] .app-header::before { opacity:.36!important; }
  html[data-theme="dark"] .brand-text h1,
  html[data-theme="dark"] .mobile-hero-copy h2 { color:#f8fafc!important; }
  html[data-theme="dark"] .mobile-hero-copy p { color:#cbd5e1!important; }
  html[data-theme="dark"] .global-search-wrap input,
  html[data-theme="dark"] .col-filter-input,
  html[data-theme="dark"] .col-filter-select { background:#101b2c!important; border-color:#3a4a61!important; color:#f8fafc!important; }
  html[data-theme="dark"] .table-meta-bar,
  html[data-theme="dark"] .table-action-row,
  html[data-theme="dark"] .suggested-filters,
  html[data-theme="dark"] .grid-table-container,
  html[data-theme="dark"] .table-horizontal-scroll,
  html[data-theme="dark"] .pagination-bar,
  html[data-theme="dark"] .mobile-sticky-table-header { background:#0c1626!important; border-color:#2c3b50!important; color:#f8fafc!important; }
  html[data-theme="dark"] .db-table tbody tr,
  html[data-theme="dark"] .db-table td { background:#0c1626!important; border-color:#26354a!important; color:#e7edf6!important; }
  html[data-theme="dark"] .header-row-titles th { background:#18263a!important; border-color:#35455b!important; color:#e8eef7!important; }
  html[data-theme="dark"] .header-row-filters th { background:#111d2f!important; border-color:#35455b!important; }
  html[data-theme="dark"] .mobile-swipe-hint { color:#aebbd0!important; }
  html[data-theme="dark"] .table-clear-button:disabled { background:#111d2f!important; color:#718098!important; border-color:#2c3b50!important; }
  html[data-theme="dark"] .side-panel { contain:layout paint; background-color:#07101f!important; background-image:radial-gradient(circle at 100% 0,rgba(112,91,186,.32),transparent 28%),radial-gradient(circle at 0 43%,rgba(169,72,30,.22),transparent 34%)!important; color:#f8fafc!important; }
  html[data-theme="dark"] .panel-header,
  html[data-theme="dark"] .panel-actions-strip,
  html[data-theme="dark"] .panel-tabs,
  html[data-theme="dark"] .card-box { background:#0f1a2b!important; border-color:#2e3d53!important; color:#f8fafc!important; }
  html[data-theme="dark"] .panel-title,
  html[data-theme="dark"] .card-box-header h3,
  html[data-theme="dark"] .prop-val,
  html[data-theme="dark"] .form-item label { color:#f8fafc!important; }
  html[data-theme="dark"] .badge-type { background:#1e2c40!important; color:#cbd5e1!important; }
  html[data-theme="dark"] .btn-close-panel { background:#142237!important; border-color:#405169!important; color:#e6edf7!important; }
  html[data-theme="dark"] .panel-tab { color:#b8c5d8!important; }
  html[data-theme="dark"] .panel-tab.active { background:#142237!important; color:#fb923c!important; }
  html[data-theme="dark"] .btn-maps { background:#2b1d16!important; border-color:#77401f!important; color:#fdba74!important; }
  html[data-theme="dark"] .btn-web { background:#152236!important; border-color:#405169!important; color:#dbe5f2!important; }
  html[data-theme="dark"] .form-input-control,
  html[data-theme="dark"] .timeline-chat-form textarea { background:#0a1423!important; border-color:#405169!important; color:#f8fafc!important; }
  html[data-theme="dark"] .detail-props .prop-row { background:#111d2f!important; border-color:#304158!important; }
  html[data-theme="dark"] .prop-label { color:#9eacc0!important; }

  /* Auto widths are more robust than viewport calculations in Android WebViews
     that reserve space for scrollbars or apply display scaling. */
  .side-panel { --detail-gutter:12px; overflow-x:hidden!important; }
  .panel-header,.panel-actions-strip,.panel-tabs { width:auto!important; max-width:none!important; margin-left:var(--detail-gutter)!important; margin-right:var(--detail-gutter)!important; left:auto!important; right:auto!important; }
  .tab-pane { width:100%!important; padding-left:var(--detail-gutter)!important; padding-right:var(--detail-gutter)!important; }
  .lead-guidance-banner,.card-box { width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; }
  .panel-body,.tab-pane,.card-box,.form-grid-2,.form-item,.detail-props { max-width:100%!important; overflow-x:hidden; }
  html[data-theme="dark"] .panel-body { scrollbar-color:#52627a #07101f; }
  html[data-theme="dark"] .panel-body::-webkit-scrollbar { width:8px; }
  html[data-theme="dark"] .panel-body::-webkit-scrollbar-track { background:#07101f; }
  html[data-theme="dark"] .panel-body::-webkit-scrollbar-thumb { background:#52627a; border-radius:99px; border:2px solid #07101f; }
}