/**
 * Ultima for Publishers — UI Theme 2.0
 * Matches the Ultima Publishers dashboard design.
 */

:root {
  --ult-navy: #121a35;
  --ult-navy-soft: #1b2447;
  --ult-navy-line: rgba(255, 255, 255, 0.08);
  --ult-purple: #4f2be8;
  --ult-purple-dark: #3f1fc4;
  --ult-purple-soft: #efeaff;
  --ult-amber: #f5a524;
  --ult-green: #16a34a;
  --ult-red: #e5484d;
  --ult-text: #161c38;
  --ult-text-soft: #4a5177;
  --ult-muted: #838ab0;
  --ult-border: #e9eaf3;
  --ult-border-soft: #f1f2f8;
  --ult-bg: #ffffff;
  --ult-bg-soft: #fbfbfe;
  --ult-radius: 12px;
  --ult-radius-sm: 8px;
  --ult-shadow: 0 1px 2px rgba(20, 25, 60, 0.05);
  --ult-font: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------
   WordPress admin chrome resets
---------------------------------------------------------------- */
body.wp-admin {
  background: var(--ult-bg);
}
#wpcontent {
  padding-left: 0 !important;
}
#wpbody-content {
  padding-bottom: 0 !important;
}
#wpbody-content > .wrap,
#wpbody-content > .notice,
#wpbody-content > .updated,
#wpbody-content > .error {
  margin-left: 16px;
  margin-right: 16px;
}
#wpfooter,
#footer-thankyou {
  display: none !important;
}
.ult-shell,
.ult-shell * {
  box-sizing: border-box;
}
.ult-shell {
  font-family: var(--ult-font);
  color: var(--ult-text);
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 32px);
  background: var(--ult-bg);
}
.ult-shell p {
  margin: 0;
  font-size: 14px;
}
.ult-shell h1,
.ult-shell h2,
.ult-shell h3,
.ult-shell h4 {
  margin: 0;
  color: var(--ult-text);
  font-family: var(--ult-font);
}
.ult-shell a {
  text-decoration: none;
}
.ult-shell button {
  font-family: var(--ult-font);
  cursor: pointer;
}

/* ---------------------------------------------------------------
   Sidebar
---------------------------------------------------------------- */
.ult-sidebar {
  width: 245px;
  flex: 0 0 245px;
  background: var(--ult-navy);
  color: #fff;
  padding: 18px 14px 20px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 32px;
  align-self: flex-start;
  height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.ult-sidebar::-webkit-scrollbar {
  width: 6px;
}
.ult-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 8px;
}

.ult-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 6px 20px;
}
.ult-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(140deg, #6b46f5 0%, #4f2be8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  overflow: hidden;
}
.ult-brand-mark img {
  width: 30px;
  height: auto;
  display: block;
}
.ult-brand-name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  letter-spacing: -0.2px;
}
.ult-brand-sub {
  font-size: 11.5px;
  color: #9aa2c6;
  letter-spacing: 0.2px;
}

.ult-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ult-nav-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #7982ab;
  padding: 18px 12px 7px;
  letter-spacing: 0.1px;
}
.ult-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #c9cee6 !important;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ult-nav-item:hover {
  background: var(--ult-navy-soft);
  color: #fff !important;
  transform: translateX(2px);
}
.ult-nav-item.is-active {
  background: var(--ult-purple);
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(79, 43, 232, 0.35);
}
.ult-nav-ico {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
}
.ult-nav-item.is-active .ult-nav-ico {
  background: rgba(255, 255, 255, 0.2);
}
.ult-nav-ico svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.ult-nav-badge {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ult-purple);
  color: #fff;
  letter-spacing: 0.2px;
}
.ult-nav-item.is-active .ult-nav-badge {
  background: rgba(255, 255, 255, 0.22);
}
.ult-nav-badge.is-ghost {
  background: transparent;
  color: #a9b0d2;
  padding-right: 2px;
}

.ult-help-card {
  margin-top: auto;
  background: linear-gradient(160deg, #5a33ef 0%, #4a23dd 100%);
  border-radius: 14px;
  padding: 16px 15px;
  margin-top: 26px;
}
.ult-help-card h4 {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.ult-help-card p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1.55;
  margin-bottom: 13px;
}
.ult-help-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff !important;
  background: transparent;
  margin-bottom: 9px;
}
.ult-help-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.ult-help-btn.is-solid {
  background: rgba(0, 0, 0, 0.18);
  border-color: transparent;
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Main column + topbar
---------------------------------------------------------------- */
.ult-main {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--ult-bg);
  display: flex;
  flex-direction: column;
}
.ult-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 26px;
  border-bottom: 1px solid var(--ult-border);
  background: #fff;
  position: sticky;
  top: 32px;
  z-index: 20;
}
.ult-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ult-topbar-left label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ult-text-soft);
}
.ult-site-select {
  min-width: 175px;
  height: 38px;
  border: 1px solid var(--ult-border) !important;
  border-radius: var(--ult-radius-sm) !important;
  padding: 0 32px 0 12px !important;
  font-size: 13.5px;
  color: var(--ult-text);
  background-color: #fff;
  box-shadow: none !important;
}
.ult-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ult-icon-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ult-purple);
}
.ult-icon-btn:hover {
  background: var(--ult-purple-soft);
}
.ult-icon-btn svg {
  width: 21px;
  height: 21px;
}
.ult-icon-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ult-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.ult-user {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  padding: 3px 6px 3px 3px;
  border-radius: 999px;
}
.ult-user:hover {
  background: var(--ult-bg-soft);
}
.ult-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ult-purple);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.3px;
}
.ult-user-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ult-text);
}
.ult-user svg.ult-caret {
  width: 13px;
  height: 13px;
  color: var(--ult-muted);
}
.ult-dropdown {
  position: absolute;
  right: 22px;
  top: 58px;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--ult-border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(20, 25, 60, 0.12);
  overflow: hidden;
  z-index: 60;
}
.ult-dropdown button {
  width: 100%;
  text-align: left;
  padding: 11px 15px;
  font-size: 13.5px;
  background: #fff;
  border: none;
  color: var(--ult-text-soft);
}
.ult-dropdown button:hover {
  background: var(--ult-bg-soft);
  color: var(--ult-purple);
}

.ult-content {
  padding: 24px 26px 40px;
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------
   Page header
---------------------------------------------------------------- */
.ult-page-head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ult-border);
  margin-bottom: 22px;
}
.ult-page-head h1 {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 6px;
}
.ult-page-head p {
  color: var(--ult-muted);
  font-size: 14px;
}
.ult-page-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ult-pub-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ult-border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ult-purple);
  background: #fff;
}
.ult-pub-chip svg {
  width: 15px;
  height: 15px;
}

/* ---------------------------------------------------------------
   Layout helpers
---------------------------------------------------------------- */
.ult-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.ult-layout-main {
  flex: 1 1 auto;
  min-width: 0;
}
.ult-rail {
  width: 320px;
  flex: 0 0 320px;
  border-left: 1px solid var(--ult-border);
  padding-left: 20px;
  align-self: stretch;
}
.ult-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------------------------------------------------------------
   Cards
---------------------------------------------------------------- */
.ult-card {
  background: #fff;
  border: 1px solid var(--ult-border);
  border-radius: var(--ult-radius);
  box-shadow: var(--ult-shadow);
  transition: box-shadow 0.2s ease;
}
.ult-card-head {
  padding: 15px 20px;
  border-bottom: 1px solid var(--ult-border);
  background: var(--ult-bg-soft);
  border-radius: var(--ult-radius) var(--ult-radius) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ult-card-head h2,
.ult-card-head h3 {
  font-size: 15px;
  font-weight: 600;
}
.ult-card-body {
  padding: 20px;
}
.ult-card-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
}
.ult-card-sub {
  font-size: 13px;
  color: var(--ult-muted);
  margin-bottom: 18px !important;
}

/* Stat cards */
.ult-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.ult-stat {
  background: #fff;
  border: 1px solid var(--ult-border);
  border-radius: var(--ult-radius);
  padding: 15px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: var(--ult-shadow);
}
.ult-stat-label {
  font-size: 12.5px;
  color: var(--ult-muted);
  margin-bottom: 4px !important;
}
.ult-stat-value {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.15;
}
.ult-stat-sub {
  font-size: 11.5px;
  color: var(--ult-muted);
  margin-top: 3px !important;
}
.ult-stat-ico {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ult-purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
}
.ult-stat-ico svg {
  width: 20px;
  height: 20px;
}

/* ---------------------------------------------------------------
   Buttons, pills, badges
---------------------------------------------------------------- */
.ult-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ult-purple);
  color: #fff !important;
  border: 1px solid var(--ult-purple);
  border-radius: var(--ult-radius-sm);
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.1s ease;
}
.ult-btn:hover {
  background: var(--ult-purple-dark);
  border-color: var(--ult-purple-dark);
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(79, 43, 232, 0.28);
}
.ult-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}
.ult-btn:disabled,
.ult-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ult-btn svg {
  width: 15px;
  height: 15px;
}
.ult-btn-ghost {
  background: #fff;
  color: var(--ult-text-soft) !important;
  border-color: var(--ult-border);
}
.ult-btn-ghost:hover {
  background: var(--ult-bg-soft);
  color: var(--ult-purple) !important;
  border-color: var(--ult-border);
}
.ult-btn-amber {
  background: var(--ult-amber);
  border-color: var(--ult-amber);
}
.ult-btn-amber:hover {
  background: #dd9110;
  border-color: #dd9110;
}
.ult-btn-green {
  background: var(--ult-green);
  border-color: var(--ult-green);
}
.ult-btn-red {
  background: var(--ult-red);
  border-color: var(--ult-red);
}
.ult-btn-sm {
  padding: 6px 13px;
  font-size: 12px;
  border-radius: 7px;
}

/* Segmented pill tabs */
.ult-pills {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ult-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ult-text-soft);
  font-size: 13px;
  font-weight: 500;
}
.ult-pill:hover {
  background: var(--ult-bg-soft);
}
.ult-pill .ult-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b9bed6;
}
.ult-pill svg {
  width: 15px;
  height: 15px;
}
.ult-pill.is-active,
.ult-pill.active {
  background: var(--ult-purple);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(79, 43, 232, 0.25);
}
.ult-pill.is-active .ult-dot,
.ult-pill.active .ult-dot {
  background: #fff;
}

/* Radio pills (revenue report) */
.ult-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ult-seg label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 16px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  cursor: pointer;
  font-size: 13px;
  color: var(--ult-text-soft);
}
/* Hide the native radio input outright instead of depending on the
   Tailwind runtime's `.hidden` utility, which can race with paint and
   briefly leave the browser's own radio circle visible alongside our
   custom dot below (the "double circle" bug). !important guarantees
   this wins regardless of load order against WP-admin's own core
   input[type="radio"] skin. */
.ult-seg label input[type="radio"] {
  display: none !important;
}
.ult-seg label:hover {
  background: var(--ult-bg-soft) !important;
}
.ult-seg label span {
  font-size: 13px !important;
  color: inherit !important;
  font-weight: 500 !important;
}
/* Only the active tab shows a dot — inactive tabs are plain text. */
.ult-seg label::before {
  content: none;
}
.ult-seg label:has(input:checked) {
  background: var(--ult-purple) !important;
  color: #fff;
  box-shadow: 0 6px 14px rgba(79, 43, 232, 0.25);
}
.ult-seg label:has(input:checked) span {
  color: #fff !important;
  font-weight: 600 !important;
}
.ult-seg label:has(input:checked)::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 9px;
}

.ult-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ult-purple-soft);
  color: var(--ult-purple);
  font-size: 12px;
  font-weight: 600;
}
.ult-badge-green {
  background: #e7f7ee;
  color: #0f7a3d;
}
.ult-badge-red {
  background: #fdecec;
  color: #c62828;
}
.ult-badge-amber {
  background: #fff4e0;
  color: #a45b00;
}
.credit-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e7f7ee;
  color: #0f7a3d;
  font-size: 12px;
  font-weight: 600;
}
.debit-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fdecec;
  color: #c62828;
  font-size: 12px;
  font-weight: 600;
}

/* ---------------------------------------------------------------
   Forms
---------------------------------------------------------------- */
.ult-field {
  display: block;
  margin-bottom: 16px;
}
.ult-field > label,
.ult-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ult-text-soft);
  margin-bottom: 7px;
}
.ult-shell input[type="text"],
.ult-shell input[type="number"],
.ult-shell input[type="email"],
.ult-shell input[type="url"],
.ult-shell input[type="password"],
.ult-shell input[type="search"],
.ult-shell input[type="date"],
.ult-shell select,
.ult-shell textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--ult-border) !important;
  border-radius: var(--ult-radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 13.5px;
  color: var(--ult-text);
  background-color: #fff;
  box-shadow: none !important;
  font-family: var(--ult-font);
}
.ult-shell select {
  padding-right: 30px !important;
}
.ult-shell input:focus,
.ult-shell select:focus,
.ult-shell textarea:focus {
  border-color: var(--ult-purple) !important;
  box-shadow: 0 0 0 3px rgba(79, 43, 232, 0.12) !important;
  outline: none;
}
.ult-shell input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 4px !important;
  border: 1px solid #c6cadd !important;
  min-height: 0;
}
.ult-shell input[type="checkbox"]:checked {
  background-color: var(--ult-purple) !important;
  border-color: var(--ult-purple) !important;
}
.ult-shell input[type="checkbox"]:checked::before {
  color: #fff;
}
.ult-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ult-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ult-inline-form {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.ult-inline-form .ult-field {
  margin-bottom: 0;
  flex: 1 1 180px;
}

.ult-search {
  position: relative;
  width: 260px;
  max-width: 100%;
}
.ult-search input {
  border-radius: 999px !important;
  padding-right: 36px !important;
}
.ult-search svg {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--ult-muted);
  pointer-events: none;
}

/* ---------------------------------------------------------------
   Tables
---------------------------------------------------------------- */
.ult-table-wrap {
  overflow-x: auto;
}
.ult-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.ult-table thead th {
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ult-text-soft);
  padding: 13px 16px;
  background: var(--ult-bg-soft);
  border-bottom: 1px solid var(--ult-border);
  white-space: nowrap;
}
.ult-table tbody td {
  padding: 14px 16px;
  color: var(--ult-text);
  border-bottom: 1px solid var(--ult-border-soft);
  vertical-align: middle;
}
.ult-table tbody tr:hover {
  background: #fcfcff;
}
.ult-table tfoot td {
  padding: 14px 16px;
  border-top: 1px solid var(--ult-border);
  font-weight: 600;
}
.ult-table .ult-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ult-table .ult-sort svg {
  width: 10px;
  height: 10px;
  color: #b7bcd4;
}
.ult-empty {
  text-align: center;
  padding: 44px 16px;
  color: var(--ult-muted);
}
.ult-empty svg {
  width: 30px;
  height: 30px;
  color: #c9cde3;
  margin-bottom: 10px;
}
.ult-empty strong {
  display: block;
  color: var(--ult-text);
  font-size: 14px;
  margin-bottom: 4px;
}

/* Pagination */
.ult-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 4px 2px;
}
.ult-pagination button,
.ult-pagination .page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid var(--ult-border);
  background: #fff;
  color: var(--ult-text-soft);
  font-size: 13px;
  font-weight: 500;
}
.ult-pagination button:hover:not(:disabled) {
  border-color: var(--ult-purple);
  color: var(--ult-purple);
}
.ult-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ult-pagination button.is-current,
.ult-pagination .page-btn.active,
.ult-pagination button.bg-blue-600 {
  background: var(--ult-purple) !important;
  border-color: var(--ult-purple) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------
   Rail widgets
---------------------------------------------------------------- */
.ult-rail-card {
  background: #fff;
  border: 1px solid var(--ult-border);
  border-radius: var(--ult-radius);
  margin-bottom: 18px;
  overflow: hidden;
}
.ult-rail-card > h3 {
  font-size: 14.5px;
  font-weight: 600;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ult-border);
  background: var(--ult-bg-soft);
}
.ult-rail-body {
  padding: 16px 18px;
}
.ult-rail-body h4 {
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.ult-rail-body p {
  font-size: 13px;
  color: var(--ult-muted);
  line-height: 1.6;
}
.ult-rail-body a {
  color: var(--ult-purple);
  font-weight: 500;
}
.ult-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ult-rail-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ult-border-soft);
  font-size: 13px;
  color: var(--ult-text-soft);
}
.ult-rail-list li:last-child {
  border-bottom: none;
}
.ult-rail-list li .ult-rail-value {
  margin-left: auto;
  font-weight: 600;
  color: var(--ult-text);
}
.ult-step-num {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--ult-purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}
.ult-note-card {
  background: linear-gradient(160deg, #5a33ef 0%, #4a23dd 100%);
  border-radius: var(--ult-radius);
  padding: 18px;
  color: #fff;
}
.ult-note-card svg {
  width: 22px;
  height: 22px;
  margin-bottom: 10px;
}
.ult-note-card h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 7px;
}
.ult-note-card p,
.ult-note-card a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px;
  line-height: 1.6;
}
.ult-icon-tile {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ult-purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
}
.ult-icon-tile svg {
  width: 19px;
  height: 19px;
}

/* ---------------------------------------------------------------
   Left tab rail (Get Ad Script / Blacklisting)
---------------------------------------------------------------- */
.ult-split {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.ult-split-nav {
  width: 275px;
  flex: 0 0 275px;
  border-right: 1px solid var(--ult-border);
  padding: 4px 22px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ult-split-nav button {
  width: 100%;
  text-align: center;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ult-text-soft);
  font-size: 13.5px;
  font-weight: 500;
}
.ult-split-nav button:hover {
  background: var(--ult-bg-soft);
}
.ult-split-nav button.active,
.ult-split-nav button.is-active,
.ult-split-nav button[class*="f0f0f1"] {
  background: #f3f0ff;
  border-color: #ddd3ff;
  color: var(--ult-purple);
  font-weight: 600;
}
.ult-split-body {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 22px;
}

/* ---------------------------------------------------------------
   Code blocks
---------------------------------------------------------------- */
.ult-code {
  background: #0f1729;
  border-radius: 10px;
  padding: 16px 18px;
  color: #d7defb;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
  word-break: break-all;
}
.ult-shell textarea.ult-code {
  width: 100%;
  border: none !important;
  resize: vertical;
  min-height: 92px;
}
.ult-info-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f2f6ff;
  border: 1px solid #dde7ff;
  border-radius: 10px;
  padding: 13px 15px;
  color: #2f4c9e;
  font-size: 12.5px;
  line-height: 1.55;
}
.ult-info-note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 1px;
}
.ult-warn-note {
  background: #fff8e8;
  border-color: #f7e4b5;
  color: #85601a;
}

/* ---------------------------------------------------------------
   Integration guide blocks
---------------------------------------------------------------- */
.ult-hero-card {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  background: linear-gradient(105deg, #f6f3ff 0%, #fbfaff 60%, #fff 100%);
  border: 1px solid #e7e1ff;
  border-radius: var(--ult-radius);
  padding: 18px 20px;
}
.ult-hero-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.ult-hero-card p {
  font-size: 13.5px;
  color: var(--ult-text-soft);
  line-height: 1.6;
}
.ult-step-card {
  border: 1px solid var(--ult-border);
  border-radius: var(--ult-radius);
  padding: 18px 20px;
  background: #fff;
}
.ult-step-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 8px;
}
.ult-step-head .ult-step-badge {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--ult-purple);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
}
.ult-step-head h3 {
  font-size: 16px;
  font-weight: 600;
}
.ult-step-head svg {
  width: 17px;
  height: 17px;
  color: var(--ult-purple);
}
.ult-step-card > p {
  font-size: 13.5px;
  color: var(--ult-text-soft);
  line-height: 1.6;
  margin-bottom: 14px;
}
.ult-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.ult-tile {
  border: 1px solid var(--ult-border);
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
}
.ult-tile h4 {
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 5px;
}
.ult-tile p,
.ult-tile code {
  font-size: 12.5px;
  color: var(--ult-muted);
  line-height: 1.55;
}
.ult-tile-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ult-muted);
  margin-bottom: 7px !important;
}
.ult-tile strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ult-text);
  line-height: 1.5;
}
.ult-tile code {
  font-family: "SFMono-Regular", Consolas, monospace;
  color: var(--ult-text);
  font-size: 12.5px;
}
.ult-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.ult-check {
  border: 1px solid var(--ult-border);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 13px;
  color: var(--ult-text-soft);
}

/* ---------------------------------------------------------------
   Blacklisting panels
---------------------------------------------------------------- */
.ult-panel {
  border: 1px solid var(--ult-border);
  border-radius: var(--ult-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
.ult-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--ult-border);
  background: var(--ult-bg-soft);
  font-size: 14px;
  font-weight: 600;
}
.ult-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 420px;
}
.ult-panel-body .ult-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.ult-check-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--ult-border-soft);
  font-size: 13.5px;
  color: var(--ult-text);
}
.ult-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--ult-muted);
  font-size: 13.5px;
}
.ult-panel-empty .ult-empty-ico {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ult-purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ult-panel-empty .ult-empty-ico svg {
  width: 20px;
  height: 20px;
}
.ult-domain-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ult-border);
  border-radius: 10px;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 500;
}
.ult-domain-row .ult-domain-ico {
  color: var(--ult-purple);
  display: flex;
}
.ult-domain-row .ult-domain-ico svg {
  width: 17px;
  height: 17px;
}
.ult-domain-row button {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #9aa0bd;
  padding: 4px;
}
.ult-domain-row button:hover {
  color: var(--ult-red);
}
.ult-domain-row button svg {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------------------
   Payout
---------------------------------------------------------------- */
.ult-balance-card {
  background: linear-gradient(120deg, #4f2be8 0%, #3ba4c9 55%, #e85fb0 100%);
  border-radius: var(--ult-radius);
  padding: 18px;
  color: #fff;
  margin-top: 16px;
}
.ult-balance-card small {
  font-size: 12.5px;
  opacity: 0.9;
  display: block;
  margin-bottom: 5px;
}
.ult-balance-card .ult-balance-amount {
  font-size: 24px;
  font-weight: 700;
  display: block;
  line-height: 1.2;
}
.ult-balance-card .ult-balance-chip {
  display: inline-block;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}
.ult-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ult-text);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 13.5px;
  z-index: 100000;
  display: none;
}

/* ---------------------------------------------------------------
   Legacy JS compatibility (classes toggled by existing page scripts)
---------------------------------------------------------------- */
#bottom-alert.visible {
  display: block !important;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.status-badge.approved {
  background: #e7f7ee;
  color: #0f7a3d;
}
.status-badge.rejected {
  background: #fdecec;
  color: #c62828;
}
.status-badge.pending {
  background: #fff4e0;
  color: #a45b00;
}

/* ---------------------------------------------------------------
   Modals / loaders
---------------------------------------------------------------- */
#masterScriptModal .bg-white,
#preciso-register-overlay > div {
  border-radius: 14px !important;
  font-family: var(--ult-font);
}

/* Initial full-page loader (rendered inline by DashboardPage.php to
   mask the Tailwind runtime boot). Kept smooth instead of an abrupt
   display:none cut. */
#page-loader {
  background: rgba(255, 255, 255, 0.85);
  transition: opacity 0.25s ease;
  opacity: 1;
}
#page-loader.hidden {
  display: flex !important;
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#page-loader .border-t-blue-600 {
  border-top-color: var(--ult-purple) !important;
  border-color: var(--ult-border) !important;
  border-top-color: var(--ult-purple) !important;
}

/* Shared AJAX loading overlay — used by common.js / createAds.js /
   request-payout.js across every data-fetching screen (Dashboard,
   Get Ad Script, Request Payout, Transaction Report). Replaces the
   old inline-styled dark box with a light, branded, animated overlay
   so searches/filters/saves feel responsive instead of jarring. */
.ult-loader-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 26, 53, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 100000;
  opacity: 0;
  animation: ultLoaderIn 0.18s ease forwards;
}
.ult-loader-overlay.is-leaving {
  animation: ultLoaderOut 0.16s ease forwards;
}
.ult-loader-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: ultSpin 0.65s linear infinite;
  box-shadow: 0 4px 18px rgba(18, 26, 53, 0.25);
}
@keyframes ultLoaderIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ultLoaderOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes ultSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------------------------------------------------------------
   Smooth, non-laggy interactions site-wide
---------------------------------------------------------------- */
.ult-shell button,
.ult-shell .button,
.ult-shell a,
.ult-stat,
.ult-card,
input,
select,
textarea {
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease,
    opacity 0.15s ease;
}
.ult-shell button:active,
.ult-shell .button:active {
  transform: translateY(1px);
}

/* Skeleton shimmer placeholders — applied via a JS-toggled
   `is-loading` class so numbers/rows fade to a soft shimmer instead
   of flashing "0" before real data arrives. */
.is-loading .ult-stat-value,
.is-loading .ult-stat-sub {
  color: transparent !important;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--ult-border-soft) 25%,
    var(--ult-border) 37%,
    var(--ult-border-soft) 63%
  );
  background-size: 400% 100%;
  animation: ultShimmer 1.4s ease infinite;
}

@keyframes ultShimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* Fresh table rows ease in instead of popping in abruptly whenever
   the dashboard / report tables re-render after a fetch. */
#report-body tr,
.history-table tbody tr {
  animation: ultRowIn 0.22s ease both;
}
@keyframes ultRowIn {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Main content area fades in once rendered, masking any residual
   flash of unstyled content while the Tailwind runtime boots. */
.ult-content {
  animation: ultContentIn 0.2s ease both;
}
@keyframes ultContentIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ult-loader-overlay,
  .ult-loader-spinner,
  .is-loading .ult-stat-value,
  .is-loading .ult-stat-sub,
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------
   Mobile
---------------------------------------------------------------- */
.ult-mobile-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--ult-navy);
}
.ult-mobile-bar button {
  background: transparent;
  border: none;
  color: #fff;
}
.ult-mobile-bar svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 1400px) {
  .ult-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1200px) {
  .ult-layout {
    flex-direction: column;
  }
  .ult-rail {
    width: 100%;
    flex: 1 1 auto;
    border-left: none;
    border-top: 1px solid var(--ult-border);
    padding-left: 0;
    padding-top: 18px;
  }
  .ult-split {
    flex-direction: column;
  }
  .ult-split-nav {
    width: 100%;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--ult-border);
    padding: 0 0 16px;
  }
  .ult-split-nav button {
    width: auto;
    flex: 1 1 160px;
  }
  .ult-split-body {
    padding-left: 0;
    padding-top: 18px;
  }
}
@media (max-width: 960px) {
  .ult-shell {
    flex-direction: column;
  }
  .ult-sidebar {
    position: fixed;
    top: 32px;
    left: 0;
    bottom: 0;
    height: auto;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 9999;
  }
  .ult-sidebar.is-open {
    transform: translateX(0);
  }
  .ult-mobile-bar {
    display: flex;
  }
  .ult-topbar {
    position: static;
    padding: 12px 16px;
    flex-wrap: wrap;
  }
  .ult-content {
    padding: 18px 16px 32px;
  }
  .ult-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ult-grid-3,
  .ult-grid-2 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .ult-stats {
    grid-template-columns: 1fr;
  }
  .ult-page-head h1 {
    font-size: 22px;
  }
}

/* ---------------------------------------------------------------
   Responsive hardening (small phones, embedded media, overflow)
---------------------------------------------------------------- */

/* Never let embedded charts/images/icons force page-wide horizontal
   scrolling on narrow screens. Chart.js already resizes its canvas'
   backing bitmap independently of this display-size cap. */
.ult-shell img,
.ult-shell svg,
.ult-shell canvas,
.ult-shell video {
  max-width: 100%;
  height: auto;
}
#revenueChart {
  width: 100% !important;
}

/* Safety net against any single element causing horizontal overflow —
   applied above the sticky-sidebar's own scroll context so it can't
   interfere with `position: sticky`. */
/* Safety net against any single element causing horizontal overflow.
   Deliberately NOT applied to <body> or any ancestor of the sticky
   sidebar/topbar: giving an ancestor of a `position: sticky` element
   any non-default `overflow` value (on either axis, even a matched
   `hidden`/`hidden` pair) reclassifies it as a new scroll container,
   which changes what the sticky element measures its "stuck" offset
   against — this previously caused the topbar to render permanently
   offset, overlapping the page heading below it. `.ult-content` sits
   after the sticky elements, so it's safe here. */
.ult-content {
  max-width: 100%;
  overflow-x: hidden;
}

/* Extra-small phones (~360px and below) */
@media (max-width: 480px) {
  .ult-content {
    padding: 14px 12px 28px;
  }
  .ult-page-head h1 {
    font-size: 19px;
  }
  .ult-topbar {
    padding: 10px 14px;
    gap: 10px;
  }
  .ult-site-select {
    min-width: 0;
    width: 100%;
    max-width: 140px;
  }
  .ult-topbar-left label {
    display: none;
  }
  .ult-user-name {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ult-stat {
    padding: 14px !important;
  }
  .ult-stat-value {
    font-size: 18px !important;
  }
  .ult-card-head {
    flex-wrap: wrap;
    gap: 10px;
  }
  .ult-seg {
    width: 100%;
  }
  .ult-seg label {
    padding: 7px 11px !important;
    font-size: 12px;
  }
  .ult-table thead th,
  .ult-table td {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
  }
  #masterScriptModal .bg-white,
  #preciso-register-overlay > div {
    width: calc(100% - 24px) !important;
    margin: 0 12px !important;
    padding: 24px !important;
  }
}