/* =====================================================================
   APPW - Camada de compatibilidade sobre o template Gentelella v4.
   As views do admin foram escritas com utilitarios no estilo Bootstrap
   (mb-3, row/col-lg-8, form-select, form-check-input, badge...). Em vez
   de reescrever todas as views, esta folha reimplementa apenas os
   utilitarios usados, com as cores/tokens do Gentelella v4 (var(--primary)
   etc.), para nao termos de carregar o Bootstrap CSS todo.
   Carregar DEPOIS de assets/gentelella/assets/main-v4-*.css.
   ===================================================================== */

/* Paleta APPW (alinhada com o logotipo) — sobrepoe os tokens de cor do
   Gentelella v4 (que vem com teal/laranja/verde por omissao). Como o
   ficheiro-fonte do template (gentelella-master/) nao faz parte do
   deployment, as cores sao ajustadas aqui via custom properties em vez
   de recompilar o bundle. */
:root {
  --primary: #2D3286;
  --primary-lt: rgba(45,50,134,0.06);
  --primary-dk: #1B1F5C;
  --accent: #1CB6DC;
  --accent-lt: rgba(28,182,220,0.08);
  --accent-dk: #159BBD;
  --secondary: #1C91BD;
  --secondary-lt: rgba(28,145,189,0.08);
  --sidebar-bg: #1B1F5C;
  --sidebar-active: rgba(28,182,220,0.16);
}
[data-theme="dark"] {
  --primary-lt: rgba(45,50,134,0.16);
  --secondary-lt: rgba(28,145,189,0.18);
}

/* Grid simples (row + col-*) — CSS Grid de 12 colunas, evita os problemas
   de wrap por arredondamento que o flexbox percentual tem com 2-3 colunas.
   minmax(0, 1fr) em vez de 1fr: sem isto, uma coluna com conteudo largo
   (ex.: um input) "rebenta" a track e distorce a largura de todas as
   colunas da linha (grid blowout). */
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.row.g-2 { gap: 8px; }
.row.g-3 { gap: 12px; }
.row.g-4 { gap: 16px; }
/* Colunas sem prefixo: aplicam-se sempre (base, mobile-first). */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Abaixo de 576px, qualquer coluna ocupa sempre a linha toda. */
@media (max-width: 575px) {
  [class*="col-"] { grid-column: 1 / -1; }
}

/* Colunas com prefixo de breakpoint (sm/md/lg/xl): cada bloco de media query
   tem de vir por ordem crescente de largura — quando varias classes se
   aplicam ao mesmo elemento num ecra largo (ex.: "col-sm-6 col-xl-2"), a
   ultima regra cuja media query e verdadeira e que "ganha" no cascade, tal
   como no Bootstrap real. Sem isto (tudo numa unica regra sem @media), a
   classe declarada por ultimo no ficheiro ganhava sempre, independentemente
   da largura do ecra. */
@media (min-width: 576px) {
  .col-sm-1 { grid-column: span 1; }
  .col-sm-2 { grid-column: span 2; }
  .col-sm-3 { grid-column: span 3; }
  .col-sm-4 { grid-column: span 4; }
  .col-sm-5 { grid-column: span 5; }
  .col-sm-6 { grid-column: span 6; }
  .col-sm-7 { grid-column: span 7; }
  .col-sm-8 { grid-column: span 8; }
  .col-sm-9 { grid-column: span 9; }
  .col-sm-10 { grid-column: span 10; }
  .col-sm-11 { grid-column: span 11; }
  .col-sm-12 { grid-column: span 12; }
}
@media (min-width: 768px) {
  .col-md-1 { grid-column: span 1; }
  .col-md-2 { grid-column: span 2; }
  .col-md-3 { grid-column: span 3; }
  .col-md-4 { grid-column: span 4; }
  .col-md-5 { grid-column: span 5; }
  .col-md-6 { grid-column: span 6; }
  .col-md-7 { grid-column: span 7; }
  .col-md-8 { grid-column: span 8; }
  .col-md-9 { grid-column: span 9; }
  .col-md-10 { grid-column: span 10; }
  .col-md-11 { grid-column: span 11; }
  .col-md-12 { grid-column: span 12; }
}
@media (min-width: 992px) {
  .col-lg-1 { grid-column: span 1; }
  .col-lg-2 { grid-column: span 2; }
  .col-lg-3 { grid-column: span 3; }
  .col-lg-4 { grid-column: span 4; }
  .col-lg-5 { grid-column: span 5; }
  .col-lg-6 { grid-column: span 6; }
  .col-lg-7 { grid-column: span 7; }
  .col-lg-8 { grid-column: span 8; }
  .col-lg-9 { grid-column: span 9; }
  .col-lg-10 { grid-column: span 10; }
  .col-lg-11 { grid-column: span 11; }
  .col-lg-12 { grid-column: span 12; }
}
@media (min-width: 1200px) {
  .col-xl-1 { grid-column: span 1; }
  .col-xl-2 { grid-column: span 2; }
  .col-xl-3 { grid-column: span 3; }
  .col-xl-4 { grid-column: span 4; }
  .col-xl-5 { grid-column: span 5; }
  .col-xl-6 { grid-column: span 6; }
  .col-xl-7 { grid-column: span 7; }
  .col-xl-8 { grid-column: span 8; }
  .col-xl-9 { grid-column: span 9; }
  .col-xl-10 { grid-column: span 10; }
  .col-xl-11 { grid-column: span 11; }
  .col-xl-12 { grid-column: span 12; }
}

/* Espacamento / texto */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-3 { margin-bottom: 14px !important; }
.mb-4 { margin-bottom: 20px !important; }
.mt-3 { margin-top: 14px !important; }
.py-5 { padding-top: 48px !important; padding-bottom: 48px !important; }
.w-100 { width: 100% !important; }
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: end !important; }
.justify-content-between { justify-content: space-between !important; }
.flex-wrap { flex-wrap: wrap !important; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }
.align-middle { vertical-align: middle !important; }
.table-sm td, .table-sm th { padding: 6px 10px; }
.text-muted { color: var(--text-muted) !important; }
.small { font-size: 12.5px; }
.rounded { border-radius: var(--radius) !important; }
.img-fluid { max-width: 100%; height: auto; }
.h4 { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; }

/* Botoes — variantes usadas nas views que nao existem no gentelella v4 */
.btn-outline-primary { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary-lt); }
.btn-outline-danger { background: transparent; border: 1px solid var(--red); color: var(--red); }
.btn-outline-danger:hover { background: var(--red-lt); }
.btn-outline-secondary { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); }
.btn-outline-secondary:hover { background: var(--bg-surface-secondary); }

/* Selects — o gentelella v4 estiliza <select> via .form-control */
select.form-select { display: block; width: 100%; }
.form-select {
  display: block; width: 100%;
  height: 34px; padding: 0 10px;
  border: 1px solid var(--border-color); border-radius: var(--radius);
  background: var(--bg-surface); color: var(--text);
  font: inherit; font-size: 13.5px;
}
.form-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-lt); }

/* Input de ficheiro — o gentelella v4 nao estiliza <input type="file">
   nativo; forcamos altura automatica e damos ao botao nativo o aspeto
   da marca em vez do botao cinzento do browser. */
input[type="file"].form-control {
  height: auto;
  padding: 6px;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  font-size: 12.5px;
  cursor: pointer;
}
input[type="file"].form-control::file-selector-button {
  margin-right: 12px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms;
}
input[type="file"].form-control:hover::file-selector-button { background: var(--primary-dk); }
input[type="file"].form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-lt); }

/* Checkboxes — form-check-input/label no estilo Bootstrap, cores do gentelella */
.form-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: var(--text-secondary); }
.form-check-input {
  appearance: none; width: 17px; height: 17px; flex-shrink: 0;
  border: 1.5px solid var(--border-color); border-radius: 4px;
  background: var(--bg-surface); cursor: pointer; position: relative;
}
.form-check-input:checked { background: var(--primary); border-color: var(--primary); }
.form-check-input:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.form-check-label { cursor: pointer; }

/* Badges / status pills */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: #fff;
}
.text-bg-success { background: var(--green); }
.text-bg-secondary { background: var(--text-muted); }
.text-bg-danger { background: var(--red); }
.text-bg-light { background: var(--bg-surface-secondary); color: var(--text-secondary) !important; border: 1px solid var(--border-color); }
.badge.status-pending, .badge.status-awaiting_payment { background: var(--yellow); }
.badge.status-paid, .badge.status-processing { background: var(--primary); }
.badge.status-shipped { background: var(--purple); }
.badge.status-completed { background: var(--green); }
.badge.status-cancelled { background: var(--red); }

/* Suporte: estados dos pedidos e prioridades */
.badge.ticket-status-aberto { background: var(--primary); }
.badge.ticket-status-pendente_cliente { background: var(--yellow); }
.badge.ticket-status-pendente_fornecedor { background: var(--purple); }
.badge.ticket-status-encerrado { background: var(--green); }
.badge.ticket-priority-alta { background: var(--red); }
.badge.ticket-priority-media { background: var(--secondary); }
.badge.ticket-priority-baixa { background: #8892a0; }
.ticket-overdue { color: var(--red); font-weight: 600; }
.ticket-timeline { list-style: none; margin: 0; padding: 0; }
.ticket-timeline li { position: relative; padding: 0 0 20px 28px; border-left: 2px solid var(--border-color); }
.ticket-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.ticket-timeline li::before { content: ''; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-surface); }

/* Alertas de flash (sem Bootstrap JS — fecho simples via CSS/atributo) */
.alert {
  position: relative;
  padding: 12px 40px 12px 14px;
  border-radius: var(--radius);
  font-size: 13.5px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.alert-success { background: var(--green-lt); color: var(--green); border-color: rgba(47,179,68,0.25); }
.alert-danger { background: var(--red-lt); color: var(--red); border-color: rgba(214,57,57,0.25); }
.btn-close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border: none; background: transparent;
  cursor: pointer; opacity: 0.6; font-size: 0;
}
.btn-close::before, .btn-close::after {
  content: ''; position: absolute; left: 3px; top: 9px; width: 14px; height: 2px; background: currentColor;
}
.btn-close::before { transform: rotate(45deg); }
.btn-close::after { transform: rotate(-45deg); }
.btn-close:hover { opacity: 1; }

/* Componentes proprios (paineis, cartoes de estatistica) */
.admin-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
}
/* Só esticar para preencher a coluna quando e o unico painel dela — evita
   que dois paineis empilhados (ex.: formulario de Produto) fiquem cada um
   a 100% da coluna esticada pelo grid, duplicando a altura. */
.row > * > .admin-panel:only-child { height: 100%; }
.admin-panel-title {
  font-family: var(--font-heading);
  font-size: 15px; font-weight: 700; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border-color-light);
}
.admin-simple-list { list-style: none; padding: 0; margin: 0; }
.admin-simple-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--border-color-light);
  font-size: 13.5px;
}
.admin-simple-list li:last-child { border-bottom: none; }

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex; align-items: center; gap: 14px;
  height: 100%;
}
.stat-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; color: #fff; flex-shrink: 0;
}
.bg-primary-soft { background: var(--primary); }
.bg-secondary-soft { background: var(--secondary); }
.bg-accent-soft { background: var(--accent); }
.bg-warning-soft { background: var(--yellow); }
.stat-value { display: block; font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: 12.5px; color: var(--text-muted); }

/* Nome da marca na sidebar, em duas linhas: "APPW" + "Admin Portal" */
.sidebar-brand { height: auto; min-height: 56px; padding: 8px 16px; }
.brand-name { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.brand-name-line1 { font-size: 16px; font-weight: 800; }
.brand-name-line2 { font-size: 10.5px; font-weight: 500; color: var(--sidebar-text); text-transform: uppercase; letter-spacing: 0.05em; }