/* layout.css (com topbar fixa + padrão da imagem) */
*{ box-sizing:border-box }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
}

/* ===== Sidebar ===== */
.sidebar{
  position:fixed; left:0; top:0; bottom:0;
  width:260px;
  background: var(--side-bg);
  border-right: 1px solid rgba(255,255,255,.08);
  padding:18px;
  overflow:auto;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:18px;
}

.brand-badge{
  width:44px; height:44px;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 25px rgba(0,0,0,.22);
}

.brand-title{
  color: var(--side-text);
  font-weight:900;
  letter-spacing:.5px;
}

.brand-sub{
  color: var(--side-muted);
  font-size:12px;
  margin-top:2px;
}

/* menu */
.nav{ display:flex; flex-direction:column; gap:8px }

.nav-item{
  text-decoration:none;
  color: var(--side-text);
  padding:10px 12px;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: .15s;
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-item:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  transform: translateY(-1px);
}

/* item ativo */
.nav-item.active{
  background: rgba(255,255,255,.08);
  border-color: rgba(245,166,35,.45);
  box-shadow: inset 3px 0 0 var(--accent);
}

.nav-sep{ height:10px }

/* ===== App / Content ===== */
.app{
  margin-left:260px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ===== Topbar (FIXA) ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;

  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;

  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 25px rgba(15,23,42,.06);
}

/* Pills */
.pill{
  border:1px solid rgba(245,166,35,.35);
  padding:7px 10px;
  border-radius:999px;
  color: #7A4B00;
  background: rgba(245,166,35,.12);
  font-size:12px;
  font-weight:700;
}

.userbox{ display:flex; align-items:center; gap:10px }

.avatar{
  width:36px; height:36px;
  border-radius:12px;
  display:grid; place-items:center;
  background: rgba(245,166,35,.18);
  border:1px solid rgba(245,166,35,.35);
  color: #7A4B00;
  font-weight:900;
}

.usertext .uname{ font-weight:800; color: var(--text) }
.usertext .urole{ font-size:12px; color: var(--muted) }

.logout{
  margin-left:10px;
  text-decoration:none;
  color: var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
  background: #fff;
}
.logout:hover{
  border-color: rgba(245,166,35,.40);
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
}

/* ===== Área de conteúdo ===== */
.content{
  padding:18px;
  max-width:1200px;
}

/* ===== Flash messages ===== */
.flash{
  border:1px solid var(--line);
  background: var(--card);
  padding:10px 12px;
  border-radius:12px;
  margin-bottom:14px;
  box-shadow: 0 10px 25px rgba(15,23,42,.06);
}
.flash.success{ border-color: rgba(45,190,141,.35) }
.flash.error{ border-color: rgba(226,85,85,.35) }

/* ===== Table base ===== */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background: var(--card);
  box-shadow: 0 10px 25px rgba(15,23,42,.06);
}

.table th, .table td{
  padding:12px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}

.table thead th{
  background: #F6F8FB;
  color: var(--muted);
  font-weight:800;
}

.table tbody tr:hover td{
  background: rgba(245,166,35,.07);
}

.table tr:last-child td{ border-bottom:none }

.link{ color: #7A4B00; text-decoration:none }
.link:hover{ text-decoration:underline }

/* ===== Tags ===== */
.tag{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:12px;
  background:#fff;
}

.tag.uploaded{
  border-color: rgba(245,166,35,.35);
  color: #7A4B00;
  background: rgba(245,166,35,.10);
}
.tag.validated{
  border-color: rgba(45,190,141,.35);
  color: #0F5B45;
  background: rgba(45,190,141,.10);
}
.tag.error, .tag.errorlog{
  border-color: rgba(226,85,85,.35);
  color: #7A1F1F;
  background: rgba(226,85,85,.08);
}
.tag.warning{
  border-color: rgba(245,166,35,.30);
  color: #7A4B00;
  background: rgba(245,166,35,.10);
}
.tag.info{
  border-color: rgba(30,42,53,.15);
  color: var(--muted);
  background: rgba(30,42,53,.04);
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .sidebar{ position:relative; width:auto; height:auto }
  .app{ margin-left:0 }
}
.brand-badge{
  width:44px;
  height:44px;
  border-radius:14px;
  background: linear-gradient(135deg, #F5A623, #E89412);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 25px rgba(245,166,35,.25);
}

.brand-z{
  color:#fff;
  font-weight:900;
  font-size:20px;
}
.brand-badge{
  width:44px;
  height:44px;
  border-radius:14px;
  background:#fff;
  border: 1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:6px;
}

.brand-badge img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}