/* ==================================================
   Cántico de Fe Music
   V12.0 — Admin Studio Foundation
   ================================================== */

.admin-layout {
  display: grid;
  grid-template-columns:
    minmax(230px, 280px)
    minmax(0, 1fr);

  min-height:
    calc(100vh - 180px);

  border:
    1px solid #eadca6;
  border-radius: 24px;

  background: #ffffff;

  overflow: hidden;

  box-shadow:
    0 18px 48px
    rgba(16, 42, 67, .10);
}

.admin-layout__main {
  min-width: 0;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fffdf8 100%
    );
}

.admin-layout__content {
  padding:
    28px;
}

/* ==================================================
   Sidebar
   ================================================== */

.admin-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;

  padding:
    28px 20px;

  background: #0b3558;
  color: #ffffff;
}

.admin-sidebar__header {
  padding:
    0 8px 18px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .14);
}

.admin-sidebar__header h2 {
  margin:
    0 0 5px;

  color: #ffffff;

  font-size: 1.35rem;
}

.admin-sidebar__header p {
  margin: 0;

  color:
    rgba(255, 255, 255, .72);

  font-size: .88rem;
}

.admin-sidebar__nav {
  display: grid;
  gap: 8px;
}

.admin-sidebar__item {
  display: flex;
  align-items: center;
  gap: 11px;

  width: 100%;

  padding:
    12px 13px;

  border:
    1px solid transparent;
  border-radius: 14px;

  background: transparent;
  color:
    rgba(255, 255, 255, .82);

  font: inherit;
  font-weight: 800;
  text-align: left;

  cursor: pointer;

  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.admin-sidebar__item:hover {
  transform:
    translateX(3px);

  border-color:
    rgba(244, 208, 111, .34);

  background:
    rgba(255, 255, 255, .08);

  color: #ffffff;
}

.admin-sidebar__item.is-active {
  border-color: #f4d06f;
  background: #ffffff;
  color: #0b3558;
}

.admin-sidebar__icon {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  border-radius: 9px;

  background:
    rgba(255, 255, 255, .10);

  font-size: 1rem;
}

.admin-sidebar__item.is-active
.admin-sidebar__icon {
  background: #fff3c4;
}

/* ==================================================
   Toolbar
   ================================================== */

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding:
    24px 28px;

  border-bottom:
    1px solid #f1e7c5;

  background: #ffffff;
}

.admin-toolbar__left h1 {
  margin:
    0 0 5px;

  color: #0b3558;

  font-size:
    clamp(1.35rem, 3vw, 1.8rem);
}

.admin-toolbar__left p {
  margin: 0;

  color: #52667a;

  font-size: .9rem;
}

.admin-toolbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-toolbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding:
    8px 12px;

  border:
    1px solid #cde6d5;
  border-radius: 999px;

  background: #edf8f0;
  color: #21733f;

  font-size: .8rem;
  font-weight: 900;
}

.admin-toolbar__badge::before {
  content: "✓";
}

.admin-toolbar__badge--warning {
  border-color: #f0cf79;
  background: #fff8df;
  color: #8a6200;
}

.admin-toolbar__badge--warning::before {
  content: "!";
}

/* ==================================================
   Dashboard
   ================================================== */

.admin-dashboard {
  display: grid;
  gap: 26px;
}

.admin-dashboard__header {
  max-width: 720px;
}

.admin-dashboard__eyebrow {
  margin:
    0 0 8px;

  color: #c68a00;

  font-size: .77rem;
  font-weight: 900;

  letter-spacing: .16em;
}

.admin-dashboard__header h1 {
  margin:
    0 0 10px;

  color: #0b3558;

  font-size:
    clamp(2rem, 5vw, 3rem);
}

.admin-dashboard__header > p:last-child {
  margin: 0;

  color: #52667a;

  font-size: 1rem;
  line-height: 1.65;
}

.admin-dashboard__grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(220px, 1fr)
    );

  gap: 18px;
}

.admin-dashboard-card {
  display: grid;
  grid-template-columns:
    48px minmax(0, 1fr);
  grid-template-areas:
    "icon content"
    "button button";

  gap: 16px;

  padding: 20px;

  border:
    1px solid #eadca6;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 10px 26px
    rgba(16, 42, 67, .07);

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

.admin-dashboard-card:hover {
  transform:
    translateY(-3px);

  border-color: #d7b44b;

  box-shadow:
    0 16px 34px
    rgba(16, 42, 67, .11);
}

.admin-dashboard-card__icon {
  grid-area: icon;

  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;

  border-radius: 14px;

  background: #0b3558;
  color: #f4d06f;

  font-size: 1.25rem;
}

.admin-dashboard-card__content {
  grid-area: content;
}

.admin-dashboard-card__content h2 {
  margin:
    0 0 7px;

  color: #0b3558;

  font-size: 1.15rem;
}

.admin-dashboard-card__content p {
  margin: 0;

  color: #52667a;

  font-size: .9rem;
  line-height: 1.5;
}

.admin-dashboard-card__button {
  grid-area: button;

  min-height: 42px;

  padding:
    10px 16px;

  border:
    1px solid #0b3558;
  border-radius: 999px;

  background: #0b3558;
  color: #ffffff;

  font: inherit;
  font-weight: 900;

  cursor: pointer;

  transition:
    transform .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

.admin-dashboard-card__button:hover {
  transform:
    translateY(-2px);

  background: #124a76;

  box-shadow:
    0 9px 20px
    rgba(11, 53, 88, .18);
}

/* ==================================================
   Responsive
   ================================================== */

@media (max-width: 900px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    gap: 16px;
  }

  .admin-sidebar__nav {
    grid-template-columns:
      repeat(
        auto-fit,
        minmax(145px, 1fr)
      );
  }
}

@media (max-width: 620px) {
  .admin-layout {
    border-radius: 18px;
  }

  .admin-layout__content {
    padding: 20px 16px;
  }

  .admin-sidebar {
    padding: 22px 16px;
  }

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

  .admin-sidebar__item {
    justify-content: center;
    text-align: center;
  }

  .admin-toolbar {
    align-items: flex-start;
    flex-direction: column;

    padding:
      20px 16px;
  }

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

@media (max-width: 420px) {
  .admin-sidebar__nav {
    grid-template-columns: 1fr;
  }

  .admin-sidebar__item {
    justify-content: flex-start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar__item,
  .admin-dashboard-card,
  .admin-dashboard-card__button {
    transition: none;
  }

  .admin-sidebar__item:hover,
  .admin-dashboard-card:hover,
  .admin-dashboard-card__button:hover {
    transform: none;
  }
}