/* App-specific layout on top of YDS. Tokens only: no raw hex values here (except the validated chart palette). */

.app-brand { width: 24px; height: 24px; }
.app-title { display: flex; flex-direction: column; }
.app-title h1 { margin: 0; }
.app-caption { color: var(--text-secondary); }

/* Home header: flex children must be able to shrink before actions wrap. */
.yds-main-inner > .yds-header .yds-header-left { min-width: 0; max-width: 100%; }
.yds-main-inner > .yds-header .app-brand { flex-shrink: 0; }
.yds-main-inner > .yds-header .app-title { min-width: 0; overflow-wrap: anywhere; }
/* The title block shrinks (its status line wraps) so the actions stay on the right of the title */
.yds-main-inner > .yds-header .yds-header-left { flex: 1 1 360px; min-width: 0; }
.yds-main-inner > .yds-header .yds-header-right { flex-wrap: wrap; justify-content: flex-end; }
.yds-main-inner > .yds-header .yds-header-right { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.yds-main-inner > .yds-header .yds-header-right > * { min-width: 0; max-width: 100%; }
.yds-main-inner > .yds-header .yds-header-right .yds-btn {
  height: auto; min-height: 36px; white-space: normal; text-align: left;
}
.yds-main-inner > .yds-header .yds-header-right .yds-btn-label { min-width: 0; overflow-wrap: anywhere; }
.yds-main-inner > .yds-header .yds-header-right .yds-btn-ic { flex-shrink: 0; }
@media (max-width: 900px) {
  .yds-main-inner > .yds-header .yds-header-right { flex-basis: 100%; }
}

.app-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--layout-gap); }
.app-metrics .yds-metric-value + .yds-metric-value { margin-top: calc(-1 * var(--space-1)); }

.app-filters { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); min-width: 0; max-width: 100%; }
.app-filters .yds-field { width: 440px; max-width: 100%; }
/* Anchor the home calendar to the filter row so it stays in view beside the search field. */
#overviewRange { position: static; max-width: 100%; }
#overviewRange .app-dr-trigger { height: auto; min-height: 36px; max-width: 100%; }
#overviewRange .app-dr-trigger span { white-space: normal; text-align: left; }

.yds-datagrid { min-width: 0; max-width: 100%; box-sizing: border-box; overflow-x: auto; }
.yds-datagrid td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.yds-datagrid td.num, .yds-datagrid th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yds-datagrid tbody tr[data-id] { cursor: pointer; }
/* Home list: organization groups, the WABAs underneath, and the workspaces a search found */
.app-group-row th, .app-group-row td { background: var(--neutral-10); font-weight: 600; text-align: left; }
.app-group-row th { border-bottom: 1px solid var(--neutral-20); font-size: var(--text-body2-size); color: var(--text-primary); height: auto; padding-top: var(--space-2); padding-bottom: var(--space-2); white-space: normal; }
.app-group-row { cursor: pointer; }
.app-group-row:hover th, .app-group-row:hover td { background: var(--neutral-20); }
.app-group-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-primary-light); }
.app-group-chevron { width: 16px; margin-right: var(--space-2); color: var(--neutral-50); font-size: var(--text-caption1-size); }
.app-group-row th .app-cell-sub { padding-left: calc(16px + var(--space-2));  font-weight: var(--text-caption1-weight); }
.app-group-row td.num { text-align: right; }
/* Indent: organization text at 40px (after its chevron), workspace at 56px, WABA at 80px */
.yds-datagrid .app-ws-row td:first-child { padding-left: 56px; }
.yds-datagrid .app-waba-row td:first-child { padding-left: 80px; }
.app-ws-row td { font-weight: 600; }
.app-ws-row .app-cell-sub { font-weight: var(--text-caption1-weight); }
.app-ws-row.is-bucket .app-ws-name { color: var(--text-secondary); }
.app-ws-name { color: var(--text-primary); }
.app-cell-sub { display: block; font-size: var(--text-caption1-size); font-weight: var(--text-caption1-weight); color: var(--text-secondary); }
.app-mono { font-family: var(--font-mono); font-size: var(--text-code-size); color: var(--text-secondary); }
.app-empty { padding: var(--space-12) var(--space-4); text-align: center; color: var(--text-secondary); }
.app-empty i { display: block; font-size: 24px; margin-bottom: var(--space-2); color: var(--neutral-50); }
.app-skel-row td { height: 52px; }

.app-alerts:empty { display: none; }
.app-alerts .yds-alert { max-width: none; }

.app-drawer-section { display: flex; flex-direction: column; gap: var(--space-4); }
.app-drawer-section + .app-drawer-section { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--neutral-20); }
.app-drawer-section h3 { margin: 0; }
.app-kv { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.app-kv dt { color: var(--text-secondary); }
.app-kv dd { margin: 0; overflow-wrap: anywhere; }
.app-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.app-drawer-footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--neutral-20); }

@media (max-width: 480px) {
  .yds-main-inner { padding: var(--space-4); }
  .app-row2 { grid-template-columns: 1fr; }
}

/* Links styled as buttons: typography.css underlines every <a>. */
a.yds-btn, a.yds-btn:hover { text-decoration: none; }
a.yds-btn--outlined:hover { color: var(--c); }

/* Categorical chart palette: one color per Meta pricing category, in Meta's order. Validated for
   color-vision deficiency on adjacent slots (dataviz validate_palette, light mode). Fixed order: do not reorder. */
:root {
  --chart-cat-1: #2F5CE8; /* MARKETING — Engage blue */
  --chart-cat-2: #00897B; /* MARKETING_LITE — teal */
  --chart-cat-3: #B07A12; /* UTILITY — amber */
  --chart-cat-4: #96356E; /* AUTHENTICATION — tertiary-60 */
  --chart-cat-5: #CC6A56; /* AUTHENTICATION_INTERNATIONAL — secondary-50 */
  --chart-cat-6: #6A4FC7; /* SERVICE — violet */
  --chart-other: var(--neutral-50);
  /* Lines that are not a category (all categories, budget): the brand's primary ink. */
  --chart-series: var(--color-primary);
}

.app-chart-legend { margin-bottom: var(--space-2); }
.app-chart-wrap { position: relative; }
.app-chart { width: 100%; height: auto; display: block; }
.app-chart-grid { stroke: var(--neutral-20); stroke-dasharray: 3 3; }
.app-chart-grid.is-base { stroke: var(--neutral-30); stroke-dasharray: none; }
.app-chart-axis { font-family: var(--font-mono); font-size: 10px; fill: var(--text-secondary); }
.app-chart-hit { fill: transparent; cursor: crosshair; }
.app-chart-tip { position: absolute; pointer-events: none; background: var(--surface-paper); box-shadow: var(--shadow-8); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-caption1-size); min-width: 180px; z-index: 2; }
.app-chart-tip-title { font-weight: 600; margin-bottom: var(--space-1); }
.app-chart-tip-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: var(--space-2); color: var(--text-secondary); }
.app-chart-tip-row i { width: 8px; height: 8px; border-radius: 2px; }
.app-chart-tip-row strong { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.app-chart-tip-row.is-total { grid-template-columns: 1fr auto; border-top: 1px solid var(--neutral-20); margin-top: var(--space-1); padding-top: var(--space-1); }

/* WABA details (wide drawer) */
.yds-drawer.app-drawer-wide { width: 1040px; max-width: 96vw; }
.app-detail { display: flex; flex-direction: column; gap: var(--space-4); }
.app-detail > .yds-skeleton { display: block; }
.app-detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.app-detail-head .yds-h3 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.app-detail-actions { display: flex; align-items: center; gap: var(--space-2); }
.app-period { width: 180px; }
.app-detail-section { display: flex; flex-direction: column; gap: var(--space-2); }
.app-detail-section h3 { margin: 0; }
.app-section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.app-segmented { display: inline-flex; gap: var(--space-1); }
.app-detail .yds-alert { max-width: none; }
.app-detail .yds-datagrid td { height: 40px; }
.app-auto-icon { font-size: 11px; color: var(--color-info); margin-left: var(--space-1); }
.app-back { align-self: flex-start; }
.app-form-footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--neutral-20); }
.yds-datagrid tbody tr[data-id]:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-primary-light); }
.app-caption { color: var(--text-secondary); margin: 0; }
/* YDS select has a fixed 34px height: without vertical padding the text centers */
.app-period select.yds-field-input { padding-top: 0; padding-bottom: 0; }
.app-chart-legend { font-size: var(--text-caption1-size); }
.app-csm-form { display: flex; gap: var(--space-2); align-items: flex-start; flex-wrap: wrap; }
.app-csm-form .yds-field { width: 320px; max-width: 100%; }
#statusFilter { flex-wrap: wrap; }
.app-phones .app-cell-sub { white-space: nowrap; }
.app-csm-form .yds-field-label { display: block; }
.app-csm-form { align-items: flex-end; }

/* Temporarily hide Budget alerts while retaining its existing functionality. */
#alertsDetails { display: none; }

/* Collapsible sections ("Account and owners", "Budget alerts", filters) */
.app-collapse { border: 1px solid var(--border-default); border-radius: var(--radius-container); background: var(--surface-paper); }
.app-collapse > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.app-collapse > summary::-webkit-details-marker { display: none; }
.app-collapse > summary:hover { background: var(--neutral-10); border-radius: var(--radius-container); }
.app-collapse-title { font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-2); }
.app-collapse-chevron { font-size: 12px; transition: transform .2s ease; }
.app-collapse[open] .app-collapse-chevron { transform: rotate(90deg); }
.app-collapse-body { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-2) var(--space-4) var(--space-4); border-top: 1px solid var(--neutral-20); }
.app-collapse-part { display: flex; flex-direction: column; gap: var(--space-3); }
.app-collapse-part h4 { margin: 0; color: var(--text-secondary); }

/* WhatsApp Manager-style metric cards (legacy, kept for reuse) */
.app-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--layout-gap); }
.app-meta-card { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.app-meta-card-head { display: flex; justify-content: space-between; gap: var(--space-2); font-weight: 600; padding-bottom: var(--space-1); }
.app-meta-card-head strong { font-variant-numeric: tabular-nums; }
.app-meta-row { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: var(--space-2); font-size: var(--text-caption1-size); color: var(--text-secondary); }
.app-meta-row i { border-top: 2px dashed var(--chart-other); height: 0; }
.app-meta-row .num { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.app-phone-select { width: 300px; max-width: 100%; }
.app-phone-select select.yds-field-input { padding-top: 0; padding-bottom: 0; }
.app-detail-actions { flex-wrap: wrap; justify-content: flex-end; }
.app-collapse-title .fa-bell { color: var(--text-secondary); }

/* Account list */
.app-muted { color: var(--text-secondary); }
.app-plus { color: var(--text-secondary); font-weight: 350; font-size: var(--text-h5-size); }
.app-warn { color: var(--color-warning); white-space: nowrap; }
.app-row-chevron { width: 32px; color: var(--neutral-50); text-align: right; }
.yds-datagrid tbody tr[data-id]:hover .app-row-chevron { color: var(--color-primary); }
.app-metrics { grid-template-columns: repeat(auto-fit, minmax(240px, 360px)); }

/* Details drawer */
.yds-drawer-title #drawerTitle { display: inline-flex; align-items: center; gap: var(--space-2); }
.app-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.app-toolbar-end { margin-left: auto; }
.app-single-phone { display: inline-flex; align-items: center; gap: var(--space-1); }
.app-collapse-icon { color: var(--text-secondary); font-size: 13px; }
.app-meta-row.is-zero span { color: var(--text-disabled); }
.app-meta-row.is-zero i { opacity: .4; }
.app-detail > .app-caption { margin-top: calc(-1 * var(--space-2)); }

/* Overview table */
.app-summary tfoot td { font-weight: 600; padding: 0 16px; height: 44px; border-top: 1px solid var(--border-default); background: var(--neutral-10); }
.app-summary tfoot td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-summary td.app-zero { color: var(--text-disabled); }
.app-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: var(--space-2); vertical-align: middle; }

/* Overview header, Meta-style panels and filterable tables */
.app-summary-head { align-items: flex-end; }
.app-total-charges { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.app-total-charges span { font-size: var(--text-caption1-size); color: var(--text-secondary); }
.app-total-charges strong { font-size: var(--text-h2-size); font-weight: 700; font-variant-numeric: tabular-nums; }
.app-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--layout-gap); align-items: start; }
.app-panel td { height: 36px; }
.app-panel tfoot td { font-weight: 600; padding: 0 16px; height: 40px; border-top: 1px solid var(--border-default); background: var(--neutral-10); }
.app-panel tfoot td.num { text-align: right; font-variant-numeric: tabular-nums; }
.app-panel td.app-zero { color: var(--text-disabled); }
.app-table-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.app-table-search { width: 260px; max-width: 100%; }
.app-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-detail .app-panel td { height: auto; padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 900px) { .app-panels { grid-template-columns: 1fr; } }

/* Big numbers at the top of the overview */
.app-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--layout-gap); }
.app-kpi { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.app-kpi span { font-size: var(--text-caption1-size); color: var(--text-secondary); }
.app-kpi strong { font-size: var(--text-h2-size); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.app-kpi.is-strong { background: var(--color-primary-lighter); border-color: var(--color-primary-light); }
@media (max-width: 900px) { .app-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "Account and owners": the two groups side by side */
.app-kv-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.app-kv-group { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.app-kv-title { margin: 0; color: var(--text-secondary); }
.app-kv-columns .app-kv { grid-template-columns: 110px 1fr; gap: var(--space-1) var(--space-3); }
.app-collapse-body:has(> .app-kv-columns) { gap: var(--space-3); }
@media (max-width: 900px) { .app-kv-columns { grid-template-columns: 1fr; } }
.app-info-note { color: var(--color-info); white-space: nowrap; }
.app-filters .app-period { width: 160px; }

/* Date range picker (Meta WhatsApp Manager style) */
.app-dr { position: relative; }
.app-dr-trigger { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border: 1px solid var(--neutral-30); border-radius: var(--radius-md); background: var(--surface-paper); font: inherit; color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.app-dr-trigger:hover { border-color: var(--neutral-40); }
.app-dr-trigger .fa-caret-down { font-size: 11px; color: var(--text-secondary); }
.app-dr-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 120; display: flex; background: var(--surface-paper); border: 1px solid var(--border-default); border-radius: var(--radius-container); box-shadow: var(--shadow-12); }
.app-dr-presets { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border-right: 1px solid var(--neutral-20); min-width: 170px; }
.app-dr-preset { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; cursor: pointer; white-space: nowrap; }
.app-dr-preset input { accent-color: var(--color-primary); width: 16px; height: 16px; margin: 0; }
.app-dr-main { display: flex; flex-direction: column; padding: var(--space-4); gap: var(--space-4); }
.app-dr-months { position: relative; display: grid; grid-template-columns: repeat(2, 252px); gap: var(--space-8); padding: 0 var(--space-6); }
.app-dr-nav { position: absolute; top: 0; border: none; background: none; cursor: pointer; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--text-primary); }
.app-dr-nav:hover:not(:disabled) { background: var(--neutral-10); }
.app-dr-nav:disabled { color: var(--neutral-40); cursor: default; }
.app-dr-nav.is-prev { left: 0; }
.app-dr-nav.is-next { right: 0; }
.app-dr-month-title { text-align: center; font-weight: 500; height: 28px; line-height: 28px; margin-bottom: var(--space-2); }
.app-dr-grid { display: grid; grid-template-columns: repeat(7, 36px); row-gap: 4px; }
.app-dr-wd { text-align: center; font-size: var(--text-caption1-size); color: var(--text-secondary); height: 24px; }
.app-dr-day { height: 34px; border: none; background: none; font: inherit; color: var(--text-primary); cursor: pointer; }
.app-dr-day:hover:not(:disabled) { background: var(--neutral-10); border-radius: var(--radius-sm); }
.app-dr-day:disabled { color: var(--neutral-40); cursor: default; }
.app-dr-day.in-range { background: var(--color-primary-light); }
.app-dr-day.is-edge { background: var(--color-primary); color: var(--color-primary-contrast); border-radius: var(--radius-sm); }
.app-dr-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); }
.app-dr-range { font-weight: 500; }
.app-dr-actions { display: flex; gap: var(--space-2); }
.app-detail .app-dr-pop { left: 0; }
@media (max-width: 900px) {
  .app-dr-pop { flex-direction: column; max-width: calc(100vw - 32px); }
  .app-dr-presets { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--neutral-20); }
  .app-dr-months { grid-template-columns: 252px; }
  .app-dr-month + .app-dr-month { display: none; }
}

/* Login with Yalo */
.app-signed-out .yds-main { display: none; }
.app-signin { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); background: var(--neutral-10); }
.app-signin-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center;
  padding: var(--space-6); background: var(--surface-paper); border: 1px solid var(--border-default); border-radius: var(--radius-container); }
.app-signin-card h1, .app-signin-card p { margin: 0; }
.app-signin-logo { width: 40px; height: 40px; }
.app-signin-error { min-height: 1.2em; color: var(--color-error-dark); font-size: var(--text-caption1-size); }

/* Phone number filter (multi-select with search) */
.app-pp { position: relative; }
.app-pp-trigger span { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.app-pp-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 120; width: 460px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--surface-paper); border: 1px solid var(--border-default); border-radius: var(--radius-container); box-shadow: var(--shadow-12); }
.app-pp-bar { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--neutral-20); }
.app-pp-count { margin-left: auto; }
.app-pp-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; }
.app-pp-option { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-1); border-radius: var(--radius-sm); cursor: pointer; }
.app-pp-option:hover { background: var(--neutral-10); }
.app-pp-option.is-all { grid-template-columns: 16px auto; padding: 0; }
.app-pp-option.is-all:hover { background: none; }
.app-pp-option input { accent-color: var(--color-primary); width: 16px; height: 16px; margin: 0; }
.app-pp-vol { white-space: nowrap; font-variant-numeric: tabular-nums; }
.app-pp-empty { margin: var(--space-3) 0; text-align: center; }
.app-pp-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--neutral-20); }
.app-unlinked-note { margin: calc(-1 * var(--space-2)) 0 0; }

/* Budget alerts (CSM email) hidden for now: the budgets feature ships later from feature/budgets. */
#alertsDetails { display: none; }

/* Daily chart: selected period vs the previous one */
.app-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.app-line.is-current { stroke: var(--series, var(--chart-series)); }
.app-line.is-previous { stroke: var(--chart-other); stroke-dasharray: 6 5; stroke-width: 2; }
.app-line-dot { stroke: var(--surface-paper); stroke-width: 2; }
.app-line-dot.is-current { fill: var(--series, var(--chart-series)); }
.app-line-dot.is-previous { fill: var(--chart-other); }
.app-chart-cross { stroke: var(--neutral-40); stroke-dasharray: 3 3; }
.app-chart-focus[hidden] { display: none; }
.app-line-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-2) 0 0; color: var(--text-primary); }
.app-line-key { display: inline-flex; align-items: center; gap: var(--space-2); }
.app-line-key i, .app-chart-tip-row.is-key i { width: 18px; height: 0; border-radius: 0; border-top: 2.5px solid var(--series, var(--chart-series)); }
.app-line-key.is-previous i, .app-chart-tip-row.is-key.is-previous i { border-top: 2px dashed var(--chart-other); }
.app-chart-tip-row.is-key { grid-template-columns: 18px 1fr auto; }
.app-kpi-change { font-size: var(--text-caption1-size); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Pricing category filter */
.app-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-default); font-size: var(--text-caption1-size); color: var(--text-secondary); background: var(--surface-paper); font-variant-numeric: tabular-nums; }
.app-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.app-chip-filter { cursor: pointer; padding: 4px 10px; }
.app-chip-filter[aria-pressed="true"] { color: var(--text-primary); border-color: var(--color-primary); background: var(--color-primary-lighter); }
/* Change by pricing category */
.app-change-table { margin-top: var(--space-3); }
.app-change-table tfoot td { font-weight: 600; }
.app-change-table th.app-col-group { text-align: center; }
.app-change-table .app-col-start { border-left: 1px solid var(--neutral-20); }
.app-change-table .app-muted-num { color: var(--text-secondary); }
.app-change-table .app-change-pct { font-weight: 600; }
.app-service-callout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-left: 3px solid var(--chart-cat-6); border-radius: var(--radius-md); font-variant-numeric: tabular-nums; }

/* Info button next to the data freshness line */
.app-info { border: 0; background: none; padding: 0 2px; color: var(--text-secondary); cursor: help; font-size: inherit; vertical-align: baseline; }
.app-info:hover, .app-info:focus-visible { color: var(--text-primary); }

/* Language: EN | ES | PT pill */
.app-langs { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-paper); border: 1px solid var(--border-default); border-radius: 999px; box-shadow: var(--shadow-1, 0 1px 2px rgba(0, 0, 0, 0.06)); }
.app-langs button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: var(--text-caption1-size); font-weight: 600; letter-spacing: 0.04em; color: var(--text-secondary); cursor: pointer; }
.app-langs button:hover { color: var(--text-primary); }
.app-langs button[aria-pressed="true"] { background: var(--neutral-10); color: var(--text-primary); }
.app-langs button:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 1px; }

/* Phones: one column of controls, the account team column hidden so the charges show, full-width pickers */
@media (max-width: 600px) {
  .yds-main-inner > .yds-header .yds-h1 { font-size: 24px; line-height: 1.2; }
  .yds-main-inner > .yds-header .yds-header-right { justify-content: flex-start; gap: var(--space-2); }
  #logout .yds-btn-label { display: none; }
  .app-filters { gap: var(--space-2); }
  .app-filters .yds-field, #overviewRange, #overviewRange .app-dr, #overviewRange .app-dr-trigger { width: 100%; }
  .app-col-team, .app-col-volume { display: none; }
  .yds-datagrid td, .yds-datagrid th { padding-left: var(--space-2); padding-right: var(--space-2); }
  .yds-datagrid .app-group-row th { padding-left: var(--space-2); }
  .yds-datagrid .app-ws-row td:first-child { padding-left: 32px; }
  .yds-datagrid .app-waba-row td:first-child { padding-left: 48px; }
  .yds-drawer.app-drawer-wide { width: 100vw; max-width: 100vw; }
  .yds-datagrid th { white-space: normal; }
  .yds-datagrid td { overflow-wrap: anywhere; }
  /* Detail toolbar: date range and numbers each take the full width and wrap their label */
  .app-toolbar > * { min-width: 0; max-width: 100%; }
  .app-toolbar .app-dr, .app-toolbar .app-dr-trigger { width: 100%; }
  .app-toolbar .app-dr-trigger { height: auto; min-height: 36px; white-space: normal; text-align: left; }
  .app-pp, .app-pp-trigger { width: 100%; min-width: 0; max-width: 100%; }
  .app-pp-trigger span { max-width: none; flex: 1; text-align: left; }
  .app-pp-pop { width: 100%; max-width: none; box-sizing: border-box; }
}

/* Phones: detail tables as one card per row: the first cell is the title, the others "label … value" */
@media (max-width: 600px) {
  .app-stack table, .app-stack tbody, .app-stack tfoot, .app-stack tr, .app-stack td { display: block; width: auto; }
  .app-stack thead { display: none; }
  .app-stack tr { padding: var(--space-3); border-bottom: 1px solid var(--neutral-20); }
  .app-stack tr:last-child { border-bottom: 0; }
  .app-stack tfoot tr { background: var(--neutral-10); border-top: 1px solid var(--neutral-20); }
  .yds-datagrid.app-stack td { height: auto; padding: 2px 0; border: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .app-stack td::before { content: attr(data-label); float: left; margin-right: var(--space-3); color: var(--text-secondary); font-size: var(--text-caption1-size); font-weight: 400; text-align: left; }
  .app-stack td:first-child { text-align: left; font-weight: 600; padding-bottom: var(--space-1); }
  .app-stack td:first-child::before, .app-stack td[colspan]::before, .app-stack td:not([data-label])::before { content: none; }
  .app-stack td .app-cell-sub { text-align: right; }
  .app-stack td.app-col-start { border-left: 0; }
}

/* API tokens page */
.app-tokens main { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-4); }
.app-token-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.app-token-form .yds-field:first-child { flex: 1 1 320px; }
.app-token-issued { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-primary-light); border-radius: var(--radius-md); background: var(--color-primary-lighter); }
.app-token-issued p { margin: 0 0 var(--space-2); }
.app-token-value { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.app-token-value code { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: var(--space-2); background: var(--surface-paper); border-radius: var(--radius-sm); font-size: 12px; }
.app-token-example { margin: 0; padding: var(--space-3); background: var(--surface-paper); border-radius: var(--radius-sm); font-size: 12px; overflow-x: auto; }

/* Embedded in Yalo Studio: no account team column (Yalo's internal data). */
.app-embedded .app-col-team { display: none; }
/* ...nor Yalo's own tools (the hidden attribute alone loses to the buttons' display). */
.app-embedded #sync, .app-embedded #statusFilter, .app-embedded #apiTokensLink, .app-embedded #logout { display: none !important; }