/*
 * PrevBox Lite — Sidebar Layout
 * Design extraído do Angular frontend (prevbox-frontend)
 * Cores: primary #051138, info/accent #49e1f2, bg-nav #f7fafc
 */

/* ============================================================
   VARIÁVEIS
   ============================================================ */
:root {
  --pb-primary:      #051138;
  --pb-accent:       #49e1f2;
  --pb-accent-dark:  #02e7d2;
  --pb-navy:         #112240;
  --pb-bg-body:      #f9fafd;
  --pb-bg-nav:       #f7fafc;
  --pb-bg-white:     #f8fafc;
  --pb-border:       #E2E8F0;
  --pb-text-muted:   #8a97a9;
  --pb-text-dark:    #051138;
  --pb-sidebar-w:    250px;
  --pb-header-h:     70px;
  --pb-sidebar-collapsed-w: 70px;
  --pb-transition:   0.3s ease;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.9rem;
  background: var(--pb-bg-body);
  color: var(--pb-text-dark);
  min-height: 100vh;
}

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
.app-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-body {
  display: flex;
  flex: 1;
  overflow-x: hidden;
}

/* ============================================================
   HEADER
   ============================================================ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--pb-header-h);
  background: var(--pb-bg-nav);
  border-bottom: 1px solid var(--pb-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  box-shadow: 0 1px 4px rgba(5,17,56,.06);
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--pb-primary);
  font-weight: 800;
  font-size: 1.05rem;
}

.app-header__brand img,
.app-header__brand svg { flex-shrink: 0; }

.app-header__toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 8px;
  color: var(--pb-text-muted);
  display: flex;
  align-items: center;
  transition: background var(--pb-transition), color var(--pb-transition);
}
.app-header__toggle:hover {
  background: var(--pb-border);
  color: var(--pb-primary);
}

.app-header__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Avatar usuário */
.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(73,225,242,.18);
  border: 1.5px solid rgba(73,225,242,.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--pb-accent-dark);
}

.user-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.35rem 0.6rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--pb-primary);
  font-weight: 600;
  font-size: 0.875rem;
  transition: background var(--pb-transition);
}
.user-dropdown-toggle:hover { background: var(--pb-border); color: var(--pb-primary); }

/* ============================================================
   SIDEBAR
   ============================================================ */
.app-sidebar {
  width: var(--pb-sidebar-w);
  min-width: var(--pb-sidebar-w);
  height: calc(100vh - var(--pb-header-h));
  position: fixed;
  left: 0;
  top: var(--pb-header-h);
  background: var(--pb-bg-nav);
  border-right: 1px solid var(--pb-border);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  transition: width var(--pb-transition), min-width var(--pb-transition);
  z-index: 100;
  padding: 0.5rem 0 1.5rem;
}
.app-sidebar::-webkit-scrollbar { display: none; }

/* Sidebar colapsada */
.app-sidebar.collapsed {
  width: var(--pb-sidebar-collapsed-w);
  min-width: var(--pb-sidebar-collapsed-w);
}

/* Divisor entre grupos */
.sidebar-divider {
  margin: 0.75rem auto;
  width: 85%;
  border: none;
  border-top: 1px solid var(--pb-border);
}

/* Cabeçalho de grupo/categoria */
.sidebar-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pb-text-muted);
  padding: 0.75rem 1.1rem 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--pb-transition);
}
.app-sidebar.collapsed .sidebar-group-label { opacity: 0; height: 0; padding: 0; }

/* Item de navegação */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1.1rem;
  margin: 0.1rem 0.5rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--pb-text-muted);
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  transition: background var(--pb-transition), color var(--pb-transition);
  cursor: pointer;
}
.sidebar-item:hover {
  background: rgba(73,225,242,.1);
  color: var(--pb-primary);
}
.sidebar-item.active {
  background: rgba(73,225,242,.15);
  color: var(--pb-primary);
}
.sidebar-item.active .sidebar-item__icon { color: var(--pb-accent-dark); }

.sidebar-item__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
/* SVG variant: garante centralização matemática (sem baseline fantasma do inline) */
svg.sidebar-item__icon {
  display: block;
  height: 20px;
}

/* Suprime transitions durante o carregamento inicial — evita FOUC ao
   restaurar estado collapsed via JS (sidebar começa expandida no CSS
   default, JS adiciona .collapsed, transition anima visivelmente). */
.pb-no-transition,
.pb-no-transition *,
.pb-no-transition *::before,
.pb-no-transition *::after {
  transition: none !important;
}
.sidebar-item__label {
  transition: opacity var(--pb-transition), width var(--pb-transition);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-sidebar.collapsed .sidebar-item__label {
  opacity: 0;
  width: 0;
}
.app-sidebar.collapsed .sidebar-item {
  justify-content: center;
  padding: 0.55rem;
  margin: 0.15rem auto;
  width: 40px;
  gap: 0;  /* impede gap fantasma do label com width:0 (centraliza SVG) */
}
/* Accent (Novo Calculo) no estado colapsado: centraliza */
.app-sidebar.collapsed .sidebar-item--accent {
  margin: 0.15rem auto;
}

/* Botão de destaque (Novo Cálculo) */
.sidebar-item--accent {
  background: var(--pb-primary);
  color: #fff !important;
}
.sidebar-item--accent:hover {
  background: #0a2060;
  color: #fff !important;
}
.sidebar-item--accent .sidebar-item__icon { color: var(--pb-accent); }

/* ============================================================
   CONTEÚDO PRINCIPAL
   ============================================================ */
.app-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  min-width: 0;
  margin-left: var(--pb-sidebar-w);
  transition: margin-left var(--pb-transition);
}

/* Empurra conteúdo para dentro quando sidebar está colapsada */
.app-sidebar.collapsed ~ .app-content {
  margin-left: var(--pb-sidebar-collapsed-w);
}

/* ============================================================
   FLASH MESSAGES
   ============================================================ */
.flash-zone {
  margin-bottom: 1rem;
}

/* ============================================================
   CARDS (estilo Angular)
   ============================================================ */
.card {
  border: 1px solid var(--pb-border);
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(5,17,56,.05);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--pb-border);
  font-weight: 700;
  color: var(--pb-primary);
  padding: 1rem 1.25rem;
}

/* ============================================================
   TABELAS
   ============================================================ */
.table { font-size: 0.875rem; }
.table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pb-text-muted);
  border-bottom: 1px solid var(--pb-border);
  padding: 0.65rem 0.75rem;
  background: var(--pb-bg-body);
}
.table tbody tr { transition: background var(--pb-transition); }
.table tbody tr:hover { background: rgba(73,225,242,.05); cursor: pointer; }
.table tbody td { padding: 0.7rem 0.75rem; vertical-align: middle; border-color: var(--pb-border); }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn-primary {
  background: var(--pb-primary);
  border-color: var(--pb-primary);
  font-weight: 600;
}
.btn-primary:hover { background: #0a2060; border-color: #0a2060; }

.btn-outline-primary {
  color: var(--pb-primary);
  border-color: var(--pb-primary);
  font-weight: 600;
}
.btn-outline-primary:hover {
  background: var(--pb-primary);
  color: #fff;
}

/* Botão accent (cyan) */
.btn-accent {
  background: var(--pb-accent);
  border-color: var(--pb-accent);
  color: var(--pb-primary);
  font-weight: 700;
}
.btn-accent:hover { background: var(--pb-accent-dark); border-color: var(--pb-accent-dark); color: var(--pb-primary); }

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.form-label { font-weight: 600; font-size: 0.85rem; color: var(--pb-primary); }
.form-control, .form-select {
  border: 1px solid var(--pb-border);
  border-radius: 8px;
  font-size: 0.875rem;
  transition: border-color var(--pb-transition), box-shadow var(--pb-transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--pb-accent);
  box-shadow: 0 0 0 3px rgba(73,225,242,.18);
}

/* ============================================================
   BADGES
   ============================================================ */
.badge-status {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3em 0.65em;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb { font-size: 0.8rem; margin-bottom: 0; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--pb-text-muted); }
.breadcrumb-item a { color: var(--pb-accent-dark); text-decoration: none; font-weight: 600; }
.breadcrumb-item.active { color: var(--pb-text-muted); }

/* ============================================================
   PAGE TITLE
   ============================================================ */
.page-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--pb-primary);
  margin-bottom: 0.25rem;
}
.page-subtitle {
  font-size: 0.82rem;
  color: var(--pb-text-muted);
  margin-bottom: 1.25rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.app-footer {
  background: var(--pb-bg-nav);
  border-top: 1px solid var(--pb-border);
  padding: 0.65rem 1.25rem;
  font-size: 0.78rem;
  color: var(--pb-text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ============================================================
   NAVEGAÇÃO EM ABAS (estilo Angular container-principal-navegacao)
   ============================================================ */
.page-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--pb-border);
  margin-bottom: 1.25rem;
}
.page-tab {
  padding: 0.6rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pb-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--pb-transition), border-color var(--pb-transition);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.page-tab:hover { color: var(--pb-primary); }
.page-tab.active {
  color: var(--pb-primary);
  border-bottom-color: var(--pb-accent-dark);
  font-weight: 700;
}
.page-tab .tab-badge {
  font-size: 0.68rem;
  background: var(--pb-border);
  color: var(--pb-text-muted);
  border-radius: 20px;
  padding: 0.1em 0.55em;
  font-weight: 700;
}
.page-tab.active .tab-badge {
  background: rgba(2,231,210,.15);
  color: var(--pb-accent-dark);
}

/* ============================================================
   BARRA DE BUSCA
   ============================================================ */
.search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--pb-border);
  border-radius: 10px;
  padding: 0.4rem 0.75rem;
  max-width: 420px;
  transition: border-color var(--pb-transition), box-shadow var(--pb-transition);
}
.search-bar:focus-within {
  border-color: var(--pb-accent);
  box-shadow: 0 0 0 3px rgba(73,225,242,.15);
}
.search-bar i { color: var(--pb-text-muted); font-size: 0.95rem; flex-shrink: 0; }
.search-bar input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.875rem;
  flex: 1;
  color: var(--pb-text-dark);
}
.search-bar input::placeholder { color: var(--pb-text-muted); }

/* ============================================================
   BOTÕES DE AÇÃO EM TABELA (ícone-redondo, estilo Angular)
   ============================================================ */
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--pb-border);
  background: #fff;
  color: var(--pb-text-muted);
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pb-transition), color var(--pb-transition), border-color var(--pb-transition);
  flex-shrink: 0;
}
.action-btn:hover { background: var(--pb-bg-body); color: var(--pb-primary); border-color: var(--pb-primary); }
.action-btn.action-btn--primary:hover  { background: var(--pb-primary); color: #fff; border-color: var(--pb-primary); }
.action-btn.action-btn--success:hover  { background: #198754; color: #fff; border-color: #198754; }
.action-btn.action-btn--danger:hover   { background: #dc3545; color: #fff; border-color: #dc3545; }
.action-btn.action-btn--warning:hover  { background: #f0a500; color: #fff; border-color: #f0a500; }
.action-btn.action-btn--info:hover     { background: var(--pb-accent-dark); color: var(--pb-primary); border-color: var(--pb-accent-dark); }

.action-group { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--pb-text-muted);
}
.empty-state__icon { font-size: 3rem; opacity: .4; display: block; margin-bottom: 1rem; }
.empty-state__title { font-size: 1rem; font-weight: 700; color: var(--pb-primary); margin-bottom: 0.35rem; }
.empty-state__desc  { font-size: 0.85rem; margin-bottom: 1.25rem; }

/* ============================================================
   BADGE DE STATUS
   ============================================================ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25em 0.65em;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.status-badge--success  { background: #d1fae5; color: #065f46; }
.status-badge--danger   { background: #fee2e2; color: #991b1b; }
.status-badge--warning  { background: #fef3c7; color: #92400e; }
.status-badge--muted    { background: var(--pb-border); color: var(--pb-text-muted); }
.status-badge--primary  { background: rgba(5,17,56,.08); color: var(--pb-primary); }
.status-badge--info     { background: rgba(2,231,210,.12); color: #065f5a; }

/* ============================================================
   PAGINAÇÃO
   ============================================================ */
.pagination .page-link {
  border-radius: 8px !important;
  margin: 0 2px;
  border: 1px solid var(--pb-border);
  color: var(--pb-primary);
  font-size: 0.82rem;
  font-weight: 600;
  min-width: 34px;
  text-align: center;
}
.pagination .page-item.active .page-link {
  background: var(--pb-primary);
  border-color: var(--pb-primary);
  color: #fff;
}
.pagination .page-link:hover { background: var(--pb-bg-body); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 768px) {
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform var(--pb-transition), width var(--pb-transition);
    z-index: 1025;
  }
  .app-sidebar.open {
    transform: translateX(0);
  }
  .app-content {
    margin-left: 0 !important;
    padding: 1rem;
  }
}