/* ============================================================
   MEL — app patterns
   Reusable backoffice patterns (toolbar, data tables, pills,
   forms, toast, rail toggle). Sits on top of the framework +
   theme-mel + mel-refinements. Used by every Mel admin screen.
   ============================================================ */

/* ---------- page toolbar (title + primary action) ---------- */
.page-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.page-toolbar .page-sub { max-width: 60ch; }

/* ---------- filter bar grid ---------- */
.filter-grid { display: grid; gap: var(--spacing-md); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.filter-grid .field { margin: 0; }
.filter-actions { display: flex; gap: var(--spacing-sm); align-items: center; margin-top: var(--spacing-md); }

/* ---------- data card + table ---------- */
.data-card { background: var(--bg-surface); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.data-card > table.table { margin: 0; }
.data-card .table-scroll { overflow-x: auto; }
.data-card table.table td, .data-card table.table th { padding: 0.9rem 1.25rem; }
.data-card table.table tbody tr { border-top: 1px solid var(--slate-100); }
.data-card table.table tbody tr:first-child { border-top: 0; }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: 0.85rem 1.25rem; border-top: 1px solid var(--slate-200); color: var(--text-muted); font-size: var(--text-sm); }
.table-foot .pager { display: flex; gap: 6px; }

/* identity cell (avatar + name + sub) */
.id-cell { display: flex; align-items: center; gap: 12px; }
.id-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.id-avatar svg { width: 18px; height: 18px; }
.id-name { font-weight: 700; color: var(--text-main); }
.id-sub { color: var(--text-muted); font-size: var(--text-sm); }

/* mono-ish code value (ids, cnpj, api keys) */
.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.code-chip { font-family: var(--font-mono); font-size: 0.85em; background: var(--slate-100); color: var(--slate-700); padding: 0.15em 0.5em; border-radius: var(--radius-sm); }

/* ---------- row actions ---------- */
.row-actions { display: flex; gap: 8px; justify-content: flex-end; }
.btn-soft-edit { background: color-mix(in srgb, var(--color-info), transparent 88%); color: color-mix(in srgb, var(--color-info), black 8%); border-color: transparent; }
.btn-soft-edit:hover:not(:disabled) { background: color-mix(in srgb, var(--color-info), transparent 80%); }
.btn-soft-del { background: color-mix(in srgb, var(--color-error), transparent 88%); color: var(--color-error); border-color: transparent; }
.btn-soft-del:hover:not(:disabled) { background: color-mix(in srgb, var(--color-error), transparent 80%); }

/* ---------- role / type pills ---------- */
.role-pill { display: inline-flex; align-items: center; gap: 6px; padding: 0.2rem 0.62rem 0.2rem 0.5rem; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; background: var(--slate-100); color: var(--slate-600); }
.role-pill svg { width: 14px; height: 14px; }
.role-super { background: var(--honey-50); color: var(--honey-700); }
.role-admin { background: color-mix(in srgb, var(--color-info), transparent 88%); color: color-mix(in srgb, var(--color-info), black 14%); }

/* yes/no pill */
.yn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.18rem 0.6rem; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; }
.yn::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.yn-yes { background: color-mix(in srgb, var(--color-success), white 86%); color: color-mix(in srgb, var(--color-success), black 14%); }
.yn-no { background: var(--slate-100); color: var(--slate-500); }

/* ---------- empty state ---------- */
.empty { text-align: center; padding: 56px 20px; color: var(--text-muted); }
.empty svg { width: 40px; height: 40px; margin-bottom: 10px; color: var(--slate-300); }

/* ---------- form card ---------- */
.form-wrap { max-width: 780px; }
.form-card { background: var(--bg-surface); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.form-section { padding: var(--spacing-lg); }
.form-section + .form-section { border-top: 1px solid var(--slate-100); }
.form-section h3 { font-size: var(--text-base); font-weight: 800; margin: 0 0 4px; }
.form-section .sec-hint { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--spacing-md); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing-md); }
.toggle-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.toggle-row .tr-text strong { display: block; font-weight: 700; }
.toggle-row .tr-text span { font-size: var(--text-sm); color: var(--text-muted); }
.form-foot { display: flex; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--slate-200); background: var(--slate-50); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ---------- detail (read view) ---------- */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); align-items: start; }
.kv { display: flex; flex-direction: column; gap: 3px; padding: 9px 0; border-top: 1px solid var(--slate-100); }
.kv:first-child { border-top: 0; }
.kv dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-400); font-weight: 700; }
.kv dd { margin: 0; font-weight: 600; color: var(--text-main); }
.doc-btn { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- topbar trilha toggle ---------- */
.rail-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); font-weight: 600; }
.seg { display: inline-flex; background: var(--slate-100); border-radius: var(--radius-pill); padding: 3px; }
.seg button { border: 0; background: transparent; padding: 5px 11px; border-radius: var(--radius-pill); font: inherit; font-size: 13px; font-weight: 700; color: var(--slate-500); cursor: pointer; transition: all var(--transition-fast); }
.seg button.on { background: var(--bg-surface); color: var(--honey-700); box-shadow: var(--shadow-xs); }

/* ---------- toast ---------- */
.toast { position: fixed; bottom: var(--spacing-lg); right: var(--spacing-lg); z-index: 300; background: var(--bg-surface); color: var(--text-main); padding: 0.8rem 1.1rem; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border: 1px solid var(--slate-200); display: flex; align-items: center; gap: 10px; min-width: 220px; transform: translateY(8px); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast .tk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--color-success), transparent 84%); color: var(--color-success); flex-shrink: 0; }
.toast .tk svg { width: 15px; height: 15px; }
.toast .tm { font-weight: 600; font-size: var(--text-sm); }

/* ---------- modal body ---------- */
dialog.modal .modal-body { color: var(--text-muted); line-height: 1.6; }
dialog.modal .modal-body strong { color: var(--text-main); }

@media (max-width: 760px) {
  .grid-2, .grid-3, .detail-grid { grid-template-columns: 1fr; }
  .page-toolbar { flex-direction: column; align-items: stretch; }
  .page-toolbar .btn, .page-toolbar .btn-primary { width: 100%; justify-content: center; }
  .data-card { overflow-x: auto; }
  .data-card > table.table { min-width: 640px; }
  .filter-actions { flex-direction: column; align-items: stretch; }
  .filter-actions .btn { width: 100%; justify-content: center; }
  .form-wrap, .form-wrap[style] { max-width: 100% !important; }
  .form-foot { flex-direction: column; }
  .form-foot .btn { width: 100%; justify-content: center; }
  .row-actions { flex-wrap: wrap; }
}