/* v3======================================================
   core.css — Design Base (tokens + componentes base)
   Usado por: `base_auth.html` e `base_app.html`
   Objetivo: consistência (Ockham) + mobile-first, sem quebrar
   ====================================================== */

/* =========================
   Tokens (Design System)
   ========================= */
:root{
  /* Neutros */
  --c-bg:#f7faff;
  --c-surface:#ffffff;
  --c-surface-2:#f3f7ff;
  --c-text:#0e2a56;
  --c-muted-text:#7b8896;
  --c-line:#d6dee8;

  /* Marca */
  --c-navy:#052450;
  --c-navy-dark:#0b2a55;

  /* Acento (verde — padrão UI) */
  --c-accent:#007a1a;
  --c-accent-rgb:0, 122, 26;
  --c-accent-soft:rgba(var(--c-accent-rgb), 0.12);
  --c-accent-strong:#0b6b23;
  /* Botão primário (tom mais suave que o acento geral) */
  --c-btn-primary:#2b8b67;
  --c-btn-primary-rgb:43, 139, 103;

  /* Estados (discretos) */
  --c-success:#16794b;
  --c-success-bg:#e8f6ee;
  --c-warn:#8a4b00;
  --c-warn-bg:#fff1e0;
  /* Evitar vermelho no visual do app */
  --c-danger:var(--c-accent);
  --c-danger-bg:rgba(var(--c-accent-rgb), 0.10);
  --c-info:#1e3a8a;
  --c-info-bg:#eff6ff;

  /* Back-compat (evitar big-bang) */
  --c-orange:var(--c-accent);
  --c-red:var(--c-danger);
  --radius:18px;

  /* Tipografia/escala */
  --fs-12:12px;
  --fs-14:14px;
  --fs-16:16px;
  --fs-20:20px;
  --fs-24:24px;

  /* Espaçamento (4px grid) */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;

  /* Raios */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;

  /* Sombras (2 níveis + pop) */
  --shadow-sm:0 1px 2px rgba(6,27,66,.06), 0 0 0 1px rgba(6,27,66,.04);
  --shadow-md:0 10px 30px rgba(6,27,66,.10);
  --shadow-pop:0 16px 42px rgba(6,27,66,.18);
  --shadow:var(--shadow-md);

	  /* Layout */
	  --container:1100px;

    /* Breakpoints oficiais (responsividade) */
    /* Nota: variáveis CSS não são usadas diretamente em @media, mas servem como fonte de verdade. */
    --bp-sm:520px;
    --bp-md:860px;
    --bp-lg:1080px;
    --bp-xl:1320px;
    --bp-tv:1920px;

		  /* Controles compartilhados */
		  --control-h:52px;
		  --btn-h:44px;
		  --btn-h-sm:38px;

	  /* Placeholders / ícones de inputs (discreto) */
	  --c-placeholder:rgba(11,42,85,.45);
}

/* =========================
   Reset e base
   ========================= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
input, select, textarea, button{ font:inherit }
a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:underline }
:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px }

/* =========================
   Utilitários mínimos
   ========================= */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.hidden{ display:none }
.muted{ color:var(--c-muted-text) }
.inline{ color:var(--c-navy); font-weight:700 }

.stack{ display:flex; flex-direction:column; gap:var(--s-5) }
.row{ display:flex; align-items:center; gap:var(--s-3) }
.row.between{ justify-content:space-between }
.wrap{ flex-wrap:wrap }

/* Compat (templates legadas com classes estilo utilitário) */
.flex{ display:flex }
.flex-wrap{ flex-wrap:wrap }
.items-center{ align-items:center }
.items-end{ align-items:flex-end }
.justify-between{ justify-content:space-between }
.justify-end{ justify-content:flex-end }
.gap-2{ gap:var(--s-2) }
.gap-4{ gap:var(--s-4) }
.gap-6{ gap:var(--s-5) }

.container,
.page-container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
}
.page-container--wide{ max-width:none }

.grid{ display:grid; gap:var(--s-3) }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:900px){ .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px){ .grid-2,.grid-3{ grid-template-columns:1fr } }

.mb-2{ margin-bottom:var(--s-2) }
.mb-3{ margin-bottom:var(--s-3) }
.mb-4{ margin-bottom:var(--s-4) }
.m-0{ margin:0 }
.mt-3{ margin-top:var(--s-3) }
.mt-4{ margin-top:var(--s-4) }
.mx-2{ margin-left:var(--s-2); margin-right:var(--s-2) }
.text-right{ text-align:right }
.text-center{ text-align:center }
.text-muted{ color:var(--c-muted-text) }
.measure{ width:100%; max-width:520px; }

/* =========================
   Componentes base
   ========================= */
.card,
.surface{
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.card{ padding:var(--s-4) }
.card.pop{ box-shadow:var(--shadow-md) }
.card.subtle{ box-shadow:none; background:var(--c-surface) }
.card.glass{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-4);
  flex-wrap:wrap;
  margin-bottom:var(--s-4);
}
.page-title{
  font-size:22px;
  line-height:1.2;
  font-weight:560;
  margin:0 0 4px 0;
  letter-spacing:-.01em;
}
.page-subtitle{ margin:0; color:var(--c-muted-text) }
.card-title{
  font-weight:560;
  color:var(--c-navy-dark);
  margin:0 0 8px 0;
  letter-spacing:-.01em;
}
.link{
  color:var(--c-navy-dark);
  font-weight:800;
  text-decoration:underline;
  text-decoration-color:rgba(var(--c-accent-rgb), .30);
  text-underline-offset:3px;
}
.link:hover{ text-decoration-color:rgba(var(--c-accent-rgb), .50) }

/* =========================
   UI Contract v1 (opt-in via `.ui-v1`)
   ========================= */
.ui-v1{
  /* Re-map do “primary” para o tom da marca (sem verde) */
  --c-btn-primary: var(--c-navy);
  --c-btn-primary-rgb: 5, 36, 80;
}

.ui-v1 .ui-page-head{
  margin-bottom:var(--s-4);
}
.ui-v1 .ui-page-head .page-subtitle{
  margin:0;
}
.ui-v1 .page-subtitle{
  display:none;
}
/* Subtítulos legacy (muitas páginas usam `<p class="muted">` após o H1) */
.ui-v1 h1.page-title + p{ display:none; }
.ui-v1 h1.page-title + .muted{ display:none; }
/* Titlebars legacy (muitas páginas usam wrapper `.card-title` como cabeçalho da página) */
.ui-v1 .page-content > .card-title p{ display:none; }
.ui-v1 .page-content > .card-title .muted{ display:none; }
.ui-v1 .page-content > .card-title + p{ display:none; }
.ui-v1 .page-content > .card-title + .muted{ display:none; }
.ui-v1 .page-content > .page-head p{ display:none; }
.ui-v1 .page-content > .page-head .muted{ display:none; }
.ui-v1 .page-content > .page-head + p{ display:none; }
.ui-v1 .page-content > .page-head + .muted{ display:none; }
/* Base comum: muitas páginas usam `base_app_page.html` que envolve tudo em `.page-card` */
.ui-v1 .page-content > .page-card > .card-title p{ display:none; }
.ui-v1 .page-content > .page-card > .card-title .muted{ display:none; }
.ui-v1 .page-content > .page-card > .card-title + p{ display:none; }
.ui-v1 .page-content > .page-card > .card-title + .muted{ display:none; }
.ui-v1 .page-content > .page-card > .page-head p{ display:none; }
.ui-v1 .page-content > .page-card > .page-head .muted{ display:none; }
.ui-v1 .page-content > .page-card > .page-head + p{ display:none; }
.ui-v1 .page-content > .page-card > .page-head + .muted{ display:none; }
.ui-v1 .ui-page-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.ui-v1 .ui-page-actions .btn{
  order:10;
}
.ui-v1 .ui-page-actions .btn.primary{
  order:5;
}
.ui-v1 .ui-page-actions .ui-actions-menu{
  order:1000; /* o `…` (overflow) sempre por último */
}

/* Overflow menu (`…`) padrão */
.ui-v1 .ui-actions-menu{
  position:relative;
  display:inline-block;
}
.ui-v1 .ui-actions-menu > summary::-webkit-details-marker{ display:none; }
.ui-v1 .ui-actions-menu > summary::marker{ content:""; }
.ui-v1 .ui-actions-trigger{
  list-style:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  width:38px;
  min-width:38px;
  height:38px;
  min-height:38px;
  border-radius:999px;
}
.ui-v1 .ui-actions-pop{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:190px;
  background:var(--c-surface);
  border:1px solid rgba(6,27,66,.12);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(6,27,66,.12);
  padding:6px;
  z-index:60;
}
.ui-v1 .ui-actions-item{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 10px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  color:var(--c-text);
  text-decoration:none;
  cursor:pointer;
  background:transparent;
  border:0;
  width:100%;
  text-align:left;
}
.ui-v1 .ui-actions-item .material-symbols-outlined{
  font-size:18px;
  opacity:.70;
}
.ui-v1 .ui-actions-item .ui-actions-label{
  flex:1;
  min-width:0;
}
.ui-v1 .ui-actions-item:hover{
  background:var(--c-surface-2);
  text-decoration:none;
}
.ui-v1 .ui-actions-sep{
  height:1px;
  background:rgba(6,27,66,.10);
  margin:6px 6px;
}
.ui-v1 .ui-actions-item.danger{
  /* contrato v1/v2: ações perigosas precisam parecer perigosas (não usar verde) */
  color:#b91c1c;
}
.ui-v1 .ui-actions-item.danger:hover{
  background:rgba(185,28,28,.06);
}

/* Toolbar minimalista (filtro popover) */
.ui-v1 .ui-filter-menu{
  position:relative;
  display:inline-block;
}
.ui-v1 .ui-filter-menu > summary::-webkit-details-marker{ display:none; }
.ui-v1 .ui-filter-menu > summary::marker{ content:""; }
.ui-v1 .ui-filter-pop{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:220px;
  background:var(--c-surface);
  border:1px solid rgba(6,27,66,.12);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(6,27,66,.12);
  padding:10px;
  z-index:60;
}
.ui-v1 .ui-toolbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.ui-v1 .ui-toolbar .ui-toolbar-right{
  display:flex;
  gap:8px;
  align-items:center;
  margin-left:auto;
}
.ui-v1 .ui-bulk-meta{
  display:none;
}
.ui-v1 .table .col-check{ width:1%; }
.ui-v1 .table .col-check input[type="checkbox"]{
  width:16px;
  height:16px;
  vertical-align:middle;
}
.ui-v1 .ui-bulk-head{
  display:flex;
  align-items:center;
  gap:10px;
}
.ui-v1 .ui-toolbar .input{
  flex:1 1 260px;
  min-width:200px;
}
.ui-v1 .ui-filter-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:10px;
}

/* Formulários: mobile-first sempre (1 campo por linha) */
.ui-v1 .form-grid{
  display:grid;
  grid-template-columns: 1fr !important;
  gap:12px;
}
.ui-v1 .form-grid > *{ min-width:0; }
.ui-v1 .form-grid label{ display:block; }
.ui-v1 .form-grid label > span{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  color:var(--c-muted-text);
  font-weight:600;
}
.ui-v1 .control-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  align-items:end;
}
.ui-v1 .control-row .btn{
  height:var(--control-h);
  min-height:var(--control-h);
}
@media (max-width: 520px){
  .ui-v1 .control-row{ grid-template-columns:1fr; }
  .ui-v1 .control-row .btn{ width:100%; }
}
.ui-v1 .field-error{
  margin-top:6px;
  font-size:12px;
  color:#b91c1c;
  font-weight:600;
}
.ui-v1 select{ width:100%; }

/* SelectList (global) — usado em selects com `data-selectlist` (JS: selectlist.js) */
.selectlist-native-hidden{ display:none !important; }
details.selectlist{ position:relative; min-width:220px; }
details.selectlist summary{ list-style:none; }
.selectlist-summary{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  padding:0 14px;
  background:#fff;
  height:var(--control-h);
  cursor:pointer;
  user-select:none;
}
.selectlist-summary::-webkit-details-marker{ display:none; }
.selectlist-summary::marker{ content:""; }
.selectlist-value{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.selectlist-chevron{ color:#64748b; font-size:20px; }
details[open].selectlist .selectlist-summary{
  border-color:rgba(var(--c-btn-primary-rgb), .55);
  box-shadow:0 0 0 3px rgba(var(--c-btn-primary-rgb), .18);
}
.selectlist-pop{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:#fff;
  border:1px solid rgba(6,27,66,.12);
  border-radius:var(--r-md);
  box-shadow:0 12px 28px rgba(6,27,66,.12);
  padding:10px;
  z-index:45;
}
.selectlist-top{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(6,27,66,.08);
  margin-bottom:10px;
}
.selectlist-search{
  width:100%;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(6,27,66,.12);
  padding:0 12px;
  outline:none;
}
.selectlist-search:focus{
  border-color:rgba(var(--c-btn-primary-rgb), .55);
  box-shadow:0 0 0 3px rgba(var(--c-btn-primary-rgb), .14);
}
.selectlist-add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:38px;
  border-radius:12px;
  border:1px dashed rgba(6,27,66,.18);
  background:transparent;
  color:var(--c-text);
  font-weight:800;
  cursor:pointer;
}
.selectlist-add[disabled],
.selectlist-add[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
}
.selectlist-add .material-symbols-outlined{ font-size:18px; }
.selectlist-options{
  max-height:260px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.selectlist-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(6,27,66,.10);
  cursor:pointer;
}
.selectlist-option:hover{ background:var(--c-surface-2); }
.selectlist-option input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--c-btn-primary);
}
.selectlist-option span{ font-size:14px; }

/* Checkbox pill (padrão simples Crontex) */
.check-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(6,27,66,.12);
  background:#fff;
  cursor:pointer;
  user-select:none;
}
.check-pill:focus-within{
  border-color:rgba(var(--c-btn-primary-rgb), .55);
  box-shadow:0 0 0 3px rgba(var(--c-btn-primary-rgb), .14);
}
.check-pill input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--c-btn-primary);
}
.check-pill span{ font-weight:700; font-size:13px; }

/* Botões */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  min-height:var(--btn-h);
  padding:0 16px;
  border-radius:var(--r-md);
  font-weight:700;
  font-size:var(--fs-14);
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  background:var(--c-btn-primary);
  color:#fff;
  border-color:rgba(var(--c-btn-primary-rgb), .32);
  text-decoration:none;
  box-shadow:0 1px 1px rgba(6,27,66,.06);
  transition:transform .06s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
a.btn:hover{ text-decoration:none }
.btn:hover{ filter:brightness(.98) }
.btn:active{ transform:translateY(1px) }
.btn.primary{
  background:var(--c-btn-primary);
  color:#fff;
  border-color:rgba(var(--c-btn-primary-rgb), .32);
}
.btn.neutral{
  background:var(--c-navy);
  border-color:rgba(6,27,66,.22);
  color:#fff;
}
.btn.secondary{
  background:var(--c-surface);
  color:var(--c-text);
  border-color:var(--c-line);
  box-shadow:none;
}
.btn.danger{ background:var(--c-danger); }
.btn.link{
  background:transparent;
  border:0;
  padding:0;
  color:var(--c-navy-dark);
  box-shadow:none;
}
.btn.small,
.btn.sm{
  min-height:var(--btn-h-sm);
  padding:0 10px;
  font-size:12px;
  border-radius:var(--r-sm);
}
.btn.icon-only{
  padding:0;
  width:var(--btn-h);
  min-width:var(--btn-h);
  justify-content:center;
}
.btn.icon-only.small,
.btn.icon-only.sm{
  width:var(--btn-h-sm);
  min-width:var(--btn-h-sm);
}
.btn.block{ width:100% }
.btn:disabled,
.btn[disabled],
a.btn.is-disabled{
  opacity:.56;
  cursor:not-allowed;
  pointer-events:none;
  filter:none;
}
.btn:focus-visible{
  outline:2px solid rgba(var(--c-btn-primary-rgb), .42);
  outline-offset:2px;
}

/* UI Contract v1: botões de ação clean (brancos) */
.ui-v1 .btn{
  background:var(--c-surface);
  color:var(--c-text);
  border-color:var(--c-line);
  box-shadow:none;
}
.ui-v1 .btn:hover{
  filter:none;
  background:var(--c-surface-2);
}
.ui-v1 .btn.primary{
  background:var(--c-surface);
  color:var(--c-navy-dark);
  border-color:rgba(var(--c-btn-primary-rgb), .35);
  box-shadow:none;
}
.ui-v1 .btn.primary:hover{
  background:var(--c-surface-2);
}
.ui-v1 .btn.neutral{
  background:var(--c-surface);
  color:var(--c-navy-dark);
  border-color:rgba(6,27,66,.22);
}
.ui-v1 .btn.danger{
  background:var(--c-surface);
  color:var(--c-danger);
  border-color:rgba(var(--c-accent-rgb), .22);
}

/* UI Contract v1: estados mais clean (evita "verde" forte em listagens) */
.ui-v1 .badge.success,
.ui-v1 .badge.warning,
.ui-v1 .badge.danger,
.ui-v1 .badge.info{
  background:var(--c-surface);
  border-color:rgba(6,27,66,.12);
  color:var(--c-navy-dark);
}
.ui-v1 .alert.success,
.ui-v1 .alert.warning,
.ui-v1 .alert.danger,
.ui-v1 .alert.info{
  background:var(--c-surface);
  border-color:rgba(6,27,66,.12);
  color:var(--c-navy-dark);
}

/* Tamanho sincronizado com inputs */
.btn-lg{
  height:var(--control-h);
  width:100%;
  font-size:16px;
  border-radius:var(--r-md);
}

/* Badges e tags */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--c-accent-soft);
  border:1px solid rgba(var(--c-accent-rgb), .20);
  color:var(--c-navy-dark);
  font-weight:800;
  font-size:12px;
}
.badge.secondary{ background:var(--c-surface-2); border-color:rgba(6,27,66,.10); color:var(--c-navy-dark) }
.badge.muted{ background:#eef2f7; border-color:rgba(6,27,66,.08); color:#334155 }
.badge.success{ background:var(--c-success-bg); border-color:rgba(22,121,75,.18); color:var(--c-success) }
.badge.warning{ background:var(--c-warn-bg); border-color:rgba(138,75,0,.18); color:var(--c-warn) }
.badge.danger{ background:var(--c-danger-bg); border-color:rgba(var(--c-accent-rgb), .22); color:var(--c-danger) }
.badge.info{ background:var(--c-info-bg); border-color:rgba(30,58,138,.18); color:var(--c-info) }
.tag{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(6,27,66,.10);
  background:var(--c-surface-2);
  color:var(--c-navy-dark);
  font-weight:700;
  font-size:12px;
}

/* Alerts */
.alert{
  padding:10px 12px;
  border-radius:var(--r-md);
  border:1px solid rgba(6,27,66,.10);
  background:var(--c-surface);
}
.alert.success{ background:var(--c-success-bg); border-color:rgba(22,121,75,.18); color:var(--c-success) }
.alert.warning{ background:var(--c-warn-bg); border-color:rgba(138,75,0,.18); color:var(--c-warn) }
.alert.error,
.alert.danger{ background:var(--c-danger-bg); border-color:rgba(var(--c-accent-rgb), .22); color:var(--c-danger) }
.alert.info{ background:var(--c-info-bg); border-color:rgba(30,58,138,.18); color:var(--c-info) }

/* Campos de formulário (wrapper + uso direto em inputs/selects) */
.input{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  padding:0 14px;
  background:#fff;
  height:var(--control-h);
}
input.input,
select.input,
textarea.input{
  display:block;
  width:100%;
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  padding:0 14px;
  background:#fff;
  height:var(--control-h);
  font-size:16px;
  color:inherit;
  outline:0;
}
textarea.input{
  height:auto;
  min-height:calc(var(--control-h) * 1.5);
  padding:12px 14px;
}
.input .icon{
  display:inline-flex;
  width:20px;
  height:20px;
  color:var(--c-placeholder);
}
.input .icon svg{
  display:block;
  width:20px;
  height:20px;
}
.input input,
.input select,
.input textarea{
  flex:1;
  height:100%;
  font-size:16px;
  border:0;
  outline:0;
  background:transparent;
}

/* Placeholder consistente (inputs/textarea) */
input::placeholder,
textarea::placeholder{
  color:var(--c-placeholder);
  background:#fff;
  opacity:1; /* controla via alpha acima */
  font-weight:500;
}

/* SelectList (quando usado): placeholder + ícone discretos */
.selectlist-value.is-placeholder{
  color:var(--c-placeholder);
  opacity:1;
  font-weight:500;
}
.selectlist-summary .icon{
  color:var(--c-placeholder);
  opacity:1;
}
details.selectlist[data-selectlist-has-value="1"] .selectlist-value{
  color:var(--c-text);
  font-weight:700;
}

/* Valores preenchidos: cor de texto viva + bold */
.input input[data-has-value="1"],
.input select[data-has-value="1"],
.input textarea[data-has-value="1"],
input.input[data-has-value="1"],
select.input[data-has-value="1"],
textarea.input[data-has-value="1"]{
  color:var(--c-text);
  font-weight:700;
}

/* Tabs (usadas fora do catálogo também) */
.tabs{
  border-bottom:1px solid var(--c-line);
  margin-top:8px;
  display:flex;
  gap:24px;
}
.tab,
.tabs .tab[role="tab"]{
  appearance:none;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:10px 0;
  margin:0;
  font-weight:700;
  color:#64748b;
  border-bottom:2px solid transparent;
  text-decoration:none;
}
.tab:hover,
.tabs .tab[role="tab"]:hover{ color:var(--c-navy-dark); text-decoration:none }
.tab.is-active,
.tabs .tab.is-active{
  color:var(--c-navy-dark);
  border-bottom-color:var(--c-accent);
}

/* Mobile (<= 520px): tabs precisam ser acessíveis via scroll horizontal (sem wrap) */
@media (max-width: 520px){
  .tabs{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    gap:16px;
    scrollbar-width:none; /* Firefox */
  }
  .tabs::-webkit-scrollbar{ display:none; height:0; } /* WebKit */
  .tab,
  .tabs .tab[role="tab"]{
    flex:0 0 auto;
    white-space:nowrap;
  }
}

/* Tabelas */
.table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:var(--r-lg);
  /* Importante: não pode clipar popovers/menus (ex.: ui-actions-pop) */
  overflow:visible;
  box-shadow:var(--shadow-sm);
}
.table th,
.table td{
  padding:12px 14px;
  border-bottom:1px solid var(--c-line);
  text-align:left;
}
.table th{
  background:#f5f8ff;
  font-size:12px;
  font-weight:560;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#4f5d78;
}
.table.is-fullwidth{ width:100% }
/* Scroll horizontal de tabelas + permitir popovers “sangrarem” no eixo Y (sem clipping) */
.table-wrapper{
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  border-radius:var(--r-lg);
}

/* Paginação (usa `.page` nos itens, sem conflitar com `.page-container`) */
.pagination{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.pagination-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.pagination-bar .pagination{ justify-content:flex-end; }
.pagination-size{
  display:flex;
  gap:8px;
  align-items:center;
  margin:0;
}
.pagination-size label{
  font-size:12px;
  color:var(--c-muted-text);
  font-weight:600;
}
.pagination-size select{
  width:auto;
  height:38px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(6,27,66,.12);
  background:var(--c-surface);
  color:var(--c-navy-dark);
  font-weight:600;
}
.pagination-size select:hover{ background:var(--c-surface-2); }
.pagination-size select:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px }
.pagination .page{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(6,27,66,.12);
  background:var(--c-surface);
  color:var(--c-navy-dark);
  font-weight:600;
  text-decoration:none;
}
.pagination .page:hover{ background:var(--c-surface-2); text-decoration:none }
.pagination .page.current{
  background:var(--c-surface-2);
  border-color:rgba(6,27,66,.16);
}
.pagination .page.muted{
  background:transparent;
  border-color:transparent;
  color:var(--c-muted-text);
  min-width:18px;
  padding:0 4px;
}

/* Status */
.status{ padding:6px 10px; border-radius:999px; font-weight:600; font-size:12px }
.status.ok{ background:var(--c-success-bg); color:var(--c-success) }
.status.late{ background:var(--c-warn-bg); color:var(--c-warn) }
.status.blocked{ background:#eef2f7; color:#334155 }

/* Boolean: ícone (Sim/Não) */
.bool-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(6,27,66,.10);
  background:var(--c-surface);
  vertical-align:middle;
}
.bool-icon .material-symbols-outlined{
  font-size:18px;
}
.bool-icon.yes{
  background:var(--c-success-bg);
  color:var(--c-success);
  border-color:rgba(22,121,75,.18);
}
.bool-icon.no{
  background:rgba(185,28,28,.06);
  color:#b91c1c;
  border-color:rgba(185,28,28,.18);
}

/* KPIs */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
@media (max-width:1200px){ .kpi-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:900px){ .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px){ .kpi-grid{ grid-template-columns:1fr } }
.kpi{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:16px;
  box-shadow:var(--shadow-sm);
}
.kpi .value{ font-size:28px; font-weight:560; color:var(--c-navy-dark) }
.kpi .label{ color:var(--c-muted-text); font-weight:500 }
.kpi .trend.up{ color:var(--c-accent) }
.kpi .trend.down{ color:var(--c-danger) }
.kpi.sm{ padding:12px }
.kpi.sm .value{ font-size:20px }