/*
 * SiteImobi — Componentes Globais R7.1
 * Componentes reutilizáveis que usam os tokens definidos em design-system.css.
 * Não criar variações locais equivalentes em páginas específicas.
 */

/* Cabeçalho de página */
.msi-page-header{
  margin:0 0 var(--msi-space-5);
  padding:var(--msi-space-5);
  border:1px solid var(--msi-color-border);
  border-radius:var(--msi-radius-lg);
  background:var(--msi-color-surface);
  box-shadow:var(--msi-shadow-sm);
}
.msi-page-header__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--msi-space-4);
  flex-wrap:wrap;
}
.msi-page-header h1,
.msi-page-header__title{
  margin:0;
  color:var(--msi-color-text);
  font-size:var(--msi-font-size-2xl);
  font-weight:var(--msi-font-weight-bold);
  line-height:1.2;
}
.msi-page-header p,
.msi-page-header__subtitle{
  margin:6px 0 0;
  color:var(--msi-color-text-muted);
  font-size:var(--msi-font-size-md);
  line-height:1.45;
}

/* Tabs e toolbar */
.msi-tabs{
  display:flex;
  align-items:center;
  gap:var(--msi-space-2);
  flex-wrap:wrap;
  margin:0 0 var(--msi-space-4);
}
.msi-tab{
  display:inline-flex;
  min-height:var(--msi-control-height-sm);
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid var(--msi-color-border);
  border-radius:var(--msi-radius-md);
  background:#fff;
  color:var(--msi-color-secondary);
  text-decoration:none;
  font-size:var(--msi-font-size-sm);
  font-weight:var(--msi-font-weight-semibold);
  transition:background var(--msi-transition),border-color var(--msi-transition),color var(--msi-transition),box-shadow var(--msi-transition);
}
.msi-tab:hover{background:#F8FAFC;border-color:var(--msi-color-border-strong);color:var(--msi-color-text);text-decoration:none;}
.msi-tab.is-active,.msi-tab.active{background:var(--msi-color-primary-soft);border-color:rgba(22,119,242,.28);color:var(--msi-color-primary-hover);}
.msi-tab:focus-visible{outline:0;box-shadow:var(--msi-focus-ring);}
.msi-toolbar{
  display:flex;
  align-items:end;
  gap:var(--msi-space-3);
  flex-wrap:wrap;
  margin-bottom:var(--msi-space-4);
}
.msi-toolbar > .floating,
.msi-toolbar > .msi-field{flex:1 1 220px;min-width:180px;}

/* Card estendido */
.msi-card--flush{padding:0;overflow:hidden;}
.msi-card__body{padding:var(--msi-space-5);}
.msi-card__footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--msi-space-2);
  flex-wrap:wrap;
  padding-top:var(--msi-space-4);
  margin-top:var(--msi-space-4);
  border-top:1px solid var(--msi-color-border);
}

/* Ações de formulário */
.msi-form-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--msi-space-2);
  flex-wrap:wrap;
  margin-top:var(--msi-space-4);
}

/* Lista simples */
.msi-list{display:flex;flex-direction:column;gap:var(--msi-space-2);}
.msi-list__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--msi-space-4);
  min-width:0;
  padding:12px 14px;
  border:1px solid var(--msi-color-border);
  border-radius:var(--msi-radius-md);
  background:#fff;
}

/* Estado vazio */
.msi-empty-state{
  display:flex;
  min-height:150px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--msi-space-2);
  padding:var(--msi-space-6);
  border:1px dashed var(--msi-color-border-strong);
  border-radius:var(--msi-radius-lg);
  background:#F8FAFC;
  color:var(--msi-color-text-muted);
  text-align:center;
}
.msi-empty-state i{font-size:28px;color:#94A3B8;}
.msi-empty-state strong{color:var(--msi-color-text);font-size:var(--msi-font-size-lg);}

/* Métricas compactas */
.msi-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--msi-space-3);margin:0 0 var(--msi-space-4);}
.msi-kpi{
  display:flex;
  min-height:88px;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  padding:var(--msi-space-4);
  border:1px solid var(--msi-color-border);
  border-radius:var(--msi-radius-lg);
  background:#fff;
  box-shadow:var(--msi-shadow-sm);
  color:var(--msi-color-text);
  text-decoration:none;
}
.msi-kpi:hover{border-color:var(--msi-color-border-strong);text-decoration:none;}
.msi-kpi span{color:var(--msi-color-text-muted);font-size:var(--msi-font-size-sm);font-weight:var(--msi-font-weight-medium);}
.msi-kpi strong{color:var(--msi-color-text);font-size:var(--msi-font-size-xl);font-weight:var(--msi-font-weight-bold);line-height:1.1;}

/* Badge: ponte temporária para nomes legados enquanto telas são migradas. */
.msi-badge.green,.msi-badge.verde{background:var(--msi-color-success-soft);color:var(--msi-color-success);}
.msi-badge.orange,.msi-badge.laranja{background:var(--msi-color-warning-soft);color:var(--msi-color-warning);}
.msi-badge.red,.msi-badge.vermelho{background:var(--msi-color-danger-soft);color:var(--msi-color-danger);}
.msi-badge.blue,.msi-badge.azul{background:var(--msi-color-primary-soft);color:var(--msi-color-primary-hover);}
.msi-badge.gray,.msi-badge.cinza{background:#F1F5F9;color:var(--msi-color-secondary);}

/* Menu global de ações (3 pontos). O painel é posicionado pelo ui.js em fixed para não ser cortado por tabelas responsivas. */
.msi-action-menu{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.msi-action-trigger{
  appearance:none;
  width:var(--msi-control-height-sm);
  height:var(--msi-control-height-sm);
  display:inline-grid;
  place-items:center;
  padding:0;
  border:1px solid var(--msi-color-border-strong);
  border-radius:var(--msi-radius-md);
  background:#fff;
  color:var(--msi-color-secondary);
  cursor:pointer;
  font:inherit;
  transition:background var(--msi-transition),border-color var(--msi-transition),color var(--msi-transition),box-shadow var(--msi-transition);
}
.msi-action-trigger:hover{background:#F8FAFC;border-color:#94A3B8;color:var(--msi-color-text);}
.msi-action-trigger:focus-visible{outline:0;box-shadow:var(--msi-focus-ring);}
.msi-action-panel{
  position:fixed;
  z-index:10050;
  display:none;
  min-width:220px;
  max-width:min(320px,calc(100vw - 16px));
  padding:6px;
  border:1px solid var(--msi-color-border);
  border-radius:var(--msi-radius-lg);
  background:#fff;
  box-shadow:var(--msi-shadow-md);
}
.msi-action-menu.is-open .msi-action-panel{display:grid;gap:2px;}
.msi-action-item,
.msi-action-form > button{
  appearance:none;
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:0;
  border-radius:var(--msi-radius-md);
  background:transparent;
  color:var(--msi-color-secondary);
  text-align:left;
  text-decoration:none;
  font-family:var(--msi-font-family);
  font-size:var(--msi-font-size-sm);
  font-weight:var(--msi-font-weight-semibold);
  line-height:1.25;
  cursor:pointer;
  transition:background var(--msi-transition),color var(--msi-transition);
}
.msi-action-form{display:block;margin:0;padding:0;}
.msi-action-item:hover,
.msi-action-form > button:hover{background:#F8FAFC;color:var(--msi-color-text);text-decoration:none;}
.msi-action-item i,
.msi-action-form > button i{width:18px;text-align:center;color:#64748B;}
.msi-action-item--danger,
.msi-action-form > button.msi-action-item--danger{color:#B91C1C;}
.msi-action-item--danger i,
.msi-action-form > button.msi-action-item--danger i{color:var(--msi-color-danger);}
.msi-action-separator{height:1px;margin:4px;background:var(--msi-color-border);}
.msi-action-cell{width:52px;text-align:right;white-space:nowrap;}

/* Compatibilidade gradual: componentes globais ganham prioridade somente quando a classe msi-* também existe. */
.msi-card.card{color:var(--msi-color-text);}
.msi-btn.btn,.msi-btn.btn-outline,.msi-btn.btn-mini{font-family:var(--msi-font-family);}
.msi-table.table{font-family:var(--msi-font-family);}

@media (max-width:1024px){
  .msi-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:768px){
  .msi-page-header{padding:var(--msi-space-4);}
  .msi-page-header__inner{align-items:stretch;}
  .msi-toolbar{align-items:stretch;}
  .msi-toolbar > *{flex:1 1 100%;}
  .msi-list__item{align-items:flex-start;flex-direction:column;}
  .msi-form-actions{align-items:stretch;}
  .msi-form-actions > .msi-btn{flex:1 1 auto;}
}
@media (max-width:480px){
  .msi-kpi-grid{grid-template-columns:1fr;}
  .msi-tabs{display:grid;grid-template-columns:1fr 1fr;}
  .msi-tab{width:100%;}
  .msi-form-actions{flex-direction:column;}
  .msi-form-actions > .msi-btn{width:100%;}
}


/* R12.2 - Avatar global do painel */
/* Avatar do painel: foto do perfil > logomarca > placeholder azul */
.top-user .user-mini .avatar-round{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:50%!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#EAF3FF!important;
    border:1px solid #BBD7FF!important;
    color:#1677F2!important;
    box-shadow:none!important;
}
.top-user .user-mini .avatar-round img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    display:block!important;
}
.top-user .user-mini .avatar-round i{
    font-size:19px!important;
    color:#1677F2!important;
}
.top-user .user-mini .avatar-round.is-logo img{
    object-fit:contain!important;
    padding:5px!important;
    background:#fff!important;
}