:root{
  --fsys-navy:#0b2f55;
  --fsys-navy-2:#163b67;
  --fsys-soft:#f5f7fb;
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 70px;
}
html,body,#app{height:100%;}
body{background:var(--fsys-soft);}

#layout{min-height:100vh;}
.sidebar{
  width:var(--sidebar-width); 
  min-height:100vh; 
  color:#fff;
  background:linear-gradient(180deg,var(--fsys-navy),var(--fsys-navy-2));
  transition: width 0.3s ease;
  overflow: hidden;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar .brand{font-weight:700; letter-spacing:.3px;}
.sidebar .brand-text {
  transition: opacity 0.3s ease;
}
.sidebar.collapsed .brand-text {
  opacity: 0;
}

.sidebar .nav-link{
  color:#cfe0ff; 
  border-radius:.5rem; 
  padding:.5rem .75rem;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.sidebar .nav-link:hover,.sidebar .nav-link.active{color:#fff; background:rgba(255,255,255,.12);}

.sidebar .nav-text {
  transition: opacity 0.3s ease;
}
.sidebar.collapsed .nav-text {
  opacity: 0;
}

.sidebar .section-title{
  color:#9fc3ff; 
  text-transform:uppercase; 
  font-size:.75rem; 
  margin:.75rem .75rem .25rem;
  transition: opacity 0.3s ease;
}
.sidebar.collapsed .section-title {
  opacity: 0;
}

.sidebar .version-text {
  transition: opacity 0.3s ease;
}
.sidebar.collapsed .version-text {
  opacity: 0;
}

.topbar{background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.06);}
.card{border:0; box-shadow:0 8px 24px rgba(21,24,26,.06);}
.stat .label{color:#6b7280; font-size:.75rem; text-transform:uppercase; font-weight:600; letter-spacing:.5px;}
.stat .value{font-weight:700; font-size:2rem; color:#1f2937;}

.card-title {
  color: #374151;
  font-weight: 600;
  font-size: 1.1rem;
}

.card-title i {
  color: #6b7280;
}

/* Botão de toggle do menu */
.btn-link {
  color: #6b7280;
  text-decoration: none;
}

.btn-link:hover {
  color: #374151;
}

/* Responsividade para mobile */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    z-index: 1000;
    transform: translateX(0);
    transition: transform 0.3s ease;
  }

  .sidebar.collapsed {
    transform: translateX(-100%);
    width: var(--sidebar-width);
  }

  .sidebar.collapsed .brand-text,
  .sidebar.collapsed .nav-text,
  .sidebar.collapsed .section-title,
  .sidebar.collapsed .version-text {
    opacity: 1;
  }
}

/* Estilos da TV */
.tv-wrapper{min-height:100vh;background:linear-gradient(180deg,#0b2f55,#163b67);}
.tv-top,.tv-bottom{color:#dbe9ff;background:rgba(255,255,255,.06);backdrop-filter:saturate(140%) blur(3px);}
.tv-top{height:56px}
.tv-body{padding:24px;color:#fff}
.tv-card{background:#fff;color:#0b2f55;border:0;border-radius:16px;box-shadow:0 16px 36px rgba(0,0,0,.25)}
.tv-title{font-weight:700}