/* ==========================================================
   UCD SIGN ADMIN CONSOLE
   Faspex-inspired unified interface
   ========================================================== */

body.ucd-sign-2:has(.ucd-settings-shell) {
  --ucd-nav-width: 286px;

  --ucd-nav-bg: #101d2a;
  --ucd-nav-bg-deep: #0d1823;
  --ucd-nav-text: #e7edf4;
  --ucd-nav-muted: #91a0af;
  --ucd-nav-hover: rgba(255,255,255,.055);
  --ucd-nav-active: rgba(44,112,181,.17);
  --ucd-nav-accent: #2384e8;

  --ucd-page: #ffffff;
  --ucd-page-soft: #f8fafc;
  --ucd-border: #dce2e8;

  --ucd-text: #17202b;
  --ucd-muted: #697586;

  --ucd-primary: #1674d1;
  --ucd-primary-hover: #0f63b7;
}

/* ==========================================================
   ADMIN SHELL
   ========================================================== */

body.ucd-sign-2 .ucd-settings-shell {
  display: grid !important;
  grid-template-columns: var(--ucd-nav-width) minmax(0, 1fr) !important;
  gap: 0 !important;

  width: calc(100vw - 32px) !important;
  max-width: 1720px !important;
  height: calc(100vh - 118px) !important;
  min-height: 640px !important;

  margin: 16px auto 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 0 !important;

  background: #fff !important;

  box-shadow:
    0 14px 38px rgba(15,23,42,.12) !important;
}

/* ==========================================================
   SIDEBAR
   ========================================================== */

body.ucd-sign-2 .ucd-settings-sidebar {
  width: var(--ucd-nav-width) !important;
  min-width: var(--ucd-nav-width) !important;
  max-width: var(--ucd-nav-width) !important;

  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  overflow: hidden !important;

  background:
    linear-gradient(
      180deg,
      #0f1d2b 0%,
      #101d2a 56%,
      #0d1823 100%
    ) !important;

  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.ucd-sign-2 .ucd-settings-nav {
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
}

/* ==========================================================
   SIDEBAR HEADER
   ========================================================== */

body.ucd-sign-2 .ucd-settings-nav-fixed-top {
  flex: 0 0 auto !important;

  padding: 28px 28px 20px !important;

  border: 0 !important;

  background: transparent !important;
}

body.ucd-sign-2 .ucd-settings-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;

  margin: 0 0 31px !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  color: #d8e2ec !important;
  background: transparent !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size: 13px !important;
  font-weight: 450 !important;
  line-height: 1 !important;

  text-decoration: none !important;

  box-shadow: none !important;
}

body.ucd-sign-2 .ucd-settings-back,
body.ucd-sign-2 .ucd-settings-back * {
  color: #d8e2ec !important;
}

body.ucd-sign-2 .ucd-settings-back:hover,
body.ucd-sign-2 .ucd-settings-back:hover * {
  color: #ffffff !important;
}

body.ucd-sign-2 .ucd-settings-nav-heading {
  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size: 27px !important;
  font-weight: 620 !important;
  line-height: 1.15 !important;

  letter-spacing: -.025em !important;

  text-shadow: none !important;
}

/* ==========================================================
   SIDEBAR SCROLL
   ========================================================== */

body.ucd-sign-2 .ucd-settings-nav-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 10px 11px 25px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  background: transparent !important;

  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,.18) transparent !important;
}

body.ucd-sign-2
.ucd-settings-nav-scroll::-webkit-scrollbar {
  width: 4px !important;
}

body.ucd-sign-2
.ucd-settings-nav-scroll::-webkit-scrollbar-track {
  background: transparent !important;
}

body.ucd-sign-2
.ucd-settings-nav-scroll::-webkit-scrollbar-thumb {
  border-radius: 99px !important;
  background: rgba(255,255,255,.18) !important;
}

/* ==========================================================
   EXISTING MENU
   ========================================================== */

body.ucd-sign-2 #account_settings_menu {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
}

body.ucd-sign-2 #account_settings_menu li {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
}

/* Important:
   some existing LI contain several links.
   Every link becomes its own row.
*/

body.ucd-sign-2 #account_settings_menu a {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  box-sizing: border-box !important;

  width: 100% !important;
  min-height: 50px !important;

  margin: 2px 0 !important;
  padding: 0 18px !important;

  border: 0 !important;
  border-radius: 5px !important;

  color: var(--ucd-nav-text) !important;
  background: transparent !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size: 14px !important;
  font-weight: 450 !important;
  line-height: 1.25 !important;

  text-decoration: none !important;
  text-shadow: none !important;

  box-shadow: none !important;

  transition:
    background .14s ease,
    color .14s ease !important;
}

body.ucd-sign-2 #account_settings_menu a,
body.ucd-sign-2 #account_settings_menu a span {
  color: var(--ucd-nav-text) !important;
}

/* Existing icons */

body.ucd-sign-2 #account_settings_menu a svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;

  color: #b6c3cf !important;
  stroke: currentColor !important;
}

body.ucd-sign-2 #account_settings_menu a:hover {
  color: #ffffff !important;
  background: var(--ucd-nav-hover) !important;
}

body.ucd-sign-2 #account_settings_menu a:hover,
body.ucd-sign-2 #account_settings_menu a:hover span,
body.ucd-sign-2 #account_settings_menu a:hover svg {
  color: #ffffff !important;
}

/* ==========================================================
   ACTIVE ITEM
   ========================================================== */

body.ucd-sign-2 #account_settings_menu a.active,
body.ucd-sign-2 #account_settings_menu a[aria-current="page"],
body.ucd-sign-2 #account_settings_menu a.bg-base-200,
body.ucd-sign-2 #account_settings_menu a.menu-active {
  color: #ffffff !important;

  background:
    linear-gradient(
      90deg,
      rgba(26,105,181,.24),
      rgba(26,105,181,.08)
    ) !important;

  font-weight: 560 !important;
}

body.ucd-sign-2 #account_settings_menu a.active span,
body.ucd-sign-2 #account_settings_menu a[aria-current="page"] span,
body.ucd-sign-2 #account_settings_menu a.bg-base-200 span,
body.ucd-sign-2 #account_settings_menu a.menu-active span,
body.ucd-sign-2 #account_settings_menu a.active svg,
body.ucd-sign-2 #account_settings_menu a[aria-current="page"] svg,
body.ucd-sign-2 #account_settings_menu a.bg-base-200 svg {
  color: #ffffff !important;
}

body.ucd-sign-2 #account_settings_menu a.active::before,
body.ucd-sign-2 #account_settings_menu a[aria-current="page"]::before,
body.ucd-sign-2 #account_settings_menu a.bg-base-200::before,
body.ucd-sign-2 #account_settings_menu a.menu-active::before {
  content: "" !important;

  position: absolute !important;

  left: -11px !important;
  top: 9px !important;
  bottom: 9px !important;

  width: 4px !important;

  border-radius: 0 4px 4px 0 !important;

  background: var(--ucd-nav-accent) !important;
}

/* ==========================================================
   TEST MODE
   ========================================================== */

body.ucd-sign-2 #account_settings_menu form {
  margin: 12px 6px 0 !important;
  padding: 0 !important;

  background: transparent !important;
}

body.ucd-sign-2 #account_settings_menu form label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  min-height: 44px !important;

  padding: 0 12px !important;

  color: var(--ucd-nav-text) !important;
  background: transparent !important;

  font-size: 12px !important;
}

/* ==========================================================
   SIDEBAR FOOTER
   ========================================================== */

body.ucd-sign-2 #support_channels {
  flex: 0 0 auto !important;

  width: auto !important;

  margin: 0 27px 24px !important;
  padding: 21px 0 0 !important;

  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 0 !important;

  color: var(--ucd-nav-muted) !important;
  background: transparent !important;

  box-shadow: none !important;
}

body.ucd-sign-2 #support_channels,
body.ucd-sign-2 #support_channels * {
  color: var(--ucd-nav-muted) !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size: 11px !important;
  line-height: 1.6 !important;
}

/* ==========================================================
   MAIN AREA
   ========================================================== */

body.ucd-sign-2 .ucd-settings-main {
  display: flex !important;
  flex-direction: column !important;

  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  color: var(--ucd-text) !important;

  background: var(--ucd-page) !important;
}

/* ==========================================================
   PAGE HEADER
   ========================================================== */

body.ucd-sign-2 .ucd-settings-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;

  display: flex !important;
  align-items: center !important;

  box-sizing: border-box !important;

  width: 100% !important;
  min-height: 90px !important;

  margin: 0 !important;
  padding: 0 48px !important;

  border: 0 !important;
  border-bottom: 1px solid var(--ucd-border) !important;

  background: rgba(255,255,255,.97) !important;

  box-shadow: none !important;

  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.ucd-sign-2 .ucd-settings-header h1 {
  margin: 0 !important;
  padding: 0 !important;

  color: var(--ucd-text) !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size: 30px !important;
  font-weight: 480 !important;
  line-height: 1.15 !important;

  letter-spacing: -.025em !important;

  text-shadow: none !important;
}

/* ==========================================================
   PAGE CONTENT
   ========================================================== */

body.ucd-sign-2 .ucd-settings-content {
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 34px 48px 60px !important;

  color: var(--ucd-text) !important;

  background: #ffffff !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;
}

body.ucd-sign-2 .ucd-settings-content > div {
  width: 100% !important;
  max-width: none !important;
}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

body.ucd-sign-2 .ucd-settings-content h2 {
  margin: 0 0 19px !important;

  color: var(--ucd-text) !important;

  font-size: 20px !important;
  font-weight: 570 !important;

  letter-spacing: -.015em !important;
}

body.ucd-sign-2 .ucd-settings-content h3 {
  margin: 0 0 14px !important;

  color: var(--ucd-text) !important;

  font-size: 15px !important;
  font-weight: 600 !important;
}

body.ucd-sign-2 .ucd-settings-content p,
body.ucd-sign-2 .ucd-settings-content .text-sm {
  color: var(--ucd-muted) !important;

  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* ==========================================================
   FORMS
   ========================================================== */

body.ucd-sign-2 .ucd-settings-content .form-control {
  margin-bottom: 20px !important;
}

body.ucd-sign-2 .ucd-settings-content label,
body.ucd-sign-2 .ucd-settings-content .label {
  color: #344054 !important;

  font-size: 12px !important;
  font-weight: 600 !important;
}

body.ucd-sign-2
.ucd-settings-content
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),

body.ucd-sign-2 .ucd-settings-content select,

body.ucd-sign-2 .ucd-settings-content textarea {
  box-sizing: border-box !important;

  min-height: 42px !important;

  padding: 9px 12px !important;

  border: 1px solid #cdd5df !important;
  border-radius: 5px !important;

  color: #202832 !important;
  background: #ffffff !important;

  font-family: inherit !important;
  font-size: 13px !important;

  outline: none !important;

  box-shadow: none !important;

  transition:
    border .13s ease,
    box-shadow .13s ease !important;
}

body.ucd-sign-2
.ucd-settings-content
input:not([type="checkbox"]):not([type="radio"]):focus,

body.ucd-sign-2 .ucd-settings-content select:focus,

body.ucd-sign-2 .ucd-settings-content textarea:focus {
  border-color: #4c96d8 !important;

  box-shadow:
    0 0 0 3px rgba(35,132,232,.10) !important;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

body.ucd-sign-2 .ucd-settings-content .base-button,
body.ucd-sign-2 .ucd-settings-content button[type="submit"],
body.ucd-sign-2 .ucd-settings-content input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;

  min-height: 38px !important;

  padding: 0 17px !important;

  border: 1px solid var(--ucd-primary) !important;
  border-radius: 4px !important;

  color: #ffffff !important;
  background: var(--ucd-primary) !important;

  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;

  box-shadow: none !important;
}

body.ucd-sign-2 .ucd-settings-content .base-button:hover,
body.ucd-sign-2 .ucd-settings-content button[type="submit"]:hover {
  border-color: var(--ucd-primary-hover) !important;
  background: var(--ucd-primary-hover) !important;
}

body.ucd-sign-2 .ucd-settings-content .white-button {
  min-height: 38px !important;

  padding: 0 16px !important;

  border: 1px solid #cbd3dc !important;
  border-radius: 4px !important;

  color: #344054 !important;
  background: #ffffff !important;

  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 550 !important;

  box-shadow: none !important;
}

/* ==========================================================
   TABLES
   ========================================================== */

body.ucd-sign-2 .ucd-settings-content table {
  width: 100% !important;

  border: 1px solid var(--ucd-border) !important;
  border-collapse: collapse !important;

  border-radius: 0 !important;

  background: #ffffff !important;

  box-shadow: none !important;
}

body.ucd-sign-2 .ucd-settings-content thead th {
  height: 44px !important;

  padding: 10px 16px !important;

  border-bottom: 1px solid #d9dfe6 !important;

  color: #344054 !important;
  background: #f7f9fb !important;

  font-size: 11px !important;
  font-weight: 650 !important;

  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.ucd-sign-2 .ucd-settings-content tbody td {
  height: 52px !important;

  padding: 10px 16px !important;

  border-bottom: 1px solid #e8ecf0 !important;

  color: #344054 !important;
  background: #ffffff !important;

  font-size: 12px !important;
}

body.ucd-sign-2 .ucd-settings-content tbody tr:hover td {
  background: #f8fafc !important;
}

/* ==========================================================
   CARDS / ALERTS
   ========================================================== */

body.ucd-sign-2 .ucd-settings-content .card,
body.ucd-sign-2 .ucd-settings-content .alert {
  border: 1px solid var(--ucd-border) !important;
  border-radius: 5px !important;

  background: #ffffff !important;

  box-shadow: none !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1080px) {
  body.ucd-sign-2 .ucd-settings-shell {
    grid-template-columns: 240px minmax(0, 1fr) !important;

    width: calc(100vw - 20px) !important;
  }

  body.ucd-sign-2 .ucd-settings-sidebar {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
  }

  body.ucd-sign-2 .ucd-settings-header {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  body.ucd-sign-2 .ucd-settings-content {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}