/*
=========================================================
BLOG ALÍPIO
ADMIN — LAYOUT PRINCIPAL
=========================================================
*/

.admin-page {
  min-height: 100vh;

  margin: 0;

  background:
    #f3f6f9;

  color:
    var(--ink);
}


/* =========================================================
   ESTRUTURA
========================================================= */

.admin-shell {
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    270px minmax(0, 1fr);
}


/* =========================================================
   MENU LATERAL
========================================================= */

.admin-sidebar {
  position: sticky;

  top: 0;

  height: 100vh;

  display: flex;

  flex-direction: column;

  padding:
    26px 20px;

  background:
    #062542;

  color:
    #ffffff;
}


/* =========================================================
   MARCA
========================================================= */

.admin-brand {
  display: flex;

  align-items: center;

  gap: 12px;

  padding:
    0 8px 26px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.10);

  color:
    #ffffff;

  text-decoration:
    none;
}


.admin-brand__mark {
  width: 44px;

  height: 44px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  border-radius: 11px;

  background:
    #0b477d;

  font-size: 1.2rem;
}


.admin-brand strong,
.admin-brand small {
  display: block;
}


.admin-brand strong {
  font-size: 1rem;

  line-height: 1.2;
}


.admin-brand small {
  margin-top: 4px;

  color:
    rgba(255, 255, 255, 0.55);

  font-size: 0.69rem;
}


/* =========================================================
   NAVEGAÇÃO
========================================================= */

.admin-nav {
  display: grid;

  gap: 8px;

  margin-top: 28px;
}


.admin-nav a {
  min-height: 48px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding:
    0 14px;

  border-radius: 9px;

  color:
    rgba(255, 255, 255, 0.72);

  text-decoration:
    none;

  font-size: 0.88rem;

  font-weight: 700;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}


.admin-nav a:hover,
.admin-nav a.is-active {
  background:
    #104b83;

  color:
    #ffffff;
}


/* =========================================================
   USUÁRIO
========================================================= */

.admin-sidebar__footer {
  margin-top: auto;

  padding-top: 22px;

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


.admin-user {
  display: flex;

  align-items: center;

  gap: 10px;
}


.admin-user__avatar {
  width: 38px;

  height: 38px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    #f6c624;

  color:
    #062542;

  font-size: 0.82rem;

  font-weight: 800;
}


.admin-user strong,
.admin-user small {
  display: block;
}


.admin-user strong {
  font-size: 0.8rem;
}


.admin-user small {
  margin-top: 3px;

  color:
    rgba(255, 255, 255, 0.52);

  font-size: 0.67rem;
}


/* =========================================================
   CONTEÚDO PRINCIPAL
========================================================= */

.admin-main {
  width: 100%;

  max-width: 1400px;

  margin:
    0 auto;

  padding:
    48px;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.admin-heading {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 30px;
}


.admin-eyebrow {
  margin:
    0 0 9px;

  color:
    #0a5aa5;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.admin-heading h1 {
  margin: 0;

  color:
    #082f55;

  font-family:
    var(--serif);

  font-size:
    clamp(2.2rem, 4vw, 3.8rem);

  line-height: 1;
}


.admin-heading > div > p:last-child {
  max-width: 570px;

  margin:
    13px 0 0;

  color:
    #647586;

  line-height: 1.6;
}


/* =========================================================
   RESPONSIVIDADE INICIAL
========================================================= */

@media (max-width: 1000px) {

  .admin-shell {
    grid-template-columns:
      220px minmax(0, 1fr);
  }


  .admin-main {
    padding:
      34px;
  }

}


@media (max-width: 760px) {

  .admin-shell {
    display: block;
  }


  .admin-sidebar {
    position: relative;

    width: 100%;

    height: auto;

    padding:
      14px;
  }


  .admin-brand {
    padding:
      0 0 14px;

    border-bottom: 0;
  }


  .admin-nav {
    display: flex;

    margin-top: 0;

    overflow-x: auto;
  }


  .admin-nav a {
    flex:
      0 0 auto;
  }


  .admin-sidebar__footer {
    display: none;
  }


  .admin-main {
    padding:
      28px 16px;
  }


  .admin-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}

/* =========================================
   PERFIL DO USUÁRIO — SIDEBAR
========================================= */

.admin-sidebar__footer .admin-logout-button {
  width: 100%;
  margin-top: 16px;
}



/* =========================================================
   VISIBILIDADE POR PERFIL
========================================================= */

[data-admin-only][hidden] {
  display: none !important;
}