/* ============================================================
   base.css — Vesta Ops Design System
   Reset, tipografia e layout base. Importar após tokens.css.
   ============================================================ */

@import './tokens.css';

/* ── Reset ─────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ──────────────────────────────────────────────── */

html { height: 100%; }

body {
  font-family: var(--font-body);
  background:  var(--color-bg);
  color:       var(--color-text);
  font-size:   var(--text-base);
  line-height: 1.55;
  text-wrap:   pretty;
  height:      100%;
  -webkit-font-smoothing: antialiased;
}

/* ── Hierarquia tipográfica ────────────────────────────── */
/*   Títulos → --font-title (serifada)                     */
/*   Corpo   → --font-body  (Inter)                        */
/*   Nunca usar Inter para TUDO — o contraste é intencional */

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: normal;
  line-height: 1.2;
  color: var(--color-text);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl);  }
h3 { font-size: var(--text-lg);  }
h4 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 600; }

p {
  color: var(--color-text);
  line-height: 1.65;
}

small, .text-sm { font-size: var(--text-sm); }
.text-xs        { font-size: var(--text-xs); }
.text-muted     { color: var(--color-text-muted); }

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

strong { font-weight: 600; }

button, input, select, textarea {
  font-family: var(--font-body);
  font-size:   var(--text-base);
}

button { cursor: pointer; }

img, svg { display: block; }

/* ── Layout helpers ────────────────────────────────────── */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.surface {
  background:    var(--color-surface);
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
}

.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin: var(--space-6) 0;
}

/* ── Utilitários de layout ─────────────────────────────── */
/*   Grids responsivos e linhas/colunas com gap em tokens   */

.stack       { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm    { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg    { display: flex; flex-direction: column; gap: var(--space-6); }

.row         { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.row-end     { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: flex-end; }

.grid-2      { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grid-3      { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.grid-4      { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }

/* Colapsa apenas em mobile real — sidebar (240px) + conteúdo mínimo = ~640px */
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Alinhamentos de texto utilitários (curtos, intencionalmente raros) */
.text-right  { text-align: right; }
.text-end    { text-align: end; }

/* Espaçador vertical entre seções na page-content */
.section + .section { margin-top: var(--space-8); }

/* ── Scrollbar ─────────────────────────────────────────── */

::-webkit-scrollbar              { width: 4px; height: 4px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover  { background: var(--color-text-muted); }

/* ── Layout de aplicação ───────────────────────────────── */
/* Estrutura: sidebar 240px | coluna principal (topbar + content) */

.app-layout {
  display:    flex;
  height:     100vh;
  overflow:   hidden;
}

/* ── Sidebar ───────────────────────────────────────────── */

.sidebar {
  width:         240px;
  flex-shrink:   0;
  background:    var(--color-surface);
  border-right:  1px solid var(--color-border);
  box-shadow:    1px 0 0 var(--color-border);
  display:       flex;
  flex-direction: column;
  height:        100vh;
  overflow:      hidden;
}

/* Logo — "Vesta" Georgia itálico + "OPS" Inter tracking largo */
.sidebar-logo {
  padding:       22px 22px 18px;
  flex-shrink:   0;
}
.logo-vesta {
  font-family:   var(--font-title);
  font-style:    italic;
  font-size:     1.55rem;
  color:         var(--color-primary);
  letter-spacing: -0.02em;
  line-height:   1;
}
.logo-ops {
  font-family:   var(--font-body);
  font-style:    normal;
  font-size:     0.58rem;
  font-weight:   700;
  color:         var(--color-text-muted);
  margin-left:   6px;
  letter-spacing: 0.14em;
  vertical-align: middle;
}
.logo-tagline {
  font-size:     0.7rem;
  color:         var(--color-text-muted);
  margin-top:    5px;
  letter-spacing: 0.01em;
}

/* Nav */
.sidebar-nav {
  flex:           1;
  overflow-y:     auto;
  padding:        14px 10px;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.nav-btn {
  display:        flex;
  align-items:    center;
  gap:            9px;
  width:          100%;
  padding:        9px 11px;
  border:         none;
  border-radius:  var(--radius);
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    400;
  color:          var(--color-text-muted);
  background:     transparent;
  text-align:     left;
  text-decoration: none;
  cursor:         pointer;
  transition:     background var(--transition), color var(--transition);
}
.nav-btn:hover {
  background: rgba(46, 38, 34, 0.04);
  color:      var(--color-text);
}
/* Estado ativo: --color-primary-muted (não -soft — evita rosa agressivo) */
.nav-btn--active,
.nav-btn.active {
  font-weight: 600;
  color:       var(--color-primary);
  background:  var(--color-primary-muted);  /* rgba(193,101,74,0.09) */
}

/* Grupos colapsáveis de navegação */
.nav-group {
  margin-top: var(--space-3);
}

.nav-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  transition: color 0.15s;
  text-transform: uppercase;
}
.nav-group__header:hover {
  color: var(--color-text);
}
.nav-group__header:focus {
  outline: none;
  color: var(--color-primary);
}

.nav-group__label {
  display: block;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.nav-group__icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.nav-group__chevron {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
  transition: transform 0.15s;
  flex-shrink: 0;
  margin-left: var(--space-2);
}
.nav-group--open .nav-group__chevron {
  transform: rotate(-90deg);
}

.nav-group__content {
  display: none;
  padding-left: var(--space-2);
}
.nav-group--open .nav-group__content {
  display: block;
}

/* Divisores horizontais dentro da sidebar (respeitam o padding lateral) */
.sidebar-divider {
  border:       none;
  border-top:   1px solid var(--color-border);
  margin:       0 var(--space-4);
}

/* Footer da sidebar */
.sidebar-footer {
  flex-shrink:    0;
  padding:        var(--space-3) var(--space-2);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.sidebar-user {
  display:      flex;
  align-items:  center;
  gap:          10px;
  padding:      10px 11px;
  border-radius: var(--radius);
  background:   var(--color-bg);
}
.sidebar-avatar {
  width:           34px;
  height:          34px;
  border-radius:   50%;
  background:      var(--color-primary-soft);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.68rem;
  font-weight:     700;
  color:           var(--color-primary);
  flex-shrink:     0;
}
.sidebar-user-name {
  font-size:   var(--text-sm);
  font-weight: 500;
  color:       var(--color-text);
  line-height: 1.3;
}
.sidebar-user-role {
  font-size: 0.7rem;
  color:     var(--color-text-muted);
}

/* ── Área principal ────────────────────────────────────── */

.main-area {
  flex:           1;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  min-width:      0;
}

/* TopBar — cabeçalho da página */
.topbar {
  flex-shrink:    0;
  background:     var(--color-surface);
  border-bottom:  1px solid var(--color-border);
  padding:        18px 32px;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  gap:            16px;
}
.topbar-title {
  font-family:   var(--font-title);
  font-size:     1.35rem;
  color:         var(--color-text);
  line-height:   1.2;
}
.topbar-meta {
  font-size: var(--text-xs);
  color:     var(--color-text-muted);
  margin-top: 2px;
}
.topbar-actions {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
}

/* Conteúdo rolável */
.page-content {
  flex:               1;
  overflow-y:         auto;
  padding:            var(--space-8);
  overscroll-behavior: none; /* impede que o scroll propague para a janela */
}

/* Mensagens Django */
.messages-list {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  margin-bottom:  var(--space-6);
}
.messages-list li {
  padding:       var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size:     var(--text-sm);
}
.messages-list .success { background: var(--color-success-soft); color: var(--color-success); }
.messages-list .warning { background: var(--color-warning-soft); color: var(--color-warning); }
.messages-list .error   { background: var(--color-danger-soft);  color: var(--color-danger);  }
.messages-list .info    { background: var(--color-primary-soft); color: var(--color-primary); }


/* ── Sidebar: botão de colapso ─────────────────────────────── */

.sidebar-logo {
  position: relative;
}
.sidebar-logo__brand {
  line-height: 1;
}

.sidebar-toggle {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color var(--transition), box-shadow var(--transition);
  z-index: 10;
  flex-shrink: 0;
}
.sidebar-toggle:hover {
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
/* Por padrão mostra chevron esquerdo (colapsar), esconde direito */
.sidebar-toggle .icon-expand  { display: none; }
.sidebar-toggle .icon-collapse { display: block; }

/* ── Sidebar colapsada ─────────────────────────────────────── */

.sidebar--collapsed {
  width: 56px;
}
.sidebar--collapsed .nav-label {
  display: none;
}
.sidebar--collapsed .nav-group__label {
  display: none;
}
.sidebar--collapsed .nav-group__chevron {
  display: none;
}
.sidebar--collapsed .nav-group__header {
  justify-content: center;
  gap: 0;
}
.sidebar--collapsed .nav-btn {
  justify-content: center;
  padding: var(--space-3) 0;
  gap: 0;
}
.sidebar--collapsed .sidebar-user {
  justify-content: center;
  padding: var(--space-2);
}
.sidebar--collapsed .sidebar-divider {
  margin: 0 var(--space-2);
}
/* Quando colapsada: mostra chevron direito (expandir), esconde esquerdo */
.sidebar--collapsed .sidebar-toggle .icon-collapse { display: none; }
.sidebar--collapsed .sidebar-toggle .icon-expand   { display: block; }
/* Centraliza o botão de toggle na sidebar colapsada */
.sidebar--collapsed .sidebar-logo {
  display: flex;
  justify-content: center;
  padding: 18px 0;
}
.sidebar--collapsed .sidebar-toggle {
  position: static;
  transform: none;
}

/* ── Tooltip nos nav-btns quando sidebar colapsada ────────── */
.sidebar--collapsed .nav-btn[data-tooltip] {
  position: relative;
}
.sidebar--collapsed .nav-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-text);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-family: var(--font-body);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 200;
}
.sidebar--collapsed .nav-btn[data-tooltip]:hover::after {
  opacity: 1;
}

/* ── Botão Sair — aparência igual ao nav-btn link ─────────── */
.nav-btn--logout {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}