html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0;
}

.brand-logo {
  display: block;
  width: auto;
  height: 30px;
}

.login-brand {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  border-radius: var(--bs-card-border-radius) var(--bs-card-border-radius) 0 0;
  background: #4b4f54;
}

.login-brand img {
  width: min(213px, 80%);
  height: auto;
}

.btn-primary {
  --bs-btn-bg: #5a5f64;
  --bs-btn-border-color: #5a5f64;
  --bs-btn-hover-bg: #484c50;
  --bs-btn-hover-border-color: #484c50;
  --bs-btn-active-bg: #3f4347;
  --bs-btn-active-border-color: #3f4347;
  --bs-btn-disabled-bg: #777c81;
  --bs-btn-disabled-border-color: #777c81;
}

.password-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.password-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.app-content {
  min-width: 0;
  flex: 1 1 auto;
}

.app-menu {
  position: sticky;
  top: 0;
  display: flex;
  width: 270px;
  height: 100vh;
  flex: 0 0 270px;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
  background: #4b4f54;
  box-shadow: 3px 0 16px rgb(0 0 0 / 14%);
  transition: width 180ms ease, flex-basis 180ms ease;
  z-index: 1030;
}

.app-menu.is-collapsed {
  width: 76px;
  flex-basis: 76px;
}

.app-menu-header {
  display: flex;
  min-height: 82px;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.app-menu-brand {
  min-width: 0;
  flex: 1;
}

.app-menu-brand img {
  display: block;
  width: 178px;
  max-width: 100%;
  height: auto;
}

.menu-toggle {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: .5rem;
  color: #fff;
  background: rgb(255 255 255 / 8%);
  font-size: 1.75rem;
  line-height: 1;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  background: rgb(255 255 255 / 18%);
}

.app-menu.is-collapsed .app-menu-header {
  justify-content: center;
  padding-inline: .75rem;
}

.app-menu.is-collapsed .app-menu-brand {
  display: none;
}

.app-menu.is-collapsed .menu-toggle span {
  transform: rotate(180deg);
}

.app-menu-account {
  padding: .7rem .75rem;
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  background: rgb(0 0 0 / 8%);
}

.app-menu-account form {
  margin: 0;
}

.app-menu.is-collapsed .app-menu-account {
  padding-inline: .5rem;
}

.app-menu-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem .75rem;
}

.app-menu-link,
.menu-user {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  gap: .8rem;
  padding: .65rem .75rem;
  border: 0;
  border-radius: .6rem;
  color: #f8f9fa;
  background: transparent;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.app-menu-link:hover,
.app-menu-link:focus-visible {
  color: #fff;
  background: #60656a;
}

.menu-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: .45rem;
  color: #3d4145;
  background: #e1e3e5;
}

.menu-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-label {
  overflow: hidden;
  opacity: 1;
  transition: opacity 100ms ease;
}

.app-menu.is-collapsed .menu-label {
  width: 0;
  opacity: 0;
}

.app-menu.is-collapsed .app-menu-link,
.app-menu.is-collapsed .menu-user {
  justify-content: center;
  gap: 0;
  padding-inline: .5rem;
}

.app-menu-button {
  font: inherit;
}

.menu-user {
  color: #d9dcdf;
}

.dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dashboard-eyebrow {
  margin-bottom: .25rem;
  color: #73787d;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dashboard-updated {
  color: #777c81;
  font-size: .82rem;
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dashboard-kpi,
.dashboard-panel {
  border: 1px solid #e2e4e6;
  border-radius: .8rem;
  background: #fff;
  box-shadow: 0 2px 10px rgb(0 0 0 / 4%);
}

.dashboard-kpi {
  display: flex;
  min-height: 142px;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem;
}

.dashboard-kpi-label {
  color: #6c7176;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
}

.dashboard-kpi strong {
  margin: .25rem 0;
  color: #303438;
  font-size: 2rem;
  line-height: 1.15;
}

.dashboard-kpi small { color: #777c81; }
.dashboard-kpi-highlight { border-top: 4px solid #5a5f64; }
.dashboard-progress { height: .45rem; margin-top: .4rem; }
.dashboard-progress .progress-bar { background: linear-gradient(90deg, #4385c5, #22a06b); }
.dashboard-table .progress-bar { background-color: #22a06b; }

.dashboard-panel { padding: 1.25rem; }
.dashboard-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.dashboard-panel-header h2 { margin: 0; color: #34383c; font-size: 1.05rem; }
.dashboard-panel-header p { margin: .2rem 0 0; color: #7a7f84; font-size: .85rem; }

.status-summary { display: flex; align-items: center; justify-content: space-around; gap: 1.5rem; }
.status-donut {
  display: grid;
  width: 155px;
  height: 155px;
  flex: 0 0 155px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#22a06b 0 calc(var(--done) / var(--total) * 100%), #f0a12a 0 calc((var(--done) + var(--doing)) / var(--total) * 100%), #8aa4c8 0);
}
.status-donut.montage-donut {
  background: conic-gradient(#7c5cc4 0 calc(var(--done) / var(--total) * 100%), #f0a12a 0 calc((var(--done) + var(--doing)) / var(--total) * 100%), #4385c5 0);
}
.status-donut::before { content: ""; grid-area: 1/1; width: 105px; height: 105px; border-radius: 50%; background: #fff; }
.status-donut span { z-index: 1; display: flex; grid-area: 1/1; flex-direction: column; text-align: center; }
.status-donut strong { color: #34383c; font-size: 1.65rem; }
.status-donut small { color: #7a7f84; }
.status-legend { min-width: 170px; }
.status-legend div { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: .55rem; padding: .45rem 0; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; }
.status-dot.available { background: #8aa4c8; }
.status-dot.doing { background: #f0a12a; }
.status-dot.done { background: #22a06b; }
.montage-legend .status-dot.available { background: #4385c5; }
.montage-legend .status-dot.done { background: #7c5cc4; }

.activity-chart { display: flex; height: 205px; align-items: stretch; gap: .75rem; padding-top: .5rem; }
.activity-column { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: center; }
.activity-value { color: #62676c; font-size: .75rem; }
.activity-track { display: flex; width: min(38px, 75%); flex: 1; align-items: flex-end; margin: .35rem 0; border-radius: .3rem .3rem 0 0; background: #f0f1f2; overflow: hidden; }
.activity-bar { width: 100%; border-radius: .3rem .3rem 0 0; background: #5a5f64; transition: height .3s ease; }
.activity-bar.receipt-bar { background: linear-gradient(180deg, #4f91d0, #2f6fae); }
.activity-bar.montage-bar { background: linear-gradient(180deg, #9b7bd9, #704caf); }
.activity-column small { color: #7a7f84; font-size: .72rem; }
.dashboard-table thead th { border-bottom-width: 1px; color: #72777c; font-size: .76rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.dashboard-table tbody td { color: #4b5055; }
.dashboard-table .progress { height: .4rem; }

@media (max-width: 1199.98px) {
  .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .dashboard-heading { align-items: flex-start; flex-direction: column; }
  .dashboard-kpis { grid-template-columns: 1fr; }
  .status-summary { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 767.98px) {
  .app-menu {
    width: 230px;
    flex-basis: 230px;
  }

  .app-menu.is-collapsed {
    width: 68px;
    flex-basis: 68px;
  }

  .app-content .container-fluid {
    padding-inline: 1rem !important;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}