/* PEIMY admin overrides (A18 + D1) — mobile tap targets y paridad de marca.
 *
 * Unfold renders the sidebar toggle as a bare ~18px `material-symbols-outlined`
 * span and the sidebar entries as compact links. On a phone these are hard to
 * hit; the rules below lift every interactive control to the ~44px WCAG target
 * without altering how the panel looks on desktop.
 *
 * D1 añade al final: variables semánticas (valores de
 * documentacion/frontend/TOKENS.md), clases utilitarias que sustituyen a las
 * clases Tailwind que el CSS compilado de Unfold 0.102 NO incluye (text-amber-*,
 * space-y-*, bg-yellow-600… hoy son no-op silenciosos), el parche AA de la
 * barra de acciones en oscuro, alineación derecha de columnas numéricas y la
 * distinción visual de campos de solo lectura. */

/* Sidebar toggles (desktop dock icon, mobile drawer icon, drawer close icon —
 * all carry an Alpine `x-on:click` flipping a `sidebar*Open` flag). Expand the
 * hit area to 44x44 and center the glyph WITHOUT touching `display`: Unfold
 * shows/hides these via `hidden!`/`block!`/`xl:block!` !important utilities, so
 * a display override either loses (glyph stuck top-left in a block box) or
 * breaks the responsive visibility. line-height + text-align center a font
 * glyph in a block box just as well. */
.material-symbols-outlined[x-on\:click*="sidebar"] {
  min-width: 44px;
  min-height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 6px;
}
.material-symbols-outlined[x-on\:click*="sidebar"]:hover {
  background: rgba(100, 116, 139, 0.1);
}

/* Sidebar navigation entries — guarantee a comfortable tap height on the mobile
 * drawer (and desktop rail). Unfold renders them as <ol><li><a>; scoping to the
 * list keeps the logo/header link in the same container untouched. */
#nav-sidebar-inner ol a {
  min-height: 40px;
}

/* ── D1 · Mobile-first changelist: hardened stacked-card fallback ─────────────
 * Unfold already turns each changelist row into a "label: value" card below its
 * `lg` breakpoint (via Tailwind `block`/`lg:table-row` utilities + a per-cell
 * `data-label` attribute rendered by unfold_list.py). Those utility classes are
 * an internal implementation detail that can change or be purged between Unfold
 * releases; when that happens the list silently falls back to a 8–10 column
 * table inside `overflow-x-auto`, which is unusable on a phone.
 *
 * The rules below re-assert that same card layout using ONLY stable anchors —
 * the `#result_list` table id and the `[data-label]` attribute (both public,
 * both generated server-side) — so Empresas/Usuarios stay readable with no
 * horizontal scroll regardless of Unfold's class churn. They mirror Unfold's
 * own mobile design (label left, value right), so when Unfold's utilities ARE
 * present these are a harmless no-op; desktop (≥641px) is never touched. */
@media (max-width: 640px) {
  #result_list {
    display: block;
    width: 100%;
  }

  /* Column headers live in a normal <thead>; hide it — each cell reprints its
   * own label via ::before below. */
  #result_list thead {
    display: none;
  }

  #result_list tbody {
    display: block;
  }

  /* Each record's row becomes a bordered card. Target both the semantic
   * `.data-row` (Unfold) and any direct tbody > tr as a belt-and-braces net. */
  #result_list tbody tr.data-row,
  #result_list > tbody > tr {
    display: block;
    width: 100%;
    margin-bottom: 0.75rem;
    border: 1px solid var(--color-base-200);
    border-radius: 0.5rem;
    overflow: hidden;
  }

  /* Only cells that carry a label become a "Label ........ value" flex row.
   * Cells without data-label (drag handle, action buttons) keep their own
   * layout. */
  #result_list td[data-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    text-align: left;
    white-space: normal;
  }

  #result_list td[data-label]::before {
    content: attr(data-label);
    margin-right: auto;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--color-font-important-light);
  }

  /* Dark mode — Unfold toggles `.dark` on <html>; use the same COLORS vars so
   * the card border/label track the active theme. */
  .dark #result_list tbody tr.data-row,
  .dark #result_list > tbody > tr {
    border-color: var(--color-base-800);
  }

  .dark #result_list td[data-label]::before {
    color: var(--color-font-important-dark);
  }
}

/* ── D3 · Dashboard metric grids: single-column fallback on small phones ──────
 * The ops/platform/KPI grids set `grid-template-columns` inline with a fixed
 * `minmax(180–260px, 1fr)`. `auto-fill/auto-fit` reflows those down to one
 * column only while the min still fits; on a ≤375px viewport the 260px track
 * can exceed the available width and force horizontal scroll. Collapsing the
 * shared `.peimy-grid` marker to a single column below 480px guarantees no
 * overflow (inline styles win by specificity, so the override needs
 * !important). Above 480px the native auto-fill tiling is left intact. */
@media (max-width: 480px) {
  .peimy-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Popup / change-form polish (mirrors product FormModal standards) ─────────
 * Unfold already sticks #submit-row at `lg`. On phones the Save row can scroll
 * away under the keyboard — keep it sticky on all breakpoints with a solid
 * surface so fields never bleed through. Related-object popups (`?_popup=1`)
 * get a capped, scrollable body so the first fields are never clipped by the
 * browser chrome. */
#submit-row {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: var(--color-base-50, #fff);
  border-top: 1px solid var(--color-base-200, #e2e8f0);
  /* Soft lift so scrolled content clearly sits below the action bar. */
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
  /* Home-indicator / gesture bar clearance on phones. */
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

.dark #submit-row {
  background: var(--color-base-900, #0f172a);
  border-top-color: var(--color-base-800, #1e293b);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}

/* Action buttons inside the sticky row — 44px tap targets on touch. */
@media (max-width: 767px) {
  #submit-row input[type="submit"],
  #submit-row button,
  #submit-row a.button {
    min-height: 44px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

body.popup,
body.change-form {
  overflow-x: hidden;
}

/* Related-object popup windows: keep the form body scrollable under sticky
 * Save, and never let the panel exceed the viewport height. */
body.popup #main,
body.popup .relative {
  max-width: 100vw;
}

body.popup #content,
body.popup .peimy-popup-body {
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 767px) {
  body.popup #container,
  body.change-form #container {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  /* Touch-sized native inputs inside Unfold change forms. */
  body.change-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body.change-form select,
  body.change-form textarea,
  body.popup input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body.popup select,
  body.popup textarea {
    min-height: 44px;
    font-size: 16px;
  }

  body.change-form textarea,
  body.popup textarea {
    min-height: 88px;
  }
}

/* ══ D1 · Paridad de marca con TOKENS.md ══════════════════════════════════════
 * Los valores de color de esta sección son los tokens semánticos de
 * documentacion/frontend/TOKENS.md (familias success/warning/danger/info:
 * DEFAULT / -bg / -border / -text, claro y oscuro). Este archivo es el ÚNICO
 * punto del admin donde esos hex se materializan; todo lo demás usa var(). */

:root {
  --peimy-success: #10b981;
  --peimy-success-bg: #ecfdf5;
  --peimy-success-border: #a7f3d0;
  --peimy-success-text: #065f46;
  --peimy-warning: #f59e0b;
  --peimy-warning-bg: #fffbeb;
  --peimy-warning-border: #fde68a;
  --peimy-warning-text: #92400e;
  --peimy-danger: #ef4444;
  --peimy-danger-bg: #fef2f2;
  --peimy-danger-border: #fecaca;
  --peimy-danger-text: #991b1b;
  --peimy-info: #8b5cf6;
  --peimy-info-bg: #f5f3ff;
  --peimy-info-border: #ddd6fe;
  --peimy-info-text: #5b21b6;
}

.dark {
  --peimy-success: #34d399;
  --peimy-success-bg: rgba(16, 185, 129, 0.12);
  --peimy-success-border: rgba(52, 211, 153, 0.3);
  --peimy-success-text: #6ee7b7;
  --peimy-warning: #fbbf24;
  --peimy-warning-bg: rgba(245, 158, 11, 0.12);
  --peimy-warning-border: rgba(251, 191, 36, 0.3);
  --peimy-warning-text: #fcd34d;
  --peimy-danger: #f87171;
  --peimy-danger-bg: rgba(239, 68, 68, 0.12);
  --peimy-danger-border: rgba(248, 113, 113, 0.3);
  --peimy-danger-text: #fca5a5;
  --peimy-info: #a78bfa;
  --peimy-info-bg: rgba(139, 92, 246, 0.12);
  --peimy-info-border: rgba(167, 139, 250, 0.3);
  --peimy-info-text: #c4b5fd;
}

/* ── Utilidades que el CSS compilado de Unfold no trae (eran no-op) ─────────── */
.no-underline {
  text-decoration: none;
}

.peimy-break-all {
  word-break: break-all;
}

.peimy-object-contain {
  object-fit: contain;
}

/* ── Tarjetas KPI (dashboard /admin/ + peimy-ops + panel-plataforma) ──────────
 * El aspecto KPI del producto: rótulo overline + cifra tabular. Los colores de
 * texto usan la familia -text (contraste calculado: 7.09–8.98:1 sobre blanco;
 * 9.41–12.38:1 sobre base-900 en oscuro). */
.peimy-kpi-label {
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-font-subtle-light);
}

.dark .peimy-kpi-label {
  color: var(--color-font-subtle-dark);
}

.peimy-kpi-value {
  margin-top: 0.25rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.peimy-kpi-note {
  margin-top: 0.25rem;
  font-size: 11px;
  line-height: 1rem;
  color: var(--color-font-subtle-light);
}

.dark .peimy-kpi-note {
  color: var(--color-font-subtle-dark);
}

.peimy-text-success {
  color: var(--peimy-success-text);
}

.peimy-text-warning {
  color: var(--peimy-warning-text);
}

.peimy-text-danger {
  color: var(--peimy-danger-text);
}

.peimy-text-info {
  color: var(--peimy-info-text);
}

/* ── Chips y avisos semánticos (pareja -bg + -text + -border de TOKENS.md) ──── */
.peimy-chip-success,
.peimy-chip-warning,
.peimy-chip-danger,
.peimy-chip-info {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid;
  font-size: 0.75rem;
  font-weight: 600;
}

.peimy-chip-success {
  background: var(--peimy-success-bg);
  border-color: var(--peimy-success-border);
  color: var(--peimy-success-text);
}

.peimy-chip-warning {
  background: var(--peimy-warning-bg);
  border-color: var(--peimy-warning-border);
  color: var(--peimy-warning-text);
}

.peimy-chip-danger {
  background: var(--peimy-danger-bg);
  border-color: var(--peimy-danger-border);
  color: var(--peimy-danger-text);
}

.peimy-chip-info {
  background: var(--peimy-info-bg);
  border-color: var(--peimy-info-border);
  color: var(--peimy-info-text);
}

.peimy-alert-success,
.peimy-alert-danger {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  border: 1px solid;
  font-size: 0.875rem;
}

.peimy-alert-success {
  background: var(--peimy-success-bg);
  border-color: var(--peimy-success-border);
  color: var(--peimy-success-text);
}

.peimy-alert-danger {
  background: var(--peimy-danger-bg);
  border-color: var(--peimy-danger-border);
  color: var(--peimy-danger-text);
}

/* ── Botones semánticos sólidos (ciclo de vida de empresa, CSV) ───────────────
 * Fondo = token -text claro de la familia (los DEFAULT no alcanzan 4.5:1 con
 * texto blanco: #F59E0B da 2.1:1, #10B981 2.5:1). Con -text: blanco sobre
 * #065F46 = 7.68:1 · #92400E = 7.09:1 · #991B1B = 8.31:1 (calculado). El fondo
 * se mantiene fijo en oscuro (son colores profundos, siguen AA). */
.peimy-btn-success,
.peimy-btn-warning,
.peimy-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 0.375rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s;
}

.peimy-btn-success {
  background: #065f46; /* --color-success-text claro (TOKENS.md) */
}

.peimy-btn-warning {
  background: #92400e; /* --color-warning-text claro (TOKENS.md) */
}

.peimy-btn-danger {
  background: #991b1b; /* --color-danger-text claro (TOKENS.md) */
}

.peimy-btn-success:hover,
.peimy-btn-warning:hover,
.peimy-btn-danger:hover {
  filter: brightness(1.15);
}

/* ── Barra de herramientas del ámbito (peimy-ops) ─────────────────────────────
 * `items-end` y `sm:w-72` no existen en el CSS de Unfold; estas clases los
 * sustituyen. */
.peimy-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.peimy-scope-select {
  width: 100%;
}

@media (min-width: 640px) {
  .peimy-scope-select {
    width: 18rem;
  }
}

/* Desglose por plan: sustituye al difunto `sm:grid-cols-3` con auto-ajuste. */
.peimy-grid-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

/* Tablas propias: sin borde fantasma bajo la última fila (last:border-0 es
 * no-op en el CSS compilado). */
.peimy-last-clean tr:last-child {
  border-bottom: 0;
}

/* ── D1 · Columnas numéricas alineadas a la derecha ───────────────────────────
 * Django marca cada celda con `field-<nombre>` y cada cabecera con
 * `column-<nombre>` (unfold_list.py conserva ambas). Solo columnas de conteos
 * e importes; identidad y vigencias quedan a la izquierda. En móvil (≤640px)
 * la vista de tarjetas ya alinea el valor a la derecha vía flex. */
#result_list td.field-seats,
#result_list td.field-total,
#result_list td.field-monto,
#result_list td.field-display_active_users,
#result_list td.field-display_empleados,
#result_list td.field-display_modules_count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#result_list th.column-seats,
#result_list th.column-total,
#result_list th.column-monto,
#result_list th.column-display_active_users,
#result_list th.column-display_empleados,
#result_list th.column-display_modules_count {
  text-align: right;
}

#result_list th.column-seats > div,
#result_list th.column-total > div,
#result_list th.column-monto > div,
#result_list th.column-display_active_users > div,
#result_list th.column-display_empleados > div,
#result_list th.column-display_modules_count > div {
  justify-content: flex-end;
}

/* ── D1 · Solo lectura visualmente distinto de editable ───────────────────────
 * Unfold envuelve el valor de un campo de solo lectura en `div.readonly`
 * (unfold/helpers/field_readonly_value.html). Fondo tenue + borde discontinuo
 * = «esto no se edita aquí», sin tocar la legibilidad (usa los roles de texto
 * del tema). */
body.change-form .readonly {
  background: var(--color-base-50);
  border: 1px dashed var(--color-base-200);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  color: var(--color-font-default-light);
}

.dark body.change-form .readonly {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--color-base-700);
  color: var(--color-font-default-dark);
}

/* ── D1 · Parche AA de la barra de acciones en tema oscuro ────────────────────
 * Unfold 0.102 pinta la barra de acciones con texto blanco sobre
 * `dark:bg-primary-500`. Con primary-500 = #6382FF eso da 3.40:1 (< 4.5:1).
 * Se fija primary-600 (#4338CA) en ambos temas: blanco sobre #4338CA = 7.90:1
 * (calculado). Regla sin capa (@layer), por eso gana a la utilidad de Unfold. */
#changelist-actions > div {
  background-color: var(--color-primary-600);
}