/* dashboard-public-liquid-glass.css
   Objetivos:
   - NÃO estilizar toda .navbar globalmente
   - manter inputs/selects/textarea sólidos e brancos
   - aplicar glass apenas por classe explícita
   - fornecer base estável para a topbar pública (.app-topbar / .abpg-topbar)
*/

/* =========================
   0) TOKENS
========================= */
:root{
  --lg-primary:   #007AFF;
  --lg-success:   #34C759;
  --lg-danger:    #FF3B30;
  --lg-warning:   #FF9500;
  --lg-info:      #5AC8FA;
  --lg-secondary: #8E8E93;

  --lg-gray-0: #FFFFFF;
  --lg-gray-1: #F2F2F7;
  --lg-gray-2: #E5E5EA;
  --lg-gray-3: #D1D1D6;
  --lg-gray-4: #C7C7CC;
  --lg-text:   #1C1C1E;
  --lg-muted:  #6C6C70;

  --lg-glass-bg: rgba(255,255,255,.62);
  --lg-glass-bg-strong: rgba(255,255,255,.78);
  --lg-glass-border: rgba(255,255,255,.55);
  --lg-glass-shadow: 0 10px 30px rgba(0,0,0,.10);
  --lg-glass-shadow-sm: 0 6px 18px rgba(0,0,0,.10);
  --lg-blur: 18px;
  --lg-sat: 150%;

  --lg-radius-xl: 20px;
  --lg-radius-lg: 16px;
  --lg-radius-md: 12px;
  --lg-radius-sm: 10px;

  --lg-focus: rgba(0,122,255,.28);

  --lg-input-bg: #fff;
  --lg-input-border: rgba(60,60,67,.22);
  --lg-input-border-hover: rgba(60,60,67,.30);
  --lg-input-border-focus: rgba(0,122,255,.55);
  --lg-input-shadow-focus: 0 0 0 .25rem var(--lg-focus);

  --app-topbar-bg: rgba(10, 15, 24, 0.94);
  --app-topbar-bg-strong: rgba(5, 7, 13, 0.96);
  --app-topbar-border: rgba(255,255,255,.08);
  --app-topbar-text: rgba(255,255,255,.92);
  --app-topbar-text-muted: rgba(255,255,255,.72);
  --app-topbar-pill: rgba(255,255,255,.12);
  --app-topbar-pill-border: rgba(255,255,255,.10);
}

/* =========================
   1) BOOTSTRAP TOKENS
========================= */
:root{
  --bs-primary:   var(--lg-primary);
  --bs-success:   var(--lg-success);
  --bs-danger:    var(--lg-danger);
  --bs-warning:   var(--lg-warning);
  --bs-info:      var(--lg-info);
  --bs-secondary: var(--lg-secondary);

  --bs-primary-rgb:   0,122,255;
  --bs-success-rgb:   52,199,89;
  --bs-danger-rgb:    255,59,48;
  --bs-warning-rgb:   255,149,0;
  --bs-info-rgb:      90,200,250;
  --bs-secondary-rgb: 142,142,147;

  --bs-body-bg:       var(--lg-gray-1);
  --bs-body-color:    var(--lg-text);

  --bs-border-color:  rgba(60,60,67,.18);
  --bs-border-color-translucent: rgba(60,60,67,.12);

  --bs-link-color:       var(--lg-primary);
  --bs-link-hover-color: #0066D6;

  --bs-focus-ring-color: var(--lg-focus);

  --bs-card-bg: #fff;
  --bs-dropdown-bg: #fff;
  --bs-modal-content-bg: #fff;
}

/* =========================
   2) BASE
========================= */
html,
body{
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
  scroll-padding-top: 76px;
}

/* =========================
   3) BREADCRUMB (estilo iv-*)
   Barra de navegação superior, leve e profissional.
   Aplica-se a todas as telas do dashboard público que usem
   nav[aria-label="breadcrumb"] ou class="iv-breadcrumb".
========================= */
.iv-breadcrumb,
nav[aria-label="breadcrumb"]{
  --bc-blue:    #0369a1;
  --bc-violet:  #7c3aed;
  --bc-muted:   #64748b;
  --bc-text:    #0f172a;
  --bc-border:  #e2e8f0;
  --bc-soft:    #f8fafc;

  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;

  background:
    radial-gradient(800px 220px at -10% -60%, rgba(124,58,237,.07), transparent 55%),
    radial-gradient(700px 220px at 110% 160%, rgba(3,105,161,.05), transparent 55%),
    linear-gradient(180deg, #ffffff, #fafbff);
  border: 1px solid var(--bc-border);
  border-radius: 14px;
  padding: .55rem .85rem .55rem .9rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
  overflow: hidden;
}
.iv-breadcrumb::before,
nav[aria-label="breadcrumb"]::before{
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--bc-violet, #7c3aed), var(--bc-blue, #0369a1));
}

.iv-breadcrumb .breadcrumb,
nav[aria-label="breadcrumb"] .breadcrumb{
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: .85rem !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  line-height: 1.1;
}

.iv-breadcrumb .breadcrumb-item,
nav[aria-label="breadcrumb"] .breadcrumb-item{
  display: inline-flex;
  align-items: center;
}

/* Separador chevron entre itens */
.iv-breadcrumb .breadcrumb-item + .breadcrumb-item::before,
nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item::before{
  content: "\F285"; /* bi-chevron-right */
  font-family: "bootstrap-icons" !important;
  color: #cbd5e1 !important;
  font-size: .75rem;
  padding: 0 .55rem !important;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Links de navegação */
.iv-breadcrumb .breadcrumb-item a,
nav[aria-label="breadcrumb"] .breadcrumb-item a{
  color: var(--bc-blue, #0369a1) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .55rem;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.iv-breadcrumb .breadcrumb-item a:hover,
nav[aria-label="breadcrumb"] .breadcrumb-item a:hover{
  background: rgba(3, 105, 161, .08);
  color: #075985 !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}
.iv-breadcrumb .breadcrumb-item a:focus-visible,
nav[aria-label="breadcrumb"] .breadcrumb-item a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(3, 105, 161, .22);
}

/* Primeiro item: ícone home com fundo violeta (origem) */
.iv-breadcrumb .breadcrumb-item:first-child a .bi-house-door-fill,
nav[aria-label="breadcrumb"] .breadcrumb-item:first-child a .bi-house-door-fill{
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--bc-violet, #7c3aed), #6d28d9);
  color: #fff !important;
  margin-right: 0 !important;
  font-size: .8rem;
  box-shadow: 0 3px 8px rgba(124,58,237,.25);
}

/* Item ativo (página atual) */
.iv-breadcrumb .breadcrumb-item.active,
nav[aria-label="breadcrumb"] .breadcrumb-item.active{
  color: var(--bc-text, #0f172a) !important;
  font-weight: 700 !important;
  background: var(--bc-soft, #f8fafc);
  border: 1px solid var(--bc-border, #e2e8f0);
  border-radius: 8px;
  padding: .3rem .65rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.iv-breadcrumb .breadcrumb-item.active::after,
nav[aria-label="breadcrumb"] .breadcrumb-item.active::after{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bc-violet, #7c3aed);
  margin-left: .15rem;
  box-shadow: 0 0 0 0 rgba(124,58,237,.5);
  animation: bcDotPulse 2.4s ease-out infinite;
}
@keyframes bcDotPulse{
  0%   { box-shadow: 0 0 0 0 rgba(124,58,237,.45); }
  70%  { box-shadow: 0 0 0 6px rgba(124,58,237,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
}

/* Mobile: compactar */
@media (max-width: 540px) {
  .iv-breadcrumb,
  nav[aria-label="breadcrumb"]{ padding: .45rem .7rem .45rem .75rem; }
  .iv-breadcrumb .breadcrumb,
  nav[aria-label="breadcrumb"] .breadcrumb{ font-size: .78rem !important; }
  .iv-breadcrumb .breadcrumb-item a,
  nav[aria-label="breadcrumb"] .breadcrumb-item a{ padding: .25rem .4rem; }
  .iv-breadcrumb .breadcrumb-item.active,
  nav[aria-label="breadcrumb"] .breadcrumb-item.active{ padding: .25rem .5rem; }
}

/* =========================
   4) GLASS UTILITIES
========================= */
.lg-glass{
  background: var(--lg-glass-bg);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-glass-border);
  box-shadow: var(--lg-glass-shadow-sm);
  border-radius: var(--lg-radius-lg);
}

.lg-glass-strong{
  background: var(--lg-glass-bg-strong);
}

.shadow-glass{
  box-shadow: var(--lg-glass-shadow) !important;
}

.border-glass{
  border: 1px solid var(--lg-glass-border) !important;
}

.bg-glass{
  background: var(--lg-glass-bg) !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
}

.radius-xl{ border-radius: var(--lg-radius-xl) !important; }
.radius-lg{ border-radius: var(--lg-radius-lg) !important; }
.radius-md{ border-radius: var(--lg-radius-md) !important; }
.radius-sm{ border-radius: var(--lg-radius-sm) !important; }

/* =========================
   5) TOPBAR PÚBLICA
   IMPORTANTE: classe explícita
========================= */
.app-topbar,
.abpg-topbar,
.navbar.app-topbar,
.navbar.abpg-topbar{
  position: sticky;
  top: 0;
  z-index: 2000;

  min-height: 64px;
  background: linear-gradient(180deg, var(--app-topbar-bg-strong) 0%, var(--app-topbar-bg) 100%) !important;
  border-bottom: 1px solid var(--app-topbar-border) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.20);

  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.app-topbar .container-fluid,
.abpg-topbar .container-fluid{
  min-height: 64px;
}

.app-topbar .navbar-brand,
.abpg-topbar .navbar-brand{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 1.25rem;
  color: var(--app-topbar-text) !important;
}

.app-topbar .navbar-brand img,
.abpg-topbar .navbar-brand img{
  display: block;
  width: 80px;
  height: auto;
  opacity: 1;
  filter: none;
}

.app-topbar .navbar-nav,
.abpg-topbar .navbar-nav{
  align-items: center;
}

.app-topbar .nav-link,
.app-topbar .dropdown-toggle,
.app-topbar .navbar-brand,
.app-topbar .navbar-brand span,
.abpg-topbar .nav-link,
.abpg-topbar .dropdown-toggle,
.abpg-topbar .navbar-brand,
.abpg-topbar .navbar-brand span{
  color: var(--app-topbar-text) !important;
  font-weight: 500;
}

.app-topbar .nav-link:hover,
.app-topbar .nav-link:focus,
.app-topbar .dropdown-toggle:hover,
.app-topbar .dropdown-toggle:focus,
.abpg-topbar .nav-link:hover,
.abpg-topbar .nav-link:focus,
.abpg-topbar .dropdown-toggle:hover,
.abpg-topbar .dropdown-toggle:focus{
  color: #fff !important;
}

.app-topbar .nav-link.active,
.abpg-topbar .nav-link.active{
  color: #fff !important;
}

.app-topbar .badge-profile,
.abpg-topbar .badge-profile{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .62rem;
  border-radius: 999px;
  background: var(--app-topbar-pill);
  border: 1px solid var(--app-topbar-pill-border);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  margin-right: .45rem;
  line-height: 1;
}

.app-topbar .navbar-toggler,
.abpg-topbar .navbar-toggler{
  border-color: rgba(255,255,255,.16);
  box-shadow: none !important;
}

.app-topbar .navbar-toggler:focus,
.abpg-topbar .navbar-toggler:focus{
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.12) !important;
}

.app-topbar .navbar-toggler-icon,
.abpg-topbar .navbar-toggler-icon{
  filter: brightness(100);
}

.app-topbar .dropdown-menu,
.abpg-topbar .dropdown-menu{
  margin-top: .65rem;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
  padding: .5rem;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.app-topbar .dropdown-item,
.abpg-topbar .dropdown-item{
  border-radius: 10px;
  padding: .65rem .8rem;
  color: #0f172a !important;
  font-weight: 500;
}

.app-topbar .dropdown-item:hover,
.app-topbar .dropdown-item:focus,
.abpg-topbar .dropdown-item:hover,
.abpg-topbar .dropdown-item:focus{
  background: #f3f6fb;
  color: #0f172a !important;
}

.app-topbar .dropdown-item i,
.abpg-topbar .dropdown-item i{
  width: 18px;
  text-align: center;
  margin-right: .45rem;
}

/* =========================
   6) NAVBAR GLASS OPCIONAL
   Somente se explicitamente marcada
========================= */
.navbar.lg-glass,
.navbar.glass-navbar{
  background: var(--lg-glass-bg) !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border-bottom: 1px solid var(--bs-border-color-translucent);
  position: sticky;
  top: 0;
  z-index: 1800;
}

/* =========================
   7) CARDS / PANELS
========================= */
.card{
  border-radius: var(--lg-radius-lg);
  border: 1px solid var(--bs-border-color-translucent);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;
}

.card.lg{
  background: var(--lg-glass-bg);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-glass-border);
  box-shadow: var(--lg-glass-shadow);
}

.card-header,
.card-footer{
  border-color: var(--bs-border-color-translucent);
  background: rgba(255,255,255,.35);
}

/* =========================
   8) MODALS / DROPDOWN / OFFCANVAS / TOAST
========================= */
.modal-content,
.dropdown-menu,
.offcanvas,
.toast{
  background: var(--lg-glass-bg-strong);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-glass-border);
  box-shadow: var(--lg-glass-shadow);
  border-radius: var(--lg-radius-lg);
}

.modal-header,
.modal-footer,
.dropdown-divider,
.offcanvas-header{
  border-color: var(--bs-border-color-translucent);
}

.modal-backdrop.show{
  opacity: .35;
}

.dropdown-menu{
  z-index: 2100;
}

/* =========================
   9) FORMS SÓLIDOS E BRANCOS
========================= */
.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
input[type="tel"]{
  background: var(--lg-input-bg) !important;
  border: 1px solid var(--lg-input-border) !important;
  color: var(--lg-text) !important;
  border-radius: 12px;
  box-shadow: none;
}

.form-control:hover,
.form-select:hover,
textarea:hover{
  border-color: var(--lg-input-border-hover) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus{
  background: #fff !important;
  border-color: var(--lg-input-border-focus) !important;
  box-shadow: var(--lg-input-shadow-focus) !important;
  color: var(--lg-text) !important;
}

.form-control::placeholder,
textarea::placeholder{
  color: #9a9aa1 !important;
}

.form-check-input{
  border-color: rgba(60,60,67,.28);
}

.form-check-input:focus{
  box-shadow: var(--lg-input-shadow-focus);
}

/* =========================
   10) BUTTONS
========================= */
.btn{
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}

.btn-primary{
  background: var(--lg-primary);
  border-color: var(--lg-primary);
}

.btn-primary:hover{
  background: #0069db;
  border-color: #0069db;
}

.btn-outline-primary{
  border-color: rgba(0,122,255,.35);
  color: var(--lg-primary);
  background: rgba(255,255,255,.72);
}

.btn-outline-primary:hover{
  background: rgba(0,122,255,.08);
  color: #0069db;
  border-color: rgba(0,122,255,.45);
}

/* =========================
   11) TABLES
========================= */
.table{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.45);
  --bs-table-hover-bg: rgba(0,122,255,.04);
  border-color: var(--bs-border-color-translucent);
}

.table thead th{
  font-weight: 700;
  color: #374151;
  border-bottom-width: 1px;
}

/* =========================
   12) ALERTS / BADGES
========================= */
.alert{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
}

.badge{
  border-radius: 999px;
  font-weight: 700;
}

/* =========================
   13) DROPDOWN ITEM REFINEMENT
========================= */
.dropdown-item{
  border-radius: 10px;
}

.dropdown-item:hover,
.dropdown-item:focus{
  background: rgba(0,122,255,.06);
}

/* =========================
   14) PAGINATION
========================= */
.page-link{
  border-radius: 10px !important;
  margin: 0 2px;
  border-color: var(--bs-border-color-translucent);
}

/* =========================
   15) LIST GROUPS
========================= */
.list-group-item{
  border-color: var(--bs-border-color-translucent);
}

/* =========================
   16) HELPERS DE PÁGINA
========================= */
.abpg-page-wrap{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.abpg-main{
  flex: 1 1 auto;
}

.dashboard-header{
  position: relative;
  z-index: 10;
}

/* =========================
   17) RESPONSIVIDADE
========================= */
@media (max-width: 991.98px){
  body{
    scroll-padding-top: 68px;
  }

  .card{
    border-radius: 14px;
  }

  .modal-content,
  .dropdown-menu,
  .offcanvas,
  .toast{
    border-radius: 14px;
  }

  .app-topbar .navbar-collapse,
  .abpg-topbar .navbar-collapse{
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .app-topbar .navbar-nav,
  .abpg-topbar .navbar-nav{
    align-items: flex-start;
  }

  .app-topbar .badge-profile,
  .abpg-topbar .badge-profile{
    margin-right: .35rem;
    margin-bottom: .2rem;
  }
}