/* ----------------------------------------- */
/*  Settings Sidebar                         */
/* ----------------------------------------- */

#settings.settings-sidebar div {
  margin: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#settings.settings-sidebar button {
  margin: 0;
  padding: 0 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

#settings .ms2t-switch-container h2 {
  margin: 6px 0 0;
}

#settings .game-system {
  margin-block-end: 0.5rem;
}

#settings .game-system h4 {
  margin: 0.25rem 0;
  font-size: 0.7rem;
  font-weight: normal;
  color: rgb(255 255 255 / 0.5);
}

#settings #combat-utility-belt h4 {
  margin-block-start: 1rem;
}

#settings button[data-action="logout"],
#settings button[data-action="players"] {
  margin-block-start: 1rem;
}

/* ----------------------------------------- */
/*  Module Management                        */
/* ----------------------------------------- */

#module-management {
  min-block-size: 100vh;
}

#module-management .window-content form {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}

#module-management .notes {
  flex: 0 0 1px;
  min-block-size: auto;
}

#module-management .package-title {
  margin: 0;
  display: flex;
  align-items: center;
  line-height: 20px;
  text-decoration: none;
}

#module-management .package-list .package-title {
  margin-inline-end: 8px;
  align-items: flex-start;
  block-size: auto;
  overflow: visible;
}

#module-management input.active {
  position: relative;
  margin-inline-end: 8px;
  inset-block-start: 0;
}

#module-management input[type="checkbox"] {
  appearance: none;
  inline-size: 20px;
  block-size: 20px;
  border: 1px solid rgb(0 0 0 / 0.4);
  border-radius: 3px;
  background: rgb(255 255 255 / 0.6);
  box-shadow: 0 0 2px rgb(0 0 0 / 0.3) inset;
  cursor: pointer;
  transition: border 0.3s ease, background 0.3s ease;
}

#module-management input[type="checkbox"]:hover {
  border: 1px solid rgb(0 0 0 / 0.8);
  background: rgb(255 255 255 / 0.8);
}

#module-management input[type="checkbox"]:checked {
  border: 1px solid rgb(0 0 0 / 0.4);
}

#module-management input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  position: absolute;
  inline-size: 16px;
  block-size: 16px;
  background: url(../img/check-solid.svg) center / cover no-repeat;
  transform: translate(5%, 5%);
}

#module-management .package-list {
  margin: 0.5rem 0;
  padding: 0.25rem 0;
  max-block-size: 100%;
  block-size: auto;
  border-block: 1px solid #7a7971;
}

#module-management .package-list .package {
  position: relative;
  padding-block-start: 0.25rem;
  border-block-end: 1px solid rgb(0 0 0 / 0.2);
}

#module-management .package-list .package:last-child {
  border: none;
}

#module-management .package-list .package-metadata {
  margin-block-start: 4px;
  list-style: none;
}

#module-management .package-list .package-description {
  margin: 0 0 0.5rem 28px;
}

#module-management .package-list .package .tag {
  margin: 0 0.25rem 0.25rem 0;
  padding: 1px 4px 0;
  font-size: 10px;
  line-height: 16px;
}

#module-management button {
  cursor: pointer;
}

/* ----------------------------------------- */
/*  Mass Toggle Controls                     */
/* ----------------------------------------- */

#module-management .mass-toggle {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-end: 8px;
}

#module-management .disable-all-modules {
  flex: 1;
  border: 2px groove rgb(255 0 0 / 0.5);
  background: rgb(255 0 0 / 0.3);
}

#module-management .enable-all-modules {
  flex: 1;
  border: 2px groove rgb(0 255 0 / 0.5);
  background: rgb(0 255 0 / 0.3);
}

/* ----------------------------------------- */
/*  Module Export/Import                     */
/* ----------------------------------------- */

#module-management .enhanced-module-management {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 0 0 1px;
  margin-block-end: 8px;
}

#module-management .enhanced-module-management .modules-export,
#module-management .enhanced-module-management .modules-import {
  flex: 0 0 50px;
}

#module-management .warning {
  margin: 8px 0;
  padding: 8px;
  border-radius: 3px;
  background: rgb(255 120 0);
  color: #fff;
  font-size: 11px;
}

#module-management .warning span {
  font-weight: 600;
}

/* ----------------------------------------- */
/*  Import/Export Modal                      */
/* ----------------------------------------- */

#module-management #importExportModal {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 400px;
  block-size: 400px;
  display: none;
  z-index: 1000;
  transform: translate(-50%, -50%);
}

#module-management #importExportModal .modal-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  padding: 1rem;
  border-radius: 5px;
  background: #444;
  box-shadow: 0 0 20px rgb(0 0 0 / 0.3);
}

#module-management #importExportModal .modal-wrap #close {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: -30px;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: #efefef;
  color: #444;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 0 10px rgb(0 0 0 / 0.3);
  transform: translate(-50%, -50%);
}

#module-management #importExportModal .modal-wrap #exportToast {
  position: absolute;
  inset: 1rem 1rem 56px;
  z-index: 10;
  display: none;
  padding: 1rem;
  border-radius: 3px 3px 0 0;
  background: rgb(100 255 150 / 0.95);
  color: #121212;
}

#module-management #importExportModal .modal-wrap #exportToast p {
  display: flex;
  justify-content: center;
  align-items: center;
  block-size: 100%;
}

#module-management #importExportModal #modalIO {
  flex: 1;
  padding: 1rem;
  border: none;
  border-radius: 3px 3px 0 0;
  background: #efefef;
  box-shadow: 0 0 5px rgb(0 0 0 / 0.3) inset;
  resize: none;
  overflow-y: auto;
}

#module-management #importExportModal #modalIO:focus {
  outline: none;
}

#module-management #importExportModal .export-options,
#module-management #importExportModal .import-options {
  display: flex;
  margin-inline-start: -1px;
}

#module-management #importExportModal button {
  flex: 1;
  display: none;
  margin: 0;
  margin-inline-end: 1px;
  padding: 0;
  block-size: 40px;
  border: 1px solid #333;
  border-radius: 0 0 3px 3px;
  background: rgb(0 255 0 / 0.4);
  color: #efefef;
  line-height: 40px;
}

#module-management #importExportModal button:hover {
  background: rgb(0 255 0 / 0.3);
  box-shadow: none;
}

#module-management #importExportModal.export .export-options button,
#module-management #importExportModal.import .import-options button {
  display: block;
}