/* Rotina360 R108 — Meu Dia com grade profissional, launcher uniforme e melhor uso horizontal.
   Referencias de arquitetura visual: Fluent 2 / Carbon — grid responsivo, tiles de grupo uniformes
   e reflow conforme espaco disponivel. Escopo restrito ao Meu Dia. */

/* ===== Launcher / acessos rapidos ===== */
@media (min-width: 761px) {
  html body.r360-meu-dia-edge-r97 #root .r360-md-shell-r97 {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px !important;
    margin: 0 0 14px !important;
    overflow: visible !important;
    border-radius: 16px !important;
  }

  html body.r360-meu-dia-edge-r97 #root .r360-md-group-r97 {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.r360-meu-dia-edge-r97 #root .r360-md-item-r97 {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 62px !important;
    height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--border, #d8e2ef) !important;
    border-radius: 12px !important;
    background: var(--surface, #fff) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: border-color .16s ease, background .16s ease, transform .16s ease !important;
  }

  html body.r360-meu-dia-edge-r97 #root .r360-md-item-r97:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(21,94,239,.34) !important;
    background: color-mix(in srgb, var(--surface, #fff) 94%, #155eef 6%) !important;
  }

  html body.r360-meu-dia-edge-r97 #root .r360-md-target-r97 {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 62px !important;
    height: 62px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    white-space: normal !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.18 !important;
    text-align: left !important;
  }

  /* Normaliza o recipiente visual do icone, removendo divisores e dimensoes antigas. */
  html body.r360-meu-dia-edge-r97 #root .r360-md-target-r97 > :is(span, div):has(> svg),
  html body.r360-meu-dia-edge-r97 #root .r360-md-target-r97 > :is(span, div):has(> img) {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 0 !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--surface, #fff) 88%, #155eef 12%) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body.r360-meu-dia-edge-r97 #root .r360-md-target-r97 img,
  html body.r360-meu-dia-edge-r97 #root .r360-md-target-r97 svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    flex: 0 0 24px !important;
    object-fit: contain !important;
  }
}

/* Tablet / desktop compacto: mantem tiles grandes o suficiente para leitura. */
@media (min-width: 761px) and (max-width: 1099px) {
  html body.r360-meu-dia-edge-r97 #root .r360-md-group-r97 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1100px) {
  html body.r360-meu-dia-edge-r97 #root .r360-md-group-r97 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ===== Estrutura do dashboard ===== */
@media (min-width: 1180px) {
  #root .meu-dia-modern {
    display: grid !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    grid-auto-flow: row dense !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  #root .meu-dia-modern > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  #root .meu-dia-modern > :is(
    .meu-dia-title,
    .meu-dia-shortcuts,
    .r360-md-shell-r97,
    .r360-md-group-r97,
    .meu-dia-kpis,
    .modern-kpi-grid,
    .meu-dia-week,
    .daily-questions
  ) {
    grid-column: 1 / -1 !important;
  }

  /* Faixa operacional principal: 60/40, coerente com a densidade real dos campos. */
  #root .meu-dia-modern > .quick-demand-capture {
    grid-column: span 6 !important;
    min-height: 116px !important;
    align-self: stretch !important;
  }

  #root .meu-dia-modern > .meu-dia-quick-create {
    grid-column: span 4 !important;
    min-height: 116px !important;
    align-self: stretch !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: center !important;
    gap: 9px !important;
  }

  #root .meu-dia-modern > .meu-dia-quick-create > div {
    grid-column: 1 / -1 !important;
    padding: 0 2px 4px !important;
  }

  #root .meu-dia-modern > .meu-dia-quick-create > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    justify-content: center !important;
  }

  /* Se houver wrapper de KPIs, cinco colunas iguais. */
  #root .meu-dia-modern > :is(.meu-dia-kpis, .modern-kpi-grid) {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  #root .meu-dia-modern > :is(.meu-dia-kpis, .modern-kpi-grid) .modern-kpi-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 92px !important;
    padding: 12px 13px !important;
  }

  /* No build atual os KPIs tambem podem ser filhos diretos: 5 x 2 colunas = linha perfeita. */
  #root .meu-dia-modern > .modern-kpi-card {
    grid-column: span 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 92px !important;
    padding: 12px 13px !important;
  }

  #root .meu-dia-modern .modern-kpi-card > strong {
    font-size: clamp(21px, 1.7vw, 27px) !important;
  }

  /* Segunda faixa: plano + agenda/reunioes, 60/40. */
  #root .meu-dia-modern > .ai-day-plan {
    grid-column: span 6 !important;
    min-height: 108px !important;
    align-self: stretch !important;
  }

  #root .meu-dia-modern > :is(.meeting-panel, .agenda-panel) {
    grid-column: span 4 !important;
    min-height: 108px !important;
    align-self: stretch !important;
  }

  /* Se nao houver painel complementar, usa toda a linha em vez de deixar espaco morto. */
  #root .meu-dia-modern:not(:has(> .meeting-panel)):not(:has(> .agenda-panel)) > .ai-day-plan {
    grid-column: 1 / -1 !important;
  }

  #root .meu-dia-modern > :is(.panel, .painel, .agenda-panel, .meeting-panel) {
    margin: 0 !important;
  }
}

/* Desktop medio: preserva densidade sem comprimir controles. */
@media (min-width: 1024px) and (max-width: 1179px) {
  #root .meu-dia-modern {
    gap: 12px !important;
  }

  #root .meu-dia-modern > :is(.meu-dia-kpis, .modern-kpi-grid) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* Tablet: dois KPIs por linha, sem comprimir formularios. */
@media (min-width: 768px) and (max-width: 1023px) {
  #root .meu-dia-modern > :is(.meu-dia-kpis, .modern-kpi-grid) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* Mobile preserva o Edge R97 e o fluxo vertical. */
@media (max-width: 767px) {
  #root .meu-dia-modern {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #root .meu-dia-modern > * {
    grid-column: 1 !important;
  }
}