/* ==========================================================================
   Ynerluz · Portal de Agentes
   pages.css — layouts de página
   ========================================================================== */

/* Autenticação (login / recuperar) --------------------------------------- */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  background: var(--grey-dark);
}
.auth__box {
  width: 372px;
  max-width: 100%;
}
.auth__logo {
  width: 372px;
  height: 81px;
  margin: 0 auto 74px;
}
.auth__title {
  margin-bottom: 17px;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 700;
  line-height: 33px;
  color: var(--white);
  text-align: center;
}
.auth__fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.auth__links {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--grey-forms);
  text-align: center;
  white-space: nowrap;
}
.auth__links a {
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color .15s ease;
}
.auth__links a:hover { color: var(--white); }
.auth__sep { margin: 0 10px; }
.auth__error {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--alerta);
  text-align: center;
}
.auth__submit { margin-top: 76px; }
.auth__links + .auth__submit { margin-top: 76px; }
.auth__error:not([hidden]) + .auth__submit { margin-top: 36px; }

/* Caixa de regras da senha */
.rules {
  margin-top: 18px;
  padding: 10px 15px 16px;
  border: 1px solid var(--grey-forms);
  border-radius: var(--radius);
  background: rgba(155, 155, 155, 0.1);
  font-size: 14px;
  letter-spacing: -.14px;
  color: var(--grey-forms);
}
.rules__title {
  font-weight: 300;
  margin-bottom: 10px;
}
.rules__item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 17px;
  font-weight: 600;
  transition: color .15s ease;
}
.rules__item + .rules__item { margin-top: 8px; }
.rules__item--note { margin-top: 46px; }
.rules__icon { width: 18px; height: 18px; flex: none; }
.rules__item.is-ok    { color: #cfd3cf; }
.rules__item.is-error { color: #e9b2a0; }
.rules + .auth__submit { margin-top: 73px; }

/* Layout principal (com sidebar) ----------------------------------------- */
.main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  padding: 40px var(--page-gutter) 38px;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-height: 82px;
  margin-bottom: 14px;
}
.page-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: var(--grey-dark);
}
.page-actions {
  display: flex;
  gap: 11px;
  align-self: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Dashboard -------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  min-height: 276px;
  padding: 19px 20px 26px 25px;
}
.stat-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.stat-card__value {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 17px;
}
.stat-card__number {
  font-size: 58px;
  font-weight: 700;
  line-height: 70px;
}
.stat-card__caption { font-size: 18px; }
.stat-card__pills {
  display: flex;
  gap: 16px;
  margin-top: auto;
}
.stat-pill {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  min-height: 102px;
  padding: 13px 16px 18px;
  border-radius: 11px;
}
.stat-pill--green { background: var(--card-green); }
.stat-pill--grey  { background: var(--card-grey); }
.stat-pill__number {
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}
.stat-pill__label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  white-space: nowrap;
}

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 278px;
  gap: 17px;
  align-items: stretch;
}

/* Contratos recentes */
.recent {
  display: flex;
  flex-direction: column;
  min-height: 552px;
  padding: 19px 13px 20px;
}
.recent .card__head {
  padding: 0 12px;
  margin-bottom: 17px;
}
.table--recent { --cols: 150px 314px 120px minmax(84px, 1fr); }
.table--recent .table__head { padding: 0 12px; }
.table--recent .table__row {
  height: 54px;
  margin: 0 12px;
  border-bottom: .5px solid var(--grey-forms);
}
.table--recent .table__row:last-child { border-bottom: 0; }

/* Notificações */
.notif {
  display: flex;
  flex-direction: column;
  padding: 19px 19px 18px 23px;
}
.notif .card__head { margin-bottom: 28px; }
.notif__list {
  width: 230px;
  max-width: 100%;
  margin-left: 2px;
}
.notif__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 13px;
}
.notif__item + .notif__item {
  padding-top: 13px;
  border-top: .5px solid var(--grey-forms);
}
.notif__dot { margin-top: 5px; }
.notif__body { min-width: 0; }
.notif__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-dark);
}
.notif__meta {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 500;
  color: var(--grey-forms);
}
.notif__all {
  margin-top: auto;
  padding-top: 20px;
  align-self: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-1);
}
.notif__all:hover { text-decoration: underline; }

/* Contratos -------------------------------------------------------------- */
.filters {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 25px;
  padding: 15px 14px 14px;
  border-radius: var(--radius);
  background: var(--white);
}
.filters__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.filters__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--grey-forms);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filters .btn--dark {
  flex: none;
  width: 77px;
  padding: 0;
  margin-left: -3px;
}

.table-wrap { overflow-x: auto; }
/* Tabelas de listagem (linhas em cartões brancos) */
.table--list { min-width: 1000px; }
.table--list .table__head {
  padding-left: 14px;
  margin-bottom: 11px;
}
.table--list .table__row {
  height: 53px;
  padding-left: 14px;
  border-radius: var(--radius);
  background: var(--white);
  transition: box-shadow .15s ease;
}
.table--list .table__row:hover { box-shadow: 0 2px 10px rgba(44, 42, 50, 0.06); }
.table--list .table__row + .table__row { margin-top: 7px; }
.table--contracts { --cols: 119px 247px 191px 106px 82px 122px 103px minmax(46px, 1fr); }

.contracts-pagination { margin-top: 68px; }

/* ==========================================================================
   Responsivo: tablet (≤ 1100px) e telemóvel (≤ 640px)
   ========================================================================== */

/* Ajustes largos: notificações passam para baixo dos contratos recentes */
@media (max-width: 1280px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .recent { min-height: 0; }
  .notif__list { width: 100%; }
}

/* Tablet: sidebar vira gaveta, barra superior, tabelas mais compactas */
@media (max-width: 1100px) {
  :root { --page-gutter: 24px; }

  .topbar { display: flex; }
  .main { margin-left: 0; padding-top: 84px; }

  .page-header {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 14px;
    margin-bottom: 18px;
  }
  .page-actions { align-self: stretch; justify-content: flex-start; }

  .sidebar {
    transform: translateX(-100%);
    border-radius: 0 24px 24px 0;
    transition: transform .25s ease, width .25s ease;
  }
  .sidebar.is-open {
    transform: translateX(0);
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.25);
  }
  .sidebar-backdrop { z-index: 48; background: rgba(0, 0, 0, 0.35); }
  .sidebar.is-search-open { width: min(var(--sidebar-w-open), 100vw); }
  .search-panel { width: calc(min(var(--sidebar-w-open), 100vw) - var(--sidebar-w)); }
  body.is-drawer-open { overflow: hidden; }

  .stat-card { padding: 18px 18px 22px 20px; }
  .stat-card__number { font-size: 48px; line-height: 58px; }

  .filters { flex-wrap: wrap; }
  .filters__field { flex: 1 1 200px; }
  .filters .btn--dark { margin-left: 0; }

  .table--list { min-width: 920px; }
  .table--contracts { --cols: 100px 215px 175px 100px 70px 105px 100px minmax(46px, 1fr); }
  .table--recent { --cols: 110px minmax(0, 1fr) 110px 90px; }
}

/* Tablet em modo retrato: cartões de estatísticas e contratos em cartões */
@media (max-width: 900px) {
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .filters .btn--dark { grid-column: 1 / -1; width: 100%; }

  /* Tabela de contratos → um cartão por contrato */
  .table-wrap { overflow: visible; }
  .table--list { min-width: 0; }
  .table--contracts .table__head { display: none; }
  .table--contracts .table__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "id estado"
      "cliente cliente"
      "cpe cpe"
      "data tensao"
      "switching ver";
    gap: 10px 14px;
    height: auto;
    padding: 14px 16px 16px;
  }
  .table--contracts .table__row > span { padding: 0; white-space: normal; overflow: visible; }
  .table--contracts [data-col="id"]        { grid-area: id; font-size: 16px; }
  .table--contracts [data-col="cliente"]   { grid-area: cliente; font-size: 15px; }
  .table--contracts [data-col="cpe"]       { grid-area: cpe; }
  .table--contracts [data-col="data"]      { grid-area: data; }
  .table--contracts [data-col="tensao"]    { grid-area: tensao; }
  .table--contracts [data-col="switching"] { grid-area: switching; }
  .table--contracts [data-col="estado"]    { grid-area: estado; justify-self: end; }
  .table--contracts [data-col="ver"]       { grid-area: ver; justify-self: end; align-self: end; }
  .table--contracts [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 500;
    color: var(--grey-forms);
  }

  .contracts-pagination { margin-top: 32px; justify-content: center; }
  .pagination__pages { flex-wrap: wrap; justify-content: center; }
}

/* Telemóvel */
@media (max-width: 767px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  :root { --page-gutter: 16px; }
  .main { padding-top: 76px; padding-bottom: 28px; }

  .page-header { margin-bottom: 16px; }
  .page-title { font-size: 26px; line-height: 32px; }
  .page-actions .btn { flex: 1 1 auto; height: 44px; padding: 0 12px; }

  .stat-card { padding: 16px 16px 18px; min-height: 0; }
  .stat-card__value { gap: 14px; margin-top: 10px; }
  .stat-card__number { font-size: 44px; line-height: 52px; }
  .stat-card__caption { font-size: 16px; }
  .stat-card__pills { flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  .stat-pill { flex: 1 1 calc(50% - 10px); min-width: 120px; min-height: 0; padding: 12px 14px 14px; }
  .stat-pill__number { font-size: 32px; line-height: 38px; }

  .card { border-radius: 16px; }
  .recent { padding: 16px 12px 16px; }
  .recent .card__head { padding: 0 4px; }

  /* Contratos recentes → cartões */
  .table--recent .table__head { display: none; }
  .table--recent .table__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "id estado"
      "cliente cliente"
      "data data";
    gap: 6px 12px;
    height: auto;
    margin: 0 4px;
    padding: 12px 0;
  }
  .table--recent .table__row > span { padding: 0; white-space: normal; overflow: visible; }
  .table--recent [data-col="id"]      { grid-area: id; }
  .table--recent [data-col="cliente"] { grid-area: cliente; }
  .table--recent [data-col="estado"]  { grid-area: estado; justify-self: end; }
  .table--recent [data-col="data"]    { grid-area: data; font-size: 12px; }

  .notif { padding: 16px 16px 18px; }

  .filters { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 14px; }
  .table--contracts .table__row { grid-template-columns: minmax(0, 1fr) auto; }

  /* Gaveta e pesquisa ocupam o ecrã */
  .sidebar { width: min(var(--sidebar-w), 92vw); }
  .sidebar__inner { width: 100%; padding: 28px 20px 24px; }
  .sidebar__brand { margin-left: 0; }
  .sidebar__search { margin-top: 36px; }
  .sidebar__nav { margin-top: 24px; }
  .sidebar__search, .nav-item, .sidebar__user { width: 100%; }
  .sidebar__user { margin-top: 32px; }
  .sidebar.is-search-open { width: 100vw; }
  .sidebar.is-search-open .sidebar__inner { display: none; }
  .search-panel { left: 0; width: 100vw; padding: 60px 16px 16px; }
  .search-panel::before { display: none; }
  .search-field, .result-card { width: 100%; }
  .result-card__title { width: auto; }
}

/* Autenticação em ecrãs pequenos */
@media (max-width: 480px) {
  .auth { padding: 32px 16px; }
  .auth__logo { width: 100%; height: auto; margin-bottom: 48px; }
  .auth__title { white-space: normal; font-size: 18px; line-height: 26px; }
  .auth__links { white-space: normal; line-height: 1.7; }
  .auth__submit { margin-top: 48px; }
  .rules + .auth__submit { margin-top: 48px; }
}