/* ============================================================
   DASHBOARD STORYS — ANÁLISE GERAL FINAL
============================================================ */

.analysis-general-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}


/* ------------------------------------------------------------
   MODAL
------------------------------------------------------------ */

.analysis-modal{
  position:fixed;
  inset:0;
  z-index:50000;
}

.analysis-hidden{
  display:none !important;
}

.analysis-backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(2,8,23,.78);

  backdrop-filter:
    blur(7px);
}

.analysis-panel{
  position:relative;
  z-index:2;

  width:min(
    960px,
    calc(100% - 40px)
  );

  max-height:
    calc(100vh - 70px);

  margin:35px auto;

  overflow-y:auto;

  padding:28px;

  border:
    1px solid rgba(96,165,250,.20);

  border-radius:24px;

  background:
    linear-gradient(
      180deg,
      #11141e 0%,
      #0c182d 100%
    );

  box-shadow:
    0 40px 120px rgba(0,0,0,.55);
}


/* ------------------------------------------------------------
   HEADER
------------------------------------------------------------ */

.analysis-header{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:20px;

  padding-bottom:20px;

  border-bottom:
    1px solid rgba(148,163,184,.12);
}

.analysis-kicker{
  display:block;

  margin-bottom:5px;

  color:#67e8f9;

  font-size:10px;
  font-weight:900;

  letter-spacing:.15em;
}

.analysis-header h2{
  margin:0;

  color:#fff;

  font-size:24px;
}

.analysis-header p{
  margin:7px 0 0;

  color:#8092ad;

  font-size:11px;
}

.analysis-close{
  width:38px;
  height:38px;

  border:
    1px solid rgba(148,163,184,.18);

  border-radius:11px;

  background:
    rgba(255,255,255,.03);

  color:#a8b6ca;

  font-size:22px;

  cursor:pointer;
}


/* ------------------------------------------------------------
   LOADING
------------------------------------------------------------ */

.analysis-loading{
  min-height:300px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:12px;
}

.analysis-spinner{
  width:42px;
  height:42px;

  border:
    3px solid rgba(96,165,250,.16);

  border-top-color:#67e8f9;

  border-radius:50%;

  animation:
    analysis-spin .9s linear infinite;
}

@keyframes analysis-spin{
  to{
    transform:rotate(360deg);
  }
}


/* ------------------------------------------------------------
   ERRO
------------------------------------------------------------ */

.analysis-error{
  margin-top:20px;

  padding:14px 16px;

  border:
    1px solid rgba(248,113,113,.26);

  border-radius:12px;

  background:
    rgba(127,29,29,.18);

  color:#fecaca;

  font-size:12px;
}


/* ------------------------------------------------------------
   CONTEÚDO
------------------------------------------------------------ */

.analysis-content{
  padding-top:20px;
}

.analysis-section{
  margin-top:14px;

  padding:19px;

  border:
    1px solid rgba(96,165,250,.14);

  border-radius:15px;

  background:
    rgba(2,8,23,.17);
}

.analysis-section:first-child{
  margin-top:0;
}

.analysis-section-label{
  display:block;

  margin-bottom:10px;

  color:#67e8f9;

  font-size:9px;
  font-weight:900;

  letter-spacing:.12em;
}

.analysis-section p{
  margin:0;

  color:#c8d2e2;

  font-size:13px;

  line-height:1.65;
}


/* ------------------------------------------------------------
   COLUNAS
------------------------------------------------------------ */

.analysis-columns{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:14px;

  margin-top:14px;
}

.analysis-card{
  padding:19px;

  border-radius:15px;

  background:
    rgba(2,8,23,.17);
}

.analysis-card.positive{
  border:
    1px solid rgba(52,211,153,.18);
}

.analysis-card.problems{
  border:
    1px solid rgba(248,113,113,.18);
}

.analysis-card ul,
.analysis-section ol{
  margin:0;

  padding-left:19px;
}

.analysis-card li,
.analysis-section li{
  margin-top:9px;

  color:#c8d2e2;

  font-size:12px;

  line-height:1.55;
}


/* ------------------------------------------------------------
   TENDÊNCIA
------------------------------------------------------------ */

.analysis-trend-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;
}

.analysis-trend-head
.analysis-section-label{
  margin-bottom:0;
}

#analysis-trend-direction{
  color:#93c5fd;

  font-size:12px;
}


/* ------------------------------------------------------------
   SOBRE OS DADOS
------------------------------------------------------------ */

.analysis-data-note{
  margin-top:14px;

  padding:14px 16px;

  border:
    1px solid rgba(148,163,184,.13);

  border-radius:12px;

  background:
    rgba(148,163,184,.05);
}

.analysis-data-note strong{
  display:block;

  margin-bottom:6px;

  color:#9caec6;

  font-size:10px;
}

.analysis-data-note p{
  margin:0;

  color:#7184a1;

  font-size:10px;

  line-height:1.5;
}


/* ------------------------------------------------------------
   FOOTER
------------------------------------------------------------ */

.analysis-footer{
  margin-top:20px;

  padding-top:16px;

  border-top:
    1px solid rgba(148,163,184,.10);

  color:#64748b;

  font-size:9px;
}


/* ============================================================
   MOBILE
============================================================ */

@media(max-width:700px){

  #filters-toolbar-toggle,
  #analysis-general-button,
  a[href*="/gestao"]{

    width:100% !important;

    min-height:46px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    margin-top:10px !important;
  }

  .analysis-panel{
    width:
      calc(100% - 20px);

    max-height:
      calc(100vh - 20px);

    margin:10px auto;

    padding:19px;

    border-radius:18px;
  }

  .analysis-header h2{
    font-size:20px;
  }

  .analysis-columns{
    grid-template-columns:1fr;
  }

}

@media(max-width:430px){

  .analysis-panel{
    padding:16px;
  }

  .analysis-section,
  .analysis-card{
    padding:15px;
  }

}


/* ============================================================
   ANÁLISE — PERÍODO / ACTUALIZAÇÃO
============================================================ */

#analysis-period{
  margin-top:9px !important;

  color:#9fb4d3 !important;

  font-size:11px !important;

  font-weight:700 !important;
}


#analysis-generated-at{
  display:block;

  color:#7f93b0 !important;

  font-size:10px !important;

  font-weight:600 !important;
}


.analysis-footer{
  text-align:right;
}


@media(max-width:700px){

  #analysis-period{
    font-size:10px !important;
  }


  .analysis-footer{
    text-align:left;
  }

}



/* ============================================================
   ANÁLISE — GRÁFICOS V2
============================================================ */

.analysis-chart-card{
  margin-top:14px;

  padding:19px;

  border:
    1px solid rgba(96,165,250,.14);

  border-radius:15px;

  background:
    rgba(2,8,23,.17);
}


.analysis-chart-title{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:20px;

  margin-bottom:18px;
}


.analysis-chart-title
.analysis-section-label{
  margin-bottom:4px;
}


.analysis-chart-subtitle{
  display:block;

  color:#7184a1;

  font-size:10px;
}


.analysis-chart-legend{
  display:flex;

  align-items:center;

  gap:14px;

  color:#8294ae;

  font-size:9px;
}


.analysis-chart-legend span{
  display:flex;

  align-items:center;

  gap:5px;
}


.analysis-dot{
  display:inline-block;

  width:7px;
  height:7px;

  border-radius:50%;
}


.analysis-dot.instagram{
  background:#f472b6;
}


.analysis-dot.facebook{
  background:#60a5fa;
}


/* ------------------------------------------------------------
   GRÁFICO DE LINHAS
------------------------------------------------------------ */

.analysis-line-chart{
  width:100%;

  min-height:245px;

  overflow:hidden;
}


.analysis-line-chart svg{
  display:block;

  width:100%;
  height:auto;

  overflow:visible;
}


.analysis-chart-grid-line{
  stroke:
    rgba(148,163,184,.12);

  stroke-width:1;
}


.analysis-chart-axis-text{
  fill:#64748b;

  font-size:9px;
}


.analysis-chart-line-instagram{
  fill:none;

  stroke:#f472b6;

  stroke-width:2.2;

  stroke-linecap:round;
  stroke-linejoin:round;
}


.analysis-chart-line-facebook{
  fill:none;

  stroke:#60a5fa;

  stroke-width:2.2;

  stroke-linecap:round;
  stroke-linejoin:round;
}


.analysis-chart-point-instagram{
  fill:#f472b6;
}


.analysis-chart-point-facebook{
  fill:#60a5fa;
}


.analysis-chart-empty{
  min-height:150px;

  display:flex;

  align-items:center;
  justify-content:center;

  color:#64748b;

  font-size:11px;
}


/* ------------------------------------------------------------
   RETENÇÃO
------------------------------------------------------------ */

.analysis-retention-platform{
  margin-top:19px;
}


.analysis-retention-platform:first-child{
  margin-top:0;
}


.analysis-retention-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-bottom:9px;
}


.analysis-retention-head strong{
  color:#dce7f7;

  font-size:11px;
}


.analysis-retention-row{
  display:grid;

  grid-template-columns:
    125px 1fr 52px;

  align-items:center;

  gap:10px;

  margin-top:8px;
}


.analysis-retention-label{
  color:#7f91ab;

  font-size:9px;
}


.analysis-retention-track{
  height:9px;

  overflow:hidden;

  border-radius:999px;

  background:
    rgba(148,163,184,.11);
}


.analysis-retention-fill{
  height:100%;

  border-radius:999px;
}


.analysis-retention-fill.instagram{
  background:#f472b6;
}


.analysis-retention-fill.facebook{
  background:#60a5fa;
}


.analysis-retention-value{
  color:#dbe5f4;

  font-size:10px;
  font-weight:800;

  text-align:right;
}


/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media(max-width:700px){

  .analysis-chart-card{
    padding:15px;
  }


  .analysis-chart-title{
    flex-direction:column;

    gap:8px;
  }


  .analysis-line-chart{
    min-height:200px;
  }


  .analysis-retention-row{
    grid-template-columns:
      94px 1fr 44px;

    gap:7px;
  }


  .analysis-retention-label{
    font-size:8px;
  }


  .analysis-chart-legend{
    gap:10px;
  }

}


@media(max-width:430px){

  .analysis-line-chart{
    min-height:180px;
  }


  .analysis-chart-axis-text{
    font-size:8px;
  }

}



/* ============================================================
   ANÁLISE — IMPRIMIR V1
============================================================ */

.analysis-header-actions{
  display:flex;

  align-items:center;

  gap:8px;

  flex:0 0 auto;
}


.analysis-print{
  height:38px;

  padding:0 12px;

  border:
    1px solid rgba(34,211,238,.38);

  border-radius:11px;

  background:
    rgba(34,211,238,.08);

  color:#67e8f9;

  font-size:10px;

  font-weight:850;

  white-space:nowrap;

  cursor:pointer;
}


.analysis-print:hover{
  border-color:
    rgba(34,211,238,.65);

  background:
    rgba(34,211,238,.14);

  color:#ffe19a;
}


@media(max-width:700px){

  .analysis-header-actions{
    gap:6px;
  }


  .analysis-print{
    height:36px;

    padding:0 9px;

    font-size:9px;
  }


  .analysis-close{
    width:36px;
    height:36px;
  }

}



/* ============================================================
   ANÁLISE — IMPRESSÃO A4
============================================================ */

@media print{

  @page{
    size:A4 portrait;
    margin:12mm;
  }


  html,
  body{
    width:auto !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    background:#ffffff !important;

    color:#111827 !important;
  }


  /*
    Esconder toda a aplicação.
  */

  body > *{
    display:none !important;
  }


  /*
    Mostrar apenas o modal.
  */

  #analysis-general-modal{
    display:block !important;

    position:static !important;

    inset:auto !important;

    width:100% !important;

    height:auto !important;

    overflow:visible !important;

    background:#ffffff !important;
  }


  #analysis-general-modal
  .analysis-backdrop{
    display:none !important;
  }


  #analysis-general-modal
  .analysis-panel{
    display:block !important;

    position:static !important;

    width:100% !important;
    max-width:none !important;

    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    border:0 !important;
    border-radius:0 !important;

    background:#ffffff !important;

    box-shadow:none !important;
  }


  /*
    Cabeçalho
  */

  .analysis-header{
    padding:0 0 8mm !important;

    border-bottom:
      1px solid #d6dce5 !important;
  }


  .analysis-kicker{
    color:#8a6410 !important;

    font-size:9pt !important;
  }


  .analysis-header h2{
    color:#111827 !important;

    font-size:20pt !important;
  }


  #analysis-period{
    color:#475569 !important;

    font-size:9pt !important;
  }


  .analysis-header-actions{
    display:none !important;
  }


  /*
    Loading / erro nunca imprimem
  */

  .analysis-loading,
  .analysis-error{
    display:none !important;
  }


  .analysis-content{
    display:block !important;

    padding-top:6mm !important;
  }


  /*
    Secções
  */

  .analysis-section,
  .analysis-card,
  .analysis-chart-card,
  .analysis-data-note{

    break-inside:avoid;

    margin-top:5mm !important;

    padding:5mm !important;

    border:
      1px solid #d9e0e9 !important;

    border-radius:3mm !important;

    background:#ffffff !important;
  }


  .analysis-section-label{
    color:#8a6410 !important;

    font-size:8pt !important;
  }


  .analysis-section p,
  .analysis-card li,
  .analysis-section li{

    color:#1e293b !important;

    font-size:9pt !important;

    line-height:1.45 !important;
  }


  /*
    Blocos positivo / problema
  */

  .analysis-card.positive{
    border-color:#a9d7c5 !important;
  }


  .analysis-card.problems{
    border-color:#e4b3b3 !important;
  }


  .analysis-columns{
    display:grid !important;

    grid-template-columns:
      1fr 1fr !important;

    gap:5mm !important;
  }


  /*
    Gráficos
  */

  .analysis-chart-title{
    margin-bottom:4mm !important;
  }


  .analysis-chart-subtitle,
  .analysis-chart-legend{
    color:#64748b !important;
  }


  .analysis-line-chart{
    min-height:0 !important;
  }


  .analysis-line-chart svg{
    width:100% !important;

    max-height:70mm !important;
  }


  .analysis-chart-grid-line{
    stroke:#dce2ea !important;
  }


  .analysis-chart-axis-text{
    fill:#64748b !important;
  }


  /*
    Retenção
  */

  .analysis-retention-head strong,
  .analysis-retention-value{
    color:#1e293b !important;
  }


  .analysis-retention-label{
    color:#64748b !important;
  }


  .analysis-retention-track{
    background:#e5e7eb !important;
  }


  /*
    Tendência
  */

  #analysis-trend-direction{
    color:#1d4ed8 !important;
  }


  /*
    Nota de dados
  */

  .analysis-data-note strong{
    color:#475569 !important;
  }


  .analysis-data-note p{
    color:#64748b !important;
  }


  /*
    Rodapé
  */

  .analysis-footer{
    display:block !important;

    margin-top:6mm !important;

    padding-top:4mm !important;

    border-top:
      1px solid #d9e0e9 !important;

    color:#64748b !important;

    font-size:8pt !important;

    text-align:left !important;
  }


  /*
    Forçar cores dos gráficos.
    Necessário para alguns browsers.
  */

  *{
    -webkit-print-color-adjust:
      exact !important;

    print-color-adjust:
      exact !important;
  }

}


/* ============================================================
   STORYS — MOBILE: ESCONDER GESTÃO PARA OPERADOR
============================================================ */

@media(max-width:700px){

  html.storys-role-operador
  a[href*="/gestao"]{
    display:none !important;
  }

}



/* ============================================================
   ACTUALIZAR ANALISE MANUAL V1
============================================================ */

.analysis-refresh-manual{
  display:none;

  height:38px;

  padding:0 12px;

  border:
    1px solid rgba(96,165,250,.38);

  border-radius:11px;

  background:
    rgba(59,130,246,.09);

  color:#93c5fd;

  font-size:10px;

  font-weight:850;

  white-space:nowrap;

  cursor:pointer;
}


html.storys-analysis-admin
.analysis-refresh-manual{
  display:inline-flex;

  align-items:center;
  justify-content:center;
}


.analysis-refresh-manual:hover{
  border-color:
    rgba(96,165,250,.65);

  background:
    rgba(59,130,246,.15);

  color:#dbeafe;
}


.analysis-refresh-manual:disabled{
  opacity:.48;

  cursor:wait;
}


/* nunca imprimir */

@media print{

  .analysis-refresh-manual{
    display:none !important;
  }

}


@media(max-width:700px){

  .analysis-refresh-manual{
    height:36px;

    padding:0 9px;

    font-size:9px;
  }

}


@media(max-width:430px){

  .analysis-header-actions{
    flex-wrap:wrap;

    justify-content:flex-end;
  }


  .analysis-refresh-manual{
    order:1;
  }


  .analysis-print{
    order:2;
  }


  .analysis-close{
    order:3;
  }

}