/* =========================================================
   IMPERSOL — App Shell: Sidebar + Topbars (design system)
   Reestiliza .sidebar, .sidebar-nav-*, .btn-new-chat,
   .btn-logout, .btn-hamburger e todas as topbars das views
   usando tokens --imp-*. Mantém os seletores legados intactos
   para não precisar mexer no HTML/JS.

   Carregar DEPOIS de styles.css (precedência de cascata).
   ========================================================= */

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar {
  background: rgba(8, 12, 24, .94);
  border-right: 1px solid var(--imp-border);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
}

.sidebar-top {
  padding: var(--imp-space-5) var(--imp-space-5) var(--imp-space-4);
  border-bottom: 1px solid var(--imp-border);
}

.sidebar-brand-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(145deg, var(--imp-brand-600) 0%, var(--imp-brand-500) 60%, var(--imp-brand-400) 100%);
  border-radius: var(--imp-radius-md);
  box-shadow: var(--imp-shadow-glow-brand), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.sidebar-brand-name {
  color: var(--imp-text);
  font-weight: var(--imp-weight-bold);
  font-size: var(--imp-text-lg);
  letter-spacing: -.01em;
}

.sidebar-brand-tag {
  color: var(--imp-text-muted);
  font-size: var(--imp-text-xs);
  font-weight: var(--imp-weight-medium);
  margin-top: 2px;
}

.sidebar-section {
  padding: var(--imp-space-4) var(--imp-space-5) 0;
}

.sidebar-label {
  color: var(--imp-text-dim);
  font-size: var(--imp-text-xs);
  font-weight: var(--imp-weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--imp-space-2);
}

/* ---------- User card ---------- */
.sidebar-user-card {
  background: var(--imp-surface);
  border: 1px solid var(--imp-border);
  border-radius: var(--imp-radius-lg);
  padding: var(--imp-space-3);
  gap: var(--imp-space-3);
  transition: border-color var(--imp-duration-fast), background var(--imp-duration-fast);
}

.sidebar-user-card:hover {
  border-color: var(--imp-brand-300);
  background: var(--imp-surface-alt);
}

.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--imp-radius-md);
  background: linear-gradient(145deg, var(--imp-brand-600) 0%, var(--imp-brand-500) 50%, var(--imp-brand-400) 100%);
  color: #fff;
  font-size: var(--imp-text-md);
  font-weight: var(--imp-weight-bold);
  box-shadow: var(--imp-shadow-glow-brand), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.user-info-name {
  color: var(--imp-text);
  font-size: var(--imp-text-md);
  font-weight: var(--imp-weight-semibold);
}

.user-info-email {
  color: var(--imp-text-muted);
  font-size: var(--imp-text-xs);
  margin-top: 2px;
}

.cargo-badge {
  background: rgba(74, 127, 212, .15);
  border: 1px solid rgba(74, 127, 212, .28);
  color: var(--imp-brand-200);
  font-size: 10px;
  font-weight: var(--imp-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--imp-radius-full);
  margin-top: var(--imp-space-1);
}

/* ---------- Status badge ---------- */
.sidebar-status-badge {
  gap: var(--imp-space-2);
  padding: var(--imp-space-2) var(--imp-space-3);
  background: var(--imp-success-bg);
  border: 1px solid rgba(34, 197, 94, .2);
  border-radius: var(--imp-radius-md);
}

.status-dot-green {
  background: var(--imp-success);
  box-shadow: 0 0 8px rgba(34, 197, 94, .7);
}

.status-label {
  color: var(--imp-success-soft);
  font-size: var(--imp-text-sm);
  font-weight: var(--imp-weight-medium);
}

/* ---------- Nav items ---------- */
.sidebar-nav {
  gap: 2px;
  margin: var(--imp-space-3) 0 0;
}

.sidebar-nav-item {
  gap: var(--imp-space-2);
  padding: var(--imp-space-2) var(--imp-space-3);
  border-radius: var(--imp-radius-md);
  font-size: var(--imp-text-md);
  font-weight: var(--imp-weight-medium);
  color: var(--imp-text-muted);
  transition: background var(--imp-duration-fast), color var(--imp-duration-fast);
}

.sidebar-nav-item:hover {
  background: var(--imp-surface);
  color: var(--imp-text);
}

.sidebar-nav-item.sni-active {
  background: rgba(40, 77, 148, .22);
  color: var(--imp-brand-400);
  font-weight: var(--imp-weight-semibold);
  box-shadow: inset 0 0 0 1px rgba(74, 127, 212, .22);
}

.sidebar-nav-item svg {
  width: 15px;
  height: 15px;
  opacity: .9;
}

.sni-badge {
  background: var(--imp-warn);
  color: #0c1222;
  font-size: 10px;
  font-weight: var(--imp-weight-bold);
  padding: 1px 7px;
  border-radius: var(--imp-radius-full);
  min-width: 18px;
  line-height: 16px;
}

/* ---------- Conversations list ---------- */
.conv-item {
  gap: var(--imp-space-2);
  padding: var(--imp-space-2) var(--imp-space-3);
  border-radius: var(--imp-radius-md);
  transition: background var(--imp-duration-fast);
}

.conv-item:hover {
  background: var(--imp-surface);
}

.conv-item.active {
  background: rgba(74, 127, 212, .12);
}

.conv-title {
  color: var(--imp-text-muted);
  font-size: var(--imp-text-sm);
}

.conv-item.active .conv-title {
  color: var(--imp-text);
  font-weight: var(--imp-weight-medium);
}

.conv-date {
  color: var(--imp-text-dim);
  font-size: var(--imp-text-xs);
  margin-top: 2px;
}

/* ---------- Sidebar bottom actions ---------- */
.sidebar-bottom {
  padding: var(--imp-space-4) var(--imp-space-5);
  border-top: 1px solid var(--imp-border);
  gap: var(--imp-space-2);
}

.btn-new-chat {
  background: rgba(74, 127, 212, .14);
  border: 1px solid rgba(74, 127, 212, .28);
  border-radius: var(--imp-radius-md);
  padding: var(--imp-space-3) var(--imp-space-4);
  color: var(--imp-brand-200);
  font-family: var(--imp-font-sans);
  font-size: var(--imp-text-md);
  font-weight: var(--imp-weight-semibold);
  gap: var(--imp-space-2);
  transition: background var(--imp-duration-normal), color var(--imp-duration-fast), border-color var(--imp-duration-normal), box-shadow var(--imp-duration-normal);
}

.btn-new-chat:hover {
  background: rgba(74, 127, 212, .24);
  color: #fff;
  border-color: var(--imp-brand-400);
  box-shadow: var(--imp-shadow-glow-brand);
}

.btn-logout {
  background: var(--imp-surface);
  border: 1px solid var(--imp-border);
  border-radius: var(--imp-radius-md);
  padding: var(--imp-space-3) var(--imp-space-4);
  color: var(--imp-text-muted);
  font-family: var(--imp-font-sans);
  font-size: var(--imp-text-md);
  font-weight: var(--imp-weight-medium);
  gap: var(--imp-space-2);
  transition: background var(--imp-duration-fast), color var(--imp-duration-fast), border-color var(--imp-duration-fast);
}

.btn-logout:hover {
  background: var(--imp-danger-bg);
  color: var(--imp-danger-soft);
  border-color: rgba(239, 68, 68, .3);
}

/* Change password secondary button (inline-styled in HTML) */
.sidebar-bottom > button[onclick*="showSenhaModal"] {
  background: transparent !important;
  border: 1px solid var(--imp-border) !important;
  border-radius: var(--imp-radius-md) !important;
  color: var(--imp-text-muted) !important;
  font-family: var(--imp-font-sans) !important;
  transition: background var(--imp-duration-fast), color var(--imp-duration-fast), border-color var(--imp-duration-fast);
}

.sidebar-bottom > button[onclick*="showSenhaModal"]:hover {
  background: var(--imp-surface);
  color: var(--imp-text);
  border-color: var(--imp-brand-300) !important;
}

/* =========================================================
   MOBILE: sidebar drawer + backdrop + hamburger
   ========================================================= */
.sidebar-backdrop {
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.btn-hamburger {
  width: 36px;
  height: 36px;
  background: var(--imp-surface);
  border: 1px solid var(--imp-border);
  border-radius: var(--imp-radius-md);
  transition: background var(--imp-duration-fast), border-color var(--imp-duration-fast), color var(--imp-duration-fast);
}

.btn-hamburger:hover {
  background: var(--imp-surface-alt);
  border-color: var(--imp-brand-300);
}

.btn-hamburger svg {
  color: var(--imp-text-muted);
  width: 16px;
  height: 16px;
}

.btn-hamburger:hover svg {
  color: var(--imp-text);
}

/* =========================================================
   TOPBARS — padrão aplicado em todas as views
   (obras / servicos / clientes / colaboradores / custos /
    diario / qualidade / kpi / planejamento / orcamento)
   ========================================================= */
.obras-topbar,
.custos-topbar,
.clientes-topbar,
.colab-topbar,
.diario-topbar,
.qual-topbar,
.kpi-topbar,
.orc-topbar,
.plan-topbar,
.nop-topbar,
.sv-page-header {
  background: rgba(8, 12, 24, .92);
  border-bottom: 1px solid var(--imp-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.obras-topbar,
.custos-topbar,
.clientes-topbar,
.colab-topbar,
.diario-topbar,
.qual-topbar,
.kpi-topbar,
.orc-topbar,
.plan-topbar,
.nop-topbar {
  padding: var(--imp-space-4) var(--imp-space-5);
  gap: var(--imp-space-3);
}

/* Títulos (não mexer em .plan-topbar-title que já é 16px por design) */
.obras-topbar-title,
.custos-topbar-title,
.clientes-topbar-title,
.colab-topbar-title,
.diario-topbar-title,
.qual-topbar-title,
.kpi-topbar-title,
.orc-topbar-title {
  font-size: var(--imp-text-2xl);
  font-weight: var(--imp-weight-bold);
  color: var(--imp-text);
  letter-spacing: -.01em;
  flex: 1;
  min-width: 0;
}

.custos-topbar-sub {
  font-size: var(--imp-text-xs);
  color: var(--imp-text-dim);
  margin-top: 2px;
}

/* Service page header tem layout próprio com h2 */
.sv-page-title {
  font-size: var(--imp-text-2xl);
  font-weight: var(--imp-weight-bold);
  color: var(--imp-text);
  letter-spacing: -.01em;
  margin: 0;
}

/* =========================================================
   Botões de topbar ("Nova", "Novo", "Adicionar")
   ========================================================= */
.btn-add-cliente,
.btn-sv-novo {
  background: linear-gradient(180deg, var(--imp-brand-500) 0%, var(--imp-brand-600) 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--imp-radius-md);
  padding: var(--imp-space-2) var(--imp-space-4);
  color: #fff;
  font-family: var(--imp-font-sans);
  font-size: var(--imp-text-md);
  font-weight: var(--imp-weight-semibold);
  gap: var(--imp-space-2);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  box-shadow: var(--imp-shadow-sm);
  transition: box-shadow var(--imp-duration-normal), filter var(--imp-duration-fast), transform var(--imp-duration-fast);
}

.btn-add-cliente:hover,
.btn-sv-novo:hover {
  filter: brightness(1.08);
  box-shadow: var(--imp-shadow-md), var(--imp-shadow-glow-brand);
}

.btn-add-cliente:active,
.btn-sv-novo:active {
  transform: translateY(1px);
}

/* =========================================================
   Botão refresh (obras)
   ========================================================= */
.btn-refresh-obras {
  background: var(--imp-surface);
  border: 1px solid var(--imp-border);
  border-radius: var(--imp-radius-md);
  color: var(--imp-text-muted);
  transition: background var(--imp-duration-fast), color var(--imp-duration-fast), border-color var(--imp-duration-fast);
}

.btn-refresh-obras:hover {
  background: rgba(74, 127, 212, .1);
  color: var(--imp-brand-400);
  border-color: var(--imp-brand-300);
}

/* =========================================================
   Responsividade — tablet
   ========================================================= */
@media (min-width: 640px) and (max-width: 1023px) {
  .sidebar-section,
  .sidebar-top,
  .sidebar-bottom {
    padding-left: var(--imp-space-6);
    padding-right: var(--imp-space-6);
  }
}

/* =========================================================
   Responsividade — mobile
   ========================================================= */
@media (max-width: 639px) {
  .sidebar-section,
  .sidebar-top,
  .sidebar-bottom {
    padding-left: var(--imp-space-4);
    padding-right: var(--imp-space-4);
  }

  .obras-topbar,
  .custos-topbar,
  .clientes-topbar,
  .colab-topbar,
  .diario-topbar,
  .qual-topbar,
  .kpi-topbar,
  .orc-topbar,
  .plan-topbar,
  .nop-topbar {
    padding: var(--imp-space-3) var(--imp-space-4);
    gap: var(--imp-space-2);
  }

  .obras-topbar-title,
  .custos-topbar-title,
  .clientes-topbar-title,
  .colab-topbar-title,
  .diario-topbar-title,
  .qual-topbar-title,
  .kpi-topbar-title,
  .orc-topbar-title,
  .sv-page-title {
    font-size: var(--imp-text-xl);
  }
}