/* ============================================================
   RGB Ads — Material Design 3 com a marca RGB
   Implementação leve: tokens CSS (custom properties) + componentes próprios.
   Fonte: Montserrat. Primary: laranja #FF6633. Error: vermelho #CC3333.
   Prioridades de alerta mapeadas a papéis semânticos do MD3:
     urgente  -> error      (vermelho)
     importante -> warning  (âmbar / tertiary)
     aviso    -> info       (azul informativo / neutro)
   ============================================================ */

:root {
  /* ---- Paleta da marca (seeds) ---- */
  --rgb-orange: #FF6633;
  --rgb-red:    #CC3333;

  /* ---- Tokens de cor MD3 (claro) ---- */
  --md-primary:            #E2511A;   /* laranja RGB com contraste AA sobre branco */
  --md-on-primary:         #FFFFFF;
  --md-primary-container:  #FFDBCE;
  --md-on-primary-container:#3A0B00;

  --md-secondary:          #77574C;
  --md-on-secondary:       #FFFFFF;
  --md-secondary-container:#FFDBCE;
  --md-on-secondary-container:#2C160F;

  --md-tertiary:           #8A6D00;   /* âmbar -> "importante" */
  --md-on-tertiary:        #FFFFFF;
  --md-tertiary-container: #FFE08B;
  --md-on-tertiary-container:#2B2000;

  --md-error:              #CC3333;   /* vermelho RGB -> "urgente" */
  --md-on-error:           #FFFFFF;
  --md-error-container:    #FFDAD6;
  --md-on-error-container: #410002;

  --md-info:               #2D6CDF;   /* azul informativo -> "aviso" */
  --md-info-container:     #DCE6FF;
  --md-on-info-container:  #001A41;

  --md-surface:            #FFFBFF;
  --md-on-surface:         #201A18;
  --md-surface-variant:    #F5DED6;
  --md-on-surface-variant: #53433E;
  --md-surface-container:  #FBEEEA;
  --md-surface-container-high:#F4E8E3;
  --md-outline:            #85736C;
  --md-outline-variant:    #D8C2BA;
  --md-background:         #FFFBFF;

  /* ---- Forma / elevação / espaçamento (grade 4dp) ---- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 28px; --r-full: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --elev-1: 0 1px 2px rgba(0,0,0,.10), 0 1px 3px 1px rgba(0,0,0,.06);
  --elev-2: 0 1px 2px rgba(0,0,0,.12), 0 2px 6px 2px rgba(0,0,0,.08);

  --font: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font);
  background: var(--md-background);
  color: var(--md-on-surface);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; line-height: 1;
  vertical-align: middle; user-select: none;
}

/* ---- Escala tipográfica MD3 (Montserrat) ---- */
.page-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -.2px; margin: 0 0 var(--sp-1); }
h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 var(--sp-3); }
.sub { color: var(--md-on-surface-variant); margin: 0 0 var(--sp-5); }
small { font-size: .8rem; }

/* ============================================================
   Top app bar
   ============================================================ */
.topbar {
  display: flex; align-items: center; gap: var(--sp-4);
  height: 64px; padding: 0 var(--sp-5);
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-variant);
  position: sticky; top: 0; z-index: 10;
}
.brand-link { display: inline-flex; align-items: center; gap: var(--sp-2); color: inherit; }
.brand-link:hover { text-decoration: none; }
.brand-logo { height: 26px; width: auto; }
.brand-fallback { font-weight: 800; color: var(--md-primary); }
.brand-sep { color: var(--md-outline); }
.brand-name { font-weight: 700; }

.mainnav { display: flex; gap: var(--sp-1); margin-left: var(--sp-4); flex: 1; }
.mainnav a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full);
  color: var(--md-on-surface-variant); font-weight: 600; font-size: .9rem;
}
.mainnav a:hover { background: var(--md-surface-container-high); text-decoration: none; }
.mainnav a.on { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.mainnav .material-symbols-rounded { font-size: 20px; }

.user { display: flex; align-items: center; gap: var(--sp-3); }
.uname { font-weight: 600; font-size: .9rem; }
.logout { color: var(--md-on-surface-variant); display: inline-flex; }

/* ---- Banner de impersonação ---- */
.imp-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--md-tertiary-container); color: var(--md-on-tertiary-container);
  padding: var(--sp-2) var(--sp-5); font-size: .9rem; font-weight: 500;
}
.imp-banner .inline { margin-left: auto; }

/* ============================================================
   Layout
   ============================================================ */
.wrap { max-width: 1100px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--r-full);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  background: var(--md-surface-variant); color: var(--md-on-surface-variant);
}
.badge.papel-super_admin   { background: var(--md-primary-container);  color: var(--md-on-primary-container); }
.badge.papel-agencia_admin { background: var(--md-secondary-container);color: var(--md-on-secondary-container); }
.badge.papel-gestor        { background: var(--md-info-container);     color: var(--md-on-info-container); }

/* ---- Prioridades de alerta (cor + ícone + rótulo) ---- */
.prio { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-full); font-weight: 700; font-size: .78rem; }
.prio-urgente    { background: var(--md-error-container);    color: var(--md-on-error-container); }
.prio-importante { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.prio-aviso      { background: var(--md-info-container);     color: var(--md-on-info-container); }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--md-surface); border: 1px solid var(--md-outline-variant);
  border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--elev-1);
}
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.card.stat { display: flex; align-items: center; gap: var(--sp-4); }
.card.stat .material-symbols-rounded { font-size: 32px; color: var(--md-primary); }
.card.stat b { font-size: 1.8rem; font-weight: 700; display: block; line-height: 1; }
.card.stat small { color: var(--md-on-surface-variant); }
.card.empty { display: flex; align-items: center; gap: var(--sp-4); color: var(--md-on-surface-variant); background: var(--md-surface-container); }
.card.empty .material-symbols-rounded { font-size: 28px; color: var(--md-outline); }

/* ============================================================
   Botões MD3 (filled / tonal / outlined / text)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 40px; padding: 0 var(--sp-6); border-radius: var(--r-full);
  font-family: var(--font); font-weight: 600; font-size: .9rem;
  border: none; cursor: pointer; transition: filter .12s, background .12s, box-shadow .12s;
}
.btn.sm { height: 32px; padding: 0 var(--sp-4); font-size: .82rem; }
.btn.filled   { background: var(--md-primary); color: var(--md-on-primary); }
.btn.filled:hover { filter: brightness(1.05); box-shadow: var(--elev-1); text-decoration: none; }
.btn.tonal    { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.btn.outlined { background: transparent; color: var(--md-primary); border: 1px solid var(--md-outline); }
.btn.text     { background: transparent; color: var(--md-primary); padding: 0 var(--sp-3); }
.btn.text:hover, .btn.tonal:hover, .btn.outlined:hover { background: var(--md-surface-container-high); text-decoration: none; }
.btn:disabled, .btn.loading { opacity: .6; cursor: default; }

/* ============================================================
   Formulários
   ============================================================ */
form label { display: block; font-size: .82rem; font-weight: 600; color: var(--md-on-surface-variant); margin: var(--sp-3) 0 4px; }
form input, form select, form textarea {
  width: 100%; padding: 10px var(--sp-4); font-family: var(--font); font-size: .95rem;
  border: 1px solid var(--md-outline); border-radius: var(--r-xs);
  background: var(--md-surface); color: var(--md-on-surface);
}
form input:focus, form select:focus, form textarea:focus {
  outline: none; border-color: var(--md-primary); box-shadow: 0 0 0 2px var(--md-primary-container);
}
.inline { display: inline; }

/* ---- Caixa de login/setup ---- */
.login-box { max-width: 380px; margin: 8vh auto 0; }
.brand-login { font-size: 1.2rem; margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); }
.brand-login .brand-logo { height: 30px; }

/* ============================================================
   Flash messages / snackbars
   ============================================================ */
.flash { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); margin-bottom: var(--sp-4); font-weight: 500; font-size: .9rem; transition: opacity .4s; }
.flash.fade { opacity: 0; }
.flash-ok   { background: #E6F4EA; color: #1B5E20; }
.flash-erro { background: var(--md-error-container); color: var(--md-on-error-container); }
.flash-aviso{ background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }

/* ============================================================
   Data tables
   ============================================================ */
table.data { width: 100%; border-collapse: collapse; background: var(--md-surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--elev-1); }
table.data th, table.data td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--md-outline-variant); }
table.data th { background: var(--md-surface-container); font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; color: var(--md-on-surface-variant); }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--md-surface-container); }

/* ============================================================
   Responsivo (mobile-first friendly)
   ============================================================ */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; height: auto; padding: var(--sp-3) var(--sp-4); }
  .mainnav { order: 3; width: 100%; margin: var(--sp-2) 0 0; overflow-x: auto; }
  .mainnav a span:not(.material-symbols-rounded) { display: none; } /* só ícones no mobile */
  .wrap { padding: var(--sp-4); }
}