/* MIDE OS · Portal Cliente · Contactos (reference client/03). Layout of the view only: components
   come from ui/components.css and every value from ui/tokens.css. */
@layer views {
  /* KPI figures use the shared size (one scale across the portal). */

  .ct-table-block { display: grid; gap: var(--mide-space-2); min-width: 0; }
  .ct-status { margin: 0; color: var(--mide-muted); font-size: var(--mide-text-sm); }
  .ct-status:empty { display: none; }
  .ct-pager { display: flex; justify-content: center; }
  .ct-pager:not(:has(.ui-button:not([hidden]))) { display: none; }
  .ct-pager .ui-button[hidden] { display: none; }
  .ct-filters .ct-filter { flex: 0 1 190px; }
  .ct-filters .ui-select-menu { width: 100%; }
  .ct-identity { display: inline-flex; align-items: center; gap: var(--mide-space-3); min-width: 0; }
  .ct-identity-text { display: grid; min-width: 0; }
  .ct-identity-text strong { overflow: hidden; color: var(--mide-heading); font-weight: var(--mide-weight-semibold); text-overflow: ellipsis; }
  .ct-identity-text small, .ct-attention small, .ct-phone small, .ct-muted { color: var(--mide-muted); font-size: var(--mide-text-xs); }
  .ct-phone, .ct-attention { display: inline-grid; gap: 2px; justify-items: start; }
  .ct-avatar-anonymous { background: var(--mide-surface-hover); color: var(--mide-muted); }
  .ct-avatar-anonymous .ui-icon { width: 16px; height: 16px; }
  #contactTable .ct-col-actions { width: 1%; text-align: right; }
  /* An empty or failed table has nothing to scroll (axe scrollable-region-focusable). */
  .ct-view .ui-data-table:not([data-state="ready"]) .ui-table-scroll { display: none; }

  /* "⋯" row menu */
  .ct-menu-wrap { position: relative; display: inline-flex; }
  /* Same treatment as the thread «⋯» (follow-up of PR 1161): niebla + permanent border, ink icon, 44 × 44. */
  #contactTable .ct-menu-wrap > .ui-button { min-width: 44px; min-height: 44px; border: 1px solid var(--mide-line-strong); background: var(--mide-surface-2); color: var(--mide-ink); }
  .ct-menu-wrap > .ui-button .mide-icon { stroke-width: 3; }
  /* Right edge on «⋯» (measured on open: in the phone cards the wrap is narrower than the button it holds). */
  .ct-menu { position: absolute; top: calc(100% + var(--mide-space-1)); right: var(--ct-menu-right, 0); z-index: 20; display: grid; min-width: 200px; padding: var(--mide-space-1); border: 1px solid var(--mide-panel-line); border-radius: var(--mide-radius-sm); background: var(--mide-surface); box-shadow: var(--mide-shadow-lg); }
  .ct-menu[hidden] { display: none; }
  .ct-menu.is-up { top: auto; bottom: calc(100% + var(--mide-space-1)); }
  .ct-menu-item { display: flex; align-items: center; gap: var(--mide-space-2); min-height: 40px; padding: 0 var(--mide-space-3); border: 0; border-radius: 6px; background: none; color: var(--mide-ink); font: var(--mide-weight-medium) var(--mide-text-sm)/1.2 var(--mide-font); text-align: left; white-space: nowrap; cursor: pointer; }
  /* Follow-up of PR 1161 (visual QA): 44 px items, like the thread menu. */
  #contactTable .ct-menu-item { min-height: 44px; }
  .ct-menu-item:hover, .ct-menu-item:focus-visible { background: var(--mide-surface-hover); outline: none; }
  .ct-menu-item .ui-icon { width: 18px; height: 18px; color: var(--mide-muted); }

  /* With the card open the table is narrower and becomes cards (container query): every field
     stays visible in them; no column is hidden (review #7, D1). */

  /* Inspector */
  .ct-detail-tabs { gap: var(--mide-space-5); }
  .ct-detail-panel { display: grid; gap: var(--mide-space-4); }
  .ct-section { display: grid; gap: var(--mide-space-3); padding-bottom: var(--mide-space-4); border-bottom: 1px solid var(--mide-line); }
  .ct-section:last-child { border-bottom: 0; }
  .ct-section-title { margin: 0; color: var(--mide-heading); font-size: var(--mide-text-md); font-weight: var(--mide-weight-bold); }
  .ct-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--mide-space-2) var(--mide-space-4); margin: 0; font-size: var(--mide-text-sm); }
  .ct-facts > div { display: contents; }
  .ct-facts dt { color: var(--mide-muted); }
  .ct-facts dd { margin: 0; color: var(--mide-ink); font-weight: var(--mide-weight-semibold); text-align: end; overflow-wrap: anywhere; }
  .ct-conversations { display: grid; gap: var(--mide-space-3); margin: 0; padding: 0; list-style: none; }
  .ct-conversation { display: grid; gap: var(--mide-space-2); justify-items: start; padding: var(--mide-space-3); border: 1px solid var(--mide-line); border-radius: var(--mide-radius); background: var(--mide-surface-2); }
  .ct-conversation p { margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-sm); overflow-wrap: anywhere; }
  .ct-conversation-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mide-space-2); }
  .ct-conversation-head small, .ct-meta { margin: 0; color: var(--mide-muted); font-size: var(--mide-text-xs); }

  /* Tabs never clip on narrow screens: a segmented control of equal parts. */
  @media (max-width: 720px) {
    .ct-view .ct-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mide-space-1); padding: var(--mide-space-1); border: 0; border-radius: var(--mide-radius-sm); background: var(--mide-surface-hover); -webkit-mask-image: none; mask-image: none; }
    .ct-view .ct-tabs .ui-tab { flex-direction: column; justify-content: center; gap: 0; min-width: 0; min-height: 48px; margin: 0; padding: var(--mide-space-1) 2px; border-radius: 6px; font-size: var(--mide-text-xs); line-height: 1.25; text-align: center; white-space: normal; }
    .ct-view .ct-tabs .ui-tab::after { display: none; }
    .ct-view .ct-tabs .ui-tab[aria-selected="true"] { background: var(--mide-surface); box-shadow: var(--mide-shadow); }
    .ct-view .ct-tabs .ui-tab-count { color: var(--mide-muted); }
  }

  /* Phone cards come from ui/components.css (dataTable mobileCards: 'wide', by the table's own
     width). Here only what is particular to contacts: the «⋯» menu stays in the card header. */
  @container ui-table (max-width: 860px) {
    .ct-view .ui-data-table-cards .ui-table tr { grid-template-columns: minmax(0, 1fr) auto auto; }
    .ct-view .ui-data-table-cards .ui-table td.ct-col-actions { display: flex; grid-row: 1; grid-column: 3; justify-content: flex-end; width: auto; }
    .ct-view .ui-data-table-cards .ui-table td.ct-col-actions::before { content: none; }
    .ct-view .ui-data-table-cards .ui-table td:empty { display: none; }
  }
  @media (max-width: 900px) { .ct-view .ct-filters .ct-filter { flex: 1 1 140px; } }
}