/*
=========================================================
BLOG ALÍPIO
ADMIN — COMPONENTES
=========================================================
*/


/* =========================================================
   BOTÕES
========================================================= */

.admin-primary-button,
.admin-secondary-button,
.admin-action-button {
  border: 0;

  font-family: inherit;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}


.admin-primary-button {
  min-height: 46px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding:
    0 18px;

  border-radius: 9px;

  background:
    #082f55;

  color:
    #ffffff;

  font-size: 0.86rem;

  font-weight: 800;
}


.admin-primary-button:hover {
  background:
    #0d477d;

  transform:
    translateY(-1px);
}


.admin-secondary-button {
  min-height: 44px;

  padding:
    0 16px;

  border:
    1px solid
    #d4dee7;

  border-radius: 9px;

  background:
    #ffffff;

  color:
    #082f55;

  font-weight: 700;
}


/* =========================================================
   ESTATÍSTICAS
========================================================= */

.admin-stats {
  display: grid;

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

  gap: 16px;

  margin-top: 38px;
}


.admin-stat-card {
  position: relative;

  overflow: hidden;

  min-height: 122px;

  padding:
    22px;

  border:
    1px solid
    #dbe4ec;

  border-radius: 14px;

  background:
    #ffffff;

  box-shadow:
    0 8px 28px
    rgba(8, 47, 85, 0.04);
}


.admin-stat-card::after {
  content: "";

  position: absolute;

  right: -28px;

  bottom: -38px;

  width: 100px;

  height: 100px;

  border-radius: 50%;

  background:
    rgba(246, 198, 36, 0.28);
}


.admin-stat-card span {
  position: relative;

  z-index: 1;

  display: block;

  color:
    #728294;

  font-size: 0.76rem;

  font-weight: 700;
}


.admin-stat-card strong {
  position: relative;

  z-index: 1;

  display: block;

  margin-top: 10px;

  color:
    #082f55;

  font-family:
    var(--serif);

  font-size: 2.25rem;

  line-height: 1;
}


/* =========================================================
   ÁREA DA LISTA
========================================================= */

.admin-content {
  margin-top: 28px;

  padding:
    24px;

  border:
    1px solid
    #dbe4ec;

  border-radius:
    16px;

  background:
    #ffffff;

  box-shadow:
    0 12px 35px
    rgba(8, 47, 85, 0.04);
}


/* =========================================================
   BARRA DE BUSCA E FILTRO
========================================================= */

.admin-toolbar {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 22px;
}


.admin-search {
  min-height: 44px;

  flex: 1;

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    0 14px;

  border:
    1px solid
    #d4dee7;

  border-radius: 9px;

  background:
    #f7f9fb;

  color:
    #65778a;
}


.admin-search input {
  width: 100%;

  border: 0;

  outline: 0;

  background:
    transparent;

  color:
    #082f55;

  font: inherit;
}


.admin-search input::placeholder {
  color:
    #8b99a8;
}


.admin-toolbar select {
  min-height: 44px;

  padding:
    0 38px 0 14px;

  border:
    1px solid
    #d4dee7;

  border-radius: 9px;

  background:
    #ffffff;

  color:
    #082f55;

  font: inherit;

  font-weight: 600;
}


/* =========================================================
   LISTAGEM
========================================================= */

.admin-publications {
  display: grid;

  gap: 12px;
}


.admin-publication {
  display: grid;

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

  align-items: center;

  gap: 20px;

  padding:
    20px;

  border:
    1px solid
    #e0e7ee;

  border-radius: 12px;

  background:
    #ffffff;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}


.admin-publication:hover {
  border-color:
    #c5d5e3;

  box-shadow:
    0 10px 28px
    rgba(8, 47, 85, 0.06);

  transform:
    translateY(-1px);
}


.admin-publication__content {
  min-width: 0;
}


.admin-publication__top {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 7px;

  margin-bottom: 9px;
}


/* =========================================================
   BADGES
========================================================= */

.admin-badge {
  min-height: 24px;

  display: inline-flex;

  align-items: center;

  padding:
    0 9px;

  border-radius:
    999px;

  background:
    #fff2bb;

  color:
    #715600;

  font-size:
    0.65rem;

  font-weight: 800;

  letter-spacing:
    0.02em;

  text-transform:
    uppercase;
}


.admin-badge--draft {
  background:
    #edf0f3;

  color:
    #5d6975;
}


.admin-badge--base {
  background:
    #e5f1fb;

  color:
    #0b5b9f;
}


/* =========================================================
   TEXTO DAS PUBLICAÇÕES
========================================================= */

.admin-publication h3 {
  margin:
    0 0 7px;

  color:
    #082f55;

  font-size:
    1.03rem;

  line-height: 1.35;
}


.admin-publication p {
  max-width:
    760px;

  margin: 0;

  color:
    #647586;

  font-size:
    0.84rem;

  line-height:
    1.55;
}


.admin-publication__meta {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top:
    10px;

  color:
    #8997a5;

  font-size:
    0.72rem;
}


/* =========================================================
   AÇÕES
========================================================= */

.admin-publication__actions {
  display: flex;

  align-items: center;

  justify-content:
    flex-end;

  flex-wrap: wrap;

  gap: 8px;
}


.admin-action-button {
  min-height: 36px;

  padding:
    0 12px;

  border:
    1px solid
    #d6e0e8;

  border-radius: 8px;

  background:
    #ffffff;

  color:
    #082f55;

  font-size:
    0.75rem;

  font-weight: 700;
}


.admin-action-button:hover {
  background:
    #f3f6f9;

  border-color:
    #bdccd9;
}


.admin-action-button--danger {
  color:
    #b42318;
}


/* =========================================================
   ESTADO VAZIO
========================================================= */

.admin-empty {
  padding:
    52px 24px;

  border:
    1px dashed
    #bbc9d5;

  border-radius:
    10px;

  background:
    #fafbfd;

  color:
    #6c7d8e;

  text-align:
    center;
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 1050px) {

  .admin-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 760px) {

  .admin-heading
  .admin-primary-button {
    width: 100%;
  }


  .admin-content {
    padding: 16px;
  }


  .admin-toolbar {
    align-items: stretch;

    flex-direction: column;
  }


  .admin-toolbar select {
    width: 100%;
  }


  .admin-publication {
    grid-template-columns:
      1fr;
  }


  .admin-publication__actions {
    justify-content:
      flex-start;
  }

}


@media (max-width: 430px) {

  .admin-stats {
    grid-template-columns:
      1fr 1fr;

    gap: 10px;
  }


  .admin-stat-card {
    min-height: 100px;

    padding: 16px;
  }


  .admin-stat-card strong {
    font-size:
      1.8rem;
  }

}

/* =========================================================
   AUTENTICAÇÃO ADMIN
========================================================= */

.admin-auth-box {
  margin-top:
    auto;

  padding:
    18px 20px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  color:
    #ffffff;
}

.admin-auth-box strong {
  display:
    block;

  margin-bottom:
    10px;

  font-size:
    0.78rem;
}

.admin-logout-button {
  width:
    100%;

  min-height:
    38px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );

  border-radius:
    8px;

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );

  color:
    #ffffff;

  font-weight:
    800;

  cursor:
    pointer;
}