/* ============ TOP BAR ============ */
.topbar {
  background: var(--caixa-blue-dark); color: white;
  height: 56px; display: flex; align-items: center; padding: 0 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  position: relative; z-index: 100;
}
.topbar .logo-block { display: flex; align-items: center; gap: 14px; }
.topbar .caixa-logo {
  width: 36px; height: 36px;
  background-image: url('../assets/logo_CAIXA.png');
  background-color: white;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 6px;
  padding: 3px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.topbar h1 { font-size: 16px; font-weight: 600; letter-spacing: 0.2px; }
.topbar h1 .sub { font-weight: 300; opacity: 0.85; margin-left: 6px; font-size: 13px; }
.topbar .nav-right { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 12px; opacity: 0.9; }
.topbar .badge {
  background: var(--caixa-orange); color: white;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
}
.topbar .user { padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.2); }
.topbar .logout-btn {
  background: rgba(255,255,255,0.1); color: white;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 5px 12px; border-radius: 4px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  margin-left: 12px; transition: background 0.15s;
  font-family: inherit;
}
.topbar .logout-btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); }
.topbar .user-block {
  display: flex; align-items: center; gap: 10px;
  padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.2);
}
.topbar .user-block .user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--caixa-orange); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.topbar .user-block .user-info { display: flex; flex-direction: column; line-height: 1.2; }
.topbar .user-block .user-info .name { font-size: 12px; font-weight: 600; }
.topbar .user-block .user-info .role { font-size: 10px; opacity: 0.75; }

/* ============ TAB BAR ============ */
.tabbar {
  background: var(--caixa-blue); height: 52px;
  display: flex; align-items: stretch; padding: 0 24px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  position: relative; z-index: 99;
}

/* ============ MAIN LAYOUT (3 colunas) ============ */
.main {
  display: grid;
  grid-template-columns: 360px 1fr 320px;
  height: calc(100vh - 56px - 52px);
}

/* ============ SIDEBAR LEFT ============ */
.sidebar-l { background: white; border-right: 1px solid var(--border); overflow-y: auto; }

.panel-head { padding: 20px 20px 12px; border-bottom: 1px solid var(--border); }
.panel-head .theme-tag {
  display: inline-block; padding: 4px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  color: white; text-transform: uppercase; margin-bottom: 8px;
}
.panel-head h2 { font-size: 20px; font-weight: 600; color: var(--caixa-blue-darker); line-height: 1.2; }
.panel-head p { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }

/* ============ SIDEBAR RIGHT ============ */
.sidebar-r {
  background: white; border-left: 1px solid var(--border);
  overflow-y: auto; padding: 20px;
}
.sidebar-r .placeholder { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.sidebar-r .placeholder .icon { font-size: 48px; margin-bottom: 14px; opacity: 0.3; }
.sidebar-r .placeholder p { font-size: 13px; line-height: 1.4; }

/* ============ MAP WRAP ============ */
.map-wrap { position: relative; }

/* ============ FOOTER (placeholder) ============ */
.footbar {
  background: var(--caixa-blue-darker); color: white;
  padding: 0 24px; font-size: 11px;
  display: flex; align-items: center; justify-content: space-between;
  height: 0;
}