/* ===================================================================
   JOSSF — Design System (componentes reutilizáveis)
   Prefixo .ds-  -> não conflita com Bootstrap 3 / Kendo.
   Constrói sobre os tokens do jossf-theme.css (--jx-*).
   Tokens semânticos próprios adaptam a light/dark.
=================================================================== */
:root{
  /* espaçamento */
  --ds-gap:16px; --ds-gap-sm:10px; --ds-pad:16px 18px;
  --ds-radius:12px; --ds-radius-sm:8px; --ds-radius-pill:999px;
  /* semânticos (par fundo/texto) — LIGHT */
  --ds-success-bg:#eaf3de; --ds-success-fg:#27500a;
  --ds-info-bg:#e6f1fb;    --ds-info-fg:#0c447c;
  --ds-warn-bg:#faeeda;    --ds-warn-fg:#633806;
  --ds-danger-bg:#fceaea;  --ds-danger-fg:#791f1f;
  --ds-neutral-bg:#f1efe8; --ds-neutral-fg:#5f5e5a;
  --ds-foot-bg:#f7f7f3;
}
html[data-theme="dark"]{
  --ds-success-bg:rgba(60,110,18,.30); --ds-success-fg:#bfe08a;
  --ds-info-bg:rgba(24,95,165,.28);    --ds-info-fg:#9cc7ec;
  --ds-warn-bg:rgba(133,79,11,.30);    --ds-warn-fg:#f0c987;
  --ds-danger-bg:rgba(163,45,45,.30);  --ds-danger-fg:#f0a0a0;
  --ds-neutral-bg:rgba(255,255,255,.07); --ds-neutral-fg:#cdd5de;
  --ds-foot-bg:rgba(255,255,255,.03);
}

/* ---- Cabeçalho de página ---- */
.ds-pagehead{display:flex;align-items:center;gap:14px;margin:6px 0 18px;flex-wrap:wrap;}
.ds-pagehead .ds-ph-main{display:flex;align-items:center;gap:12px;min-width:0;}
.ds-pagehead .ds-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
.ds-title{margin:0;font-size:21px;font-weight:600;color:var(--jx-ink);letter-spacing:-.3px;line-height:1.15;}
.ds-sub{font-size:13px;color:var(--jx-muted);margin-top:1px;}

/* avatar de iniciais */
.ds-avatar{width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:15px;background:var(--ds-info-bg);color:var(--ds-info-fg);text-transform:uppercase;}

/* ---- Card ---- */
.ds-card{background:var(--jx-card);border:1px solid var(--jx-line);border-radius:var(--ds-radius);
  box-shadow:var(--jx-shadow);overflow:hidden;margin-bottom:16px;}
.ds-card--flush{padding:0;}
.ds-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:13px 18px;border-bottom:1px solid var(--jx-line);}
.ds-card-title{font-size:15px;font-weight:600;color:var(--jx-ink);margin:0;}
.ds-meta{font-size:12.5px;color:var(--jx-muted);}
.ds-meta b{color:var(--jx-ink);font-weight:600;}

/* seção interna do card */
.ds-sec{padding:var(--ds-pad);}
.ds-sec + .ds-sec{border-top:1px solid var(--jx-line);}
.ds-eyebrow{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--jx-muted-2);
  font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:6px;}

/* rodapé de ações do card */
.ds-footbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 18px;border-top:1px solid var(--jx-line);background:var(--ds-foot-bg);}
.ds-footbar .ds-foot-left{margin-right:auto;}

/* ---- Grid de formulário (12 colunas, responsivo) ---- */
.ds-formgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;}
.ds-field{grid-column:span 12;min-width:0;}
.ds-field > label{display:block;font-size:12px;font-weight:600;color:var(--jx-ink-2);margin-bottom:5px;}
.ds-field .form-control{width:100%;}
.ds-c1{grid-column:span 1;}  .ds-c2{grid-column:span 2;}  .ds-c3{grid-column:span 3;}
.ds-c4{grid-column:span 4;}  .ds-c5{grid-column:span 5;}  .ds-c6{grid-column:span 6;}
.ds-c7{grid-column:span 7;}  .ds-c8{grid-column:span 8;}  .ds-c9{grid-column:span 9;}
.ds-c10{grid-column:span 10;}.ds-c11{grid-column:span 11;}.ds-c12{grid-column:span 12;}
@media(max-width:760px){ .ds-field[class*="ds-c"]{grid-column:span 12;} }

/* ---- Botões ---- */
.ds-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:var(--ds-radius-sm);
  border:1px solid var(--jx-line);background:var(--jx-card);color:var(--jx-ink-2);font-size:13.5px;font-weight:600;
  cursor:pointer;text-decoration:none;transition:.13s;white-space:nowrap;}
.ds-btn:hover{background:var(--jx-brand-50);border-color:var(--jx-brand-100);color:var(--jx-brand-700);text-decoration:none;}
.ds-btn--primary{background:var(--jx-brand-600);border-color:var(--jx-brand-600);color:#fff;}
.ds-btn--primary:hover{background:var(--jx-brand-700);border-color:var(--jx-brand-700);color:#fff;}
.ds-btn--danger{color:var(--jx-danger);border-color:var(--jx-line);}
.ds-btn--danger:hover{background:var(--ds-danger-bg);color:var(--ds-danger-fg);border-color:var(--ds-danger-bg);}
.ds-btn--sm{height:30px;padding:0 11px;font-size:12.5px;}

/* ---- Badges ---- */
.ds-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;
  border-radius:var(--ds-radius-pill);background:var(--ds-neutral-bg);color:var(--ds-neutral-fg);white-space:nowrap;}
.ds-badge--success{background:var(--ds-success-bg);color:var(--ds-success-fg);}
.ds-badge--info{background:var(--ds-info-bg);color:var(--ds-info-fg);}
.ds-badge--warn{background:var(--ds-warn-bg);color:var(--ds-warn-fg);}
.ds-badge--danger{background:var(--ds-danger-bg);color:var(--ds-danger-fg);}

/* ---- Tabela limpa ---- */
.ds-table{width:100%;border-collapse:collapse;font-size:13px;}
.ds-table thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--jx-muted-2);font-weight:600;padding:9px 14px;border-bottom:1px solid var(--jx-line);}
.ds-table tbody td{padding:10px 14px;border-bottom:1px solid var(--jx-line);color:var(--jx-ink-2);vertical-align:middle;}
.ds-table tbody tr:last-child td{border-bottom:none;}
.ds-table tbody tr:hover td{background:var(--jx-brand-50);}
.ds-table .ds-num{text-align:right;white-space:nowrap;}

/* estado vazio */
.ds-empty{padding:22px 14px;text-align:center;color:var(--jx-muted);font-size:13px;}

/* ---- Abas (sobre o nav-tabs do Bootstrap 3) ---- */
.ds-tabs.nav-tabs{border-bottom:1px solid var(--jx-line);padding:0 8px;margin:0;}
.ds-tabs.nav-tabs > li{margin-bottom:-1px;}
.ds-tabs.nav-tabs > li > a{border:none;border-bottom:2px solid transparent;border-radius:0;margin:0;
  padding:12px 14px;font-size:13.5px;font-weight:500;color:var(--jx-muted);background:transparent;}
.ds-tabs.nav-tabs > li > a:hover,.ds-tabs.nav-tabs > li > a:focus{background:transparent;border-color:transparent;
  color:var(--jx-brand-700);}
.ds-tabs.nav-tabs > li.active > a,
.ds-tabs.nav-tabs > li.active > a:hover,
.ds-tabs.nav-tabs > li.active > a:focus{color:var(--jx-brand-700);background:transparent;
  border:none;border-bottom:2px solid var(--jx-brand-600);font-weight:600;}
.ds-tabs.nav-tabs > li > a > i{margin-right:6px;}
.ds-tabcontent{padding:16px 18px;}

/* status pill genérico (usa avatar de info por padrão) */
.ds-statuspill{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:4px 12px;border-radius:var(--ds-radius-pill);}