/* ============================================
   OFFICE PANEL - Estrutura Básica
   ============================================ */

/* Office Panel Container */
.office-panel{
  width:300px;
  min-width:300px;
  max-width:300px;
  height:100%;
  display:flex;
  flex-direction:column;
  background:#2a2a3e;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

/* Office Header */
.office-header{
  background:linear-gradient(180deg, #3a3a52 0%, #2a2a3e 100%);
  padding:12px 16px;
  border-bottom:2px solid #1a1a2e;
}

.office-title{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:#e0e0ff;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
}

/* Office Viewport - Main visual area */
.office-viewport{
  flex:1;
  position:relative;
  background:linear-gradient(180deg, #4a4a6a 0%, #3a3a52 50%, #2a2a3e 100%);
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:12px;
}

/* ============================================
   VIDEO GRID - Videochamada 3x3
   ============================================ */

/* Container principal do grid */
.video-grid{
  width:100%;
  min-height:400px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Cada fileira (row) representa um cargo */
.video-row{
  flex:1;
  display:flex;
  gap:8px;
}

/* Cada janela individual da videochamada */
.video-tile{
  flex:1;
  background:#1a1a2e;
  border:2px solid #3a3a52;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
  transition:border-color 0.3s ease, transform 0.2s ease;
}

.video-tile:hover{
  border-color:#5a5a7a;
  transform:translateY(-2px);
}

/* Área do sprite (quadrada, superior) */
.tile-sprite{
  width:100%;
  aspect-ratio:1;
  background:linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%);
  border-bottom:2px solid #3a3a52;
  position:relative;
  overflow:hidden;
}

/* Camadas do personagem (sistema de composição) */
.character-layer{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
}

/* Camada do corpo do personagem (inferior) */
.character-body{
  z-index:1;
}

/* Camada do computador (superior - sempre acima) */
.character-computer{
  z-index:2;
}

/* Camada offline (personagens não desbloqueados) */
.character-offline{
  z-index:1;
  opacity:0.6;
}

/* Área de informações (inferior) */
.tile-info{
  flex:1;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
  background:#1a1a2e;
}

/* Nome do personagem */
.info-name{
  font-size:12px;
  font-weight:700;
  color:#e0e0ff;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Cargo */
.info-role{
  font-size:10px;
  color:#9a9ab0;
  text-align:center;
  margin-bottom:4px;
}

/* Cores por fileira (opcional - visual debug) */
.video-row[data-role-type="Analista"] .video-tile{
  border-color:#3a5a7a;
}

.video-row[data-role-type="Analista"] .tile-sprite{
  background:#82A1B1;
}

.video-row[data-role-type="Programador"] .video-tile{
  border-color:#3a7a5a;
}

.video-row[data-role-type="Programador"] .tile-sprite{
  background:#8DB596;
}

.video-row[data-role-type="QA/Tester"] .video-tile{
  border-color:#7a5a3a;
}

.video-row[data-role-type="QA/Tester"] .tile-sprite{
  background:#E3D081;
}

/* Office Footer */
.office-footer{
  background:linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
  padding:10px 16px;
  border-top:2px solid #3a3a52;
}

.office-status{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
}

.status-icon{
  font-size:16px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.status-text{
  font-size:12px;
  color:#b0b0d0;
  font-weight:500;
}

/* Responsive adjustments */
@media (max-width:1200px){
  .office-panel{
    width:240px;
    min-width:240px;
    max-width:240px;
  }
}

@media (max-width:768px){
  .office-panel{
    width:100%;
    min-width:320px;
    max-width:420px;
    height:auto;
    min-height:450px;
    flex:0 0 auto;
  }
  
  .office-viewport{
    min-height:320px;
  }
}

@media (max-width:480px){
  .office-panel{
    max-width:100%;
  }
}