/* =========================================================
   USBF 2.0
   WINBOX CUSTOM THEME
   PRIMARY: #252B4E
========================================================= */

/* =========================================================
   LIGHT THEME
========================================================= */

html[data-theme="light"] .winbox.modern {
  background: #252b4e;

  border: 1px solid #1d2342;

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 10px 30px rgba(37, 43, 78, 0.22);
}

/* =========================================================
   LIGHT HEADER
========================================================= */

html[data-theme="light"] .winbox.modern .wb-header {
  background: #252b4e;

  border-bottom: 1px solid #343a5c;

  border-radius: 12px 12px 0 0;
}

/* =========================================================
   LIGHT TITLE
========================================================= */

html[data-theme="light"] .winbox.modern .wb-title {
  color: #ffffff;

  font-weight: 600;
}

/* =========================================================
   LIGHT CONTROLS
========================================================= */

html[data-theme="light"] .winbox.modern .wb-control {
  color: #ffffff;
}

html[data-theme="light"] .winbox.modern .wb-control:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* =========================================================
   LIGHT CLOSE
========================================================= */

html[data-theme="light"] .winbox.modern .wb-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* =========================================================
   WINDOW BODY
========================================================= */

html[data-theme="light"] .winbox.modern .wb-body {
  background: var(--app-surface);

  border: 0;

  border-radius: 0;
}

/* =========================================================
   DARK THEME
========================================================= */

html[data-theme="dark"] .winbox.modern {
  background: #252b4e;

  border: 1px solid #343a5c;

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   DARK HEADER
========================================================= */

html[data-theme="dark"] .winbox.modern .wb-header {
  background: #252b4e;

  border-bottom: 1px solid #3c4263;

  border-radius: 12px 12px 0 0;
}

/* =========================================================
   DARK TITLE
========================================================= */

html[data-theme="dark"] .winbox.modern .wb-title {
  color: #ffffff;

  font-weight: 600;
}

/* =========================================================
   DARK CONTROLS
========================================================= */

html[data-theme="dark"] .winbox.modern .wb-control {
  color: #ffffff;
}

html[data-theme="dark"] .winbox.modern .wb-control:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* =========================================================
   DARK CLOSE
========================================================= */

html[data-theme="dark"] .winbox.modern .wb-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* =========================================================
   DARK BODY
========================================================= */

html[data-theme="dark"] .winbox.modern .wb-body {
  background: var(--app-surface);

  border: 0;

  border-radius: 0;
}

/* =========================================================
   ACTIVE / FOCUSED WINDOW
========================================================= */

html[data-theme="light"] .winbox.modern:focus-within {
  box-shadow: 0 12px 35px rgba(37, 43, 78, 0.28);
}

html[data-theme="dark"] .winbox.modern:focus-within {
  box-shadow: 0 14px 42px rgba(37, 43, 78, 0.35);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {
  .winbox.modern {
    border-radius: 12px;

    overflow: hidden;
  }
}