/* =============================================================================
   Autodavid — theme.css   (dash_app/assets/theme.css)
   Rework 2026 · paleta Nocturne / Workava · dark + light
   Reemplaza a: theme_override.css, sidebar_nav.css, animations.css
   NO cambia ningun id ni callback. Solo pinta.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------- tokens -- */
:root,
html[data-ad-theme="dark"] {
  --ad-bg:#161826;  --ad-bg-2:#1b1d2c;  --ad-surface:#232532;  --ad-surface-2:#1c1e2c;
  --ad-text:#e9e9ed; --ad-muted:#9397ab;
  --ad-border:#3f424d; --ad-border-soft:#2e3140;
  --ad-accent:#9184d9; --ad-accent-strong:#b5abfc;
  --ad-accent-tint:rgba(145,132,217,.12); --ad-accent-tint-2:rgba(145,132,217,.20);
  --ad-ok:#7fc4a8; --ad-warn:#d3ab63; --ad-bad:#d18d8d;
  --ad-shadow:0 0 0 1px #3f424d;
  --ad-shadow-lg:0 0 0 1px #595d6c, 0 16px 40px rgba(0,0,0,.55);
  --ad-skel:linear-gradient(90deg,#232532 0%,#2e3142 50%,#232532 100%);
  --ad-radius:8px; --ad-radius-lg:14px;
  color-scheme: dark;
}

html[data-ad-theme="light"] {
  --ad-bg:#f3f5fe;  --ad-bg-2:#e9ecf9;  --ad-surface:#ffffff;  --ad-surface-2:#f3f5fe;
  --ad-text:#292b31; --ad-muted:#75798c;
  --ad-border:#cfd3e5; --ad-border-soft:#e4e7f5;
  --ad-accent:#796cbf; --ad-accent-strong:#5d5294;
  --ad-accent-tint:rgba(121,108,191,.10); --ad-accent-tint-2:rgba(121,108,191,.18);
  --ad-ok:#3f8b6d; --ad-warn:#9a7526; --ad-bad:#a85a5a;
  --ad-shadow:0 0 0 1px #e4e7f5;
  --ad-shadow-lg:0 0 0 1px #cfd3e5, 0 16px 40px rgba(41,43,49,.10);
  --ad-skel:linear-gradient(90deg,#e9ecf9 0%,#f7f8ff 50%,#e9ecf9 100%);
  color-scheme: light;
}

/* Legacy cream / forest green (pre-Nocturne). Wins over dark/light. */
html[data-ad-palette="legacy"],
html[data-ad-palette="legacy"][data-ad-theme="dark"],
html[data-ad-palette="legacy"][data-ad-theme="light"] {
  --ad-bg:#F5F1E8;  --ad-bg-2:#EFE9DD;  --ad-surface:#FFFFFF;  --ad-surface-2:#EFE9DD;
  --ad-text:#1E2D2A; --ad-muted:#5C6F6B;
  --ad-border:#D6D0C4; --ad-border-soft:#E4DFD4;
  --ad-accent:#1F6F5F; --ad-accent-strong:#3E8E7E;
  --ad-accent-tint:#E8F3F0; --ad-accent-tint-2:rgba(31,111,95,.18);
  --ad-ok:#2D6A4F; --ad-warn:#B8892E; --ad-bad:#A85A5A;
  --ad-shadow:0 8px 24px rgba(0,0,0,.06);
  --ad-shadow-lg:0 12px 32px rgba(0,0,0,.10);
  --ad-skel:linear-gradient(90deg,#EFE9DD 0%,#F7F3EA 50%,#EFE9DD 100%);
  color-scheme: light;
}
html[data-ad-palette="legacy"] #ad-theme-toggle { display: none !important; }

/* Puente hacia Bootstrap 5 / dbc (SANDSTONE) ------------------------------- */
:root {
  --bs-body-bg: var(--ad-bg);
  --bs-body-color: var(--ad-text);
  --bs-primary: var(--ad-accent);
  --bs-link-color: var(--ad-accent);
  --bs-link-hover-color: var(--ad-accent-strong);
  --bs-border-color: var(--ad-border);
  --bs-focus-ring-color: var(--ad-accent-tint-2);
  --bs-secondary-color: var(--ad-muted);
}

/* Tokens de Dash 4 core components (dropdown, datepicker, etc.) ------------- */
/* Inverse-Strong = fondos de inputs/popovers; por defecto Dash usa #fff.     */
/* En selected dates Dash pinta el texto con Inverse-Strong sobre el accent:  */
/* forzamos ese texto a blanco más abajo para no acoplarlo al fondo oscuro.   */
:root {
  --Dash-Fill-Interactive-Strong: var(--ad-accent);
  --Dash-Fill-Interactive-Weak: var(--ad-accent-tint-2);
  --Dash-Fill-Inverse-Strong: var(--ad-surface);
  --Dash-Fill-Primary-Hover: var(--ad-accent-tint);
  --Dash-Fill-Primary-Active: var(--ad-accent-tint-2);
  --Dash-Fill-Disabled: var(--ad-border-soft);
  --Dash-Stroke-Strong: var(--ad-border);
  --Dash-Stroke-Weak: var(--ad-border-soft);
  --Dash-Text-Primary: var(--ad-text);
  --Dash-Text-Strong: var(--ad-text);
  --Dash-Text-Weak: var(--ad-muted);
  --Dash-Text-Disabled: var(--ad-muted);
  --Dash-Shading-Strong: rgba(0, 0, 0, 0.55);
  --Dash-Shading-Weak: rgba(0, 0, 0, 0.28);
}

html[data-ad-theme="light"] {
  --Dash-Shading-Strong: rgba(41, 43, 49, 0.28);
  --Dash-Shading-Weak: rgba(41, 43, 49, 0.14);
}

html[data-ad-palette="legacy"] {
  --Dash-Shading-Strong: rgba(30, 45, 42, 0.22);
  --Dash-Shading-Weak: rgba(30, 45, 42, 0.12);
}

/* ------------------------------------------------------------------ base -- */
body, ._dash-app-content, #_dash-app-content {
  background: var(--ad-bg);
  color: var(--ad-text);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
}
h1,h2,h3,h4,h5 { font-weight: 500; letter-spacing: -.015em; }
#_dash-app-content a:not(.btn):not(.nav-link) { color: var(--ad-accent); text-underline-offset: 3px; }
#_dash-app-content a:not(.btn):not(.nav-link):hover { color: var(--ad-accent-strong); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
::selection { background: var(--ad-accent-tint-2); }
.ad-scroll::-webkit-scrollbar, main::-webkit-scrollbar { width: 9px; height: 9px; }
.ad-scroll::-webkit-scrollbar-thumb, main::-webkit-scrollbar-thumb { background: var(--ad-border); border-radius: 99px; }

/* --------------------------------------------------------------- sidebar -- */
/* Mismas clases que dash_app/assets/sidebar_nav.css: sin tocar layout.py */
.layout-sidebar {
  position: fixed; left: 0; top: 0; height: 100vh; z-index: 200;
  display: flex; flex-direction: column; box-sizing: border-box;
  width: 76px; overflow-x: hidden; overflow-y: auto;
  background: var(--ad-surface-2);
  border-right: 1px solid var(--ad-border-soft);
  transition: width .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease;
}
.layout-sidebar.sidebar-pinned,
.layout-sidebar.sidebar-unpinned:hover { width: 248px; box-shadow: var(--ad-shadow-lg); }

.sidebar-brand-block { padding: 16px 20px 14px; border-bottom: 1px solid var(--ad-border-soft); flex-shrink: 0; }
.sidebar-brand-block h1 { font-size: 15px !important; font-weight: 600; color: var(--ad-text) !important; }
.sidebar-brand-block p  { font-size: 11px !important; color: var(--ad-muted) !important; }

.sidebar-nav-list { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; flex: 1; min-height: 0; }

.sidebar-nav-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 11px; border: 1px solid transparent; border-radius: var(--ad-radius);
  background: transparent; color: var(--ad-muted);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.sidebar-nav-btn:hover { background: var(--ad-accent-tint); color: var(--ad-text); }
.sidebar-nav-btn.active {
  background: var(--ad-accent-tint); color: var(--ad-accent-strong);
  border-color: var(--ad-accent-tint-2);
}
.sidebar-nav-btn .bi,
.sidebar-nav-btn .ph { font-size: 1.1rem; flex-shrink: 0; width: 1.375rem; text-align: center; }

.layout-sidebar.sidebar-unpinned:not(:hover) .nav-item-label {
  opacity: 0; width: 0; overflow: hidden; white-space: nowrap; pointer-events: none;
  transform: translateX(-4px);
  transition: opacity .16s ease, transform .2s ease, width .24s cubic-bezier(.2,.8,.2,1);
}
.layout-sidebar.sidebar-unpinned:hover .nav-item-label,
.layout-sidebar.sidebar-pinned .nav-item-label {
  opacity: 1; width: auto; white-space: nowrap;
  transform: none;
  transition: opacity .16s ease .04s, transform .2s ease;
}

.sidebar-footer { padding: 12px; border-top: 1px solid var(--ad-border-soft); flex-shrink: 0; }
.sidebar-hamburger {
  width: 100%; padding: 9px 10px; border-radius: var(--ad-radius);
  border: 1px solid var(--ad-border-soft); background: transparent;
  color: var(--ad-muted); font-size: 18px; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.sidebar-hamburger:hover { background: var(--ad-accent-tint); color: var(--ad-text); }

/* ------------------------------------------------------------ top header -- */
.layout-main-column { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 100vh; }

/* Antes: gradiente naranja/verde. Ahora barra sobria pegada arriba. */
.layout-top-row {
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0; gap: 16px;
  position: sticky; top: 0; z-index: 100;
  background: var(--ad-bg);
  border: 0; border-bottom: 1px solid var(--ad-border-soft);
  border-radius: 0; padding: 14px 4px; margin-bottom: 16px;
}
.layout-top-row h1 { font-size: 17px !important; font-weight: 500; color: var(--ad-text) !important; }
.layout-top-row p  { font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--ad-muted) !important; }

/* ------------------------------------------------------- global search -- */
.ad-global-search-wrap {
  position: relative;
  width: min(320px, 42vw);
  flex-shrink: 1;
}
.ad-global-search-input {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: var(--ad-radius) !important;
  border: 1px solid var(--ad-border) !important;
  background: var(--ad-surface) !important;
  color: var(--ad-text) !important;
  font-size: 13px !important;
}
.ad-global-search-input:focus {
  outline: none !important;
  border-color: var(--ad-accent) !important;
  box-shadow: 0 0 0 3px var(--ad-accent-tint) !important;
}
.ad-global-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 200;
  max-height: 360px;
  overflow-y: auto;
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius-lg);
  box-shadow: var(--ad-shadow-lg);
}
.ad-global-search-results:empty { display: none; }
.ad-global-search-empty {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ad-muted);
}
.ad-global-search-hit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--ad-border-soft);
  background: transparent;
  color: var(--ad-text);
  cursor: pointer;
}
.ad-global-search-hit:last-child { border-bottom: 0; }
.ad-global-search-hit:hover { background: var(--ad-accent-tint); }
.ad-global-search-kind {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ad-accent-strong);
  background: var(--ad-accent-tint);
  border-radius: 6px;
  padding: 2px 6px;
  margin-top: 2px;
}
.ad-global-search-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-global-search-text strong {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ad-global-search-sub {
  font-size: 11px;
  color: var(--ad-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-rep-status-table th,
.ad-rep-status-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--ad-border-soft);
  text-align: left;
}
.ad-rep-status-table th {
  color: var(--ad-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Cold Call Dashboard — aligned filter row */
.ad-dashboard-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(160px, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}
@media (max-width: 1100px) {
  .ad-dashboard-filters {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}
@media (max-width: 640px) {
  .ad-dashboard-filters {
    grid-template-columns: 1fr;
  }
}
.ad-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ad-filter-field label {
  margin-bottom: 0 !important;
  line-height: 1.2;
}
.ad-filter-control {
  min-height: 38px;
  display: flex;
  align-items: center;
  width: 100%;
}
.ad-filter-control .ad-filter-dropdown,
.ad-filter-control .ad-filter-datepicker,
.ad-filter-control .DateRangePicker,
.ad-filter-control .DateRangePickerInput {
  width: 100%;
}
.ad-filter-field .Select-control,
.ad-filter-field .Select__control,
.ad-filter-field .dash-dropdown-trigger,
.ad-filter-field .dash-datepicker-input-wrapper,
.ad-filter-field .DateInput,
.ad-filter-field .DateInput_input,
.ad-filter-field .DateRangePickerInput,
.ad-filter-field .DateRangePickerInput_input {
  min-height: 38px !important;
  box-sizing: border-box;
}
.ad-filter-field .DateRangePickerInput {
  display: flex;
  align-items: center;
}
.ad-filter-field-date .ad-filter-control {
  min-height: 38px;
}

/* ------------------------------------------------------- botones y tags -- */
/* Nocturne: la accion primaria es un contorno con tinte al hover, no un relleno. */
.btn-primary, #_dash-app-content .btn-primary,
button[type="submit"] {
  background: transparent !important;
  border: 1px solid var(--ad-accent) !important;
  color: var(--ad-accent-strong) !important;
  border-radius: var(--ad-radius) !important;
  font-weight: 500;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.btn-primary:hover, #_dash-app-content .btn-primary:hover, button[type="submit"]:hover {
  background: var(--ad-accent-tint-2) !important;
  border-color: var(--ad-accent-strong) !important;
}
.btn-primary:active, button[type="submit"]:active { transform: translateY(1px); }
.btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--ad-accent-tint) !important; }

.btn-secondary, .btn-light, .btn-outline-secondary {
  background: transparent !important;
  border: 1px solid var(--ad-border) !important;
  color: var(--ad-text) !important;
  border-radius: var(--ad-radius) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover { background: var(--ad-accent-tint) !important; }

.badge { border-radius: 999px; font-weight: 500; }

/* --------------------------------------------------------------- inputs -- */
.form-control, .form-select, input[type="text"], input[type="password"], input[type="number"], textarea {
  background: var(--ad-surface) !important;
  color: var(--ad-text) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius) !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control::placeholder, textarea::placeholder { color: var(--ad-muted) !important; }
.form-control:focus, .form-select:focus, input:focus, textarea:focus {
  border-color: var(--ad-accent) !important;
  box-shadow: 0 0 0 3px var(--ad-accent-tint) !important;
}
input[type="radio"], input[type="checkbox"] { accent-color: var(--ad-accent); }

/* React-Select v1 + v5 (dcc.Dropdown) — force palette over SANDSTONE white */
.Select-control, .Select-menu-outer,
.Select__control,
.Select__menu,
.Select__menu-list,
div[class*="-control"],
div[class*="-menu"],
div[class*="-MenuList"],
.dash-dropdown .Select-control,
.dash-dropdown .Select__control {
  background: var(--ad-surface) !important;
  background-color: var(--ad-surface) !important;
  border-color: var(--ad-border) !important;
  color: var(--ad-text) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: none !important;
}
.Select__control--is-focused,
.Select--is-focused > .Select-control,
div[class*="-control"]:focus-within {
  border-color: var(--ad-accent) !important;
  box-shadow: 0 0 0 3px var(--ad-accent-tint) !important;
}
.Select-menu-outer,
.Select__menu,
div[class*="-menu"] {
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
  box-shadow: var(--ad-shadow-lg) !important;
  z-index: 1000 !important;
}
.Select-option,
.Select__option,
div[class*="-option"] {
  background: var(--ad-surface) !important;
  color: var(--ad-text) !important;
}
.Select-option.is-focused,
.Select__option--is-focused,
div[class*="-option"]:hover {
  background: var(--ad-accent-tint-2) !important;
  color: var(--ad-text) !important;
}
.Select-option.is-selected,
.Select__option--is-selected {
  background: var(--ad-accent-tint-2) !important;
  color: var(--ad-accent-strong) !important;
}
.Select-value-label, .Select-placeholder,
.Select--single > .Select-control .Select-value,
.Select__single-value, .Select__placeholder,
.Select__input-container, .Select__input,
div[class*="-singleValue"], div[class*="-placeholder"],
div[class*="-Input"] input {
  color: var(--ad-text) !important;
}
.Select__indicator, .Select-arrow,
div[class*="-indicatorContainer"] { color: var(--ad-muted) !important; }
.Select__indicator-separator, div[class*="-indicatorSeparator"] {
  background: var(--ad-border-soft) !important;
}
.Select__multi-value, div[class*="-multiValue"] {
  background: var(--ad-accent-tint) !important;
  border-radius: 6px !important;
}
.Select__multi-value__label, div[class*="-multiValue"] div {
  color: var(--ad-accent-strong) !important;
}

/* react-dates / dcc.DatePicker* — calendar popup often stays SANDSTONE white */
.SingleDatePickerInput, .DateRangePickerInput,
.SingleDatePickerInput__withBorder, .DateRangePickerInput__withBorder {
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius) !important;
}
.DateInput, .DateInput_input, .DateInput_input__focused {
  background: var(--ad-surface) !important;
  color: var(--ad-text) !important;
  border: 0 !important;
  font-size: 14px !important;
}
.DateInput_input::placeholder { color: var(--ad-muted) !important; }
.DateInput_fangStroke { stroke: var(--ad-border) !important; }
.DateInput_fangFill { fill: var(--ad-surface) !important; }
.DayPicker, .DayPicker__withBorder,
.CalendarMonth, .CalendarMonthGrid,
.CalendarMonth_caption, .DayPickerNavigation,
.DayPickerKeyboardShortcuts_show {
  background: var(--ad-surface) !important;
  color: var(--ad-text) !important;
}
.CalendarMonth_caption strong { color: var(--ad-text) !important; }
.DayPicker_weekHeader_li small { color: var(--ad-muted) !important; }
.CalendarDay__default {
  background: var(--ad-surface) !important;
  color: var(--ad-text) !important;
  border: 1px solid var(--ad-border-soft) !important;
}
.CalendarDay__default:hover {
  background: var(--ad-accent-tint-2) !important;
  color: var(--ad-text) !important;
  border-color: var(--ad-accent) !important;
}
.CalendarDay__selected,
.CalendarDay__selected:hover,
.CalendarDay__selected_span,
.CalendarDay__hovered_span {
  background: var(--ad-accent) !important;
  color: #fff !important;
  border-color: var(--ad-accent) !important;
}
.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_calendar {
  background: var(--ad-bg-2) !important;
  color: var(--ad-muted) !important;
}
.DayPickerNavigation_button__default {
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
}
.DayPickerNavigation_svg__horizontal { fill: var(--ad-text) !important; }
.SingleDatePicker_picker, .DateRangePicker_picker {
  background: var(--ad-surface) !important;
  z-index: 1100 !important;
}

/* Dash 4 dcc.Dropdown (radix) — classes reales de async-dropdown.js -------- */
.dash-dropdown,
.dash-dropdown-trigger,
.dash-dropdown-search-container,
.dash-dropdown-content,
.dash-dropdown-options,
.dash-dropdown-option,
.dash-dropdown-value,
.dash-dropdown-value-item,
.dash-dropdown-placeholder,
.dash-dropdown-search,
.dash-options-list-option-wrapper {
  background-color: var(--ad-surface) !important;
  color: var(--ad-text) !important;
  border-color: var(--ad-border) !important;
}
.dash-dropdown-content {
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
  box-shadow: var(--ad-shadow-lg) !important;
  color: var(--ad-text) !important;
}
.dash-dropdown-option:hover,
.dash-dropdown-option:focus-within,
.dash-options-list-option-wrapper:hover,
.dash-options-list-option-wrapper:focus-within {
  background: var(--ad-accent-tint-2) !important;
  color: var(--ad-text) !important;
}
.dash-dropdown-option:hover *,
.dash-dropdown-option:focus-within *,
.dash-options-list-option-wrapper:hover *,
.dash-options-list-option-wrapper:focus-within * {
  color: var(--ad-text) !important;
}
.dash-dropdown-search::placeholder {
  color: var(--ad-muted) !important;
}
.dash-dropdown-trigger-icon,
.dash-dropdown-search-icon,
.dash-dropdown-clear {
  color: var(--ad-muted) !important;
}

/* Dash 4 dcc.DatePicker* — classes reales de async-datepicker.js ----------- */
.dash-datepicker,
.dash-datepicker-input-wrapper,
.dash-datepicker-content,
.dash-datepicker-calendar,
.dash-datepicker-calendar-container,
.dash-datepicker-calendar-wrapper,
.dash-datepicker-portal {
  background: var(--ad-surface) !important;
  color: var(--ad-text) !important;
  border-color: var(--ad-border) !important;
}
.dash-datepicker-input,
.dash-datepicker-input input {
  background: transparent !important;
  color: var(--ad-text) !important;
}
.dash-datepicker-content {
  box-shadow: var(--ad-shadow-lg) !important;
}
.dash-datepicker-calendar td,
.dash-datepicker-calendar th {
  color: var(--ad-text) !important;
}
.dash-datepicker-calendar td:hover,
.dash-datepicker-calendar-date-highlighted:not(.dash-datepicker-calendar-date-outside),
.dash-datepicker-calendar-date-highlighted.dash-datepicker-calendar-date-outside:hover {
  background: var(--ad-accent-tint-2) !important;
  color: var(--ad-text) !important;
}
/* Selected usa Inverse-Strong como color de texto en Dash 4; forzar contraste */
.dash-datepicker-calendar-date-selected,
.dash-datepicker-calendar-date-selected:hover,
.dash-datepicker-calendar-date-selected:active {
  background: var(--ad-accent) !important;
  color: #fff !important;
}
.dash-datepicker-calendar-date-inside {
  background: var(--ad-accent-tint) !important;
  color: var(--ad-text) !important;
}
.dash-datepicker-calendar-date-outside,
.dash-datepicker-calendar-date-disabled {
  color: var(--ad-muted) !important;
}
.dash-datepicker-caret-icon,
.dash-datepicker-clear,
.dash-datepicker-close-button,
.dash-datepicker-month-nav {
  color: var(--ad-muted) !important;
}
.dash-datepicker-month-nav:hover,
.dash-datepicker-clear:hover,
.dash-datepicker-close-button:hover {
  color: var(--ad-accent-strong) !important;
}

/* Bootstrap / dbc leftovers that fight the palette */
.dropdown-menu {
  background: var(--ad-surface) !important;
  border-color: var(--ad-border) !important;
  color: var(--ad-text) !important;
}
.dropdown-item { color: var(--ad-text) !important; }
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--ad-accent-tint) !important;
  color: var(--ad-text) !important;
}
.list-group-item {
  background: var(--ad-surface) !important;
  color: var(--ad-text) !important;
  border-color: var(--ad-border-soft) !important;
}
.modal-content {
  background: var(--ad-surface) !important;
  color: var(--ad-text) !important;
  border-color: var(--ad-border) !important;
}
.modal-header, .modal-footer {
  border-color: var(--ad-border-soft) !important;
}
.modal-header .btn-close {
  filter: invert(0.85);
}
html[data-ad-theme="light"] .modal-header .btn-close,
html[data-ad-palette="legacy"] .modal-header .btn-close {
  filter: none;
}

/* Toasts: BS translucent rgba(--bs-body-bg-rgb) breaks when body-bg is a
   custom property without rgb channels → white panel + light text in dark. */
.toast,
#universal-toast {
  --bs-toast-bg: var(--ad-surface);
  --bs-toast-color: var(--ad-text);
  --bs-toast-border-color: var(--ad-border);
  --bs-toast-header-bg: var(--ad-surface-2);
  --bs-toast-header-color: var(--ad-text);
  --bs-toast-header-border-color: var(--ad-border-soft);
  background: var(--ad-surface) !important;
  color: var(--ad-text) !important;
  border: 1px solid var(--ad-border) !important;
  box-shadow: var(--ad-shadow-lg);
}
.toast .toast-header {
  background: var(--ad-surface-2) !important;
  color: var(--ad-text) !important;
  border-bottom: 1px solid var(--ad-border-soft) !important;
}
.toast .toast-header strong,
.toast .toast-header .me-auto,
.toast .toast-body {
  color: var(--ad-text) !important;
}
.toast .toast-header .btn-close {
  filter: invert(0.85);
}
html[data-ad-theme="light"] .toast .toast-header .btn-close,
html[data-ad-palette="legacy"] .toast .toast-header .btn-close {
  filter: none;
}
.toast .toast-header .rounded.me-2 {
  /* dbc icon chip next to title */
  box-shadow: 0 0 0 1px var(--ad-border-soft);
}
.ad-contact-modal .modal-title {
  color: var(--ad-text) !important;
  font-weight: 600;
}
.ad-contact-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.ad-contact-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--ad-border-soft);
  background: var(--ad-surface-2, var(--ad-surface));
  color: var(--ad-text);
  text-decoration: none;
  font-size: 18px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ad-contact-icon-btn:hover {
  border-color: var(--ad-accent, #9184d9);
  color: var(--ad-accent, #9184d9);
  text-decoration: none;
}
.ad-contact-icon-skel {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.ad-contact-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 4px;
}
.ad-contact-kv {
  margin-bottom: 10px;
  min-width: 140px;
  flex: 1 1 180px;
  max-width: 100%;
  overflow: hidden;
}
.ad-contact-kv-label {
  display: block;
  font-size: 11px;
  color: var(--ad-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.ad-contact-kv-value-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.ad-contact-kv-value {
  font-size: 14px;
  color: var(--ad-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.ad-contact-copy-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--ad-border-soft);
  background: transparent;
  color: var(--ad-muted);
  cursor: pointer;
  font-size: 14px;
}
.ad-contact-copy-btn:hover {
  color: var(--ad-text);
  border-color: var(--ad-accent, #9184d9);
}
.ad-contact-copy-btn.is-copied {
  color: var(--ad-ok, #7fc4a8);
  border-color: var(--ad-ok, #7fc4a8);
}
.ad-contact-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
.ad-contact-history-table th,
.ad-contact-history-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--ad-border-soft);
  text-align: left;
  vertical-align: top;
  color: var(--ad-text);
}
.ad-contact-history-table th {
  color: var(--ad-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  position: sticky;
  top: 0;
  background: var(--ad-surface);
}
.popover, .tooltip-inner {
  background: var(--ad-surface) !important;
  color: var(--ad-text) !important;
  border: 1px solid var(--ad-border) !important;
}

/* ---------------------------------------------------------------- cards -- */
.card, .ad-card {
  background: var(--ad-surface);
  border: 1px solid var(--ad-border-soft) !important;
  border-radius: var(--ad-radius-lg);
  box-shadow: var(--ad-shadow);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.card:hover, .ad-card:hover { transform: translateY(-3px); box-shadow: var(--ad-shadow-lg); }

/* --------------------------------------------------------------- tablas -- */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th,
table thead th {
  background: var(--ad-surface-2) !important;
  color: var(--ad-muted) !important;
  font-size: 11px !important; letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 1px solid var(--ad-border-soft) !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td,
table tbody td {
  background: var(--ad-surface) !important;
  color: var(--ad-text) !important;
  border-bottom: 1px solid var(--ad-border-soft) !important;
}
table tbody tr { transition: background .16s ease; }
table tbody tr:hover td { background: var(--ad-accent-tint) !important; }

/* ----------------------------------------------------------------- tabs -- */
/* Se conservan por si un usuario usa ui_nav_mode = "tabs". */
.tab {
  background: transparent !important;
  border: 0 !important; border-bottom: 2px solid transparent !important;
  color: var(--ad-muted) !important;
  padding: 10px 16px !important;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.tab:hover { color: var(--ad-text) !important; background: var(--ad-accent-tint) !important; }
.tab--selected {
  background: var(--ad-accent-tint) !important;
  color: var(--ad-accent-strong) !important;
  border-bottom-color: var(--ad-accent) !important;
  border-radius: var(--ad-radius) var(--ad-radius) 0 0;
  animation: adTabPop .25s cubic-bezier(.2,.8,.2,1);
}

.ad-data-subtabs .nav-tabs {
  border-bottom: 1px solid var(--ad-border-soft) !important;
  gap: 4px;
  background: transparent !important;
}

.ad-data-subtabs .nav-item {
  background: transparent !important;
}

.ad-data-subtabs .nav-link {
  border: 1px solid transparent !important;
  border-bottom: 2px solid transparent !important;
  border-radius: var(--ad-radius) var(--ad-radius) 0 0 !important;
  background: var(--ad-surface-2) !important;
  color: var(--ad-muted) !important;
  font-weight: 600;
  padding: 10px 18px !important;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.ad-data-subtabs .nav-link:hover {
  color: var(--ad-text) !important;
  background: var(--ad-accent-tint) !important;
  border-color: transparent !important;
}

.ad-data-subtabs .nav-link.active,
.ad-data-subtabs .nav-link.active:hover,
.ad-data-subtabs .nav-link.active:focus {
  color: var(--ad-accent-strong) !important;
  background: var(--ad-accent-tint) !important;
  border-color: transparent !important;
  border-bottom-color: var(--ad-accent) !important;
}

.ad-data-subtabs .tab-content {
  padding-top: 16px;
  background: transparent !important;
  color: var(--ad-text);
}

.ad-data-subtabs .tab-pane {
  background: transparent !important;
  color: var(--ad-text);
}

/* ------------------------------------------------------------ animacion -- */
/* Timings aligned with Claude Design mockup (stagger + softer ease). */
@keyframes adFade   { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes adRise   { from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none} }
@keyframes adTabPop { 0%{transform:scale(.97)} 60%{transform:scale(1.02)} 100%{transform:scale(1)} }
@keyframes adShimmer{ from{background-position:-320px 0} to{background-position:320px 0} }
@keyframes adGrow   { from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes adGrowX  { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes adPop    { from{transform:scale(.72); opacity:0} to{transform:scale(1); opacity:1} }
@keyframes adGlow   { 0%,100%{opacity:.45} 50%{opacity:.85} }
@keyframes adSpin   { to{transform:rotate(360deg)} }

.tab-content {
  animation: adFade .34s cubic-bezier(.2,.8,.2,1) both;
}
.tab-content .card,
.tab-content .grid_element,
.tab-content [class*="card"] {
  animation: adRise .42s cubic-bezier(.2,.8,.2,1) both;
}
/* stagger sin JS — delays like the Design mockup TILE(i) */
.tab-content > *:nth-child(1),
.tab-content .card:nth-child(1),
.tab-content .row > .col:nth-child(1) > .card { animation-delay: 0ms; }
.tab-content > *:nth-child(2),
.tab-content .card:nth-child(2),
.tab-content .row > .col:nth-child(2) > .card { animation-delay: 60ms; }
.tab-content > *:nth-child(3),
.tab-content .card:nth-child(3),
.tab-content .row > .col:nth-child(3) > .card { animation-delay: 120ms; }
.tab-content > *:nth-child(4),
.tab-content .card:nth-child(4),
.tab-content .row > .col:nth-child(4) > .card { animation-delay: 180ms; }
.tab-content > *:nth-child(n+5),
.tab-content .card:nth-child(n+5) { animation-delay: 220ms; }

.tab-content tbody tr { animation: adFade .34s ease both; }
.tab-content tbody tr:nth-child(1) { animation-delay: 0ms; }
.tab-content tbody tr:nth-child(2) { animation-delay: 45ms; }
.tab-content tbody tr:nth-child(3) { animation-delay: 90ms; }
.tab-content tbody tr:nth-child(4) { animation-delay: 135ms; }
.tab-content tbody tr:nth-child(5) { animation-delay: 180ms; }
.tab-content tbody tr:nth-child(n+6) { animation-delay: 220ms; }

.layout-filters-wrapper {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px;
  margin-bottom: 20px;
  animation: adFade .34s cubic-bezier(.2,.8,.2,1) both;
}
.dash-dropdown-content, .dash-datepicker-content {
  animation: adFade .34s cubic-bezier(.2,.8,.2,1) both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* -------------------------------------------------- skeletons / loading -- */
/* Usalos como className en un html.Div mientras el callback resuelve:
   html.Div(className="ad-skel", style={"height":"18px"})                     */
.ad-skel {
  background: var(--ad-skel); background-size: 320px 100%;
  animation: adShimmer 1.1s linear infinite; border-radius: 6px;
}
.ad-skel-text { height: 14px; margin-bottom: 8px; }
.ad-skel-kpi  { height: 34px; width: 70%; margin: 14px 0 10px; }

._dash-loading, ._dash-loading-callback, .dash-default-spinner { color: var(--ad-accent) !important; }
._dash-loading-callback::after {
  border-color: var(--ad-accent-tint) var(--ad-accent-tint) var(--ad-accent-tint) var(--ad-accent) !important;
}
#tab-loading.tab-loading-fixed-host { flex: 1; min-height: 0; display: flex !important; flex-direction: column; position: relative; }
#tab-loading.tab-loading-fixed-host ._dash-loading-callback {
  position: fixed !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%,-50%) !important; z-index: 150 !important;
}

/* ---------------------------------------------------------------- login -- */
.login-page-root { background: var(--ad-bg) !important; }
.login-page-root .card {
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border-soft) !important;
  border-radius: var(--ad-radius-lg) !important;
  box-shadow: var(--ad-shadow-lg) !important;
  animation: adRise .45s cubic-bezier(.2,.8,.2,1) both;
}
.login-page-root h3 { color: var(--ad-text) !important; font-weight: 500 !important; }

/* ------------------------------------------------------------ AG Grid -- */
.ag-theme-alpine-dark,
.ag-theme-alpine {
  --ag-background-color: var(--ad-surface);
  --ag-header-background-color: var(--ad-surface-2);
  --ag-odd-row-background-color: var(--ad-bg-2);
  --ag-even-row-background-color: var(--ad-surface);
  --ag-border-color: var(--ad-border-soft);
  --ag-secondary-border-color: var(--ad-border-soft);
  --ag-foreground-color: var(--ad-text);
  --ag-secondary-foreground-color: var(--ad-muted);
  --ag-data-color: var(--ad-text);
  --ag-header-foreground-color: var(--ad-text);
  --ag-disabled-foreground-color: var(--ad-muted);
  --ag-row-hover-color: var(--ad-accent-tint);
  --ag-selected-row-background-color: var(--ad-accent-tint-2);
  --ag-modal-overlay-background-color: rgba(22, 24, 38, 0.55);
  --ag-control-panel-background-color: var(--ad-surface-2);
  --ag-subheader-background-color: var(--ad-surface-2);
  --ag-input-background-color: var(--ad-bg-2);
  --ag-input-foreground-color: var(--ad-text);
  --ag-input-border-color: var(--ad-border);
  --ag-input-focus-border-color: var(--ad-accent);
  --ag-checkbox-background-color: var(--ad-bg-2);
  --ag-checkbox-border-color: var(--ad-border);
  --ag-checkbox-checked-color: var(--ad-accent-strong);
  --ag-range-selection-border-color: var(--ad-accent);
  --ag-font-family: Inter, sans-serif;
  color: var(--ad-text);
  background: var(--ad-surface);
}

.ag-theme-alpine-dark .ag-root-wrapper,
.ag-theme-alpine .ag-root-wrapper,
.ag-theme-alpine-dark .ag-body-viewport,
.ag-theme-alpine .ag-body-viewport,
.ag-theme-alpine-dark .ag-center-cols-viewport,
.ag-theme-alpine .ag-center-cols-viewport,
.ag-theme-alpine-dark .ag-center-cols-container,
.ag-theme-alpine .ag-center-cols-container,
.ag-theme-alpine-dark .ag-header,
.ag-theme-alpine .ag-header,
.ag-theme-alpine-dark .ag-header-viewport,
.ag-theme-alpine .ag-header-viewport,
.ag-theme-alpine-dark .ag-paging-panel,
.ag-theme-alpine .ag-paging-panel,
.ag-theme-alpine-dark .ag-floating-filter-body,
.ag-theme-alpine .ag-floating-filter-body {
  background-color: var(--ad-surface) !important;
  color: var(--ad-text) !important;
  border-color: var(--ad-border-soft) !important;
}

.ag-theme-alpine-dark .ag-header,
.ag-theme-alpine .ag-header,
.ag-theme-alpine-dark .ag-header-row,
.ag-theme-alpine .ag-header-row,
.ag-theme-alpine-dark .ag-header-cell,
.ag-theme-alpine .ag-header-cell,
.ag-theme-alpine-dark .ag-paging-panel,
.ag-theme-alpine .ag-paging-panel {
  background-color: var(--ad-surface-2) !important;
  color: var(--ad-text) !important;
}

.ag-theme-alpine-dark .ag-row,
.ag-theme-alpine .ag-row,
.ag-theme-alpine-dark .ag-cell,
.ag-theme-alpine .ag-cell {
  color: var(--ad-text) !important;
  border-color: var(--ad-border-soft) !important;
}

.ag-theme-alpine-dark .ag-row-odd,
.ag-theme-alpine .ag-row-odd {
  background-color: var(--ad-bg-2) !important;
}

.ag-theme-alpine-dark .ag-row-even,
.ag-theme-alpine .ag-row-even {
  background-color: var(--ad-surface) !important;
}

.ag-theme-alpine-dark .ag-input-field-input,
.ag-theme-alpine .ag-input-field-input,
.ag-theme-alpine-dark input,
.ag-theme-alpine input,
.ag-theme-alpine-dark select,
.ag-theme-alpine select,
.ag-theme-alpine-dark .ag-picker-field-wrapper,
.ag-theme-alpine .ag-picker-field-wrapper,
.ag-theme-alpine-dark .ag-text-field-input,
.ag-theme-alpine .ag-text-field-input,
.ag-theme-alpine-dark .ag-floating-filter-input,
.ag-theme-alpine .ag-floating-filter-input {
  background-color: var(--ad-bg-2) !important;
  color: var(--ad-text) !important;
  border-color: var(--ad-border) !important;
  box-shadow: none !important;
}

.ag-theme-alpine-dark .ag-icon,
.ag-theme-alpine .ag-icon {
  color: var(--ad-muted) !important;
}

/* ============================================================ responsive -- */
/* iOS Safari: dynamic viewport, safe areas, mobile shell + content -------- */

:root {
  --ad-safe-top: env(safe-area-inset-top, 0px);
  --ad-safe-right: env(safe-area-inset-right, 0px);
  --ad-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ad-safe-left: env(safe-area-inset-left, 0px);
  --ad-vh: 100vh;
}
@supports (height: 100dvh) {
  :root { --ad-vh: 100dvh; }
}

#app-container,
.layout-main-column,
.layout-sidebar {
  min-height: var(--ad-vh);
  min-height: -webkit-fill-available;
}

.layout-main-column--sidemenu {
  margin-left: 76px;
}

.layout-sidebar {
  height: var(--ad-vh);
  height: -webkit-fill-available;
  padding-top: var(--ad-safe-top);
  padding-bottom: var(--ad-safe-bottom);
  padding-left: var(--ad-safe-left);
}

.layout-main-column {
  min-height: var(--ad-vh);
  min-height: -webkit-fill-available;
}

.layout-top-row {
  padding-top: calc(14px + var(--ad-safe-top));
  padding-left: var(--ad-safe-left);
  padding-right: var(--ad-safe-right);
}

.ad-header-mobile-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 198;
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.sidebar-backdrop.sidebar-backdrop-visible {
  display: block;
}

body.sidebar-drawer-open {
  overflow: hidden;
}

.ad-dual-data-view {
  width: 100%;
  min-width: 0;
}

.ad-data-desktop { display: block; }
.ad-data-mobile { display: none; }

.ad-mobile-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ad-mobile-card {
  background: var(--ad-surface);
  border: 1px solid var(--ad-border-soft);
  border-radius: var(--ad-radius-lg);
  padding: 12px 14px;
  box-shadow: var(--ad-shadow);
}

.ad-mobile-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ad-mobile-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ad-text);
  line-height: 1.3;
  word-break: break-word;
}

.ad-mobile-card-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ad-accent-tint);
  color: var(--ad-accent-strong);
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-mobile-card-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
  margin-top: 4px;
}

.ad-mobile-card-label {
  flex: 0 0 auto;
  color: var(--ad-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 72px;
}

.ad-mobile-card-value {
  flex: 1;
  min-width: 0;
  color: var(--ad-text);
  word-break: break-word;
}

.ad-mobile-card-more {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ad-muted);
}

.ad-mobile-card-empty {
  padding: 16px;
  color: var(--ad-muted);
  font-size: 14px;
}

.ad-help-shell {
  display: flex;
  gap: 14px;
  min-height: 0;
  align-items: stretch;
  max-width: 100%;
}

.ad-help-sidebar {
  width: 320px;
  max-width: 42vw;
  flex: 0 0 auto;
  border: 1px solid var(--ad-border-soft);
  border-radius: var(--ad-radius-lg);
  background: var(--ad-surface);
  padding: 12px;
  min-height: 620px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ad-help-content {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--ad-border-soft);
  border-radius: var(--ad-radius-lg);
  background: var(--ad-surface);
  padding: 14px 16px;
  box-sizing: border-box;
  min-height: 620px;
  overflow: auto;
}

.ad-chart-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.ad-chart-wrap > div {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
}

.ad-chart-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.ad-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.ad-contact-modal.modal-fullscreen-md-down .modal-content,
.ad-contact-modal.modal-fullscreen-md-down .modal-body {
  padding-bottom: calc(1rem + var(--ad-safe-bottom));
}

.ad-logout-link .ad-logout-icon {
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 768px) {
  .layout-main-column--sidemenu {
    margin-left: 0;
    padding-left: calc(12px + var(--ad-safe-left));
    padding-right: calc(12px + var(--ad-safe-right));
    padding-bottom: calc(12px + var(--ad-safe-bottom));
  }

  .ad-header-mobile-menu {
    display: inline-flex;
  }

  .layout-top-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .layout-top-spacer {
    display: none;
  }

  .layout-top-brand {
    flex: 1;
    min-width: 0;
  }

  .layout-top-search {
    order: 10;
    flex: 1 1 100%;
    width: 100% !important;
    max-width: none !important;
  }

  .layout-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  .ad-theme-toggle-btn,
  .ad-logout-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .ad-logout-link .ad-logout-label {
    display: none;
  }

  .layout-sidebar {
    width: min(280px, 85vw);
    transform: translateX(-100%);
    transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.24s ease;
    box-shadow: none;
  }

  .layout-sidebar.sidebar-mobile-open {
    transform: translateX(0);
    box-shadow: var(--ad-shadow-lg);
  }

  .layout-sidebar.sidebar-unpinned:not(:hover) .nav-item-label,
  .layout-sidebar.sidebar-unpinned:hover .nav-item-label,
  .layout-sidebar.sidebar-pinned .nav-item-label {
    opacity: 1;
    width: auto;
    transform: none;
    pointer-events: auto;
  }

  .sidebar-footer {
    display: none;
  }

  .sidebar-nav-btn {
    min-height: 44px;
  }

  .ad-global-search-input,
  .DateInput_input,
  .form-control,
  .form-select,
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }

  .ad-data-desktop { display: none !important; }
  .ad-data-mobile { display: block !important; }

  .ad-help-shell {
    flex-direction: column;
  }

  .ad-help-sidebar {
    width: 100%;
    max-width: none;
    min-height: auto;
    max-height: 40vh;
  }

  .ad-help-content {
    min-height: 50vh;
  }

  .ad-chart-wrap {
    height: clamp(240px, 56vw, 340px) !important;
    max-height: 340px;
  }

  .ad-chart-card {
    min-height: 0 !important;
  }

  .ad-rep-status-table th,
  .ad-rep-status-table td {
    padding: 6px 8px;
    font-size: 13px;
  }

  .ad-date-preset-radios label {
    white-space: normal;
  }

  .ad-dashboard-filters {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) and (hover: none) {
  .layout-sidebar.sidebar-unpinned:hover {
    width: min(280px, 85vw);
  }

  .layout-sidebar.sidebar-pinned,
  .layout-sidebar.sidebar-unpinned:hover {
    width: min(280px, 85vw);
  }
}

@media (max-width: 480px) {
  .layout-top-brand {
    display: none !important;
  }

  .layout-top-row h1 {
    font-size: 15px !important;
  }
}

/* Cold Call Dashboard — outcome cards carousel */
.ad-outcome-carousel {
  background: var(--ad-surface, #fff);
  border: 1px solid var(--ad-border-soft, #e5e7eb);
  border-radius: 10px;
  padding: 16px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.ad-outcome-carousel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ad-outcome-carousel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}
.ad-outcome-switch {
  display: inline-flex !important;
  flex-direction: row;
  align-items: stretch;
  flex-shrink: 0;
  margin: 0;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--ad-border-soft, #e5e7eb);
  background: var(--ad-surface-2, #f1f5f9);
  gap: 0;
}
.ad-outcome-switch label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ad-text-muted, #6b7280);
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
  white-space: nowrap;
}
.ad-outcome-switch input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}
.ad-outcome-switch label:has(input:checked) {
  background: var(--ad-surface, #fff);
  color: var(--ad-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.ad-outcome-carousel-title {
  margin: 0;
  color: var(--ad-text);
  font-size: 16px;
}
.ad-outcome-carousel-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}
.ad-outcome-carousel-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--ad-text);
  background: var(--ad-surface-2, #f1f5f9);
  border: 1px solid var(--ad-border-soft, #e5e7eb);
}
.ad-outcome-carousel-sub {
  margin: 0;
  color: var(--ad-text-muted, #6b7280);
  font-size: 13px;
}
.ad-outcome-carousel-empty {
  margin: 8px 0 0;
  color: var(--ad-text-muted, #6b7280);
  font-size: 13px;
}
.ad-outcome-carousel-nav {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.ad-outcome-carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--ad-border-soft, #e5e7eb);
  background: var(--ad-surface-2, #f8fafc);
  color: var(--ad-text);
  cursor: pointer;
  font-size: 18px;
  padding: 0;
}
.ad-outcome-carousel-btn:hover {
  border-color: var(--ad-accent, #9184d9);
  color: var(--ad-accent, #9184d9);
}
.ad-outcome-carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.ad-outcome-card {
  flex: 0 0 min(300px, 82vw);
  width: min(300px, 82vw);
  scroll-snap-align: start;
  border: 1px solid var(--ad-border-soft, #e5e7eb);
  border-radius: 12px;
  background: var(--ad-surface-2, #f8fafc);
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ad-outcome-card-open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.ad-outcome-card-open:hover .ad-outcome-card-name {
  color: var(--ad-accent, #9184d9);
}
.ad-outcome-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
}
.ad-outcome-badge--activated {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}
.ad-outcome-badge--meeting {
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
}
.ad-outcome-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ad-text);
  line-height: 1.25;
  word-break: break-word;
}
.ad-outcome-card-date {
  font-size: 12px;
  color: var(--ad-text-muted, #6b7280);
}
.ad-outcome-card-sub {
  font-size: 12px;
  color: var(--ad-text-muted, #6b7280);
  word-break: break-word;
}
.ad-outcome-card-note {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ad-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.2em;
}
.ad-outcome-card .ad-contact-icon-row {
  margin: 0;
}
.ad-outcome-card .ad-contact-icon-btn {
  width: 32px;
  height: 32px;
  font-size: 16px;
}
.ad-outcome-card-icons-empty {
  min-height: 4px;
}
.ad-outcome-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--ad-border-soft, #e5e7eb);
  padding-top: 8px;
  font-size: 12px;
}
.ad-outcome-card-meta-row {
  display: flex;
  gap: 8px;
  min-width: 0;
  align-items: baseline;
}
.ad-outcome-card-meta-label {
  flex: 0 0 64px;
  color: var(--ad-text-muted, #6b7280);
  font-weight: 600;
  font-size: 11px;
}
.ad-outcome-card-meta-link {
  color: var(--ad-accent, #9184d9);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ad-outcome-card-meta-link:hover {
  text-decoration: underline;
}

/* ============================================================ Business tab -- */
.ad-business {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.ad-business-intro {
  color: var(--ad-text-muted, #6b7280);
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 72ch;
}

.ad-business-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin-bottom: 8px;
  width: 100%;
  min-width: 0;
}

.ad-business-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 200px;
  max-width: 100%;
}

.ad-business-field--grow {
  flex: 1 1 260px;
}

.ad-business-field label {
  font-weight: 600;
  font-size: 13px;
  color: var(--ad-text);
}

.ad-business-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
}

.ad-business-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  width: 100%;
  min-width: 0;
}

.ad-business-kpi {
  background: var(--ad-card-bg, var(--ad-surface-2, #f8fafc));
  border: 1px solid var(--ad-border);
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 0;
  box-sizing: border-box;
}

.ad-business-kpi-label {
  color: var(--ad-text-muted, #6b7280);
  font-size: 12px;
  line-height: 1.3;
}

.ad-business-kpi-value {
  color: var(--ad-text);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  margin-top: 4px;
  word-break: break-word;
}

.ad-business-kpi-sub {
  color: var(--ad-text-muted, #6b7280);
  font-size: 11px;
  line-height: 1.35;
  margin-top: 4px;
  word-break: break-word;
}

.ad-business-note {
  color: var(--ad-text-muted, #6b7280);
  font-size: 12px;
  line-height: 1.45;
  margin: 0 0 8px;
  max-width: 80ch;
}

.ad-business-section {
  margin-top: 20px;
  min-width: 0;
}

.ad-business-section h5 {
  margin: 0 0 10px;
  color: var(--ad-text);
  font-size: 15px;
}

.ad-business .ad-table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  border: 1px solid var(--ad-border);
  border-radius: 10px;
  background: var(--ad-card-bg, transparent);
}

.ad-business-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--ad-text);
  margin: 0;
}

.ad-business-table--narrow {
  min-width: 280px;
}

.ad-business-table th,
.ad-business-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ad-border);
  white-space: nowrap;
}

.ad-business-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ad-surface-2, #f8fafc);
  font-weight: 600;
  font-size: 12px;
}

.ad-business-table td.ad-num,
.ad-business-table th.ad-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ad-business-table td.ad-wrap {
  white-space: normal;
  word-break: break-word;
  min-width: 120px;
  max-width: 220px;
}

.ad-business-muted {
  display: block;
  font-size: 11px;
  color: var(--ad-text-muted, #6b7280);
  margin-top: 2px;
  white-space: normal;
  word-break: break-word;
}

.ad-business-list {
  color: var(--ad-text-muted, #6b7280);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  padding-left: 1.2em;
  max-width: 100%;
}

.ad-business-list li {
  margin-bottom: 6px;
  word-break: break-word;
}

.ad-business-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.ad-business-form-row > .Select,
.ad-business-form-row > .dash-dropdown,
.ad-business-form-row > div {
  min-width: 0;
  flex: 1 1 200px;
  max-width: 100%;
}

.ad-business-yaml {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 240px;
  max-height: min(60vh, 520px);
  overflow: auto;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.4;
  resize: vertical;
}

.ad-business-msg {
  font-size: 13px;
  flex: 1 1 160px;
  min-width: 0;
  word-break: break-word;
}

@media (max-width: 768px) {
  .ad-business-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ad-business-kpi {
    padding: 10px 12px;
  }

  .ad-business-kpi-value {
    font-size: 18px;
  }

  .ad-business-field,
  .ad-business-field--grow {
    flex: 1 1 100%;
  }

  .ad-business-actions {
    width: 100%;
  }

  .ad-business-actions .button,
  .ad-business-actions button {
    width: 100%;
  }

  .ad-business-table {
    min-width: 860px;
    font-size: 12px;
  }

  .ad-business-table th,
  .ad-business-table td {
    padding: 8px 10px;
  }

  .ad-business-form-row > .Select,
  .ad-business-form-row > .dash-dropdown,
  .ad-business-form-row > div,
  .ad-business-form-row > input,
  .ad-business-form-row > button {
    flex: 1 1 100%;
  }
}

@media (max-width: 420px) {
  .ad-business-kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}