/* public/css/base.css — Camada custom sobre Bootstrap 5
   ---------------------------------------------------------------- */
/* Reserva sempre a goteira da scrollbar: evita o salto de layout (menu/topo)
   quando um modal do Bootstrap abre e remove a barra de scroll. */
html{ scrollbar-gutter: stable; }

:root{
  --sb-w:248px;
  --sb-w-collapsed:72px;

  --bs-primary:#125f96;
  --bs-primary-rgb:18,95,150;

  --blue-900:#0a3a5e; --blue-800:#0e4b7a; --blue-700:#125f96; --blue-600:#1976b6;
  --blue-500:#2691d1; --blue-400:#56b1e3; --blue-100:#e2f1fb; --blue-50:#f3f9fd;
  --cyan-500:#19c0d6; --cyan-400:#52d3e1;

  --gray-900:#0f172a; --gray-700:#334155; --gray-500:#64748b;
  --gray-300:#cbd5e1; --gray-200:#e2e8f0; --gray-100:#f1f5f9; --gray-50:#f8fafc;

  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 6px 16px rgba(15,23,42,.08);
  --shadow-lg:0 20px 40px -12px rgba(15,23,42,.18);

  --radius:.625rem;
  --transition:.25s cubic-bezier(.4,0,.2,1);
}

html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--gray-50);color:var(--gray-900);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* =====================================================
   SIDEBAR (expandida / recolhida)
   ===================================================== */
.sb{
  position:fixed;top:0;left:0;height:100vh;width:var(--sb-w);
  background:linear-gradient(180deg,var(--blue-900),var(--blue-800));
  color:#cfe4f3;padding:18px 12px;
  display:flex;flex-direction:column;
  transition:width var(--transition);
  z-index:1030;
  box-shadow:6px 0 24px -8px rgba(11,61,90,.25);
}
.sb-brand{
  display:flex;align-items:center;gap:12px;padding:4px 10px 18px;
  margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08);
  white-space:nowrap;overflow:hidden;
}
.sb-brand .mark{
  width:44px;height:44px;flex:0 0 44px;border-radius:12px;
  background:linear-gradient(135deg,var(--cyan-500),var(--blue-500));
  display:grid;place-items:center;color:#fff;font-size:20px;
  box-shadow:0 4px 12px rgba(25,192,214,.35);
}
.sb-brand .name{font-weight:800;color:#fff;font-size:17px;letter-spacing:.6px;line-height:1.1}
.sb-brand .small{font-size:10.5px;color:#9bc5e2;letter-spacing:1.5px;text-transform:uppercase}

.sb-nav{
  display:flex;flex-direction:column;gap:4px;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}
.sb-nav::-webkit-scrollbar{width:6px}
.sb-nav::-webkit-scrollbar-track{background:transparent}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.sb-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}
.sb-nav a{
  display:flex;align-items:center;gap:14px;
  padding:10px 12px;border-radius:8px;
  color:#cfe4f3;font-size:14.5px;font-weight:500;text-decoration:none;
  transition:background var(--transition),color var(--transition),padding var(--transition);
  white-space:nowrap;overflow:hidden;
}
.sb-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.sb-nav a.active{background:rgba(255,255,255,.14);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--cyan-400)}
.sb-nav a i{font-size:18px;width:22px;text-align:center;flex:0 0 22px}

/* Sub-itens do Balcão — accordion (itens directos do flex) */
.sb-nav a.sb-caixa{
  padding-left:32px;
  border-left:2px solid rgba(255,255,255,.12);
  margin-left:14px;
  border-radius:0 6px 6px 0;
  /* animação de colapso */
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .25s ease, padding .25s ease, opacity .2s ease;
  pointer-events:none;
}
.sb-nav a.sb-caixa.sub-open{
  max-height:60px;
  padding-top:10px;
  padding-bottom:10px;
  opacity:1;
  pointer-events:auto;
}
.sb-nav a.sb-caixa:hover{border-left-color:rgba(255,255,255,.35)}
.sb-nav a.sb-caixa.active{border-left-color:var(--cyan-400);box-shadow:none;background:rgba(255,255,255,.08)}
/* Separador: primeiro item após o último sb-caixa */
.sb-nav a.sb-caixa + a:not(.sb-caixa){border-top:1px solid rgba(255,255,255,.08);margin-top:4px;padding-top:14px}
/* Chevron */
.sb-has-sub{cursor:pointer}
.sb-has-sub .sb-chevron{margin-left:auto;font-size:11px;opacity:.65;transition:transform .25s ease;flex-shrink:0}
.sb-has-sub.open .sb-chevron{transform:rotate(180deg)}
/* Modo collapsed: esconder sub-itens */
body.sidebar-collapsed .sb-nav a.sb-caixa{max-height:0 !important;padding-top:0 !important;padding-bottom:0 !important;opacity:0 !important}
body.sidebar-collapsed .sb-nav a.sb-caixa + a:not(.sb-caixa){border-top:none;margin-top:0;padding-top:10px}

.sb-footer{
  margin-top:auto;padding:10px 12px;color:#8eb6d0;font-size:11.5px;
  white-space:nowrap;overflow:hidden;
}

.sb-toggle{
  position:absolute;top:18px;right:-14px;width:28px;height:28px;
  background:#fff;color:var(--blue-700);border:none;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;font-size:14px;
  box-shadow:var(--shadow-md);transition:transform var(--transition);
  z-index:1031;
}
.sb-toggle:hover{transform:scale(1.1)}

/* Estado RECOLHIDO */
body.sidebar-collapsed .sb{width:var(--sb-w-collapsed)}
body.sidebar-collapsed .sb-nav a{justify-content:center;padding:10px 0}
body.sidebar-collapsed .sb-text,
body.sidebar-collapsed .sb-brand .name,
body.sidebar-collapsed .sb-brand .small,
body.sidebar-collapsed .sb-footer{
  opacity:0;width:0;pointer-events:none;
}
body.sidebar-collapsed .sb-brand{justify-content:center;padding:4px 0 18px}
body.sidebar-collapsed .sb-toggle i{transform:rotate(180deg)}

/* Tooltip nos links quando recolhido */
body.sidebar-collapsed .sb-nav a{position:relative}
body.sidebar-collapsed .sb-nav a::after{
  content:attr(data-label);position:absolute;left:calc(100% + 12px);
  background:var(--blue-900);color:#fff;padding:6px 12px;border-radius:6px;
  font-size:13px;font-weight:500;opacity:0;pointer-events:none;
  white-space:nowrap;transition:opacity .15s ease,transform .15s ease;
  transform:translateX(-4px);box-shadow:var(--shadow-md);z-index:1040;
}
body.sidebar-collapsed .sb-nav a:hover::after{opacity:1;transform:translateX(0)}

/* =====================================================
   MAIN WRAPPER
   ===================================================== */
.main-wrap{
  margin-left:var(--sb-w);min-height:100vh;
  display:flex;flex-direction:column;
  transition:margin-left var(--transition);
}
body.sidebar-collapsed .main-wrap{margin-left:var(--sb-w-collapsed)}

.topbar{
  background:#fff;border-bottom:1px solid var(--gray-200);
  padding:14px 28px;display:flex;align-items:center;gap:18px;
  position:sticky;top:0;z-index:20;
}
.topbar .menu-btn{
  background:transparent;border:none;color:var(--gray-700);
  font-size:22px;cursor:pointer;padding:6px 10px;border-radius:6px;
  display:none;
}
.topbar .menu-btn:hover{background:var(--gray-100)}
.topbar .title{flex:1;min-width:0}
.topbar .title h1{font-size:20px;font-weight:800;color:var(--blue-900);margin:0;line-height:1.1}
.topbar .title .crumb{font-size:13px;color:var(--gray-700);margin-top:2px}

.page{padding:24px 28px;flex:1}

/* =====================================================
   CARDS, HEADERS
   ===================================================== */
.card{border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-header{
  background:#fff;border-bottom:1px solid var(--gray-100);
  padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.card-header h2,.card-header h3{font-size:15px;font-weight:700;color:var(--blue-900);margin:0}

/* =====================================================
   STATS (dashboard)
   ===================================================== */
.stat-card{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);
  padding:18px 20px;display:flex;align-items:center;gap:14px;
  transition:transform var(--transition),box-shadow var(--transition);
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-card .icon{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  color:#fff;font-size:20px;flex:0 0 48px;
  background:linear-gradient(135deg,var(--blue-500),var(--blue-700));
}
.stat-card .icon.cyan {background:linear-gradient(135deg,var(--cyan-500),var(--blue-500))}
.stat-card .icon.green{background:linear-gradient(135deg,#10b981,#059669)}
.stat-card .icon.amber{background:linear-gradient(135deg,#f59e0b,#d97706)}
.stat-card .icon.red  {background:linear-gradient(135deg,#ef4444,#dc2626)}
.stat-card .label{font-size:11.5px;color:var(--gray-700);text-transform:uppercase;letter-spacing:1px;font-weight:700}
.stat-card .value{font-size:22px;font-weight:800;color:var(--blue-900);line-height:1.1;margin-top:4px}

/* =====================================================
   TABLES (sobreposição ao Bootstrap)
   ===================================================== */
.table-wrap{overflow-x:auto;border-radius:0 0 var(--radius) var(--radius)}
.table.modern{margin:0}
/* Contraste WCAG AA: labels/textos secundarios sobem de --gray-500 (#64748b)
   para --gray-700 (#334155). Placeholders sobem de --gray-300 (quase invisivel)
   para --gray-500. Afecta TODAS as paginas que carregam base.css. */
.table.modern thead th{
  font-size:11.5px;font-weight:700;color:var(--gray-700);text-transform:uppercase;
  letter-spacing:.6px;background:var(--gray-50);border-top:none;border-bottom:1px solid var(--gray-200);
  padding:11px 14px;white-space:nowrap;
}
.table.modern tbody td{padding:12px 14px;border-bottom:1px solid var(--gray-100);font-size:14px;vertical-align:middle;color:var(--gray-900)}
.table.modern tbody tr:hover{background:var(--blue-50)}
.table.modern td.actions{white-space:nowrap;text-align:right}
.table.modern td.empty{padding:36px;text-align:center;color:var(--gray-700)}
.right{text-align:right}
.muted{color:var(--gray-700)}

/* =====================================================
   FORMS (sobreposição ao Bootstrap)
   ===================================================== */
.form-label{font-size:12.5px;font-weight:700;color:var(--gray-900);margin-bottom:5px;letter-spacing:.2px}
.form-control,.form-select{
  border:1.5px solid var(--gray-300);border-radius:8px;padding:.55rem .75rem;
  font-size:14px;color:var(--gray-900);transition:border-color var(--transition),box-shadow var(--transition);
}
.form-control:focus,.form-select:focus{
  border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(38,145,209,.18);
}
.form-control::placeholder{color:var(--gray-500)}
.form-text{font-size:12px;color:var(--gray-700)}
.input-group .input-group-text{background:var(--gray-50);border:1.5px solid var(--gray-300);color:var(--gray-700)}

/* =====================================================
   BADGES de estado
   ===================================================== */
.badge.b-soft{
  background:var(--blue-100);color:var(--blue-800);font-weight:700;
  padding:5px 10px;border-radius:999px;font-size:11px;letter-spacing:.4px;text-transform:uppercase;
}
.badge.b-soft.green{background:#dcfce7;color:#166534}
.badge.b-soft.amber{background:#fef3c7;color:#92400e}
.badge.b-soft.red  {background:#fee2e2;color:#b91c1c}
.badge.b-soft.gray {background:var(--gray-100);color:var(--gray-700)}
.badge.b-soft.pink {background:#fce7f3;color:#9d174d}

/* =====================================================
   BUTTONS (refinamentos)
   ===================================================== */
.btn{font-weight:600;letter-spacing:.15px;border-radius:8px;transition:all var(--transition)}
.btn-primary{background:var(--blue-700);border-color:var(--blue-700)}
.btn-primary:hover,.btn-primary:focus{background:var(--blue-800);border-color:var(--blue-800)}
.btn-outline-primary{color:var(--blue-700);border-color:var(--blue-700)}
.btn-outline-primary:hover{background:var(--blue-700);border-color:var(--blue-700)}
.btn-icon{padding:.4rem .55rem;line-height:1}
.btn .bi{vertical-align:-2px}

/* =====================================================
   MODAL (refinamentos)
   ===================================================== */
.modal-content{border:none;border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.modal-header{background:linear-gradient(180deg,#fff,var(--blue-50));border-bottom:1px solid var(--gray-100);padding:18px 22px}
.modal-title{font-weight:800;color:var(--blue-900);font-size:16px}
.modal-body{padding:22px}
.modal-footer{background:var(--gray-50);border-top:1px solid var(--gray-100);padding:14px 22px}

/* =====================================================
   TOASTS
   ===================================================== */
.toasts{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:10px;z-index:1080}
.toast-mini{
  background:#fff;border:1px solid var(--gray-200);border-left:4px solid var(--blue-500);
  padding:12px 16px;border-radius:8px;box-shadow:var(--shadow-md);font-size:13.5px;min-width:280px;
  display:flex;align-items:center;gap:10px;animation:slideIn .25s ease;
  color:#0f172a;
}
.toast-mini.success{border-left-color:#10b981}
.toast-mini.success .bi{color:#10b981}
.toast-mini.error{border-left-color:#ef4444}
.toast-mini.error .bi{color:#ef4444}
.toast-mini.warn{border-left-color:#f59e0b}
.toast-mini.warn .bi{color:#f59e0b}
.toast-mini .bi{font-size:18px;color:var(--blue-500)}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* =====================================================
   MOBILE
   ===================================================== */
@media (max-width: 991.98px){
  .sb{transform:translateX(-100%);width:var(--sb-w)}
  body.sidebar-open .sb{transform:translateX(0)}
  body.sidebar-collapsed .sb{transform:translateX(-100%)}
  .main-wrap{margin-left:0!important}
  .topbar .menu-btn{display:inline-flex}
  .sb-toggle{display:none}
  body.sidebar-open::after{
    content:"";position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:1029;
  }
}
{transform:translateX(0)}




/* ============================================================================
   Cartões financeiros do Dashboard (valor grande + ícone na legenda)
   Cores via classes em vez de inline style — assim o dark mode pode
   override em theme-dark.css.
   ============================================================================ */

/* Valor grande comum a todos os cartões financeiros. */
.valor-financeiro {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Variante "positivo" — verde para receitas / facturação. */
.valor-financeiro.valor-positivo { color: #16a34a; }

/* Variante "pendente" — âmbar para cobrança em aberto. */
.valor-financeiro.valor-pendente { color: #f59e0b; }

/* Variante "vencido" — vermelho para dívida em atraso. */
.valor-financeiro.valor-vencido  { color: #dc2626; }

/* Variante "neutra" — azul para totais informativos. */
.valor-financeiro.valor-neutro   { color: #2691d1; }

/* ============================================================================
   PADRÃO ÚNICO — modais + formulários (promovido do Balcão)
   Aditivo: refina o visual de TODOS os modais/forms sem alterar a estrutura.
   ============================================================================ */
.modal-content{
  border:none;border-radius:14px;
  box-shadow:0 30px 70px -20px rgba(15,23,42,.45);
}
.modal-header{
  align-items:center;gap:.5rem;padding:1rem 1.25rem;
  border-bottom:1px solid var(--gray-200);
}
.modal-header .modal-title{
  font-weight:800;font-size:1.05rem;color:var(--blue-900);
  display:flex;align-items:center;gap:.5rem;
}
.modal-header .modal-title .bi{color:var(--blue-500)}
.modal-body{padding:1.25rem}
.modal-footer{padding:.85rem 1.25rem;border-top:1px solid var(--gray-100);gap:.5rem}

/* Grelha de formulário responsiva (2+ colunas, como o "Novo cliente" do Balcão).
   Uso opcional: <div class="form-grid"> … <div class="col-span-2"> … */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.form-grid .col-span-2{grid-column:1 / -1}

/* Cartões com leve elevação no hover (consistente com os stat-cards). */
.card{transition:box-shadow var(--transition),transform var(--transition)}

/* Defesa extra: com scrollbar-gutter estavel, nao deixar o Bootstrap empurrar o body. */
body.modal-open{ padding-right:0 !important; }

/* ===== Rodapé do utilizador na sidebar: botão com setinha + menu (Sair/Alterar senha) ===== */
.sb-footer{ position:relative; overflow:visible !important; }
.sb-user{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:transparent; border:0; color:#e8f4f8; padding:8px 10px; border-radius:8px;
  cursor:pointer; text-align:left; font:inherit;
}
.sb-user:hover{ background:rgba(255,255,255,.10); }
.sb-user #userBox{ flex:1; min-width:0; }
.sb-user-caret{ transition:transform .2s ease; font-size:.8rem; opacity:.85; }
.sb-user[aria-expanded="true"] .sb-user-caret{ transform:rotate(180deg); }
.sb-user-menu{
  position:absolute; left:8px; right:8px; bottom:calc(100% + 6px);
  background:#0f2236; border:1px solid rgba(255,255,255,.12); border-radius:10px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.6); padding:6px; z-index:1050;
  display:flex; flex-direction:column; gap:2px;
}
.sb-user-menu[hidden]{ display:none; }
.sb-user-menu a{
  display:flex; align-items:center; gap:6px; padding:9px 10px; border-radius:7px;
  color:#e8f4f8; text-decoration:none; font-size:.9rem;
}
.sb-user-menu a:hover{ background:rgba(255,255,255,.12); }