/*=========================
    NAVBAR & DROPDOWNS
=========================*/
.navbar-custom-bg,
.dropdown-profile { background-color: #2A663D !important; }

.nav-item .nav-link:hover,
.nav-link:hover,
.nav-link:hover span { color: #2A663D !important; }

.nav-link:hover svg,
.nav-link:hover span svg { stroke: #2A663D !important; }

.nav-item .nav-link:hover,
.nav-item .nav-link:hover i { color: #a3a6a8 !important; }

/*=========================
        BUTTONS
=========================*/
.btn-custom {
  background: linear-gradient(94deg, #669850 -5.09%, #2A663D 107.28%);
  color: #fff !important;
}
.btn-custom:hover {
  background: linear-gradient(94deg, #669850 -5.09%, #3a8a54 107.28%);
  color: #fff !important;
}
.btn-gn { color: #2a7542; }

.btn-outline-gn,
.btn-outline-green {
  color: #0b3819;
  border-color: #0b3819;
  --phoenix-btn-focus-shadow-rgb: 239, 242, 246;
  --phoenix-btn-active-color: #eff2f6;
  --phoenix-btn-active-bg: #bb4545;
  --phoenix-btn-active-border-color: #0b3819;
  --phoenix-btn-active-shadow: initial;
  --phoenix-btn-disabled-color: #eff2f6;
  --phoenix-btn-disabled-bg: transparent;
  --phoenix-btn-disabled-border-color: #eff2f6;
  --phoenix-gradient: none;
}
.btn-outline-gn {
  --phoenix-btn-hover-color: #0b3819;
  --phoenix-btn-hover-bg: #e1e4e9;
  --phoenix-btn-hover-border-color: #0b3819;
}
.btn-outline-green {
  --phoenix-btn-hover-color: white;
  --phoenix-btn-hover-bg: #0b3819;
  --phoenix-btn-hover-border-color: #0b3819;
}

/*=========================
        CARDS
=========================*/
.card-custom {
  background: radial-gradient(140.92% 140.92% at 50% 4.5%, #BDD0C3 16.08%, #FFF 100%);
  border: 2px solid #2A663D !important;
}
.card-custom-gold {
  background:
    radial-gradient(ellipse farthest-corner at right bottom, #FFF6D3 0%, #FFECB3 8%, #E6C985 30%, #C2A679 40%, transparent 80%),
    radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFF7D9 8%, #EAD7A1 25%, #A89064 62.5%, #A89064 100%);
  border: 2px solid #D4AF37 !important;
}

/* Padding interno dos cards */
.card-custom,
.card-custom-gold,
.card { padding: 1.25rem; } /* ~20px */

/*=========================
        DIVIDERS
=========================*/
.divider-modern {
  width: 100%;
  margin: 30px 0;
  border-bottom: 2px dashed #0b3819;
  text-align: center;
  line-height: 0.1em;
}
.divider-modern span {
  background: #fff;
  padding: 0 15px;
  color: #0b3819;
  font-weight: 500;
  font-size: 14px;
}

/*=========================
        FORMS
=========================*/
.form-label-green,
.form-label-gold {
  margin-bottom: 0.5rem;
  font-size: 0.64rem;
  font-weight: 800;
  padding-left: 16px; /* base; será zerado no bloco de alinhamento abaixo */
  line-height: 1.2;
  text-transform: uppercase;
}
.form-label-green { color: #0b3819; }
.form-label-gold  { color: #947A27; margin-bottom: 0; }
.form-green { color: #0b3819; font-weight: 800; }
.form-green-regular { color: #0b3819; font-weight: 400; }

/*=========================
        ALERTS
=========================*/
.alert-green,
.alert-outline-green {
  font-weight: 800;
  text-align: center;
  --phoenix-alert-color: #062710;
  --phoenix-alert-link-color: #0b3819;
}
.alert-green {
  --phoenix-alert-bg: #588867;
  --phoenix-alert-border-color: #0b3819;
}
.alert-outline-green {
  --phoenix-alert-bg: #eff2f6;
  --phoenix-alert-border-color: #0b3819;
}

/*=========================
        LIST GROUP
=========================*/
.list-group-item-gn.active {
  z-index: 2;
  color: var(--phoenix-list-group-active-color);
  background-color: #062710;
  border-color: #062710;
}

/*=========================
        BACKGROUNDS
=========================*/
.bg-success { --phoenix-bg-opacity: 1; background-color: #062710 !important; }

/*=========================
    RESPONSIVE LOGO
=========================*/
@media (max-width: 480px) { .navbar-logo img { height: 25px; } }
@media (max-width: 360px) { .navbar-logo img { height: 20px; } }
@media (max-width: 320px) { .navbar-logo img { height: 18px; } }

/* =========================
    RESPONSIVIDADE CARDS (MOBILE)
    -> Nome, depois Telefone, depois E-mail
========================= */
@media (max-width: 768px) {
  .correspondent-row {
    display: grid !important;
    grid-template-columns: 70px 1fr;
    grid-template-areas:
      "photo name"
      "photo phone"
      "photo email"
      "rating demand"
      "button button";
    gap: 0.2rem;
    text-align: left;
    font-size: 0.7rem;
    position: relative;

    /* anula align-items-center do Bootstrap para começar no topo */
    align-items: start !important;
  }

  .correspondent-photo { grid-area: photo; justify-self: start; align-self: start; }
  .correspondent-photo img { width: 60px; height: 60px; margin: 0; }

  .correspondent-info h5              { grid-area: name;  font-size: 0.7rem; align-self: start; }
  .correspondent-info p:first-of-type { grid-area: phone; }
  .correspondent-info p:last-of-type  { grid-area: email; }

  /* Ícones/ações de contato junto do "phone" */
  .correspondent-row :is(.contact-icons,.contact-actions,.quick-actions,.icons),
  .correspondent-info > .d-flex:first-of-type { grid-area: phone !important; align-self: start; }

  .correspondent-rating-demand {
    grid-area: rating / rating / demand / demand;
    display: grid; grid-template-columns: 1fr 1fr; font-size: 0.7rem;
  }
  .correspondent-rating { text-align: left; }
  .correspondent-demand { text-align: right; }

  .correspondent-button { grid-area: button; text-align: center; }
  .correspondent-button a { width: 100%; margin-top: 0.4rem; font-size: 0.8rem; padding: 0.35rem 0.5rem; }
}

/* =========================
    GRID DE CARDS NO DESKTOP (≥ 769px)
    (largura mínima ~400px)
========================= */
@media (min-width: 769px) {
  /* Grid dos cards */
  .correspondents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 16px;
    align-items: stretch;
  }
  .correspondents-grid > .card-custom,
  .correspondents-grid > .card-custom-gold,
  .correspondents-grid > .card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.5rem; /* desktop: mais respiro */
  }

  /* ===== Desktop: repetir exatamente o empilhamento do mobile ===== */
  /* “Achatar” wrappers Bootstrap dentro do grid */
  .correspondent-row > .row,
  .correspondent-row > [class^="col-"],
  .correspondent-row > .col,
  .correspondent-row > div:only-child {
    display: contents;
  }

  .correspondent-row > * { min-width: 0; }

  .correspondent-row {
    /* manter grid e anular centrado do Bootstrap */
    display: grid !important;
    align-items: start !important;

    grid-template-columns: 100px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto; /* botão na última linha */
    grid-template-areas:
      "photo name"
      "photo phone"
      "photo email"
      "rating demand"
      "button button";

    height: 100%; /* ocupa a altura total do card */
  }

  /* Foto no lugar certo (como no mobile) */
  .correspondent-photo { 
    grid-area: photo; 
    justify-self: start; 
    align-self: start; 
  }

  .correspondent-info h5 {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: auto;
    margin: 0 0 .25rem 0;
    line-height: 1.2;
    align-self: start;

    /* posicionamento no grid */
    grid-area: name;
    grid-column: 2 / -1;
  }

  /* Nome, Telefone (e ícones), E-mail ocupam toda a 2ª coluna */
  .correspondent-info p:first-of-type {
    grid-area: phone;
    grid-column: 2 / -1;
  }
  .correspondent-info p:last-of-type  {
    grid-area: email;
    grid-column: 2 / -1;
  }

  .correspondent-row :is(.contact-icons, .contact-actions, .quick-actions, .icons),
  .correspondent-info > .d-flex:first-of-type {
    grid-area: phone !important;
    grid-column: 2 / -1 !important;
    align-self: start;
  }

  /* Recuo apenas no bloco Avaliação */
  .correspondent-rating { padding-left: 130px; }
  .correspondent-rating-demand {
    grid-area: rating / rating / demand / demand;
    grid-column: 2 / -1;
    display: flex;               /* muda pra flex */
    align-items: center;         /* alinha vertical */
    justify-content: flex-start; /* tudo na mesma linha */
    gap: 2rem;                   /* espaço entre Avaliação e Demandas */
    font-size: 0.9rem;
    padding: 10px 0;
    white-space: nowrap;         /* evita quebrar linha */
  }

  /* Botão: grid-area no <a>, pois o wrapper vira display: contents */
  .correspondent-button { /* sem grid-area aqui de propósito */ }
  .correspondent-button a {
    grid-area: button;          /* ocupa a última linha, 2 colunas */
    display: block;
    width: 100%;
    align-self: end;            /* encosta no rodapé do grid */
    justify-self: stretch;
  }
}

/* ===== FIX EXTRA: Bootstrap .row “comendo” o padding do card ===== */
.card-custom .row,
.card-custom-gold .row,
.card .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  margin-left: 0;
  margin-right: 0;
}
.card-custom [class^="col-"],
.card-custom-gold [class^="col-"],
.card [class^="col-"],
.card-custom .col,
.card-custom-gold .col,
.card .col {
  padding-left: 0;
  padding-right: 0;
}

/* Segurança extra */
.correspondent-row {
  box-sizing: border-box;
  width: 100%;
}

/* =========================
   ALINHAR NOME AO MESMO X DO ÍCONE DE TELEFONE
   (sem gutter reservado; tudo encosta na mesma vertical do ícone)
========================= */

/* Zera recuos para o nome alinhar na mesma direção do ícone */
.correspondent-info .form-label-green {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Garante que telefone/e-mail não criem deslocamento extra */
.correspondent-info p {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Ícone do telefone usa largura natural e só um espaçamento mínimo */
.correspondent-info p i.bi-telephone {
  display: inline-block;
  width: auto !important;
  margin-right: .35rem;
  text-align: left !important;
}

/* Demais ícones (envelope, whatsapp, clipboard) sem largura fixa também */
.correspondent-info p i.bi-envelope,
.correspondent-info p i.bi-whatsapp,
.correspondent-info p i.bi-clipboard,
.correspondent-info p i.bi {
  width: auto !important;
  margin-right: .35rem;
  text-align: left !important;
}

/* Desktop: garante que o h5 dentro da 2ª coluna não tenha recuo extra */
@media (min-width: 769px) {
  .correspondent-info h5 {
    grid-area: name;
    grid-column: 2 / -1;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}