/* ============================================================
   AMAS Vizela — Portal unificado (Layout 2: App Style)
   Inclui retrocompatibilidade com classes do código antigo:
   .form-grid, .form-group, .search-bar, .alert-*, .badge-*,
   .dashboard-grid, .pagination, .table-wrap, .full, .btn-success
   ============================================================ */

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --teal:#0a7c6a; --teal-dark:#065548; --teal-light:#d4ede9; --teal-xlight:#f0faf8;
  --navy:#1a2f42;
  --amber:#b45309; --amber-light:#fef3c7;
  --red:#b91c1c; --red-light:#fee2e2;
  --blue:#1d4ed8; --blue-light:#dbeafe;
  --green:#166534; --green-light:#dcfce7;
  --text:#111827; --text-muted:#6b7280; --text-light:#9ca3af;
  --border:#e5e7eb; --border-med:#d1d5db;
  --surface:#f9fafb; --surface2:#f3f4f6;
  --gray-200:#e5e7eb; --gray-400:#9ca3af; --gray-600:#6b7280; --gray-800:#1f2937;
  --white:#fff;
  --radius:10px; --radius-lg:16px;
  --shadow:0 1px 3px rgba(0,0,0,.08);
  --shadow-lg:0 4px 20px rgba(0,0,0,.08);
}

html { font-size:16px; }
body {
  font-family:'Barlow', system-ui, sans-serif;
  background:var(--surface); color:var(--text);
  min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

a { color:var(--teal); }
a:hover { color:var(--teal-dark); }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  background:var(--navy); height:58px;
  display:flex; align-items:center;
  padding:0 1rem; gap:14px;
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 12px rgba(0,0,0,.22);
}
.topbar-brand {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; flex-shrink:0;
}
.topbar-logo {
  width:30px; height:30px; background:var(--teal);
  border-radius:7px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-family:'Barlow Condensed', sans-serif;
}
.topbar-name {
  font-family:'Barlow Condensed', sans-serif; font-size:1.15rem; font-weight:700;
  color:#fff; text-transform:uppercase; letter-spacing:.04em;
}
.topbar-name span { color:#5de8d4; }
.topbar-section {
  font-size:11px; color:rgba(255,255,255,.45);
  border-left:1px solid rgba(255,255,255,.15);
  padding-left:10px; margin-left:4px;
  letter-spacing:.08em; text-transform:uppercase;
}

/* Tabs (desktop) */
.tabs {
  display:flex; gap:2px; flex:1; align-items:center;
  overflow-x:auto; min-width:0;
}
.tabs::-webkit-scrollbar { display:none; }
.tab-link {
  display:flex; align-items:center; gap:7px;
  padding:8px 12px; border-radius:8px;
  font-size:13.5px; color:rgba(255,255,255,.65);
  text-decoration:none; transition:all .15s;
  white-space:nowrap; font-weight:500;
}
.tab-link:hover { background:rgba(255,255,255,.08); color:#fff; }
.tab-link.active { background:rgba(255,255,255,.14); color:#fff; font-weight:600; }
.tab-link .ico { font-size:15px; }

/* User chip + dropdown */
.user-chip {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  border-radius:24px; padding:4px 12px 4px 5px;
  font-size:13px; color:rgba(255,255,255,.9);
  cursor:pointer; user-select:none; flex-shrink:0;
}
.user-chip:hover { background:rgba(255,255,255,.14); }
.user-avatar {
  width:28px; height:28px; border-radius:50%;
  background:var(--teal); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:#fff;
}
.user-chip-name { max-width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-chip-arrow { font-size:10px; color:rgba(255,255,255,.55); }

.user-menu {
  position:absolute; top:64px; right:12px;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  min-width:240px; z-index:200; padding:8px; font-size:14px;
}
.user-menu[hidden] { display:none; }
.user-menu-head { padding:10px 12px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.user-menu-head strong { display:block; color:var(--navy); font-weight:600; }
.user-menu-head small { color:var(--text-muted); font-size:12px; text-transform:capitalize; }
.user-menu-section {
  font-size:10px; font-weight:700; color:var(--text-light);
  text-transform:uppercase; letter-spacing:.08em;
  padding:6px 12px 4px;
}
.user-menu-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:8px; color:var(--text);
  text-decoration:none; transition:background .1s;
}
.user-menu-item:hover { background:var(--surface); color:var(--text); }
.user-menu-item.active { background:var(--teal-xlight); color:var(--teal-dark); }
.user-menu-item .ico { font-size:16px; width:20px; text-align:center; }
.user-menu hr { border:0; border-top:1px solid var(--border); margin:6px 0; }

/* ============================================================
   MAIN
   ============================================================ */
main { flex:1; padding:1.5rem 1rem 2rem; }
.container { max-width:1200px; margin:0 auto; }

.page-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:1.5rem; flex-wrap:wrap; gap:12px;
}
.page-title {
  font-family:'Barlow Condensed', sans-serif;
  font-size:1.85rem; font-weight:700; color:var(--navy);
  text-transform:uppercase; letter-spacing:.02em; line-height:1;
}
.page-sub { font-size:14px; color:var(--text-muted); margin-top:4px; }
.page-actions { display:flex; gap:8px; flex-wrap:wrap; }

.page-body { /* container do $content */ }

/* ============================================================
   STATS
   ============================================================ */
.stats-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px; margin-bottom:1.5rem;
}
.stat-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.1rem;
  text-decoration:none; color:inherit;
  box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.stat-label {
  font-size:11px; color:var(--text-muted); margin-bottom:5px;
  text-transform:uppercase; letter-spacing:.05em; font-weight:600;
}
.stat-value {
  font-family:'Barlow Condensed', sans-serif;
  font-size:2rem; font-weight:700; color:var(--navy); line-height:1;
}
.stat-value.green { color:var(--teal); }
.stat-value.amber { color:var(--amber); }
.stat-value.red   { color:var(--red); }
.stat-sub { font-size:12px; color:var(--text-muted); margin-top:4px; }

/* ============================================================
   CARD
   ============================================================ */
.card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); margin-bottom:1.25rem;
  overflow:hidden; box-shadow:var(--shadow);
}
.card-header {
  padding:1rem 1.25rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap;
}
.card-title {
  font-family:'Barlow Condensed', sans-serif;
  font-size:1.05rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--navy);
  /* Quando .card-title está fora de .card-header (uso antigo), garante padding */
  padding:1rem 1.25rem 0.5rem;
}
.card-header .card-title { padding:0; }
.card-body { padding:1.25rem; }

.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:900px) { .dashboard-grid { grid-template-columns:1fr; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px; border-radius:10px;
  font-family:'Barlow', sans-serif; font-size:14px; font-weight:600;
  cursor:pointer; border:none; text-decoration:none;
  transition:all .15s; line-height:1; white-space:nowrap;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:var(--teal); color:#fff; box-shadow:0 1px 4px rgba(10,124,106,.3); }
.btn-primary:hover:not(:disabled) { background:var(--teal-dark); color:#fff; transform:translateY(-1px); }
.btn-outline { background:var(--white); color:var(--text); border:1px solid var(--border-med); }
.btn-outline:hover:not(:disabled) { background:var(--surface); color:var(--text); }
.btn-danger { background:var(--red); color:#fff; }
.btn-danger:hover:not(:disabled) { background:#991b1b; color:#fff; }
.btn-success { background:var(--teal); color:#fff; }
.btn-success:hover:not(:disabled) { background:var(--teal-dark); color:#fff; }
.btn-sm { padding:6px 12px; font-size:13px; border-radius:8px; }

/* ============================================================
   FORMS
   ============================================================ */
.form-grid {
  display:grid; gap:14px;
  grid-template-columns:repeat(2, 1fr);
}
.form-group { margin-bottom:0; }
.form-group.full { grid-column:1 / -1; }
.form-group label {
  display:block; font-size:12px; font-weight:600; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:10px 14px;
  border:1.5px solid var(--border-med); border-radius:10px;
  font-family:'Barlow', sans-serif; font-size:14px;
  color:var(--text); background:var(--white);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(10,124,106,.15);
}
.form-group textarea { resize:vertical; min-height:80px; }
.form-row { display:grid; gap:12px; }
.form-row-2 { grid-template-columns:1fr 1fr; }
.form-row-3 { grid-template-columns:1fr 1fr 1fr; }

.search-bar {
  display:flex; gap:8px; margin-bottom:1rem; flex-wrap:wrap; align-items:center;
}
.search-bar input { flex:1; min-width:160px; max-width:340px; padding:9px 14px;
  border:1.5px solid var(--border-med); border-radius:10px; font-family:inherit; font-size:14px; }
.search-bar select {
  padding:9px 14px; border:1.5px solid var(--border-med);
  border-radius:10px; font-family:inherit; font-size:14px; background:var(--white);
}
.search-bar input:focus, .search-bar select:focus {
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(10,124,106,.15);
}

.toolbar { display:flex; gap:8px; margin-bottom:1rem; flex-wrap:wrap; align-items:center; }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap, .tbl-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th {
  background:var(--surface); padding:10px 14px;
  font-size:11px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.07em;
  border-bottom:1px solid var(--border); text-align:left; white-space:nowrap;
}
tbody tr { border-bottom:1px solid var(--border); transition:background .1s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--surface); }
tbody td { padding:11px 14px; font-size:14px; color:var(--text); vertical-align:middle; }

.pagination { display:flex; gap:4px; margin-top:1rem; flex-wrap:wrap; }
.pagination a, .pagination span {
  padding:6px 12px; border-radius:8px; font-size:13px;
  border:1px solid var(--border); text-decoration:none; color:var(--teal);
}
.pagination .current { background:var(--teal); color:#fff; border-color:var(--teal); }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display:inline-flex; align-items:center;
  padding:3px 10px; border-radius:20px;
  font-size:12px; font-weight:600;
}
.badge-ativo,    .badge-pago,    .badge-green { background:var(--teal-light);  color:var(--teal-dark); }
.badge-suspenso, .badge-pendente, .badge-amber { background:var(--amber-light); color:var(--amber); }
.badge-cancelado, .badge-red                  { background:var(--red-light);   color:var(--red); }
.badge-blue                                    { background:var(--blue-light);  color:var(--blue); }
.badge-gray                                    { background:var(--surface2);    color:var(--text-muted); }
.badge-admin                                   { background:var(--red-light);   color:var(--red); }
.badge-tesoureiro                              { background:var(--amber-light); color:var(--amber); }
.badge-operador                                { background:var(--blue-light);  color:var(--blue); }
.badge-visualizador                            { background:var(--surface2);    color:var(--text-muted); }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  padding:11px 14px; border-radius:10px; margin-bottom:1rem;
  font-size:14px; border:1px solid transparent;
}
.alert-success { background:var(--teal-light);  color:var(--teal-dark); border-color:#a7dacd; border-left:3px solid var(--teal); }
.alert-danger  { background:var(--red-light);   color:var(--red);       border-color:#f5c6c6; border-left:3px solid var(--red); }
.alert-warning { background:var(--amber-light); color:var(--amber);     border-color:#f5d896; border-left:3px solid var(--amber); }
.alert-info    { background:var(--blue-light);  color:var(--blue);      border-color:#bcd0f5; border-left:3px solid var(--blue); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text-muted); font-size:14px; }
.empty-state .ico { font-size:40px; margin-bottom:.75rem; }

/* ============================================================
   BOTTOM NAVIGATION (mobile)
   ============================================================ */
.bottom-nav {
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:var(--white); border-top:1px solid var(--border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  z-index:90; justify-content:space-around;
  box-shadow:0 -4px 16px rgba(0,0,0,.06);
}
.bnav-item {
  flex:1; max-width:80px; display:flex; flex-direction:column;
  align-items:center; gap:3px; padding:6px 4px; border-radius:10px;
  color:var(--text-muted); text-decoration:none;
  font-size:10px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; transition:background .15s, color .15s;
  position:relative;
}
.bnav-item.active { color:var(--teal); }
.bnav-item.active::before {
  content:''; position:absolute; top:-6px; left:50%;
  transform:translateX(-50%); width:24px; height:3px;
  background:var(--teal); border-radius:0 0 3px 3px;
}
.bnav-item .ico { font-size:20px; }

/* ============================================================
   SUB-MENU MOBILE BUTTON
   ============================================================ */
.submenu-btn {
  display:none; background:var(--white); border:1px solid var(--border);
  border-radius:10px; padding:10px 14px; width:100%;
  font-family:'Barlow', sans-serif; font-size:14px; font-weight:600;
  color:var(--text); text-align:left; cursor:pointer;
  margin-bottom:1rem; align-items:center; gap:10px;
}
.submenu-btn::after { content:'▾'; margin-left:auto; color:var(--text-muted); }

/* ============================================================
   BOTTOM-SHEET
   ============================================================ */
.bottom-sheet {
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:var(--white); z-index:100;
  border-radius:16px 16px 0 0;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 32px rgba(0,0,0,.2);
  max-height:80vh; overflow-y:auto;
}
.bottom-sheet.open { display:block; animation:slideUp .2s; }
@keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
.bs-handle { width:40px; height:4px; background:var(--border-med); border-radius:2px; margin:0 auto 14px; }
.bs-title {
  font-family:'Barlow Condensed', sans-serif; font-size:1rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--navy); margin-bottom:10px; padding:0 4px;
}
.bs-link {
  display:flex; align-items:center; gap:12px;
  padding:12px 10px; border-radius:10px;
  text-decoration:none; color:var(--text); font-size:15px; font-weight:500;
}
.bs-link:hover { background:var(--surface); color:var(--text); }
.bs-link .ico { font-size:20px; width:28px; text-align:center; }
.bs-link.active { background:var(--teal-xlight); color:var(--teal-dark); }

.bs-scrim { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:99; }
.bs-scrim.show { display:block; }

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
.login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:1rem; background:linear-gradient(135deg, var(--navy) 0%, #0f1e2b 100%);
}
.login-card {
  background:var(--white); border-radius:var(--radius-lg);
  padding:2rem; width:100%; max-width:400px;
  box-shadow:0 10px 40px rgba(0,0,0,.2);
}
.login-card .form-group { margin-bottom:14px; }
.login-card label { display:block; font-size:12px; font-weight:600;
  color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.login-card input { width:100%; padding:10px 14px; border:1.5px solid var(--border-med);
  border-radius:10px; font-family:inherit; font-size:14px; outline:none; transition:border-color .15s; }
.login-card input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(10,124,106,.15); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px) {
  .tabs { display:none; }
  .topbar { justify-content:space-between; }
  .topbar-section { display:none; }
  .user-chip-name { display:none; }
  .user-chip-arrow { display:none; }
  .user-chip { padding:4px; background:transparent; border:none; }
  .user-avatar { width:32px; height:32px; }
  .bottom-nav { display:flex; }
  main { padding-bottom:80px; }
  .submenu-btn { display:flex; }
  .user-menu { right:8px; top:60px; }
  .form-grid { grid-template-columns:1fr; }
  .form-row-2, .form-row-3 { grid-template-columns:1fr; }
  .form-group input, .form-group select, .form-group textarea { font-size:16px; /* iOS evita zoom */ }
}

@media (max-width:480px) {
  main { padding:1rem .75rem 80px; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .stat-card { padding:.875rem; }
  .stat-value { font-size:1.5rem; }
  .page-title { font-size:1.5rem; }
  .card-body { padding:1rem; }
  .page-header { flex-direction:column; align-items:flex-start; }
  .page-actions { width:100%; }
  .page-actions .btn { flex:1; justify-content:center; }
  .btn { padding:11px 16px; }
  /* Tabela responsiva: scroll horizontal por padrão */
  table { min-width:480px; }
}

/* ============================================================
   HELPERS
   ============================================================ */
.hide-mobile { }
@media (max-width:768px) { .hide-mobile { display:none !important; } }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .topbar, .bottom-nav, .bottom-sheet, .bs-scrim,
  .submenu-btn, .page-actions, .user-menu { display:none !important; }
  main { padding:0; }
  body { background:#fff; }
  .card { box-shadow:none; border-color:#ccc; page-break-inside:avoid; }
}