/* 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: 768.01px) {
  .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;
  }
}

@media (max-width: 768px) {
  body.admin-mobile-nav-lock {
    overflow: hidden;
    touch-action: none;
  }

  #wrapper {
    position: relative;
  }

  #content-wrapper {
    width: 100%;
  }

  #content {
    padding-top: 4.375rem;
  }

  .topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1040;
    margin-bottom: 0 !important;
  }

  #sidebarToggleTop,
  #sidebarToggleTop.d-md-none {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    color: var(--kinokonoko-forest);
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    width: min(18rem, 86vw) !important;
    max-width: 86vw;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 0 1rem 2.5rem rgba(24, 55, 43, .34);
  }

  body.admin-sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar .sidebar-brand {
    min-height: 4.5rem;
    justify-content: flex-start !important;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .sidebar .sidebar-brand .sidebar-brand-text {
    display: block;
  }

  .sidebar .nav-item .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 3rem;
    padding: .8rem 1rem;
    line-height: 1.25;
  }

  .sidebar .nav-item .nav-link span {
    white-space: normal;
  }

  .sidebar .collapse-inner {
    margin-right: .75rem;
    margin-left: .75rem;
  }

  .sidebar .collapse-item {
    min-height: 2.75rem;
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
    white-space: normal !important;
    line-height: 1.25;
  }

  .admin-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1045;
    display: block;
    padding: 0;
    background: rgba(17, 24, 20, .56);
    border: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
  }

  body.admin-sidebar-open .admin-sidebar-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}