/* Custom overrides for admin panel */

:root {
  --kinokonoko-forest: #24523f;
  --kinokonoko-leaf: #3f8f62;
  --kinokonoko-mint: #e9f6ee;
  --kinokonoko-cream: #fff8e8;
  --kinokonoko-gold: #f3b73f;
  --kinokonoko-ink: #26352d;
}

.bg-gradient-primary {
  background-color: var(--kinokonoko-forest);
  background-image: linear-gradient(160deg, #24523f 0%, #3f8f62 48%, #f3b73f 100%);
  background-size: cover;
}

.sidebar.bg-primary {
  background-color: var(--kinokonoko-forest) !important;
  background-image: linear-gradient(180deg, #24523f 0%, #2f6d4e 54%, #18372b 100%) !important;
}

.sidebar .sidebar-brand {
  min-height: 5rem;
  text-transform: none;
  letter-spacing: 0;
}

.sidebar .sidebar-brand .sidebar-brand-text {
  color: var(--kinokonoko-cream);
  font-size: .9rem;
  line-height: 1.15;
  white-space: normal;
}

.kinokonoko-brand-mark,
.kinokonoko-login-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #24523f;
  background: var(--kinokonoko-cream);
  border: 2px solid rgba(243, 183, 63, .75);
  box-shadow: 0 .4rem 1rem rgba(24, 55, 43, .22);
  font-weight: 800;
  letter-spacing: 0;
}

.kinokonoko-brand-mark {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 1rem;
}

.kinokonoko-login-mark {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  font-size: 1.55rem;
}

.kinokonoko-login-title {
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.kinokonoko-env-label {
  display: inline-block;
  color: var(--kinokonoko-forest);
  background: var(--kinokonoko-mint);
  border: 1px solid rgba(63, 143, 98, .28);
  border-radius: 999px;
  padding: .25rem .75rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08rem;
}

.kinokonoko-admin-env-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 999px;
  padding: .35rem .75rem;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04rem;
  white-space: nowrap;
}

.kinokonoko-admin-env-badge-production {
  color: #fff8e8;
  background: #b02a37;
  border: 1px solid #9d2430;
}

.kinokonoko-admin-env-badge-staging {
  color: #173b2c;
  background: #f3b73f;
  border: 1px solid #d99c20;
}

.btn-primary {
  background-color: var(--kinokonoko-leaf);
  border-color: var(--kinokonoko-leaf);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #347a53;
  border-color: #347a53;
}

.text-primary {
  color: var(--kinokonoko-leaf) !important;
}

.border-left-primary {
  border-left-color: var(--kinokonoko-leaf) !important;
}

.bg-login-image {
  position: relative;
  background:
    linear-gradient(180deg, rgba(36, 82, 63, .08), rgba(36, 82, 63, .5)),
    url("../img/kinokonoko-ferment-bg.png");
  background-position: center;
  background-size: cover;
}

.bg-login-image::after {
  content: "KINOKONOKO";
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  color: rgba(255, 248, 232, .92);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12rem;
}

/* Increase sidebar width to accommodate longer menu items */
@media (min-width: 768px) {
  .sidebar {
    width: 17rem !important;
  }

  .sidebar .nav-item .nav-link {
    width: 17rem;
  }

  /* Increase collapse inner width for longer submenu items */
  .sidebar .nav-item .collapse .collapse-inner,
  .sidebar .nav-item .collapsing .collapse-inner {
    min-width: 15rem;
  }

  /* When sidebar is toggled, keep the original compact size */
  .sidebar.toggled {
    width: 6.5rem !important;
  }

  .sidebar.toggled .nav-item .nav-link {
    width: 6.5rem;
  }
}