/* Cubo Health — estilos da aplicação (usam as variáveis de ds-tokens.css) */

/* ---------- utilitários ---------- */
.container{max-width:var(--max-content);margin:0 auto;padding:0 var(--gutter-page)}
.stack>*+*{margin-top:var(--space-5)}
.muted{color:var(--text-muted)}
.text-center{text-align:center}
.mono-eyebrow{font-family:var(--font-mono);font-size:var(--text-13);font-weight:500;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--teal-300)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  font-family:var(--font-sans);font-size:var(--text-14);font-weight:600;line-height:1;
  padding:12px 18px;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;
  transition:var(--transition-control);text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.btn-primary:hover{background:var(--action-primary-bg-hover);color:#fff}
.btn-accent{background:var(--action-accent-bg);color:var(--action-accent-fg)}
.btn-accent:hover{background:var(--action-accent-bg-hover);color:#fff}
.btn-ghost{background:transparent;color:var(--text-body);border-color:var(--border-default)}
.btn-ghost:hover{background:var(--surface-sunken);color:var(--text-heading)}
.btn-danger{background:var(--feedback-danger-fg);color:#fff}
.btn-sm{padding:8px 12px;font-size:var(--text-13)}

/* ---------- formulários ---------- */
.field{display:block;margin-bottom:var(--space-5)}
.field label{display:block;font-size:var(--text-14);font-weight:600;color:var(--text-heading);margin-bottom:var(--space-3)}
.input,.select,.textarea{width:100%;font-family:var(--font-sans);font-size:var(--text-16);color:var(--text-body);
  background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);
  padding:11px 13px;transition:var(--transition-control)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--teal-400);box-shadow:var(--ring-focus)}
.field-error{color:var(--feedback-danger-fg);font-size:var(--text-13);margin-top:var(--space-2)}

/* ---------- alertas ---------- */
.alert{border-radius:var(--radius-md);padding:12px 16px;font-size:var(--text-14);margin-bottom:var(--space-5)}
.alert-success{background:var(--feedback-success-bg);color:var(--feedback-success-fg)}
.alert-danger{background:var(--feedback-danger-bg);color:var(--feedback-danger-fg)}
.alert-info{background:var(--feedback-info-bg);color:var(--feedback-info-fg)}

/* ---------- cartões ---------- */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:var(--space-7)}
.card-title{font-size:var(--text-18);font-weight:600;color:var(--text-heading);margin-bottom:var(--space-5)}

/* ---------- tabelas ---------- */
.table{width:100%;border-collapse:collapse;font-size:var(--text-14)}
.table th{text-align:left;color:var(--text-muted);font-weight:600;font-size:var(--text-13);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);padding:10px 12px;border-bottom:1px solid var(--border-default)}
.table td{padding:12px;border-bottom:1px solid var(--border-subtle);color:var(--text-body)}
.table tr:hover td{background:var(--surface-sunken)}
.badge{display:inline-block;font-size:var(--text-12);font-weight:600;padding:3px 9px;border-radius:var(--radius-pill)}
.badge-on{background:var(--feedback-success-bg);color:var(--feedback-success-fg)}
.badge-off{background:var(--surface-muted);color:var(--text-muted)}
.badge-tipo{background:var(--surface-teal-soft);color:var(--teal-700)}

/* ---------- layout logado (shell) ---------- */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:var(--surface-inverse-deep);color:var(--text-on-inverse);padding:var(--space-7) var(--space-5);display:flex;flex-direction:column;gap:var(--space-8)}
.sidebar .brand-row{display:flex;align-items:center;gap:var(--space-4)}
.sidebar .brand-badge{width:40px;height:40px;background:#fff;border-radius:var(--radius-md);padding:6px;flex:0 0 auto}
.sidebar .brand-badge svg{width:100%;height:100%;display:block}
.sidebar .brand-name{font-family:var(--font-mono);font-size:var(--text-13);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--teal-300)}
.nav{display:flex;flex-direction:column;gap:var(--space-2)}
.nav a{display:flex;align-items:center;gap:var(--space-3);color:var(--navy-100);font-size:var(--text-14);font-weight:500;
  padding:10px 12px;border-radius:var(--radius-md);transition:var(--transition-control)}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav a.active{background:var(--teal-400);color:#fff}
.nav .nav-group{font-size:var(--text-12);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--navy-300);margin:var(--space-5) 0 var(--space-2) 12px}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;background:var(--surface-card);
  border-bottom:1px solid var(--border-default);padding:0 var(--space-8);height:64px}
.topbar .who{font-size:var(--text-14);color:var(--text-body)}
.topbar .who strong{color:var(--text-heading)}
.content{padding:var(--space-8);flex:1}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-7)}
.page-head h1{font-size:var(--text-30)}

/* recursos (área logada) */
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-5)}
.res-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:var(--space-6);transition:var(--transition-control);display:block}
.res-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);text-decoration:none}
.res-card .res-tipo{font-size:var(--text-12);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.res-card .res-titulo{font-family:var(--font-display);font-size:var(--text-18);color:var(--text-heading);margin:var(--space-2) 0}

@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .sidebar{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
  .sidebar .nav{flex-direction:row;flex-wrap:wrap;margin-left:auto;gap:var(--space-4)}
  .sidebar-toggle{display:none}
  .topbar{gap:10px}
  .topbar .tb-left{flex:1;min-width:0}
  .topbar .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-13)}
  .topbar a{white-space:nowrap}
  .topbar .btn{white-space:nowrap}
}

/* Barra lateral recolhível — modo trilho de ícones */
.nav-ico{width:20px;height:20px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
.nav-ico svg{width:20px;height:20px;display:block}
.sidebar-toggle{background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-md);
  width:38px;height:38px;font-size:18px;line-height:1;cursor:pointer;color:var(--text-body);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.sidebar-toggle:hover{background:var(--surface-sunken)}
@media (min-width:821px){
  html.sb-collapsed .shell{grid-template-columns:66px 1fr}
  html.sb-collapsed .sidebar{padding-left:0;padding-right:0;align-items:center}
  html.sb-collapsed .brand-name,
  html.sb-collapsed .nav-label,
  html.sb-collapsed .nav .nav-group{display:none}
  html.sb-collapsed .brand-row{justify-content:center;gap:0}
  html.sb-collapsed .nav a{justify-content:center;padding-left:0;padding-right:0}
}

/* Tabela do repositório — melhor aproveitamento da largura */
.repo-table{width:100%}
.repo-table th.col-size, .repo-table td.col-size{width:110px}
.repo-table th.col-acao, .repo-table td.col-acao{width:104px;text-align:right;white-space:nowrap}
.repo-table td{vertical-align:top}
.repo-table .size-inline{display:none}
@media (max-width:640px){
  .repo-table th.col-size, .repo-table td.col-size{display:none}
  .repo-table th.col-acao, .repo-table td.col-acao{width:86px}
  .repo-table .size-inline{display:block;color:var(--text-muted);font-size:var(--text-12);font-weight:400;margin-top:3px}
  .repo-table td, .repo-table th{padding-left:10px;padding-right:10px}
}