/* Responsive overrides */

@media (max-width: 1200px) {
  .container {
    max-width: calc(100% - 20px);
  }

  .main-content__wrapper {
    gap: 24px;
  }

  .main-content__left {
    width: 28%;
  }

  .main-content__right {
    width: 72%;
  }

  .blocklist {
    width: 70%;
    gap: 20px;
  }

  .login-wrapper-add {
    width: min(920px, 100%);
  }

  tr,
  th,
  td {
    padding: 12px;
  }
}

@media (max-width: 992px) {
  main {
    margin-top: 24px;
  }

  .header__wrapper {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .main-content__wrapper {
    flex-direction: column;
    gap: 16px;
  }

  .main-content__left,
  .main-content__right {
    width: 100%;
  }

  .main-nav {
    padding: 14px;
  }

  .blocklist {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 12px;
  }

  .blockitem__title {
    font-size: 1.8rem;
  }

  .login-wrapper,
  .login-wrapper-add {
    width: min(100%, 860px);
  }

  .profile__std {
    padding: 18px;
  }

  .profilestd__top,
  .profilestd__content--inner {
    gap: 20px;
  }

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

  .table-wrapper {
    overflow-x: auto;
  }

  table {
    min-width: 760px;
  }

  th,
  td {
    white-space: nowrap;
    font-size: 1.4rem;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 58%;
  }
  .mobile-menu {
    display: block;
  }
  .container {
    max-width: calc(100% - 14px);
  }

  .btn {
    padding: 8px 12px;
  }

  .header__left,
  .header__right {
    width: 100%;
    justify-content: space-between;
    column-gap: 10px;
  }

  .header__link--index {
    font-size: 1.7rem;
  }

  .header__link {
    font-size: 1.5rem;
  }

  .main-nav__title {
    margin-bottom: 10px;
  }

  .main-nav__link {
    padding: 8px 10px;
    font-size: 1.5rem;
  }

  .blocklist {
    grid-template-columns: repeat(2, 1fr);
  }

  .blockitem__imgs {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }

  .login-wrapper,
  .login-wrapper-add {
    padding: 14px;
  }

  .login__title {
    margin-bottom: 18px;
  }

  .login_item,
  .login_item--add {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 14px;
  }

  .login_item--input,
  .login_item--btn {
    width: 100%;
  }

  .tble-btn-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .profilestd__top,
  .profilestd__content--inner {
    flex-direction: column;
    gap: 14px;
  }

  .profile__left__inner {
    margin: 0 auto;
  }

  .profile-name,
  .profile-class {
    text-align: center;
  }

  .detail_std {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .profile_action__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .pagination a {
    padding: 7px 10px;
  }
}

@media (max-width: 576px) {
  .header__info {
    column-gap: 4px;
  }
  .mobile-menu {
    display: block;
  }
  .header__link,
  .header__link--index {
    font-size: 1.4rem;
  }

  .main-nav {
    padding: 10px;
  }

  .main-nav__title {
    font-size: 1.7rem;
  }

  .main-nav__item--wrapper {
    font-size: 1.6rem;
  }

  tr,
  th,
  td {
    padding: 9px;
  }

  .danger,
  .success,
  .error {
    font-size: 1.3rem;
  }

  .score-input,
  .tbkt-cell,
  .tbmh-cell {
    width: 64px;
  }

  .profile__std {
    padding: 12px;
  }
  .mobile-menu {
    display: block;
  }

  /* sidebar */
  .main-content__left {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100%;
    background: #fff;
    transform: translateX(-100%);
    transition: 0.3s ease;
    z-index: 1001;
  }

  #menu-toggle:checked ~ .main-content__left {
    transform: translateX(0);
  }

  /* overlay */
  .overlay {
    display: none;
  }

  #menu-toggle:checked ~ .overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
  }
}